<template>
  <div class="company-info">
    <cy-info-title>
      合同文件

      <template #right>
        <el-button v-if="!disabled" type="text" @click="handlerOperate('add')">添加</el-button>
      </template>
    </cy-info-title>

    <cy-comm-table
      ref="commTable"
      style="margin-top: 10px; width: 100%"
      :columns="columns"
      :data="tableData"
      :count="count"
    />
  </div>
</template>

<script>
import { cloneDeep } from '@/utils';

export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    enterpriseId: {
      type: [String, Number],
      default: ''
    },
    detailsInfo: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableData: [
        {
          contractName: '',
          contractNumber: '',
          contractAmount: '',
          name: '',
          contractDate: '',
          fileStorages: []
        }
      ],
      columns: [
        {
          label: '序号',
          index: true
        },
        {
          label: '合同名称',
          ruleRequired: true,
          render: (h, row) => {
            return (
              <el-input
                v-model={ row.contractName }
                disabled={ this.disabled }
                placeholder='请输入合同名称'
              />
            )
          }
        },
        {
          label: '合同编号',
          ruleRequired: true,
          render: (h, row) => {
            return (
              <el-input
                v-model={ row.contractNumber }
                disabled={ this.disabled }
                placeholder='请输入合同编号'
              />
            )
          }
        },
        {
          label: '合同金额',
          prop: 'contractAmount',
          ruleRequired: true,
          render: (h, row) => {
            return <cy-amount-input
              v-model={row.contractAmount}
              disabled={this.disabled}
              placeholder='请输入合同金额'
            >
            </cy-amount-input>
          }
        },
        {
          label: '核心企业名称',
          prop: 'name',
          ruleRequired: true,
          render: (h, row) => {
            return (
              <el-input
                v-model={ row.name }
                disabled={ this.disabled }
                placeholder='请输入核心企业名称'
              />
            )
          }
        },
        {
          label: '合同日期',
          prop: 'contractDate',
          ruleRequired: true,
          render: (h, row) => {
            return (
              <el-date-picker
                v-model={ row.contractDate }
                disabled={ this.disabled }
                type='date'
                value-format='yyyy-MM-dd'
                placeholder='请选择合同日期'
              />
            )
          }
        },
        {
          label: '合同文件',
          render: (h, row, index) => {
            return <cy-upload
              ref={`contract_file_${index}`}
              uploadParams={{ fileType: 'smb_contract_file', mouldName: 'bocom' }}
              limit={1}
              disabled={this.disabled}
              fileData={row.fileStorages}
              defaultDesc={`请上合同文件`}
            />
          }
        },
        {
          label: '操作',
          width: 150,
          render: (h, row) => {
            const btnList = [
              {
                msg: '添加',
                icon: 'iconfont icon-a-Group812',
                power: '',
                category: 'add'
              },
              {
                msg: '删除',
                icon: 'iconfont icon-a-Group816',
                power: '',
                category: 'delete'
              }
            ]
            const options = btnList.map((item) => {
              return (
                <el-button type='text' size='small' style='margin-right: 8px;' v-power={item.power} onClick={() => { this.handlerOperate(item.category, row) }}>
                  { item.msg }
                </el-button>
              )
            })
            if (!this.disabled) {
              return <div>{ options }</div>
            }
            return <div></div>
          }
        }
      ],
      count: 0
    }
  },
  watch: {
    detailsInfo: {
      handler(val) {
        if (val && val.length) {
          this.tableData = val

          this.tableData.forEach((el) => {
            if (el.contractAmount === null) {
              el.contractAmount = ''
            }
            if (!Array.isArray(el.fileStorages)) {
              const temp = []
              temp.push(el.fileStorages)
              el.fileStorages = temp
            }
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    handlerOperate(type, row) {
      if (type === 'add') {
        this.tableData.push({
          contractName: '',
          contractNumber: '',
          contractAmount: '',
          name: '',
          contractDate: '',
          fileStorages: []
        })
      } else if (type === 'delete') {
        this.tableData.splice(this.tableData.indexOf(row), 1)
        // this.tableData.splice(rowIndex, 1)
      }
    },
    getParams(type) {
      return new Promise((reslove) => {
      const tempData = cloneDeep(this.tableData)
        if (tempData.length) {
          tempData.forEach((el, index) => {
            if (el.fileStorages.length) {
              const temp = this.$refs.commTable.$refs[`contract_file_${index}`].getFileLists
              el.fileId = temp.length ? temp[0].id : ''
            }
            el.cEnterpriseId = this.enterpriseId !== '' ? this.enterpriseId : ''
            el.fileStorages = this.tableData[index].fileStorages[0]
          })
        }
        if (type === 'temp') {
          reslove(tempData)
        } else {
          const list = tempData.filter(item => item.contractName && item.contractNumber && item.contractAmount && item.name && item.contractDate && item.fileStorages > 0)
          console.log(list)

          if (list.length === 0) {
            reslove(tempData)
          } else {
            this.$message.warning('请将所有必填项填写完整')
          }
        }
      })
    }
  }
}
</script>

<style lang="scss"></style>
