<template>
  <div class="dialog-wrap">
    <el-dialog
      title="变更履约状态"
      v-model:visible="dialogFormVisible"
      v-if="isShowChangeDialog"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="closeChange"
      width="800px"
    >
      <el-form
        ref="statusForm"
        :model="statusForm"
        :rules="rules"
        label-suffix=":"
        label-width="120px"
        size="small"
      >
        <el-form-item label="居民" style="margin-bottom: 0">
          <span>{{ statusForm.nickname }}</span>
        </el-form-item>
        <el-form-item label="变更状态">
          <span>{{ statusForm.status == 1 ? '已完成' : '未完成' }}</span>
        </el-form-item>
        <el-form-item label="变更原因" prop="reason">
          <el-input
            type="textarea"
            v-model:value="statusForm.reason"
            placeholder="请输入变更原因"
            maxlength="30"
            rows="3"
            style="width: 60%"
          ></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button size="small" plain @click="closeChange">取 消</el-button>
          <el-button
            size="small"
            type="primary"
            @click="saveReason('statusForm')"
            >确 定</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { $on, $off, $once, $emit } from '../../../../../utils/gogocodeTransfer'
import { changeEnteringStatus } from '@/utils/followup/followapis'
export default {
  components: {},
  data() {
    return {
      dialogFormVisible: true,
      // statusForm: {
      //   reason: ''
      // },
      rules: {
        reason: [
          { required: true, message: '请输入变更原因', trigger: ['blur'] },
        ],
      },
    }
  },
  props: {
    isShowChangeDialog: {
      type: Boolean,
      default: false,
    },
    statusForm: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  computed: {},
  created() {},
  methods: {
    closeChange() {
      this.$refs['statusForm'].resetFields()
      $emit(this, 'closeChangeStatus', false)
    },
    saveReason(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //后面更改为接口调用
          changeEnteringStatus({
            fuPlanPatientTimesId: this.statusForm.fuPlanPatientTimesId,
            patientId: this.statusForm.patientId,
            status: this.statusForm.status == 1 ? 2 : 1,
            reason: this.statusForm.reason,
          }).then(({ data }) => {
            if (data == 2) {
              this.$message.success('履约状态变更成功!')
            } else {
              this.$message.error('履约状态变更失败!')
            }
            $emit(this, 'closeChangeStatus', false)
            this.$refs['statusForm'].resetFields()
          })
        } else {
          return false
        }
      })
    },
  },
  emits: ['closeChangeStatus'],
}
</script>

<style lang="scss" scoped>
@import '../../../../style/followup/followup-common';
@import '../../../../style/followup/element-reset.css';
.warn-tips {
  font-size: 12px;
  color: #e6a23c;
  padding-top: 5px;
}
.el-dialog {
  min-width: 580px !important;
}
</style>
