// 处理反馈意见
<template>
  <div>
    <DialogEdit @onSaved="onSaved"
                :autoSave="false"
                :title="$t('knowledgeBaseIndex.handlingFeedback')"
                :visible.sync="dialogFormVisible"
                width="30%"
                center
                :labelPosition="labelPosition"
                :form="form"
                :editModel="DialogEdit"
                ref="handFeedBack"
                :formRules="formRules">
      <el-form-item :label="$t('knowledgeBaseIndex.handleResult')"
                    :label-width="formLabelWidth"
                    prop="updateOrNot">
        <!-- 单选框 -->
        <el-radio-group v-model="form.updateOrNot">
          <el-radio label="01">{{$t('knowledgeBaseIndex.update')}}</el-radio>
          <el-radio label="02">{{$t('knowledgeBaseIndex.notUpdate')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('knowledgeBaseIndex.notUpdateReason')" :label-width="formLabelWidth" prop="opinion">
        <!-- 输入框 -->
        <el-input type="textarea"
                  rows='5'
                  maxlength='63'
                  :placeholder="$t('common.pleaseInput')"
                  v-model.trim="form.opinion"
                  :disabled="disabled">
        </el-input>
      </el-form-item>
    </DialogEdit>
  </div>
</template>

<script>
import { DialogEdit } from 'newepoch-components'
import AssetauditApi from '@/api/assetaudit/assetauditApi'
export default {
  name: 'handlingFeedback',
  components: {
    DialogEdit
  },
  props: {
    visible: { // 开启弹窗
      type: [Boolean],
      required: true,
      default: function () {
        return false
      }
    },
    feedbackKeyId: { // 主画面传入的keyId
      type: String,
      required: true,
      default: function () {
        return ''
      }
    }
  },
  data () {
    return {
      DialogEdit: '',
      labelPosition: 'left',
      disabled: true,
      form: {
        keyId: '',
        updateOrNot: '01',
        opinion: ''
      },
      formRules: { // 验证规则
        updateOrNot: [
          { required: true, message: this.$t('knowledgeBaseIndex.yesNoChange'), trigger: 'blur' }
        ],
        opinion: [
          { required: false, message: this.$t('knowledgeBaseIndex.changeReason'), trigger: 'blur' }
        ]
      },
      formLabelWidth: '100px'
    }
  },
  watch: {
    'form.updateOrNot': { // 监听单选框值
      handler (val) {
        if (val === '01') {
          this.disabled = true
          this.$refs.handFeedBack.resetFields()
          this.formRules.opinion[0].required = false
        } else {
          this.disabled = false
          this.formRules.opinion[0].required = true
        }
      }
    }
  },
  methods: {
    onSaved (form) { // 保存函数
      this.form.keyId = this.feedbackKeyId
      this.$LoadingShow()
      AssetauditApi.handlingFeedback.handle(form).then(res => {
        this.$LoadingClose()
        if (res.data === true) {
          this.$message({
            message: this.$t('economyLendingInfoList.handleSuccessMsg'),
            type: 'success'
          })
          this.dialogFormVisible = false
          this.$emit('load', true)
        }
      })
    }
  },
  computed: {
    // api接口
    api () {
      return AssetauditApi.handlingFeedback
    },
    dialogFormVisible: {
      get: function () {
        return this.visible
      },
      set: function (value) {
        this.$emit('update:visible', value)
      }
    }
  }
}
</script>