<template>
  <div class="dialog-wrap">
    <el-dialog
      title="变更履约状态"
      :visible.sync="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="statusForm.reason" placeholder="请输入变更原因" maxlength="30" rows="3" style="width:60%;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" plain @click="closeChange">取 消</el-button>
        <el-button size="small" type="primary" @click="saveReason('statusForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  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();
        this.$emit('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('履约状态变更失败!');
                }
              this.$emit('closeChangeStatus',false);
              this.$refs['statusForm'].resetFields();
            })
          } else {
            return false;
          }
        });
      },
    }
  }
</script>
<style scoped lang="scss">
  @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>
