<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="diagnosisDoctorVisible"
      @close="cancel"
      @open="opendialog"
    >
      <!--            <el-row :gutter="30" class="row search" type="flex" style="margin-bottom:0;">-->
      <el-form
        ref="setForm"
        :rules="addRules"
        :model="formData"
        label-width="250px"
        label-suffix=":"
        label-position="right"
        size="mini"
        style="width: 100%;"
      >
        <el-form-item
          label="接诊医生"
          class="required-label"
          prop="receptionId"
        >
          <!--                    <el-input v-model="formData.doctorName" placeholder="请选择接诊医生" class="set-width" disabled></el-input>-->
          <el-col :span="15">
            <el-select
              v-model="formData.receptionId"
              filterable
              placeholder="请选择接诊医生"
              class="set-width"
              style="width: 100%;"
              @change="doctorChanged($event)"
            >
              <el-option
                v-for="item of doctorList"
                :key="item.doctorId"
                :label="item.doctorReceptionName"
                :value="item.doctorId"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="接诊医生职称">
          <el-col :span="15">
            <el-input
              v-model="formData.doctorTitle"
              placeholder="请选择职称"
              class="set-width"
              disabled
              style="width: 100%;"
            />
          <!-- <el-select v-model="formData.doctorTitle" placeholder="请选择职称" disabled class="set-width">
              <el-option v-for="item of sexList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select> -->
          </el-col>
        </el-form-item>
        <el-form-item label="接诊医生所在机构">
          <el-col :span="15">
            <el-input
              v-model="formData.doctorHospital"
              placeholder="请选择机构"
              class="set-width"
              disabled
              style="width: 100%;"
            />
          </el-col>
          <!-- <el-select v-model="formData.doctorHospital" placeholder="请选择机构" disabled class="set-width">
              <el-option v-for="item of sexList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="接诊医生所在科室">
          <el-col :span="15">
            <el-input
              v-model="formData.doctorDepartment"
              placeholder="请选择机构"
              class="set-width"
              disabled
              style="width: 100%;"
            />
          <!-- <el-select v-model="formData.doctorDepartment" placeholder="请选择科室" disabled class="set-width">
              <el-option v-for="item of sexList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select> -->
          </el-col>
        </el-form-item>
        <el-form-item label="接诊医生电话">
          <el-col :span="15">
            <el-input
              v-model="formData.doctorMobile"
              placeholder="请输入接诊医生手机号"
              disabled
              class="set-width"
              style="width: 100%;"
            />
          </el-col>
        </el-form-item>
        <el-form-item
          v-if="formData.receptionName == '站外医生' || formData.receptionName == '云鹊医助'"
          label="外部医生姓名"
          class="required-label"
          prop="outsideDoctor"
        >
          <el-col :span="15">
            <el-input
              v-model="formData.outsideDoctor"
              placeholder="请输入外部医生姓名"
              class="set-width"
              style="width: 135%;"
            />
          </el-col>
        </el-form-item>
        <el-form-item
          label="问诊时间"
          class="required-label"
        >
          <el-col :span="15">
            <div
              class="set-width grey-bg"
              style="width: 100%;"
              @click="openDiagnosisStartTimeDialog"
            >
              <i class="el-icon-alarm-clock" />
              <span v-if="startTimeValue === ''">请选择问诊时间</span>
              <span v-else>{{ dayFormatWithoutSecond(startTimeValue) }} -- {{ dayFormatWithoutSecond(endTimeValue) }}</span>
            </div>
          </el-col>
        </el-form-item>
        <el-form-item
          class="required-label"
          prop="diagnoseChannel"
          label="问诊方式"
        >
          <el-col :span="15">
            <el-radio-group
              v-model="formData.diagnoseChannel"
              size="small"
              style="line-height: 45px;width: 135%;"
            >
              <el-radio :label="1">
                APP问诊（系统发起问诊）
              </el-radio>
              <el-radio :label="2">
                线下问诊（APP不会自动发起问诊）
              </el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
      </el-form>
      <!--            </el-row>-->
      <span
        slot="footer"
        class="dialog-footer"
        style="text-align: center;"
      >
        <el-button
          type="primary"
          @click="refreshData"
        >刷新数据</el-button>
        <el-button @click="cancel">取 消</el-button>
        <el-button
          type="primary"
          :disabled="isClick"
          @click="confirm"
        >确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="问诊开始时间"
      :visible.sync="diagnosisStartTimeDialog"
    >
      <div class="startTime-wrap">
        <div class="line-wrap">
          <div>
            <span>问诊开始时间:</span>
            <div class="date-wrap">
              <el-date-picker
                v-model="startTimeValue"
                popper-class="scale-datepicker"
                size="large"
                type="datetime"
                placeholder="选择日期时间"
                @change="startTimeChange"
              />
            </div>
          </div>
          <div class="mt20">
            <span>问诊结束时间:</span>
            <div class="date-wrap">
              &nbsp;{{ dayFormatWithoutSecond(endTimeValue) }}
            </div>
          </div>
        </div>
        <div class="time-wrap">
          <span>问诊时长:</span>
          <div class="time-range">
            <el-radio-group
              v-model="timeRange"
              @change="timeRangeChange"
            >
              <div>
                <el-radio
                  border
                  size="large"
                  :label="10"
                >
                  10分钟
                </el-radio>
              </div>
              <div class="mt20">
                <el-radio
                  border
                  size="medium"
                  :label="15"
                >
                  15分钟
                </el-radio>
              </div>
              <div class="mt20">
                <el-radio
                  border
                  size="medium"
                  :label="20"
                >
                  20分钟
                </el-radio>
              </div>
              <div class="mt20">
                <el-radio
                  border
                  size="medium"
                  :label="30"
                >
                  30分钟
                </el-radio>
              </div>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div
        class="startTime-footer"
        style="text-align: center;"
      >
        <el-button @click="startTimeConfirm('cancel')">
          取 消
        </el-button>
        <el-button
          type="primary"
          :disabled="isClick"
          @click="startTimeConfirm('submit')"
        >
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {updateDiagnosis} from '../../utils/diagnosis';
  import dayjs from 'dayjs';
  import { getDoctorList } from '@/api/diagnosis';

  let vm = null;
  export default {
    props: {
      diagnosisDoctorVisible: {
        type: Boolean,
        default: false
      },
      diagnoseLogId: {
        type: Number,
        default: 0
      },
      diagnoseType: {
        type: Number,
        default: 0
      },
      doctorId: {
        type: Number | String,
        default: 0
      },
    },
    data() {
      return {
        show: false,
        title: '设置接诊医生',
        confirmTxt: '确定',
        cancleTxt: '',
        _promise: null,
        isClick: false,
        formData:{
          receptionId:this.doctorId,
          receptionName:'',
          doctorTitle:'',
          doctorHospital:'',
          doctorDepartment:'',
          doctorMobile:'',
          outsideDoctor:'',
          innerFlag:1,
          receptionBeginTime:'',
          receptionEndTime:'',
          bizType:'',
          diagnoseChannel:1,
        },
        doctorList:[],
        sessionDoctorList:[],
        inNewTime:'',
        inNewTimeObj:{},
        rangeTime:'',
        listKey:'',
        addRules:{
          receptionId: [
            {required: true, message: '请选择接诊医生', trigger: 'change'}
          ],
          outsideDoctor: [
            {required: true, message: '请输入外部医生姓名', trigger: 'blur'}
          ],
          diagnoseChannel: [
            {required: true, message: '请选择问诊方式', trigger: 'change'}
          ],
        },
        pickerOptions1: {
          disabledDate: time => {
            return (
              time.getTime() < Date.now() - 1 * 24 * 3600 * 1000
            ); // 减去一天的时间代表可以选择同一天;
          }
        },
        diagnosisStartTimeDialog: false,
        startTimeValue: '',
        endTimeValue:'',
        timeRange:''
      };
    },
    watch:{
      diagnoseType:function () {
        this.getDoctorList();
      },
      doctorId:function () {
        if(this.doctorId == 0 || this.doctorId == null) {
          this.formData.receptionId = '';
          if(this.$refs.setForm) {
            this.$refs.setForm.resetFields();
          }
        }
        else {
          this.formData.receptionId = this.doctorId;
          this.doctorChanged(this.doctorId);
        }
      },
    },
    created() {
      vm = this;
      this.getDoctorList();
    },
    methods: {
      confirm() {
        this.$refs.setForm.validate((valid) => {
          if(!this.startTimeValue || !this.endTimeValue) {
            this.$message({
              message: '请选择问诊时间',
              type: 'warning',
              duration: 1000,
            });
            return false;
          }
          if (valid) {
            let req = null;
            if(this.formData.receptionName == '站外医生' || this.formData.receptionName == '云鹊医助') {
              this.formData.innerFlag = 2;// 外部
              req = {
                id:this.diagnoseLogId,
                bizType:9,
                innerFlag:this.formData.innerFlag,
                receptionId:this.formData.receptionId,
                receptionName:this.formData.receptionName,
                outsideDoctor:this.formData.outsideDoctor,
                // receptionBeginTime:this.rangeTime[0],
                // receptionEndTime:this.rangeTime[1],
                receptionBeginTime: this.dayFormat(this.startTimeValue),
                receptionEndTime:this.endTimeValue,
                diagnoseChannel: this.formData.diagnoseChannel
              };
            }
            else {
              this.formData.innerFlag = 1;// 内部
              req = {
                id:this.diagnoseLogId,
                bizType:9,
                innerFlag:this.formData.innerFlag,
                receptionId:this.formData.receptionId,
                receptionName:this.formData.receptionName,
                // receptionBeginTime:this.rangeTime[0],
                // receptionEndTime:this.rangeTime[1],
                receptionBeginTime: this.dayFormat(this.startTimeValue),
                receptionEndTime:this.endTimeValue,
                diagnoseChannel: this.formData.diagnoseChannel
              };
            }
            vm.isClick = true;
            updateDiagnosis(req).then(function (res) {
              vm.isClick = false;
              if(res.code == '000000') {
                vm.cancel();
                vm.$emit('search');
              } else {
                vm.$message.error(res.message);
              }
            }).catch(function (error) {
              vm.isClick = false;
              vm.$message.error(res.message);
            });
          }
        });
      },
      refreshData() {
        const key = 'sessionDoctorList' + this.diagnoseType;
        localStorage.removeItem(key);
        this.getDoctorList();
      },
      cancel() {
        this.doctorId = '';
        this.formData.outsideDoctor = '';
        this.startTimeValue = '';
        this.endTimeValue = '';
        this.timeRange = '';
        this.$emit('update:diagnosisDoctorVisible', false);
      },
      opendialog() {
        this.formData.receptionId = '';
        this.formData.receptionName = '';
        this.formData.doctorTitle = '';
        this.formData.doctorHospital = '';
        this.formData.doctorDepartment = '';
        this.formData.doctorMobile = '';
        // this.formData.diagnoseChannel     = 1
        this.doctorChanged(this.doctorId);
      },
      doctorChanged(value) {
        const selected = this.doctorList.find(item => item.doctorId === value);
        if (selected) {
          this.formData.receptionId = value;
          this.formData.receptionName = selected.doctorName;
          this.formData.doctorTitle = selected.doctorTitle;
          this.formData.doctorHospital = selected.doctorHospital;
          this.formData.doctorDepartment = selected.doctorDepartment;
          this.formData.doctorMobile = selected.doctorMobile;
        // this.formData.serviceFee       = this.priceFilter(selected.serviceFee)
        }
      },
      getDoctorList() {
        this.loading = true;
        this.listKey = 'sessionDoctorList' + this.diagnoseType;
        const sessionList = localStorage.getItem(this.listKey);
        this.sessionDoctorList = JSON.parse(sessionList);
        if (sessionList) {
          this.doctorList = this.sessionDoctorList;
          this.doctorChanged(this.formData.receptionId);

        }else {
          getDoctorList({
            diagnoseType:this.diagnoseType
          }).then(res => {
            this.loading = false;
            if (res.code == '000000') {
              this.doctorList = res.data;
              localStorage.setItem(this.listKey, JSON.stringify(res.data));
              this.doctorChanged(this.formData.receptionId);
            } else {
              this.$message.info('请稍后重试');
            }
          }).catch(() => {
            this.loading = false;
            this.$message.info('请稍后重试');
          });
        }
      },
      openDiagnosisStartTimeDialog () {
        this.diagnosisStartTimeDialog = true;
      },
      startTimeConfirm(isCancle) {
        console.log('isCancle-', isCancle);
        if(isCancle == 'cancel') {
          this.startTimeValue = '';
          this.endTimeValue = '';
          this.timeRange = '';
        }
        if(isCancle == 'submit') {
          if(String(this.startTimeValue).trim() === '' || !this.startTimeValue) {
            this.$message({
              message: '请选择问诊开始时间',
              type: 'warning',
              duration: 1000,
            });
            return false;
          }
          if(String(this.timeRange).trim() === '') {
            this.$message({
              message: '请选择问诊时长',
              type: 'warning',
              duration: 1000,
            });
            return false;
          }
          this.endTimeValue = dayjs(this.startTimeValue).add(this.timeRange, 'minute').format('YYYY-MM-DD HH:mm:ss');
        }
        this.diagnosisStartTimeDialog = false;
      },
      dayFormat (v) {
        return dayjs(v).format('YYYY-MM-DD HH:mm:ss');
      },
      dayFormatWithoutSecond (v) {
        if(!v) {
          return '';
        }
        return dayjs(v).format('YYYY-MM-DD HH:mm');
      },
      timeRangeChange (v) {
        if(this.startTimeValue && v) {
          this.endTimeValue = dayjs(this.startTimeValue).add(v, 'minute').format('YYYY-MM-DD HH:mm:ss');
        }
      },
      startTimeChange (v) {
        if(!v) {
          this.endTimeValue = '';
        }
        if(this.timeRange && v) {
          this.endTimeValue = dayjs(v).add(this.timeRange, 'minute').format('YYYY-MM-DD HH:mm:ss');
        }
      }
    }
  };
</script>

<style lang="scss">
.set-width {
  width: 300px;
}
.grey-bg{
  padding: 0px 15px;
  color: rgb(96, 98, 102);
  height: 28px;
  line-height: 28px;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  font-size: 12px;
  cursor: pointer;

}
.startTime-wrap{
  display: flex;
  justify-content: space-around;
  .time-wrap{
    display: flex;
    align-items: end;
    .time-range{
      margin-left: 10px;
      .mt20{
        margin-top: 20px;
      }
    }
  }
  .date-wrap{
    display: inline-block;
  }
}
.startTime-footer{
  margin-top: 100px;
  padding-bottom: 50px;
}
.scale-datepicker{
  transform: scale(1.3);
  top: 289px!important;
}
</style>
