<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="handledetails()" v-if="item.isReceive==1" >问诊报告</el-button>
          </div>
          <div class="operate-button-container" >
              <el-button size="mini" @click="remarkOpen=true"  >修改医生备注</el-button>
          </div>
          <div class="operate-button-container" >
            <el-button
            v-if="item.status == 2 && item.isReceive==0"
            type="success"
            plain
            round
            size="medium"
            @click="handleAcceptOrder"
          >抢单</el-button>
          </div>
          <div class="operate-button-container" >
            <el-button
            v-if="item.status == 2 && item.isReceive==1"
            type="success"
            plain
            round
            size="medium"
            @click="handleReceiveOrder"
          >接单</el-button>
          </div>
          <div class="operate-button-container" >
            <el-button
            v-if="item.status == 2 && item.isReceive==1"
              type="danger"
              plain
              round
              size="medium"
              @click="handleRefuseOrder"
            >拒单</el-button>
          </div>
          <div class="operate-button-container" >
            <el-button
             v-if="item.status == 3"
              type="danger"
              plain
              round
              size="medium"
              @click="handleFinishOrder"
            >结束问诊</el-button>
          </div>
         <div class="operate-button-container" >
            <el-button
             v-if="item.status == 3"
              type="success"
              plain
              round
              size="medium"
              @click="handleContinue"
            >继续问诊</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="inquiryOrderOptions" :value="item.orderType"/></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.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.createTime}}</span></el-descriptions-item>
            <el-descriptions-item label="医生备注" ><span v-if="item!=null">{{item.doctorRemark}}</span></el-descriptions-item>
            </el-descriptions>
             </el-card>
    </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 v-if="item!=null">{{JSON.parse(item.patientJson).sex==1?'男':'女'}}</span></el-descriptions-item>
        <el-descriptions-item label="患者电话" > <span v-if="item!=null">{{phone}}</span>
          <el-button icon="el-icon-search" size="mini" @click="handlePhone()" style="margin-left: 20px;" ></el-button>
        </el-descriptions-item>


        <el-descriptions-item label="患病时间" ><span v-if="item!=null">{{JSON.parse(item.patientJson).duration}}</span></el-descriptions-item>
        <el-descriptions-item label="就诊情况" ><span v-if="item!=null">{{JSON.parse(item.patientJson).isVisit}}</span></el-descriptions-item>
        <el-descriptions-item label="体重" v-if="item!=null&&item.inquiryType==2"><span v-if="item!=null">{{JSON.parse(item.patientJson).weight}}</span></el-descriptions-item>
        <el-descriptions-item label="身高" v-if="item!=null&&item.inquiryType==2"><span v-if="item!=null">{{JSON.parse(item.patientJson).height}}</span></el-descriptions-item>
        <!-- <el-descriptions-item label="学习周期" v-if="item!=null&&item.inquiryType==2"><span v-if="item!=null">{{JSON.parse(item.patientJson).study}}</span></el-descriptions-item> -->
        <el-descriptions-item label="期望会诊方式" v-if="item!=null&&item.inquiryType==2"><span >{{JSON.parse(item.patientJson).usage}}</span></el-descriptions-item>
        <el-descriptions-item label="用药情况" v-if="item!=null&&item.inquiryType==2"><span v-if="item!=null">{{JSON.parse(item.patientJson).medication}}</span></el-descriptions-item>
        <el-descriptions-item label="问诊时间" v-if="item!=null&&item.inquiryType==2"><span v-if="item!=null">{{item.startTime}}</span></el-descriptions-item>

        <el-descriptions-item label="面部照片" span="3" v-if="item!=null&&item.inquiryType==2">
                  <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" v-if="item!=null&&item.inquiryType==2">
            <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" v-if="item!=null&&item.inquiryType==2">
              <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-item label="销售备注" v-if="item!=null"><span >{{item.companyUserRemark}}</span></el-descriptions-item>
        <el-descriptions-item label="聊天记录" >
              <el-link type="primary" disabled :underline="false" v-if="msgs==null || msgs.length==0">无聊天记录</el-link>
              <el-link type="primary" @click="im.open = true" :underline="false" v-if="msgs.length>0 ">查看聊天记录</el-link>
        </el-descriptions-item>
        <el-descriptions-item label="病情描述" v-if="item!=null"><span >{{item.title}}</span></el-descriptions-item>
      </el-descriptions>
      </div>
      <!-- <div class="contentx" v-if="item!=null&&item.inquiryType==2&& formJson!=null">
        <div class="desct"> 体检信息</div>
        <el-descriptions title="" :column="3" border >
            <el-descriptions-item :label="form.title" v-for=" form in formJson" ><span >
            <div v-for="x in form.option"> {{x}};</div>
            </span></el-descriptions-item>
        </el-descriptions>
      </div> -->

      <el-dialog title="修改医生备注" :visible.sync="remarkOpen" width="700px" append-to-body>
        <el-form   label-width="90px">
          <el-form-item label="医生备注" prop="doctorRemark" v-if="item!=null">
            <el-input v-model="item.doctorRemark" placeholder="请输入备注" type="areatext"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="remarkOpen=false">取 消</el-button>
        </div>
      </el-dialog>


      <el-dialog
        title="聊天记录"
        :visible.sync="im.open"
        width="80%"
        append-to-body >
        <div class="chat-records">
            <el-card v-for="(lt, index) in msgs" :key="index" class="chat-record" :class="{ 'received': lt.msgType == '1', 'sent': lt.msgType == '2' }">
              <div   :class="{ 'right': lt.msgType == '2'}" style="margin-bottom: 20px;">
              <div class="timestamp" style="margin-bottom: 10px;">
                <span v-if="lt.msgType=='1'"> {{lt.userNickName}}</span>
                <span v-if="lt.msgType=='2'"> {{lt.doctorName}}</span>
              {{ lt.createTime }}
              </div>
              <div class="message">
              <div v-if="lt.msgContentType == '1'" :class="{ 'right': lt.msgType == '2'}">{{lt.content}}</div>
              <div v-if="lt.msgContentType == '2'" :class="{ 'right': lt.msgType == '2'}">
                    <audio ref="audioPlayer" controls>
                      <source :src="lt.content" type="audio/mp3" />
                    </audio>
                </div>
                <div v-if="lt.msgContentType == '4'" :class="{ 'right': lt.msgType == '2'}">
                  <video  :src="lt.content" controls style="max-width: 400px; max-height: 400px;"></video>
              </div>
              <span v-if="lt.msgContentType == '5'" :class="{ 'right': lt.msgType == '2'}"><el-link type="primary" :underline="false" @click="handlePrescribe(JSON.parse(lt.content).prescribeId)">处方单</el-link></span>
              <span v-if="lt.msgContentType == '6'" :class="{ 'right': lt.msgType == '2'}">提交问诊报告</span>
              <span v-else-if="lt.msgContentType == '3'" :class="{ 'right': lt.msgType == '2'}">
                <el-image
                        style="width: 100px"
                        :src="lt.content"
                        :preview-src-list="[lt.content]">
                </el-image>
              </span>
              </div>
              </div>
            </el-card>
          </div>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="msgParam.pageNum"
            :limit.sync="msgParam.pageSize"
            @pagination="getInquiryOrderMsgList"
          />
      </el-dialog>
      <el-drawer
    	:with-header="false"
      :append-to-body="true"
            size="75%"
             :title="show.title" :visible.sync="show.open">
         <inquiryOrderReportDetails  ref="Details" />
       </el-drawer>
      <el-drawer
            :append-to-body="true"
            :with-header="false"
            size="75%"
            title="处方单" :visible.sync="prescribeOpen">
         <prescribeDetails  ref="prescribeDetails" />
      </el-drawer>
</div>
</template>
<script>
import {getOrderUserPhone,getInquiryOrderMsgList,updateRemark,getInquiryOrderById,receiveOrder,refuseOrder,acceptOrder,finishOrder} from "@/api/inquiryOrder";
import inquiryOrderReportDetails from '../../components/order/inquiryOrderReportDetails.vue';
import prescribeDetails from '@/views/components/myDrugStore/prescribeDetails.vue';
import way from '@/utils/way.js';
  export default {
    name: "user",
    components: { inquiryOrderReportDetails,prescribeDetails },
    data() {
      return {
        prescribeOpen:false,
        im:{
          open:false,
        },
        remarkOpen:false,
        total:0,
        msgs:[],
        logs:[],
        editStatusOpen:false,
        usageJson:{},
        show:{
          open:false,
        },
        prescribeItem:{},
        prod:[],
        prescribeDialog:false,
        imgs:[],
        msgParam:{
          pageNum: 1,
          pageSize: 10,
          orderId:null,
        },
        statusForm:{
          orderId: null,
          status: null,
        },
        formJson:{},
        receiveOrderForm:{},
        refuseOrderForm:{},
        acceptOrderForm:{},
        // 总条数
        total: 0,
        phone:null,
        faceImages:[],
        tongueImages:[],
        dialogVisible:false,
        msg:[],
        positionOptions: [],
        inquiryStatusOptions:[],
        inquiryTypeOptions:[],
        inquiryPayOptions:[],
        inquiryOrderOptions:[],
        item:null,
        patient:[],
        doctor:[],
        user:[],
        sexOptions: [],
        report:{},
      }
    },
    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;
      });


    },
    methods: {
      handleContinue(){
         this.$emit("closeDetails",1);
        way.$emit('open',1);
      },
      getInquiryOrderMsgList(){
        getInquiryOrderMsgList(this.msgParam).then(response => {
          this.msgs= response.data.list;
          this.total = response.data.total;
        });
      },
      submitForm() {
       updateRemark(this.item).then(response => {
         this.msgSuccess("修改成功");
         this.remarkOpen = false;

       });

      },
      handleFinishOrder(){
        var data={orderId:this.item.orderId}
        this.$confirm('确认结束订单吗？', "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            return finishOrder(data);
          }).then(() => {
            this.getDetails(this.item.orderId);
            this.msgSuccess("操作成功");
          }).catch(() => {});
      },
      handledetails(row){
        var id = this.report.orderId
        if(id!=null){
          this.show.open=true;
          setTimeout(() => {
                this.$refs.Details.getDetails(id);
          }, 1);
        }else{
          this.$message('问诊订单没有报告');
        }
      },
      handleAcceptOrder(){
        const orderId = this.item.orderId
        this.acceptOrderForm.orderId = orderId;
        console.log(this.acceptOrderForm)
        this.$confirm('确认抢单吗？', "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            return acceptOrder(this.acceptOrderForm);
          }).then(() => {
            this.getDetails(this.item.orderId);
            this.msgSuccess("抢单成功");
          }).catch(() => {});
      },
      handleReceiveOrder(){
          const orderId = this.item.orderId
          this.receiveOrderForm.orderId = orderId;
          console.log(this.receiveOrderForm)
          this.$confirm('确认接单吗？', "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              return receiveOrder(this.receiveOrderForm);
            }).then(() => {
              this.getDetails(this.item.orderId);
              this.msgSuccess("接单成功");
            }).catch(() => {});
      },

      handleRefuseOrder(){
        const orderId = this.item.orderId
        this.refuseOrderForm.orderId = orderId;
        this.$confirm('确认拒单吗？', "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            return refuseOrder(this.refuseOrderForm);
          }).then(() => {
            this.getDetails(this.item.orderId);
            this.msgSuccess("拒单成功");
          }).catch(() => {});
      },
      editStatus(){
        this.editStatusOpen=true;
        this.statusForm.status=this.item.status;
        this.statusForm.orderId=this.item.orderId;
      },
      handlePrescribe(prescribeId){
        this.prescribeOpen=true;
        setTimeout(() => {
              this.$refs.prescribeDetails.getDetails(prescribeId);
        }, 1);
      },
      handlePhone(){
        const orderId = this.item.orderId;
        getOrderUserPhone(orderId).then(response =>{
            this.phone = response.data;
        })
      },
      getDetails(orderId) {
        this.imgs=null;
        this.tongueImages=null;
        this.faceImages=null;
        this.formJson=null;
        var that=this
        this.item=null;
        //获取问诊信息
        getInquiryOrderById(orderId).then(response => {
              this.item = response.data.order;
              if(response.data.report!=null){
                // this.formJson=JSON.parse(response.data.report.formJson)
                this.report = response.data.report;
              };
              this.msgParam.orderId=this.item.orderId;
              this.getInquiryOrderMsgList();
              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(",")
                }
                if(json.mobile!=null&&json.mobile!=""){
                   this.phone=json.mobile
                }

              }
       });
      },

    }
  }
</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>
