<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>
        <div class="order-status" v-if="item!=null" >
                  <el-steps  :active="item.status==4?item.status:item.status-1" align-center finish-status="success">
                    <el-step :title="item.dictLabel" v-for="(item,index) in inquiryStatusOptions" v-if="index<4"></el-step>
                  </el-steps>
        </div>
        <el-card shadow="never" style="margin-top: 15px">
              <div class="operate-container"  v-if="item!=null">
               <span style="margin-left: 20px" class="color-danger">订单状态：
                  <el-tag prop="status" v-for="(ite, index) in inquiryStatusOptions"    v-if="item.status==ite.dictValue">{{ite.dictLabel}}</el-tag>
               </span>
               <div class="operate-button-container" >
                  <el-button size="mini" @click="cancelorder()" v-if="item.status==2">取消订单</el-button>
               </div>
               <div class="operate-button-container" >
                  <el-button size="mini" @click="handleRemark()" v-if="item.companyUserId == user.userId">填写备注</el-button>
               </div>
              <!-- <div class="operate-button-container" >
                 <el-button size="mini" @click="refundorder()" v-if="item.status==4">退款</el-button>
              </div> -->
      <!--        <div class="operate-button-container" >
                 <el-button size="mini" @click="editStatus()" v-hasPermi="['his:inquiryOrder:editStatus']">修改订单</el-button>
              </div> -->
              <div class="operate-button-container" >
                 <el-button size="mini" @click="handledetails()" v-hasPermi="['his:inquiryOrderReport:query']">问诊报告</el-button>
              </div>


             </div>
<div class="desct">
  基本信息
</div>
        <el-descriptions title="" :column="3" border>
            <el-descriptions-item label="订单号" ><span v-if="item!=null">{{item.orderSn}}</span></el-descriptions-item>
            <el-descriptions-item label="订单类型" ><dict-tag :options="inquiryTypeOptions" :value="item.orderType"/></el-descriptions-item>
            <el-descriptions-item label="优惠金额" ><span v-if="item!=null">{{item.discountMoney}}</span></el-descriptions-item>
            <el-descriptions-item label="订单金额" ><span v-if="item!=null">{{item.money}}</span></el-descriptions-item>
            <el-descriptions-item label="支付金额" ><span v-if="item!=null">{{item.payMoney}}</span></el-descriptions-item>
            <el-descriptions-item label="支付类型" ><span v-if="item!=null">{{item.payType}}</span></el-descriptions-item>
            <el-descriptions-item label="是否支付" ><dict-tag :options="orOptions" :value="item.isPay"/></el-descriptions-item>
            <el-descriptions-item label="支付时间" ><span v-if="item!=null">{{item.payTime}}</span></el-descriptions-item>
            <el-descriptions-item label="状态" ><dict-tag :options="inquiryStatusOptions" :value="item.status"/></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.title}}</span></el-descriptions-item>
            <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.deptName}}</span></el-descriptions-item>
            <el-descriptions-item label="优惠劵发送人" ><span v-if="item!=null">{{item.sendName}}</span></el-descriptions-item>
            <el-descriptions-item label="问诊类型" ><dict-tag :options="inquiryTypeOptions" :value="item.inquiryType"/></el-descriptions-item>
            <el-descriptions-item label="审核人" ><span v-if="item!=null">{{item.userName}}</span></el-descriptions-item>
            <el-descriptions-item label="审核时间" ><span v-if="item!=null">{{item.auditTime}}</span></el-descriptions-item>
            <el-descriptions-item label="问诊开始时间" ><span v-if="item!=null">{{item.startTime}}</span></el-descriptions-item>
            <el-descriptions-item label="结束时间" ><span v-if="item!=null">{{item.finishTime}}</span></el-descriptions-item>
            <el-descriptions-item label="备注" ><span v-if="item!=null">{{item.companyUserRemark}}</span></el-descriptions-item>
            </el-descriptions>
             </el-card>


         <el-dialog
           title="处方单"
           :visible.sync="editStatusOpen"
           width="60%"
           append-to-body >

              <el-form ref="form" :model="statusForm"  label-width="120px">
                <el-form-item label="订单状态" prop="status">
                      <el-select v-model="statusForm.status" placeholder="订单状态">
                            <el-option
                                v-for="dict in inquiryStatusOptions"
                                :key="dict.dictValue"
                                :label="dict.dictLabel"
                                :value="parseInt(dict.dictValue)"
                              />
                            </el-select>
                 </el-form-item>
              </el-form>
           <span slot="footer" class="dialog-footer">
             <el-button @click="editStatusOpen = false">取 消</el-button>
             <el-button type="primary" @click="editStatusOpenOk">确 定</el-button>
           </span>
         </el-dialog>
 </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">{{JSON.parse(item.patientJson).patientName}}</span></el-descriptions-item>
  <el-descriptions-item label="患者年龄" ><span v-if="item!=null">{{JSON.parse(item.patientJson).age}}</span></el-descriptions-item>
  <el-descriptions-item label="患者性别" ><span >{{JSON.parse(item.patientJson).sex==1?'男':'女'}}</span></el-descriptions-item>
  <el-descriptions-item label="身份证号" ><span >{{JSON.parse(item.patientJson).idCard}}</span></el-descriptions-item>
  <el-descriptions-item label="体重" ><span v-if="item!=null">{{JSON.parse(item.patientJson).weight}}</span></el-descriptions-item>
  <el-descriptions-item label="身高" ><span v-if="item!=null">{{JSON.parse(item.patientJson).height}}</span></el-descriptions-item>
  <el-descriptions-item label="电话" ><span v-if="item!=null">{{JSON.parse(item.patientJson).mobile}}</span></el-descriptions-item>
  <el-descriptions-item label="学习周期" ><span v-if="item!=null">{{JSON.parse(item.patientJson).study}}</span></el-descriptions-item>
  <el-descriptions-item label="期望会诊方式" ><span >{{JSON.parse(item.patientJson).usage}}</span></el-descriptions-item>
  <el-descriptions-item label="用药情况" ><span v-if="item!=null">{{JSON.parse(item.patientJson).medication}}</span></el-descriptions-item>
  <el-descriptions-item label="问诊时间" ><span v-if="item!=null">{{item.startTime}}</span></el-descriptions-item>
  <el-descriptions-item label="主诉" ><span v-if="item!=null">{{JSON.parse(item.patientJson).title}}</span></el-descriptions-item>

  <el-descriptions-item label="面部照片" span="3">
            <el-image v-if="faceImages!=null&&faceImages!=''" v-for="img in faceImages" :key="img.id"
                    style="width: 100px"
                    :src="img"
                    :preview-src-list="[img]">
            </el-image>
  </el-descriptions-item>
  <el-descriptions-item label="舌苔照片" span="3">
      <el-image v-if="tongueImages!=null&&tongueImages!=''" v-for="img in tongueImages" :key="img.id"
              style="width: 100px"
              :src="img"
              :preview-src-list="[img]">
      </el-image>
     </el-descriptions-item>
  <el-descriptions-item label="检测报告或患病证书" span="3">
        <el-image v-if="imgs!=null&&imgs!=''"  v-for="img in imgs" :key="img.id"
                style="width: 100px"
                :src="img"
                :preview-src-list="[img]">
        </el-image>
  </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="是否评价" >
               <dict-tag :options="orOptions" :value="item.isPing"/>
        </el-descriptions-item>
        <el-descriptions-item label="评分" >
          <el-rate v-if="item.pingStar!=null"
            v-model="item.pingStar"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}">
          </el-rate>
        </el-descriptions-item>
        <el-descriptions-item label="聊天记录" >
          <el-link type="primary" disabled :underline="false" v-if="msg==null || msg==''">无聊天记录</el-link>
          <el-link type="primary" @click="getMsg()" :underline="false" v-if="msg!=null && msg!='' ">查看聊天记录</el-link>
        </el-descriptions-item>
        <el-descriptions-item label="评价内容" >
            <span v-if="item!=null">{{item.pingContent}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="医生回复" >
            <span v-if="item!=null">{{item.replyContent}}</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="doctor!=null">{{doctor.doctorName}}</span>
     </el-descriptions-item>
     <el-descriptions-item label="工作照" >
       <el-popover v-if="doctor.avatar!=null"
                   placement="right"
                   title=""
                   trigger="hover">
                   <img slot="reference" :src="doctor.avatar" width="50px">
                   <img :src="doctor.avatar" style="max-width: 150px;">
        </el-popover>
     </el-descriptions-item>
     <el-descriptions-item label="所属医院" >
         <span v-if="doctor!=null">{{doctor.hospitalName}}</span>
     </el-descriptions-item>
     <el-descriptions-item label="科室名称" >
         <span v-if="doctor!=null">{{doctor.deptName}}</span>
     </el-descriptions-item>
     <el-descriptions-item label="职务" >
         <span v-if="doctor!=null"><dict-tag :options="positionOptions" :value="doctor.position"/></span>
     </el-descriptions-item>
     <el-descriptions-item label="评分" >
         <span v-if="doctor!=null">
         <el-rate
           v-model="doctor.pingStar"
           disabled
           show-score
           text-color="#ff9900"
           score-template="{value}">
         </el-rate>
        </span>
     </el-descriptions-item>
      <el-descriptions-item label="平均响应速度" >
         <span v-if="doctor!=null">{{doctor.speed}}</span>
     </el-descriptions-item>
    <el-descriptions-item label="性别" >
      <dict-tag :options="sexOptions" :value="doctor.sex"/>
    </el-descriptions-item>
    <el-descriptions-item label="是否专家" >
      <dict-tag :options="orOptions" :value="doctor.isExpert"/>
    </el-descriptions-item>

    <el-descriptions-item label="医生简介" >
        <span v-if="doctor!=null">{{doctor.introduction}}</span>
    </el-descriptions-item>
 </el-descriptions>
</div>
<div class="contentx" v-if="item!=null">
     <div class="desct">
       操作信息
     </div>
   <el-table style="margin-top: 20px;width: 100%"
                 ref="orderHistoryTable"
                 :data="logs" border>
         <el-table-column label="操作时间"  width="160" align="center">
           <template slot-scope="scope">
             {{scope.row.changeTime}}
           </template>
         </el-table-column>
         <el-table-column label="备注" align="center">
           <template slot-scope="scope">
             {{scope.row.changeMessage}}
           </template>
         </el-table-column>
       </el-table>
     </div>
      <el-drawer
    	:with-header="false"
      :append-to-body="true"
            size="75%"
             :title="show.title" :visible.sync="show.open">
         <inquiryOrderReportDetails  ref="Details" />
       </el-drawer>
        <el-dialog :title="remark.title" :visible.sync="remark.open"  width="500px" append-to-body >
          <el-form ref="remarkForm" :model="remarkForm" :rules="remarkRules"  label-width="40px">
            <el-form-item label="备注" prop="companyUserRemark">
              <el-input v-model="remarkForm.companyUserRemark" placeholder="请输入备注" :rows="2" type="textarea" />
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitRemarkForm">确 定</el-button>
            <el-button @click="remark.open = false">取 消</el-button>
          </span>
        </el-dialog>
        <el-dialog
          title="聊天记录"
          :visible.sync="dialogVisible"
          width="80%"
          :before-close="handleClose1" append-to-body >
          <msgDetails  ref="msgDetails" :msgDialogClose="msgDialogClose" />
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
</div>
</template>

<script>
import { getDoctor,msglist,listinquiryOrder,editStatus, logList,getinquiryOrder, delinquiryOrder, addinquiryOrder, updateinquiryOrder, exportinquiryOrder ,cancelOrder,refundOrder,writeRemark} from "@/api/store/inquiryOrder";
import {getReportId} from "@/api/store/inquiryOrderReport";
import {  getPatient } from "@/api/store/patient";
import {getUser} from "@/api/store/user";
import msgDetails from '../../store/components/msgDetails.vue';
import inquiryOrderReportDetails from '../components/inquiryOrderReportDetails.vue';
import {getPrescribe,getDrugInfo} from "@/api/store/prescribe";
import { js } from "js-beautify";
  export default {
    name: "user",
    components: { inquiryOrderReportDetails,msgDetails },
    data() {
      return {
        logs:[],
        editStatusOpen:false,
        usageJson:{},
        show:{
                open:false,
              },
        prescribeItem:{},
        prod:[],
        prescribeDialog:false,
        remark:{
          open:false,
          title:"填写会诊备注"
        },
        remarkForm:{
          companyUserRemark:null,
          orderId:null
        },
        remarkRules:{},
        imgs:[],
        msgForm:{
          pageNum: 1,
          pageSize: 10,
          orderId:null,
        },
        statusForm:{
          orderId: null,
          status: null,
        },
        // 总条数
        total: 0,
        faceImages:[],
        tongueImages:[],
        dialogVisible:false,
        msg:[],
        positionOptions: [],
        inquiryStatusOptions:[],
        inquiryTypeOptions:[],
        inquiryPayOptions:[],
        inquiryOrderOptions:[],
        orOptions:[],
        item:null,
        patient:[],
        doctor:[],
        sexOptions: [],
      }
    },
    computed: {
      user(){
        return this.$store.state.user.user;
      }
    },
    created() {
      this.getDicts("sys_sex").then(response => {
        this.sexOptions = response.data;
      });
      this.getDicts("sys_doc_position").then(response => {
        this.positionOptions = response.data;
      });
      this.getDicts("sys_inquiry_status").then(response => {
          this.inquiryStatusOptions = response.data;
        });
      this.getDicts("sys_inquiry_type").then(response => {
          this.inquiryTypeOptions = response.data;
        });
      this.getDicts("sys_inquiry_pay").then(response => {
          this.inquiryPayOptions = response.data;
        });
      this.getDicts("sys_inquiry_order_type").then(response => {
          this.inquiryOrderOptions = response.data;
        });
      this.getDicts("sys_company_or").then(response => {
          this.orOptions = response.data;
        });

    },
    methods: {
      getMsg(row){
         const orderId = this.item.orderId;
         const doctorName = this.item.doctorName;
         const patientName = this.item.patientName;
         setTimeout(() => {
               this.$refs.msgDetails.getDetails(orderId,doctorName,patientName);
         }, 500);
          this.dialogVisible = true;
       },
      msgDialogClose(){
        this.dialogVisible = false;
      },
      handleRemark(){
        this.remark.open = true;
        this.remarkForm.companyUserRemark = this.item.companyUserRemark;
        this.remarkForm.orderId = this.item.orderId;
      },
      submitRemarkForm(){
        writeRemark(this.remarkForm).then(response => {
          this.msgSuccess("操作成功");
          this.getDetails(this.item.orderId);
          this.remark.open = false
        });
      },
      cancelorder(){
        var that=this;
        this.$confirm('是否确认取消订单?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {

          var data={
          orderId:that.item.orderId
             }
          return cancelOrder(data);
        }).then(() => {
          this.msgSuccess("操作成功");
          getinquiryOrder(this.item.orderId).then(response => {
              this.item = response.data;
              this.getlogList(this.item.orderId);
          });
        }).catch(function() {});
      },
      editStatusOpenOk(){
        editStatus(this.statusForm).then(response => {
          this.msgSuccess("操作成功");
          getinquiryOrder(this.item.orderId).then(response => {
              this.item = response.data;
              this.getlogList(this.item.orderId);
          });
          });
      },
      handledetails(row){

        getReportId(this.item.orderId).then(response => {
            var id = response.data
            if(id!=null){
              this.show.open=true;
              setTimeout(() => {
                   this.$refs.Details.getDetails(id);
              }, 1);
            }else{
              this.$message('问诊订单没有报告');
            }

        });
       },
       editStatus(){
         this.editStatusOpen=true;
         this.statusForm.status=this.item.status;
         this.statusForm.orderId=this.item.orderId;
       },
       prescribe(row){
         this.prescribeDialog=true;


         getPrescribe(row).then(response => {
             this.prescribeItem = response.data;
             this.usageJson=JSON.parse(this.prescribeItem.usageJson)
         });
         getDrugInfo(row).then(response => {
             this.prod = response.data;

         });
       },
      refundorder(){
        var that=this;
        this.$confirm('是否确认退款?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          var data={
          orderId:that.item.orderId
             }
          return refundOrder(data);
        }).then(() => {
          this.msgSuccess("操作成功");
        getinquiryOrder(this.item.orderId).then(response => {
              this.item = response.data;
              this.getlogList(this.item.orderId);
          });
        }).catch(function() {});
      },
      handleClose1(){
        this.dialogVisible=false;
      },
      handleClose2(){
        this.prescribeDialog=false;
      },
      getDetails(orderId) {
        this.imgs=null;
        this.tongueImages=null;
        this.faceImages=null;

        var that=this
        this.item=null;
        //获取问诊信息
      getinquiryOrder(orderId).then(response => {
              this.item = response.data;
              //获取医生信息
              if(this.item.doctorId!=null){
                getDoctor(this.item.doctorId).then(response => {
                    this.doctor = response.data;
                });
              }

              this.msgForm.orderId=this.item.orderId;
              this.msgList();
              this.getlogList(this.item.orderId);
               var json=JSON.parse(this.item.patientJson);
               if(json!=null&&json!=""){
                 if(json.reportImages!=null&&json.reportImages!=""){
                    this.imgs= (json.reportImages).split(",");
                 }
                if(json.tongueImages!=null&&json.tongueImages!=""){
                   this.tongueImages=json.tongueImages.split(",")
                }
                if(json.faceImages!=null&&json.faceImages!=""){
                   this.faceImages=json.faceImages.split(",")
                }

               }

       });
      },
      msgList(){
        msglist(this.msgForm).then(response => {
        this.msg = response.rows;
        this.total = response.total;
          });
      },
      getlogList(orderId){
        logList(orderId).then(response => {
            this.logs = response.rows;
        });
      },
    }
  }
</script>
<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;
    }
</style>
<style scoped>
.chat-records {

  overflow-y: auto;
}
.timestamp {
  font-size: 12px;
  color: #A9A9A9;
}
.chat-record {
  margin: 10px;
  flex-direction: column;
  align-items: flex-start;
}
.sent {
  background-color: #fbfdff;
  color: #000839;
}
.right{
  float: right;
}
.received {
  background-color: #fbfdff;
  color: #000000;
}

.el-descriptions-item__content {
    max-width: 150px;
    min-width: 100px;
}
</style>
<style scoped>
.order-content{
  margin: 10px;

}

.operate-container {
  background: #F2F6FC;
  height: 60px;
  margin: -20px -20px 0;
  line-height: 60px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}
</style>
