<template>
  <div class="diagnosis-list-content">
    <div class="select-content screenSet">
      <div class="title">
        咨询订单管理后台
      </div>
      <el-collapse-transition>
        <div
          v-show="isUp"
          class="form-container"
        >
          <el-form
            ref="from"
            :inline="true"
            class="demo-form-inline from-box"
            :model="searchParam"
            label-width="80px"
          >
            <el-row
              :gutter="20"
              type="flex"
              justify="center"
            >
              <el-col
                :span="8"
                class="t-c"
              >
                <el-form-item
                  label="订单搜索"
                  class="t-b"
                >
                  <el-input
                    v-model="searchParam.searchVal"
                    clearable
                    placeholder="输入ID、订单ID或姓名搜索订单"
                    style="width: 280px"
                  />
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
                class="t-c"
              >
                <el-form-item
                  label="预约类型"
                  class="t-b"
                >
                  <el-select
                    v-model="searchParam.diagnoseType"
                    placeholder="请选择预约类型"
                    style="width: 280px"
                  >
                    <el-option
                      v-for="item of tyleList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
                class="t-c"
              >
                <el-form-item
                  label="创建方式"
                  class="t-b"
                >
                  <el-select
                    v-model="searchParam.createType"
                    placeholder="创建方式"
                    style="width: 280px"
                  >
                    <el-option
                      v-for="item of createList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row
              :gutter="20"
              type="flex"
              justify="center"
            >
              <el-col
                :span="8"
                class="t-c"
              >
                <el-form-item
                  label="是否跟进"
                  class="t-b"
                >
                  <el-select
                    v-model="searchParam.followFlag"
                    placeholder="请选择是否跟进"
                    style="width: 280px"
                  >
                    <el-option
                      v-for="item of fllowList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
                class="t-c"
              >
                <el-form-item
                  label="预约来源"
                  class="t-b"
                >
                  <el-select
                    v-model="searchParam.appointSource"
                    placeholder="请选择预约来源"
                    style="width: 280px"
                  >
                    <el-option
                      v-for="item of sourceList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
                class="t-c"
              >
                <el-form-item
                  label="是否匹配"
                  class="t-b"
                >
                  <el-select
                    v-model="searchParam.operateFlag"
                    placeholder="是否匹配"
                    style="width: 280px"
                  >
                    <el-option
                      v-for="item of operateList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row
              :gutter="20"
              type="flex"
              justify="center"
            >
              <el-col
                :span="8"
                class="t-c"
              >
                <el-form-item
                  label="创建日期"
                  class="t-b"
                >
                  <el-date-picker
                    v-model="createRangeTime"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width: 90%"
                    :picker-options="pickerOptions1"
                  />
                  <!--                            <el-date-picker-->
                  <!--                                type="date"-->
                  <!--                                placeholder="开始时间"-->
                  <!--                                v-model="searchParam.createdTimeBegin"-->
                  <!--                                style="width: 135px;"-->
                  <!--                                :picker-options="endDateOpt"-->
                  <!--                                format="yyyy-MM-dd"-->
                  <!--                                value-format="yyyy-MM-dd"-->
                  <!--                            >-->
                  <!--                            </el-date-picker>-->
                  <!--                            <span>-</span>-->
                  <!--                            <el-date-picker-->
                  <!--                                type="date"-->
                  <!--                                placeholder="结束时间"-->
                  <!--                                v-model="searchParam.createdTimeEnd"-->
                  <!--                                style="width: 135px;"-->
                  <!--                                format="yyyy-MM-dd"-->
                  <!--                                :picker-options="endDateOpt1"-->
                  <!--                                value-format="yyyy-MM-dd"-->
                  <!--                            >-->
                  <!--                            </el-date-picker>-->
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
                class="t-c"
              >
                <el-form-item
                  label="匹配日期"
                  class="t-b"
                >
                  <el-date-picker
                    v-model="matchRangeTime"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width: 90%"
                    :picker-options="pickerOptions1"
                  />
                  <!--                            <el-date-picker-->
                  <!--                                type="date"-->
                  <!--                                placeholder="开始时间"-->
                  <!--                                v-model="searchParam.operateTimeBegin"-->
                  <!--                                style="width: 135px;"-->
                  <!--                                :picker-options="endDateOpt2"-->
                  <!--                                format="yyyy-MM-dd"-->
                  <!--                                value-format="yyyy-MM-dd"-->
                  <!--                            >-->
                  <!--                            </el-date-picker>-->
                  <!--                            <span>-</span>-->
                  <!--                            <el-date-picker-->
                  <!--                                type="date"-->
                  <!--                                placeholder="结束时间"-->
                  <!--                                v-model="searchParam.operateTimeEnd"-->
                  <!--                                style="width: 135px;"-->
                  <!--                                format="yyyy-MM-dd"-->
                  <!--                                :picker-options="endDateOpt3"-->
                  <!--                                value-format="yyyy-MM-dd"-->
                  <!--                            >-->
                  <!--                            </el-date-picker>-->
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
                class="t-c"
              >
                <el-form-item
                  label="预约日期"
                  class="t-b"
                >
                  <el-date-picker
                    v-model="orderRangeTime"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width: 90%"
                    :picker-options="pickerOptions1"
                  />
                  <!--                            <el-date-picker-->
                  <!--                                type="date"-->
                  <!--                                placeholder="开始时间"-->
                  <!--                                v-model="searchParam.appointBeginTime"-->
                  <!--                                style="width: 135px;"-->
                  <!--                                :picker-options="endDateOpt4"-->
                  <!--                                format="yyyy-MM-dd"-->
                  <!--                                value-format="yyyy-MM-dd"-->
                  <!--                            >-->
                  <!--                            </el-date-picker>-->
                  <!--                            <span>-</span>-->
                  <!--                            <el-date-picker-->
                  <!--                                type="date"-->
                  <!--                                placeholder="结束时间"-->
                  <!--                                v-model="searchParam.appointEndTime"-->
                  <!--                                style="width: 135px;"-->
                  <!--                                format="yyyy-MM-dd"-->
                  <!--                                :picker-options="endDateOpt5"-->
                  <!--                                value-format="yyyy-MM-dd"-->
                  <!--                            >-->
                  <!--                            </el-date-picker>-->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row
              :gutter="20"
              type="flex"
              justify="left"
            >
              <el-col
                :span="8"
                class="t-c"
              >
                <el-form-item
                  label="完成时间"
                  class="t-b"
                >
                  <el-date-picker
                    v-model="completeRangeTime"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width: 90%"
                    :picker-options="pickerOptions1"
                  />
                  <!--                    <el-date-picker-->
                  <!--                      type="date"-->
                  <!--                      placeholder="开始时间"-->
                  <!--                      v-model="searchParam.doneTimeBegin"-->
                  <!--                      style="width: 135px;"-->
                  <!--                      :picker-options="endDateOpt"-->
                  <!--                      format="yyyy-MM-dd"-->
                  <!--                      value-format="yyyy-MM-dd"-->
                  <!--                    >-->
                  <!--                    </el-date-picker>-->
                  <!--                    <span>-</span>-->
                  <!--                    <el-date-picker-->
                  <!--                      type="date"-->
                  <!--                      placeholder="结束时间"-->
                  <!--                      v-model="searchParam.doneTimeEnd"-->
                  <!--                      style="width: 135px;"-->
                  <!--                      format="yyyy-MM-dd"-->
                  <!--                      :picker-options="endDateOpt1"-->
                  <!--                      value-format="yyyy-MM-dd"-->
                  <!--                    >-->
                  <!--                    </el-date-picker>-->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row
              :gutter="20"
              type="flex"
              justify="center"
              align="center"
            >
              <el-col
                :span="24"
                class="btn-wrap"
              >
                <el-button
                  type="primary"
                  class="submit-btn"
                  @click="search"
                >
                  搜索
                </el-button>
                <el-button
                  type="warning"
                  class="submit-btn"
                  @click="reset"
                >
                  重置
                </el-button>
                <el-button
                  type="info"
                  class="submit-btn"
                  @click="download"
                >
                  导出
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-transition>

      <div
        class="select-bottom"
        @click="selectToggle"
      >
        <span v-if="!isUp">展开筛选<i class="el-icon-arrow-down" /></span>
        <span v-else>收起筛选<i class="el-icon-arrow-up" /></span>
      </div>
    </div>

    <div
      id="screenSet"
      class="component-content screenSet"
    >
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="全部"
          name="first"
        >
          <table-component
            :t-data="tableData"
            :page-no="searchParam.pageNo"
            :page-size="searchParam.pageSize"
            :total-rows="totalRows"
            :loading="loading"
            :table-height="tableHeight"
            @timeHandle="timeHandle"
            @endDiagnosis="endDiagnosis"
            @callAll="callAll"
            @jionCommunicate="jionCommunicate"
            @sendMessage="sendMessage"
            @selectBtn="selectBtn"
            @goEditor="goEditor"
            @cancelBtn="cancelBtn"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
          />
        </el-tab-pane>
        <el-tab-pane
          label="信息待完善"
          name="second"
        >
          <table-component
            :t-data="tableData"
            :page-no="searchParam.pageNo"
            :page-size="searchParam.pageSize"
            :total-rows="totalRows"
            :loading="loading"
            :table-height="tableHeight"
            @timeHandle="timeHandle"
            @endDiagnosis="endDiagnosis"
            @callAll="callAll"
            @jionCommunicate="jionCommunicate"
            @sendMessage="sendMessage"
            @selectBtn="selectBtn"
            @goEditor="goEditor"
            @cancelBtn="cancelBtn"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
          />
        </el-tab-pane>
        <el-tab-pane
          label="待完成"
          name="three"
        >
          <table-component
            :t-data="tableData"
            :page-no="searchParam.pageNo"
            :page-size="searchParam.pageSize"
            :total-rows="totalRows"
            :loading="loading"
            :table-height="tableHeight"
            @timeHandle="timeHandle"
            @endDiagnosis="endDiagnosis"
            @callAll="callAll"
            @jionCommunicate="jionCommunicate"
            @sendMessage="sendMessage"
            @selectBtn="selectBtn"
            @goEditor="goEditor"
            @cancelBtn="cancelBtn"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
          />
        </el-tab-pane>
        <el-tab-pane
          label="已完成"
          name="four"
        >
          <table-component
            :t-data="tableData"
            :page-no="searchParam.pageNo"
            :page-size="searchParam.pageSize"
            :total-rows="totalRows"
            :loading="loading"
            :table-height="tableHeight"
            @timeHandle="timeHandle"
            @endDiagnosis="endDiagnosis"
            @callAll="callAll"
            @jionCommunicate="jionCommunicate"
            @sendMessage="sendMessage"
            @selectBtn="selectBtn"
            @goEditor="goEditor"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
          />
        </el-tab-pane>
        <el-tab-pane
          label="已取消"
          name="five"
        >
          <table-component
            :t-data="tableData"
            :page-no="searchParam.pageNo"
            :page-size="searchParam.pageSize"
            :total-rows="totalRows"
            :loading="loading"
            :table-height="tableHeight"
            @timeHandle="timeHandle"
            @endDiagnosis="endDiagnosis"
            @callAll="callAll"
            @jionCommunicate="jionCommunicate"
            @sendMessage="sendMessage"
            @selectBtn="selectBtn"
            @goEditor="goEditor"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
          />
        </el-tab-pane>
      </el-tabs>

      <!-- 预约时间 -->
      <el-dialog
        title="预约时间"
        :visible.sync="timeVisible"
        width="40%"
      >
        <el-row
          :gutter="30"
          class="row search"
          type="flex"
          style="margin-bottom: 0"
        >
          <el-form
            ref="timeForm"
            :rules="timeRules"
            :model="timeForm"
            label-width="150px"
            label-suffix=":"
            label-position="right"
            size="mini"
            style="width: 100%"
          >
            <el-col :span="24">
              <el-form-item
                label="开始时间"
                prop="beginTime"
              >
                <el-date-picker
                  v-model="timeForm.beginTime"
                  type="datetime"
                  placeholder="请选择开始时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  @change="changeBeginTime"
                />
                <p
                  v-if="beginFlag"
                  style="color: red; font-size: 12px"
                >
                  开始时间不能大于结束时间
                </p>
              </el-form-item>
              <el-form-item
                label="结束时间"
                prop="endTime"
              >
                <el-date-picker
                  v-model="timeForm.endTime"
                  type="datetime"
                  placeholder="请选择结束时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  @change="changeEndTime"
                />
                <p
                  v-if="endFlag"
                  style="color: red; font-size: 12px"
                >
                  结束时间不能小于开始时间
                </p>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="timeVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="confirmTime"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import TableComponent from '@/components/list/table-component';
  import {
    TYPE_LIST,
    IS_FLLOW,
    CREATE_TYPE,
    SOURCE_LIST,
    OPERATE_LIST,
  } from '@/utils/constants';

  import {
    diagnoseAppointTime,
    diagnoseExport,
    diagnoseList,
    diagnoseEnd,
    diagnoseCall,
    diagnoseChoose,
    diagnoseCancel
  } from '@/api/diagnosis';
  export default {
    components: {
      TableComponent,
    },
    data() {
      return {
        isUp: false,
        endFlag: false,
        beginFlag: false,
        loading: false,
        activeName: 'first',
        timeVisible: false,
        createRangeTime: '',
        matchRangeTime: '',
        orderRangeTime: '',
        completeRangeTime: '',
        searchParam: {
          searchVal: '',
          diagnoseType: '',
          createType: '',
          followFlag: '',
          appointSource: '',
          operateFlag: '',
          createdTimeBegin: '',
          createdTimeEnd: '',
          operateTimeBegin: '',
          operateTimeEnd: '',
          appointBeginTime: '',
          appointEndTime: '',
          doneTimeBegin: '',
          doneTimeEnd: '',
          status: '', // 1、初始状态（未支付） 2、待问诊（支付成功待完善） 3、问诊中（已完善） 4、已问诊")
          bizType: 1, // 1、分页查询 2、导出"
          pageSize: 15,
          pageNo: 1,
        },
        tyleList: TYPE_LIST,
        fllowList: IS_FLLOW,
        sourceList: SOURCE_LIST,
        createList: CREATE_TYPE,
        operateList: OPERATE_LIST,
        timeForm: {
          diagnoseLogId: '',
          beginTime: '',
          endTime: '',
        },
        tableData: [],
        totalRows: 0,
        timeRules: {
          beginTime: [
            { required: true, message: '请选择预约开始时间', trigger: 'change' },
          ],
          endTime: [
            { required: true, message: '请选择预约结束时间', trigger: 'change' },
          ],
        },
        liveBack: false,
        timeClickFlag: true,
        tableHeight: 500,
        endDateOpt: {
          disabledData: (time) => {
            if (
              this.searchParam.createdTimeEnd != '' &&
              this.searchParam.createdTimeEnd != null
            ) {
              return (
                time.getTime() >
                new Date(this.searchParam.createdTimeEnd).getTime()
              );
            }
          },
        },
        endDateOpt1: {
          disabledDate: (time) => {
            return (
              time.getTime() <
              new Date(this.searchParam.createdTimeBegin).getTime()
            );
          },
        },
        endDateOpt2: {
          disabledData: (time) => {
            if (
              this.searchParam.operateTimeEnd != '' &&
              this.searchParam.operateTimeEnd != null
            ) {
              return (
                time.getTime() >
                new Date(this.searchParam.operateTimeEnd).getTime()
              );
            }
          },
        },
        endDateOpt3: {
          disabledDate: (time) => {
            return (
              time.getTime() <
              new Date(this.searchParam.operateTimeBegin).getTime()
            );
          },
        },
        endDateOpt4: {
          disabledData: (time) => {
            if (
              this.searchParam.appointEndTime != '' &&
              this.searchParam.appointEndTime != null
            ) {
              return (
                time.getTime() >
                new Date(this.searchParam.appointEndTime).getTime()
              );
            }
          },
        },
        endDateOpt5: {
          disabledDate: (time) => {
            return (
              time.getTime() <
              new Date(this.searchParam.appointBeginTime).getTime()
            );
          },
        },
        pickerOptions1: {
          disabledDate: (time) => {
            return time.getTime() > new Date().getTime(); // 减去一天的时间代表可以选择同一天;
          },
        },
      };
    },
    activated() {
      this.search();
    },
    created() {},
    mounted() {
      this.liveBack = this.$route.query.liveBack || false;
      // if(this.liveBack) {
      //     this.activeName = 'first'
      //     this.searchParam.status = ''
      // }else {
      //     this.activeName = 'second'
      //     this.searchParam.status = 2
      // }
      this.setTableHeight();
      this.search();
    },
    methods: {
      selectToggle() {
        this.isUp = !this.isUp;
      },
      // 设置table的高度
      setTableHeight() {
        setTimeout(() => {
          this.$nextTick(() => {
            if (
              document.getElementsByClassName('from-box') &&
              document.getElementsByClassName('from-box')[0].clientHeight
            ) {
              const height =
                window.innerHeight -
                50 -
                140 -
                10 -
                160 -
                document.getElementsByClassName('from-box')[0].clientHeight;
              if (height > 300) {
                this.tableHeight = height;
              }
            }
          });
        }, 20);
      },
      changeBeginTime(val) {
        this.beginFlag = false;
        this.endFlag = false;
        let b = new Date(val).getTime(),
            e;
        if (this.timeForm.endTime) {
          e = new Date(this.timeForm.endTime).getTime();
        }
        if (val) this.beginFlag = b > e ? true : false;
      },
      changeEndTime(val) {
        this.beginFlag = false;
        this.endFlag = false;
        let b = new Date(val).getTime(),
            e;
        if (this.timeForm.beginTime) {
          e = new Date(this.timeForm.beginTime).getTime();
        }
        if (val) this.endFlag = b < e ? true : false;
      },
      // tab切换
      handleClick(val) {
        let tab = 1;
        switch (val.name) {
        case 'first':
          tab = '';
          break;
        case 'second':
          tab = 2;
          break;
        case 'three':
          tab = 3;
          break;
        case 'four':
          tab = 4;
          break;
        case 'five':
          tab = 5;
          break;
        default:
          break;
        }
        this.searchParam.status = tab;
        this.search();
      },
      search() {
        this.searchParam.createdTimeBegin = this.createRangeTime[0];
        this.searchParam.createdTimeEnd = this.createRangeTime[1];
        this.searchParam.operateTimeBegin = this.matchRangeTime[0];
        this.searchParam.operateTimeEnd = this.matchRangeTime[1];
        this.searchParam.appointBeginTime = this.orderRangeTime[0];
        this.searchParam.appointEndTime = this.orderRangeTime[1];
        this.searchParam.doneTimeBegin = this.completeRangeTime[0];
        this.searchParam.doneTimeEnd = this.completeRangeTime[1];
        this.loading = true;
        this.searchParam.bizType = 1;
        this.searchParam.searchVal = this.searchParam.searchVal.trim();
        const params = this.searchParam;
        diagnoseList(params).then((res) => {
          this.loading = false;
          if (res.code == '000000') {
            this.tableData = res.data.list;
            this.totalRows = res.data.allSize;
          }
        });
      },
      // 重置
      reset() {
        this.createRangeTime = '';
        this.matchRangeTime = '';
        this.orderRangeTime = '';
        this.completeRangeTime = '';
        this.searchParam = {
          searchVal: '',
          diagnoseType: '',
          createType: '',
          followFlag: '',
          appointSource: '',
          operateFlag: '',
          createdTimeBegin: '',
          createdTimeEnd: '',
          operateTimeBegin: '',
          operateTimeEnd: '',
          appointBeginTime: '',
          appointEndTime: '',
          status: '', // 1、初始状态（未支付） 2、待问诊（支付成功待完善） 3、问诊中（已完善） 4、已问诊")
          bizType: 1, // 1、分页查询 2、导出"
          pageSize: 15,
          pageNo: 1,
        };
        this.search();
      },
      // 导出
      download() {
        const params = this.searchParam;
        params.bizType = 2;
        diagnoseExport(params)
          .then((res) => {
            if (res.code == '000000') {
              this.downloadFile(
                res.data.attachments.base64,
                res.data.attachments.name
              );
            }
          })
          .catch((err) => {
            console.log('网络出现点儿问题，稍后重试');
          });
      },
      /* 文件下载*/
      downloadFile(base64, name) {
        const a = document.createElement('a');
        const href = 'data:application/xls;base64,' + base64;
        a.setAttribute('href', href);
        a.setAttribute('download', name);
        a.click();
        this.$message.success('导出成功');
      },
      // 预约时间
      timeHandle(row) {
        if (row.appointBeginTime && row.appointEndTime) {
          const bTime = new Date(row.appointBeginTime);
          const eTime = new Date(row.appointEndTime);
          if (new Date() - bTime > 0 && eTime - new Date() > 0) {
            this.$confirm(
              '	当前问诊正在进行中，一旦将立即关闭进行中的问诊且无法恢复，确定继续更改时间?',
              '提醒',
              {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
              }
            )
              .then(() => {
                this.timeHandleFn(row);
              })
              .catch(() => {});
          } else {
            this.timeHandleFn(row);
          }
        } else {
          this.timeHandleFn(row);
        }
      },
      timeHandleFn(row) {
        this.beginFlag = false;
        this.endFlag = false;
        this.timeVisible = true;
        if (this.$refs.timeForm) {
          this.$refs.timeForm.resetFields();
        }
        this.timeForm.diagnoseLogId = row.diagnoseLogId;
        this.timeForm.beginTime = row.appointBeginTime;
        this.timeForm.endTime = row.appointEndTime;
      },
      confirmTime() {
        if (this.beginFlag || this.endFlag) return;
        let timeoutId = null;
        if (this.timeClickFlag) {
          this.timeClickFlag = false;
          timeoutId && clearTimeout(timeoutId);
          timeoutId = setTimeout(() => {
            this.clickHandle();
          }, 2000);
        }
      },
      // 防止按钮多次点击
      clickHandle() {
        this.$refs.timeForm.validate((valid) => {
          if (valid) {
            if (this.beginFlag || this.endFlag) {
              return;
            }
            this.loading = true;
            diagnoseAppointTime(this.timeForm).then((res) => {
              this.loading = false;
              this.timeClickFlag = true;
              if (res.code == '000000') {
                this.$message({
                  message: '修改预约时间成功',
                  type: 'success',
                });
                this.activeName = 'first';
                this.searchParam.status = '';
                this.timeVisible = false;
                this.search();
              } else {
                this.$message({
                  message: res.message,
                  type: 'error',
                });
              }
            });
          }
        });
      },
      // 结束问诊
      endDiagnosis(row) {
        this.$confirm('确定结束问诊吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          diagnoseEnd({
            diagnoseLogId: row.diagnoseLogId,
          }).then((res) => {
            if (res.code == '000000') {
              this.$message({
                message: '成功结束问诊',
                type: 'success',
              });
              this.activeName = 'first';
              this.searchParam.status = '';
              this.search();
            } else {
              this.$message({
                message: res.message,
                type: 'error',
              });
            }
          });
        });
      },
      // 呼叫双方
      callAll(row) {
        this.$confirm('确定呼叫双方吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          diagnoseCall({
            diagnoseLogId: row.diagnoseLogId,
          }).then((res) => {
            if (res.code != '000000') {
              this.$message({
                message: res.message,
                type: 'error',
              });
            }
          });
        });
      },
      // 加入问诊
      jionCommunicate(row) {
        this.$confirm('确定加入问诊吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.clearSession();
          this.$router.push({
            path: '/diagnosis-live',
            query: { tid: row.imTeamId, diagnoseLogId: row.diagnoseLogId },
          });
        });
      },
      // 发送消息
      sendMessage(row) {
        this.$router.push({
          path: '/diagnosis-im',
          query: { tid: row.imTeamId },
        });
      },
      // 选择
      selectBtn(row) {
        diagnoseChoose({
          diagnoseLogId:row.diagnoseLogId
        })
          .then((res) => {
            if (res.code == '000000') {
              this.$message({
                message: '选择成功',
                type: 'success',
              });
              this.searchParam.status = '';
              this.search();
            } else {
              this.$message({
                message: res.message,
                type: 'error',
              });
            }
          })
          .catch((error) => {
            this.$message({
              message: error,
              type: 'error',
            });
          });
        this.activeName = 'first';
        this.searchParam.status = '';
        this.search();
      },
      goEditor(row, flag) {
        this.$router.push({
          path: '/diagnosis-editor',
          query: { id: row.diagnoseLogId, editorType: flag },
        });
      },
      handleSizeChange(value) {
        this.searchParam.pageSize = value;
        this.search();
      },
      handleCurrentChange(value) {
        this.searchParam.pageNo = value;
        this.search();
      },
      // 清除直播时间相关的seession
      clearSession() {
        sessionStorage.removeItem('TIME_askTime');
        sessionStorage.removeItem('TIME_answerTime');
        sessionStorage.removeItem('TIME_useTime');
        sessionStorage.removeItem('TIME_loseTime');
      },
      // 取消预约
      cancelBtn(row) {
        this.$confirm(
          '问诊一旦取消成功将无法恢复，请谨慎操作，确定取消？',
          '确定取消问诊',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        ).then(() => {
          this.clearSession();
          diagnoseCancel({
            diagnoseLogId:row.diagnoseLogId
          })
            .then((res) => {
              if (res.code == '000000') {
                this.$message({
                  message: '取消预约成功',
                  type: 'success',
                });
                this.searchParam.status = '';
                this.search();
              } else {
                this.$message({
                  message: res.message,
                  type: 'error',
                });
              }
            })
            .catch((error) => {
              this.$message({
                message: error,
                type: 'error',
              });
            });
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
.diagnosis-list-content {
  .select-content {
    margin-bottom: 10px;
    padding: 10px;
    background: #fff;
    overflow: hidden !important;
    .title {
      height: 50px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .select-bottom {
      height: 50px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #0d9078;
    }
  }
  .component-content {
    padding: 10px;
    background: #fff;
    overflow: hidden !important;
    .title {
      margin-bottom: 20px;
    }
    .btn-wrap {
      text-align: right;
    }
    .submit-btn {
      margin-right: 50px;
      margin-top: 10px;
    }
    .t-b {
      margin-bottom: 10px;
    }
  }
}
</style>
