<template>
    <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
      <div style="padding: 20px; background-color: #fff;">
       随访详情
      </div>
<div class="contentx" v-if="item!=null">
<div class="desct">
          随访信息
        </div>
        <el-descriptions title="" :column="3" border>

            <el-descriptions-item label="模板名称" >
                <span v-if="item!=null">{{item.name}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="订单编号" >
                <span v-if="item!=null">{{item.orderCode}}</span>
            </el-descriptions-item>


            <el-descriptions-item label="随访结果" >
             <span v-if="item!=null">
                   <dict-tag :options="writeStatusOptions" :value="item.writeStatus"/>
             </span>
            </el-descriptions-item>

            <el-descriptions-item label="推送时间" >
                <span v-if="item!=null">{{item.planTime}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间" >
                <span v-if="item!=null">{{item.createTime}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="更新时间" >
                <span v-if="item!=null">{{item.updateTime}}</span>
            </el-descriptions-item>
        </el-descriptions>
 </div>
      <div class="contentx" v-if="item!=null">
        <div class="desct">
          就诊人信息
        </div>
        <el-descriptions title="" :column="3" border >
            <el-descriptions-item label="就诊人"  >
                <span v-if="item!=null">{{item.patientName}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="用户昵称"  >
                <span v-if="item!=null">{{item.nickName}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="用户电话"  >
                <span v-if="item!=null">{{item.phone}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="填写人" >
                <span v-if="item!=null">{{item.writeUserName}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="医生名称"  >
                <span v-if="item!=null">{{item.doctorName}}</span>
            </el-descriptions-item>
        </el-descriptions>
        </div>
         <div class="contentx" v-if="item!=null">
        <div class="desct">
          随访内容
        </div>

        <el-descriptions title="" :column="1" border direction="vertical">
            <el-descriptions-item label="随访内容"  >
                <div v-show="list != null&&list!=''" style="margin-left: 40px;">
                 <div    :class="'questionnaire_'+index"   v-for="(item, index) in list"   :key="index" >
                      <div class="flex-1">
                        <span :class="item.require ? 'require' : 'noRequire'">{{index+1}}.{{item.question}}</span>

                      <div>
                          <div v-if="'1' == item.type">
                             <el-row v-for="(answerItem,i) in item.options"  :key="i">
                                <el-col :span="23" :offset="1"> <el-radio disabled v-model="item.answers" :label="item.options[i]"></el-radio></el-col>
                             </el-row>
                          </div>
                          <div v-if="'2' == item.type">
                              <el-row v-for="(answerItem,i) in item.options"  :key="i">
                                 <el-col :span="23" :offset="1">
                                  <el-checkbox-group v-model="item.answers">
                                     <el-checkbox :label="item.options[i]" disabled></el-checkbox>
                                  </el-checkbox-group>
                                </el-col>
                              </el-row>
                          </div>
                          <div v-if="'3' == item.type">
                              <el-row>
                                <el-col :span="23" :offset="1"><el-input v-model="item.answers" :disabled="true" type="textarea"></el-input></el-col>
                              </el-row>
                          </div>
                        </div>
                      </div>
                  </div>
                </div>
            </el-descriptions-item>
        </el-descriptions>
        </div>

    </div>
</template>

<script>
  import { listFollow, getFollow, delFollow, addFollow, updateFollow, exportFollow } from "@/api/store/follow";
  export default {
    name: "followDtail",
    props:["data"],
    data() {
      return {
        list:[],
        // 0待推送 1已推送 2 已取消字典
        pushStatusOptions: [],
        // 0未填写 1已填写字典
        writeStatusOptions: [],
        item:null,
        form: {
          sreason: '',
        }
      }
    },
    created() {
      this.getDicts("sys_follow_push_status").then(response => {
        this.pushStatusOptions = response.data;
      });
      this.getDicts("sys_follow_write_status").then(response => {
        this.writeStatusOptions = response.data;
      });

    },
    methods: {
      getDetails(orderId) {
        this.item=null;
        this.list=null;
        getFollow(orderId).then(response => {
              this.item = response.data;
              if(this.item.formJson!=null&&this.item.formJson!=''&&this.item.writeStatus==1){
                        this.list=JSON.parse(this.item.formJson );
              }

        });
      },
    }
  }
</script>
<style>

  .contents{
      height: 100%;
      background-color: #fff;
      padding: 0px 20px;

  }
</style>
<style>
   .contentx{
       height: 100%;
       background-color: #fff;
       padding: 0px 20px 20px;


       margin: 20px;
   }
   .el-descriptions-item__label.is-bordered-label{
     font-weight: normal;
   }
   .el-descriptions-item__content {
     max-width: 150px;
     min-width: 100px;
   }
   .desct{
       padding-top: 20px;
       padding-bottom: 20px;
       color: #524b4a;
       font-weight: bold;
     }
    .require:before {
        content: '* ';
        color: red;
    }
    .noRequire:before{
      content: '* ';
      color: white;
    }
</style>
