<template>
  <div class="change-template-review-content">
    <el-form ref="ruleForm" :key="key" :model="ruleForm" :rules="rules" label-width="150px" label-position="top" class="rule-form-orange">
      <cy-info-title>结算单</cy-info-title>
      <el-form-item
        label="上游结算单："
        prop="desc"
        class="form-required"
      >
        <cy-upload
          ref="settlementUpstreamSignedFile"
          :upload-params="uploadParams"
          :file-data="ruleForm.settlementUpstreamSignedFile"
          :upload-from-orange-status="true"
          placeholder="请上传上游结算单"
          disabled
        />
      </el-form-item>
      <el-form-item
        label="下游结算单："
        prop="desc"
        class="form-required"
      >
        <cy-upload
          ref="settlementFile"
          :upload-params="uploadParams"
          :file-data="ruleForm.settlementFile"
          :upload-from-orange-status="true"
          placeholder="请上传下游结算单"
          disabled
        />
      </el-form-item>
      <cy-info-title>审批结论</cy-info-title>
      <el-form-item label="审批结论：" prop="approvalConclusion">
        <el-radio-group v-model="ruleForm.approvalConclusion" :disabled="disabled">
          <el-radio label="pass">通过</el-radio>
          <el-radio label="back">退回</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="审批意见："
        style="width: 100%;"
        class="textarea-content"
        prop="approvalComment"
        :rules="[
          { required: ruleForm.approvalConclusion === 'back', message: '请输入审批意见', trigger: 'blur' }
        ]"
      >
        <el-input v-model="ruleForm.approvalComment" type="textarea" style="width: 100%;" rows="3" clearable :disabled="disabled"></el-input>
      </el-form-item>
      <cy-info-title v-if="ruleForm.approvalConclusion === 'pass'" style="margin-top: 10px">销售发票参考</cy-info-title>
      <el-form-item
        v-if="ruleForm.approvalConclusion === 'pass'"
        label="参考待开发票："
        prop="desc"
        class="form-required"
      >
        <cy-upload
          ref="pendingInvoice"
          :upload-params="uploadParams"
          :file-data="ruleForm.pendingInvoice"
          :upload-from-orange-status="true"
          placeholder="请上传参考待开发票"
          disabled
        />
      </el-form-item>
      <cy-info-title v-if="ruleForm.approvalConclusion === 'pass'">销售发票</cy-info-title>
      <div v-if="ruleForm.approvalConclusion === 'pass'" class="table-box" style="width: 100%; margin-bottom: 25px">
        <!-- height="calc(100vh - 0.85rem - 180px)" -->
        <el-table
          v-loading="loading"
          :data="tableData"
        >
          <el-table-column prop="nvoiceNum" label="数量"></el-table-column>
          <el-table-column prop="amount" label="金额"></el-table-column>
          <el-table-column prop="taxAmount" label="税额"></el-table-column>
          <el-table-column prop="priceTaxTotal" label="价税合计"></el-table-column>
          <el-table-column prop="invoiceDate" label="开票日期">
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.invoiceDate"
                type="date"
                placeholder="选择日期"
                :disabled="disabled"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-form-item
        v-if="ruleForm.approvalConclusion === 'pass'"
        label="销售发票附件："
        prop="desc"
        class="form-required"
      >
        <cy-upload
          ref="invoiceSalesFile"
          :upload-params="{
            fileType: 'invoiceSalesFile'
          }"
          :file-data="ruleForm.invoiceSalesFile"
          :upload-from-orange-status="true"
          placeholder="请上传销售发票附件"
          :disabled="disabled"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  components: {
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    deatailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false,
      tableData: [],
      uploadParams: {},
      key: 0,
      ruleForm: {
        approvalConclusion: 'pass',
        approvalComment: '',
        fileStorageList: [],
        settlementFile: [],
        settlementUpstreamSignedFile: [],
        pendingInvoice: [],
        invoiceSalesFile: []
      },
      rules: {
        approvalConclusion: [
          { required: true, message: '请选择审批结论', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    deatailsInfo: {
      handler(newV) {
        if (this.deatailsInfo && Object.keys(newV).length) {
          const { approvalConclusion, approvalComment, pendingInvoice, settlementFile, settlementUpstreamSignedFile, salesInvoiceInfo } = JSON.parse(JSON.stringify(newV))
          this.ruleForm = {
            approvalConclusion: approvalConclusion || 'pass',
            approvalComment,
            pendingInvoice: pendingInvoice || [],
            settlementFile: settlementFile || [],
            settlementUpstreamSignedFile: settlementUpstreamSignedFile || [],
            invoiceSalesFile: salesInvoiceInfo.salesInvoicFile || []
          }
          this.tableData = [salesInvoiceInfo].map(item => {
            item.invoiceDate = item.invoiceDate ? item.invoiceDate : new Date()
            return item
          })
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    getSubmit() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            const { taskId, businessKey } = this.$route.query
            const params = {
              approvalConclusion: this.ruleForm.approvalConclusion,
              approvalComment: this.ruleForm.approvalComment,
              taskId,
              businessKey
            }
            if (this.ruleForm.approvalConclusion === 'pass') {
              const invoiceSalesFileList = this.$refs.invoiceSalesFile.getFileLists
              if (!invoiceSalesFileList.length) {
                this.$message.warning('请上传销售发票附件')
                return
              }
              const salesInvoiceInfo = {
                ...this.tableData,
                salesInvoicFileIds: invoiceSalesFileList.map(item => item.id)
              }
              params.salesInvoiceInfo = salesInvoiceInfo
            }
            resolve(params)
          } else {
            reject()
          }
        })
      })
    }
  }
}
</script>

<style  scoped>

</style>
