<template>
  <div class="add-accounts-content">
    <!-- :rules="rules" -->
    <el-form ref="ruleForm" :key="key" :model="ruleForm" label-width="150px" label-position="top" class="rule-form-orange">
      <cy-info-title>出账信息</cy-info-title>
      <el-form-item label="核心企业名称" prop="customerName">
        <el-input
          v-model="ruleForm.customerName"
          placeholder="请输入核心企业名称"
          disabled
        >
        </el-input>
      </el-form-item>
      <el-form-item label="业务名称" prop="businessName">
        <el-input
          v-model="ruleForm.businessName"
          placeholder="请输入业务名称"
          disabled
        >
        </el-input>
      </el-form-item>
      <el-form-item label="业务编号" prop="businessNumber">
        <el-input
          v-model="ruleForm.businessNumber"
          placeholder="请输入业务编号"
          disabled
        >
        </el-input>
      </el-form-item>
      <el-form-item label="供应商名称" prop="supplierName">
        <el-input
          v-model="ruleForm.supplierName"
          placeholder="请输入供应商名称"
          disabled
        >
        </el-input>
      </el-form-item>
      <el-form-item label="采购合同编号" prop="contractNumber">
        <el-input
          v-model="ruleForm.contractNumber"
          placeholder="请输入采购合同编号"
          disabled
        >
        </el-input>
      </el-form-item>
      <el-form-item label="类型" prop="cashTypeDict.name">
        <el-input
          v-model="ruleForm.cashTypeDict.name"
          placeholder="请输入采购合同编号"
          disabled
        >
        </el-input>
      </el-form-item>
      <el-form-item label="金额" prop="amount">
        <el-input
          v-model="ruleForm.amount"
          placeholder="请输入金额"
          disabled
        >
        </el-input>
      </el-form-item>
      <el-form-item label="日期" prop="cashDate">
        <el-date-picker
          v-model="ruleForm.cashDate"
          type="date"
          clearable
          placeholder="请选择日期"
          style="width: 100%"
          value-format="yyyy-MM-dd"
          disabled
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item style="width: 100%;">
        <el-table
          :data="exitFinanceData"
          :default-expand-all="true"
          @expand-change="entryTableExpandChange"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <template v-if="disabled">
                <div class="entry-table-expand">
                  {{ (!props.row.fileText || props.row.fileText == '') ? '无附件' : '' }}
                </div>
              </template>
              <!-- <template v-else>
                <div style="width: 100%">
                  <unified-editor :content.sync="props.row.lifeFeedback" />
                </div>
              </template> -->
            </template>
          </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            width="50"
          >
          </el-table-column>
          <el-table-column
            prop="loanDate"
            label="此次放款日期"
            width="120"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="loanAmount"
            label="此次放款金额"
            width="120"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column label="打款账户">
            <el-table-column label="公司归属" prop="fromCompanyBelongName" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="银行名称" prop="fromBankName" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="银行卡号" prop="fromBankAccount" :show-overflow-tooltip="true"></el-table-column>
          </el-table-column>
          <el-table-column label="收款账户">
            <el-table-column label="银行名称" prop="toCompanyBelongName" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="银行卡号" prop="toBankName" :show-overflow-tooltip="true"></el-table-column>
          </el-table-column>
          <el-table-column
            prop="currExecutor"
            label="当前执行人"
            width="120"
          >
          </el-table-column>
          <!-- <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="addExitFinanceRow">增加</el-button>
              <el-button v-if="scope.$index !== 0 && exitFinanceData.length >= 2" type="text" @click="delExitFinanceRow(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { cashFlowGetExitDetail } from '@/api/financialManagement/financialManagement'
export default {
  // components: {
  //   UnifiedEditor: () => import('@/components/UnifiedEditor/index.vue')
  // },
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      key: 0,
      ruleForm: {
        id: '',
        customerName: '',
        businessName: '',
        businessNumber: '',
        supplierName: '',
        contractNumber: '',
        amount: '',
        cashDate: '',
        cashTypeDict: ''
      },
      // rules: {
      //   customerName: [
      //     { required: true, message: '请输入核心企业名称', trigger: 'change' }
      //   ],
      //   businessName: [
      //     { required: true, message: '请输入业务名称', trigger: 'change' }
      //   ],
      //   businessNumber: [
      //     { required: true, message: '请输入业务编号', trigger: 'change' }
      //   ],
      //   supplierName: [
      //     { required: true, message: '请输入供应商名称', trigger: 'blur' }
      //   ],
      //   contractNumber: [
      //     { required: true, message: '请输入采购合同编号', trigger: 'blur' }
      //   ],
      //   amount: [
      //     { required: true, message: '请输入金额', trigger: 'blur' }
      //   ],
      //   type: [
      //     { required: true, message: '请选择类型', trigger: 'blur' }
      //   ],
      //   cashDate: [
      //     { required: true, message: '请选择出账日期', trigger: 'blur' }
      //   ]
      // },
      exitFinanceData: []
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'constant'
    ])
  },
  created() {
    this.$store.dispatch('getConstant', ['cashFlowEntryType'])

    this.getCashFlowGetExitDetail()
  },
  methods: {
    // addExitFinanceRow() {
    //   this.exitFinanceData.push()
    // },
    // delExitFinanceRow(index) {
    //   this.exitFinanceData.splice(index, 1)
    // },
    // 获取出账详情
    getCashFlowGetExitDetail() {
      const { id } = this.$route.query
      if (id) {
        cashFlowGetExitDetail(id).then(res => {
          console.log(res)
          const fieldArr = ['id', 'customerName', 'businessName', 'businessNumber', 'supplierName', 'platformName', 'cashTypeDict', 'amount', 'contractNumber', 'cashDate']
          fieldArr.forEach(el => {
            if (res.data.cashFlowManageBaseVo[el]) {
              this.ruleForm[el] = res.data.cashFlowManageBaseVo[el]
            }
          })
          this.exitFinanceData = res.data.cashFlowManageBaseVo.cashFlowManageOutInfoList
        })
      }
    },
    entryTableExpandChange() {
      return
    }
  }
}
</script>

<style  scoped>

</style>
