<template>
  <div>
    <el-dialog
      :title="bizType == 10 ? '重新匹配医生' : '重新联系助诊医生'"
      :visible.sync="rematchingVisible"
      @close="cancel"
    >
      <div
        v-if="bizType == 10"
        class="message"
      >
        温馨提示：点击确定后，预约单状态将回退为"待匹配医生"状态
      </div>
      <div
        v-else
        class="message"
      >
        温馨提示：点击确定后，预约单状态将回退为"已匹配"状态
      </div>

      <!--            <el-row :gutter="30" class="row search" type="flex" style="margin-bottom:0;">-->
      <el-form
        ref="setForm"
        :rules="addRules"
        :model="model"
        label-width="250px"
        label-suffix=":"
        label-position="right"
        size="mini"
        style="width: 100%"
      >
        <el-form-item
          label="状态备注"
          class="required-label"
          prop="statusRemark"
        >
          <el-col :span="15">
            <!-- <el-input
              type="textarea"
              v-model="model.statusRemark"
              style="width: 135%"
              size="small"
              minlength="2"
              maxlength="500"
              placeholder="请输入备注信息"
            ></el-input> -->

            <el-select
              v-model="model.statusRemark"
              style="width: 135%"
              allow-create
              filterable
              default-first-option
              size="small"
              placeholder="请选择备注信息"
              @blur="getBlurData"
            >
              <el-option
                v-for="item in rematchingOptions"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>
      <!--            </el-row>-->
      <span
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button @click="cancel">取 消</el-button>
        <el-button
          type="primary"
          @click="confirm"
        >确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { updateDiagnosis } from '../../utils/diagnosis';
  let vm = null;
  export default {
    props: {
      rematchingVisible: {
        type: Boolean,
        default: false,
      },
      rematchingOptions:{
        type: Array,
        default: null,
      },
      bizType: {
        type: Number,
        default: 10,
      },
      diagnoseLogId: {
        type: Number,
        default: 0,
      },
      bizType: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        show: false,
        title: '重新匹配医生',
        confirmTxt: '确定',
        cancleTxt: '',
        _promise: null,
        model: {
          statusRemark: '',
        },
        addRules: {
          statusRemark: [
            { required: true, message: '请选择备注信息', trigger: 'blur' },
          ],
        },
      };
    },
    watch:{
      rematchingOptions(val, oldval) {
        console.log(val);
        this.model.statusRemark = val[0] ? val[0] : '';
      }
    },
    created() {

      vm = this;
    },
    methods: {
      confirm() {
        this.$refs.setForm.validate((valid) => {
          if (valid) {
            const req = {
              id: this.diagnoseLogId,
              bizType: this.bizType,
              statusRemark: this.model.statusRemark,
            };
            updateDiagnosis(req)
              .then(function (res) {
                if (res.code == '000000') {
                  vm.cancel();
                  vm.$emit('search');
                } else {
                  vm.$message.error(res.message);
                }
              })
              .catch(function (error) {
                vm.$message.error(res.message);
              });
          }
        });
      },
      cancel() {
        this.model.statusRemark = '';
        this.$emit('update:rematchingVisible', false);
      },
      getBlurData(e) {
        this.model.statusRemark = e.target.value;
      }
    },
  };
</script>

<style lang="scss" scoped>
.message{
  color: #f56c6c;
  font-size: 14px;
  text-align: center;
  margin-bottom: 30px;
}
</style>
