<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="refundVisible"
      @close="cancel"
    >
      <!--            <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%;"
      >
        <div style="margin-bottom: 20px;margin-top: -20px;text-align: center;">
          <span style="color: #ff0000;">温馨提示：订单一旦退款，订单关联的预约单将被同步取消，请谨慎操作退款</span>
        </div>

        <el-form-item
          label="退款原因"
          class="required-label"
          prop="refundReason"
        >
          <el-col :span="15">
            <el-input
              v-model="model.refundReason"
              type="textarea"
              style="width: 130%;"
              size="small"
              placeholder="请输入原因"
            />
          </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"
          :disabled="isClick"
          @click="confirm"
        >确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { updateDiagnosis } from '../../utils/diagnosis';
  let vm = null;
  export default {
    props: {
      refundVisible:{
        type: Boolean,
        default: false
      },
      diagnoseLogId: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        show: false,
        title: '取消/退款',
        confirmTxt: '确定',
        cancleTxt: '',
        _promise: null,
        isClick: false,
        model:{
          refundReason:''
        },
        addRules:{
          refundReason: [
            {required: true, message: '请输入退款原因', trigger: 'blur'}
          ]
        }
      };
    },
    created() {
      vm = this;
    },
    methods: {
      confirm() {
        this.$refs.setForm.validate((valid) => {
          if (valid) {
            const req = {
              id: this.diagnoseLogId,
              bizType: 2,
              refundReason: this.model.refundReason
            };
            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);
            });
          }
        });
      },
      cancel() {
        this.model.refundReason = '';
        this.$emit('update:refundVisible', false);
      },
    }
  };
</script>

<style lang="scss" scoped>

</style>
