<!--
  @description: 对账单-待对账-未对账原因说明弹框
  @Modifier: dijia
  @routerPath:
  @date：2021-08-31
-->
<template>
  <!-- 未对账原因说明弹框 -->
  <el-dialog :visible.sync="dialog.dialogFormVisible" custom-class="shop_mall_dialog" title="未对账原因" width="600px">
    <el-form ref="form" :model="addData" style="padding:0 10px">
      <el-form-item
        :rules="rules.statementReason"
        label="未对账原因说明"
        prop="statementReason"
      >
        <el-input
          v-model="addData.statementReason"
          :rows="5"
          :disabled="dialog.type !== 'save'"
          type="textarea"
          maxlength="1000"
          show-word-limit
          placeholder="请输入未对账原因说明"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        v-if="dialog.type === 'save'"
        type="purple"
        @click="sendPerson('form')"
      >
        提 交
      </el-button>
      <el-button @click="close">
        取 消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { saveStatementReason, getStatementReason } from '@/api/shoppingmall/order'
/* 校验方法*/
import { characters1_50 } from '@/assets/js/validate'
export default {
  props: {
    dialog: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      addData: {
        statementReason: ''
      },
      rules: {
        statementReason: [
          { required: true, validator: characters1_50, trigger: 'blur' }
        ] // 未对账原因说明
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      getStatementReason(this.dialog.id).then((res) => {
        // 文本框赋值
        this.addData.statementReason = res.data.statementReason
      })
    },
    // 新增对账人
    sendPerson(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialog.dialogFormVisible = false
          const data = {
            statementReason: this.addData.statementReason, // 未对账原因说明
            id: this.dialog.id
          }
          saveStatementReason(data.id, data.statementReason).then((res) => {
            this.$message({
              message: '提交成功！',
              type: 'success'
            })
            // 重置
            this.addData.statementReason = ''
          })
        } else {
          return false
        }
      })
    },
    // 关闭弹框
    close() {
      this.dialog.dialogFormVisible = false
      this.addData.statementReason = ''
    }
  }
}
</script>

<style lang="less" scoped>

</style>
