<!--
  @description: 付款-履约评价
  @author: 郝定康
  @routerPath:
  @date： 2021-11-30 11:08:14
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.dialog"
    :before-close="close"
    :lock-scroll="false"
    append-to-body
    width="1000px"
    title="履约评价"
  >
    <div class="p0-16 mb10">
      <p class="page-title">
        1.合同信息
      </p>
      <table class="tableData">
        <tr>
          <td>
            合同名称
          </td>
          <td colspan="3">
            {{ formData.contractName }}
          </td>
          <td>
            合同编号
          </td>
          <td>
            {{ formData.contractNo }}
          </td>
        </tr>
      </table>
      <p class="page-title">
        2.供应商信息
      </p>
      <table class="tableData">
        <tr>
          <td>
            供应商名称
          </td>
          <td colspan="3">
            {{ formData.supplierName }}
          </td>
          <td>
            供应商编号
          </td>
          <td>
            {{ formData.supplierCode }}
          </td>
        </tr>
      </table>
      <el-form
        ref="form"
        :model="formData"
        :rules="rules"
        :inline-message="true"
      >
        <p class="page-title">
          3.履约评价单
        </p>
        <table class="from_table">
          <tr>
            <td>
              <el-form-item
                show-word-limit
                label="履约评价单"
                prop="contractSupplierEvaluation"
              />
            </td>
            <td colspan="3">
              <upload
                ref="upload"
                :title="''"
                :data="contractSupplierEvaluation"
                :auto-delete="true"
                :auto-upload="true"
                :file-size="200"
                tip-text="上传附件格式.doc，.docx，.pdf，.jpg"
                accept=".doc,.docx,.pdf,.jpg"
                file-ref="fileRef"
                but-text="上传文件"
                :on-change="contractSupplierEvaluationChange"
              />
            </td>
          </tr>
        </table>
        <p class="page-title">
          4.评分
        </p>
        <el-button type="text" style="color: red;">
          提示：总分 100 分  请输入分数！
        </el-button>
        <table class="from_table">
          <tr>
            <td>
              <el-form-item
                show-word-limit
                label="申请说明"
                prop="score"
              />
            </td>
            <td colspan="3">
              <money
                :thousands="false"
                :unit-fixed="1"
                :money-value="formData"
                name="score"
                style="display: inline-block;"
              />
            </td>
          </tr>
        </table>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save('00')">
        保存
      </el-button>
      <el-button type="primary" @click="save('01')">
        提交
      </el-button>
      <el-button @click="close">
        取消
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
/* api */
import { queryContractSupplierEvaluation, saveContractSupplierEvaluation } from '@/api/contractManagement/index'
/* 公共混入*/
import { contractSigningMixins } from '../mixins/contractSigningMixins'
/* 公共方法 */
import { characters1_auto } from '@/assets/js/validate'// 校验输入内容
/* 公共组件*/
import upload from '@comp/common/updownload/upload' // 文件上传组件
import money from '@comp/common/money/money' // 数字组件
export default {
  name: 'ContractPaymentEvaluationDialog',
  components: {
    upload,
    money
  },
  mixins: [contractSigningMixins],
  props: {
    dialogData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      formData: {
      },
      rules: {
        contractSupplierEvaluation: [{ required: true, message: '请选择', trigger: 'blur' }], // 履约评价单
        score: [{ required: true, validator: characters1_auto, trigger: 'blur' },
          { required: true, validator: this.maxVal, trigger: 'blur' }] // 申请说明
      }
    }
  },
  watch: {
    'dialogData.dialog'(val) {
      // 打开弹框加载数据
      if (val) {
        this.initData()
      }
    }
  },
  created() {
  },
  methods: {
    maxVal(rule, value, callback) {
      if (value > 100) {
        callback(new Error('评分不能大于100'))
      } else {
        callback()
      }
    },
    // 履约评价单
    contractSupplierEvaluationChange(file, fileList) {
      if (fileList.length > 0) {
        this.$set(this.formData, 'contractSupplierEvaluation', 'true') // 上传了
      } else {
        this.$set(this.formData, 'contractSupplierEvaluation', '') // 未上传
      }
    },
    // 获取详情
    initData() {
      const params = {
        contractId: this.dialogData.contractId, // 合同id
        payStageId: this.dialogData.id, // 付款阶段id
        checkId: this.dialogData.checkId // 验收id
      }
      queryContractSupplierEvaluation(params).then(res => {
        this.formData = res.data
        this.contractSupplierEvaluation.bizId = this.formData.id // 履约评价单
      })
    },
    save(type) {
      if (type === '01') {
        let validate = false
        this.$refs['form'].validate((valid) => {
          if (valid) {
            validate = true
          } else {
            validate = false
            this.$message({
              message: '请注意页面提示',
              type: 'warning'
            })
          }
        })
        if (!validate) {
          return false
        }
      }
      saveContractSupplierEvaluation(this.formData).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        if (type === '01') {
          this.close()
        }
      })
    },
    // 取消
    close() {
      this.$emit('callback')
      this.dialogData.dialog = false
    }
  }
}
</script>

<style scoped lang="less">
</style>
