<!--
  @description: 付款-发票付款
  @author: 郝定康
  @routerPath:
  @date： 2021-11-29 17:12:28
-->
<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>
      <el-table
        ref="smallTable"
        :data="formData.checkDetailInfos"
        highlight-current-row
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50"
        />
        <el-table-column
          prop="productNo"
          label="产品编码"
          align="center"
        />
        <el-table-column
          prop="productName"
          label="产品名称"
          align="center"
        />
        <el-table-column
          prop="quantity"
          label="成交数量"
          align="center"
        />
        <el-table-column
          prop="price"
          label="含税单价（元）"
          align="center"
        />
        <el-table-column
          prop="checkQuantity"
          label="验收数量"
          align="center"
        />
        <el-table-column
          prop="checkPrice"
          label="验收单价（元）"
          align="center"
        />
      </el-table>
      <p class="page-title">
        3.申请验收信息
      </p>
      <el-form
        ref="form"
        :model="formData"
        :rules="rules"
        :inline-message="true"
      >
        <table class="from_table">
          <tr>
            <td>
              <el-form-item
                show-word-limit
                label="收款单位名称"
              />
            </td>
            <td>
              {{ formData.proceedsDepartName }}
            </td>
            <td>
              <el-form-item
                show-word-limit
                label="收款单位电话"
              />
            </td>
            <td>
              {{ formData.proceedsTel }}
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item
                show-word-limit
                label="收款单位开户行"
              />
            </td>
            <td>
              {{ formData.proceedsBankName }}
            </td>
            <td>
              <el-form-item
                show-word-limit
                label="收款单位地址"
              />
            </td>
            <td>
              {{ formData.proceedsAddress }}
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item
                show-word-limit
                label="收款单位法人"
              />
            </td>
            <td>
              {{ formData.proceedsCorporation }}
            </td>
            <td>
              <el-form-item
                show-word-limit
                label="收款单位银行账号"
              />
            </td>
            <td>
              {{ formData.proceedsBankNo }}
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item
                show-word-limit
                label="付款单位名称"
              />
            </td>
            <td>
              {{ formData.paymentDepartName }}
            </td>
            <td>
              <el-form-item
                show-word-limit
                label="付款单位电话"
              />
            </td>
            <td>
              {{ formData.paymentTel }}
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item
                show-word-limit
                label="付款单位开户行"
              />
            </td>
            <td>
              {{ formData.paymentBankName }}
            </td>
            <td>
              <el-form-item
                show-word-limit
                label="付款单位地址"
              />
            </td>
            <td>
              {{ formData.paymentAddress }}
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item
                show-word-limit
                label="付款单位法人"
              />
            </td>
            <td>
              {{ formData.paymentCorporation }}
            </td>
            <td>
              <el-form-item
                show-word-limit
                label="付款单位银行账号"
              />
            </td>
            <td>
              {{ formData.paymentBankNo }}
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item
                show-word-limit
                label="付款方式"
                prop="paymentMethodCode"
              />
            </td>
            <td colspan="3">
              <el-select
                v-model="formData.paymentMethodCode"
                placeholder="请选择"
                @change="selectChange(formData.paymentMethodCode, 'paymentMethodName', contractInvoiceMethodList)"
              >
                <el-option
                  v-for="(item,index) in contractInvoiceMethodList"
                  :key="index"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item
                show-word-limit
                label="费用大类"
                prop="bigPayCategoryCode"
              />
            </td>
            <td :colspan="smallPayCategoryList.length ? '1' : '3'">
              <el-select
                v-model="formData.bigPayCategoryCode"
                placeholder="请选择"
                @change="bigPayCategoryChange"
              >
                <el-option
                  v-for="(item,key) in bigCategoryList"
                  :key="key"
                  :label="item.typeGroup.typegroupname"
                  :value="item.typeGroup.typegroupcode"
                />
              </el-select>
            </td>
            <td v-if="smallPayCategoryList.length">
              <el-form-item
                show-word-limit
                label="费用小类"
                prop="smallPayCategoryCode"
              />
            </td>
            <td v-if="smallPayCategoryList.length">
              <el-select
                v-model="formData.smallPayCategoryCode"
                placeholder="请选择"
                @change="selectChange(formData.smallPayCategoryCode, 'smallPayCategoryName', smallPayCategoryList)"
              >
                <el-option
                  v-for="(item,index) in smallPayCategoryList"
                  :key="index"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item
                show-word-limit
                label="发票附件"
                prop="contractInvoice"
              />
            </td>
            <td colspan="3">
              <upload
                ref="upload"
                :title="''"
                :data="contract_invoice"
                :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="contractInvoiceChange"
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item
                show-word-limit
                label="付款申请事由"
                prop="applyDesc"
              />
            </td>
            <td colspan="3">
              <gx-input
                v-model="formData.applyDesc"
                type="textarea"
                gx-maxlength="varchar500"
              />
            </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 { queryContractInvoiceByCheckId, saveContractInvoice, getPayCategoryInfoDictionaries } from '@/api/contractManagement/index'
/* 公共混入*/
import { contractSigningMixins } from '../mixins/contractSigningMixins'
/* 公共方法 */
import { filterDictText } from '@/assets/js/utils'// 常用方法
import { characters1_auto } from '@/assets/js/validate'// 校验输入内容
/* 公共组件*/
import upload from '@comp/common/updownload/upload' // 文件上传组件
export default {
  name: 'ContractPaymentDialog',
  components: {
    upload
  },
  mixins: [contractSigningMixins],
  props: {
    dialogData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      bigCategoryList: [], // 费用大类
      smallPayCategoryList: [], // 费用小类
      contractInvoiceMethodList: [],
      dictionaryType: ['contractInvoiceMethod'],
      formData: {
      },
      rules: {
        paymentMethodCode: [{ required: true, message: '请选择', trigger: 'blur' }], // 付款方式
        bigPayCategoryCode: [{ required: true, message: '请选择', trigger: 'blur' }], // 费用大类
        smallPayCategoryCode: [{ required: true, message: '请选择', trigger: 'blur' }], // 费用小类
        contractInvoice: [{ required: true, message: '请选择', trigger: 'blur' }], // 付款发票附件
        applyDesc: [{ required: true, validator: characters1_auto, trigger: 'blur' }] // 付款申请事由
      }
    }
  },
  watch: {
    'dialogData.dialog'(val) {
      // 打开弹框加载数据
      if (val) {
        this.bigCategoryList = [] // 费用大类
        this.smallPayCategoryList = [] // 费用小类
        this.getGroupType()
        this.getPayCategoryInfoDictionaries()
      }
    }
  },
  created() {
  },
  methods: {
    filterDictText,
    getGroupType() {
      // 获取字典信息
      this.$store.dispatch('getGroupType', this.dictionaryType).then((data) => {
        // 遍历key存储相应的数据
        for (const key in data.bidTypeData) {
          /* 是否有数据*/
          if (data.bidTypeData[key]) {
            this[key] = data.bidTypeData[key]
          }
        }
      })
    },
    // 费用大类、费用小类
    getPayCategoryInfoDictionaries() {
      getPayCategoryInfoDictionaries({}).then(res => {
        this.bigCategoryList = res.data
        this.initData()
      })
    },
    // 费用大类
    bigPayCategoryChange(val) {
      this.formData.smallPayCategoryName = '' // 费用小类名称
      this.formData.smallPayCategoryCode = '' // 费用小类编码
      this.formData.bigPayCategoryName = this.bigCategoryList[val].typeGroup.typegroupname
      this.smallPayCategoryList = this.bigCategoryList[val].typeList
    },
    selectChange(code, name, groupTypeList) {
      this.formData[name] = this.filterDictText(groupTypeList, code)
    },
    // 付款发票附件
    contractInvoiceChange(file, fileList) {
      if (fileList.length > 0) {
        this.$set(this.formData, 'contractInvoice', 'true') // 上传了
      } else {
        this.$set(this.formData, 'contractInvoice', '') // 未上传
      }
    },
    // 获取详情
    initData() {
      window.console.log(this.dialogData)
      const params = {
        contractId: this.dialogData.contractId, // 合同id
        payStageId: this.dialogData.id, // 付款阶段id
        checkId: this.dialogData.checkId // 验收id
      }
      queryContractInvoiceByCheckId(params).then(res => {
        this.formData = res.data
        if (this.formData.bigPayCategoryCode) {
          this.smallPayCategoryList = this.bigCategoryList[this.formData.bigPayCategoryCode].typeList
        }
        this.contract_invoice.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
        }
      }
      saveContractInvoice(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>
