<template>
  <div class="condition-box">
    <cy-info-title>付款条件</cy-info-title>
    <div style="width: 100%; margin-top: 20px;">
      <cy-comm-table
        ref="commTable"
        :columns="conditionColumns"
        :data="conditionTableData"
        :count="0"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Array,
      default: () => ([])
    },
    type: {
      type: String,
      default: '' // supplementaryInfo 资料补充  paymentApprove 付款审批
    }
  },
  data() {
    return {
      conditionTableData: []
    }
  },
  computed: {
    conditionColumns() {
      return [
        {
          label: '序号',
          index: true
        },
        {
          label: '付款条件',
          prop: 'conditionContent',
          showTooltip: true,
          width: 400
        },
        {
          label: '是否需要豁免',
          showTooltip: true,
          render: (h, row) => {
            const optionDom = [{ value: 1, label: '是' }, { value: 0, label: '否' }].map(item => (<el-option
              key={item.value}
              label={item.label}
              value={item.value}
            ></el-option>))
            return (
              <el-select v-model={row.exempt} disabled={this.disabled || this.type === 'paymentApprove' || this.type === 'supplementaryInfo'} placeholder='请选择'>
                {optionDom}
              </el-select>
            )
          }
        },
        {
          label: '豁免原因',
          prop: 'exemptReason',
          showTooltip: true,
          render: (h, row) => {
            return row.exempt ? <el-input v-model={row.exemptReason} disabled={this.disabled || this.type === 'paymentApprove' || this.type === 'supplementaryInfo'} placeholder='请输入豁免原因' /> : ''
          }
        },
        {
          label: '是否需要跟进',
          showTooltip: true,
          render: (h, row) => {
            const optionDom = [{ value: 1, label: '是' }, { value: 0, label: '否' }].map(item => (<el-option
              key={item.value}
              label={item.label}
              value={item.value}
            ></el-option>))
            return (
              row.exempt ? <el-select v-model={row.follow} disabled={this.disabled || this.type === 'paymentApprove' || this.type === 'supplementaryInfo'} placeholder='请选择'>
                {optionDom}
              </el-select> : ''
            )
          }
        },
        {
          label: '附件',
          prop: 'userTypeName',
          with: 150,
          render: (h, row, index) => {
            return row.exempt ? <cy-upload
              ref={`fileStorage${index}`}
              upload-params={{
                mouldName: 'paymentConditionFile'
              }}
              file-data={row.exemptionFile}
              defaultDesc='请上传附件'
              disabled={this.disabled || this.type === 'paymentApprove' || this.type === 'supplementaryInfo'}
            /> : ''
          }
        },
        {
          label: '是否满足',
          showTooltip: true,
          show: this.type === 'paymentApprove',
          render: (h, row) => {
            const optionDom = [{ value: 1, label: '满足' }, { value: 0, label: '不满足' }].map(item => (<el-option
              key={item.value}
              label={item.label}
              value={item.value}
            ></el-option>))
            return (
              <el-select v-model={row.meet} disabled={this.disabled} placeholder='请选择'>
                {optionDom}
              </el-select>
            )
          }
        },
        {
          label: '补充说明',
          prop: 'supplement',
          ruleRequired: true,
          with: 150,
          show: this.type === 'supplementaryInfo',
          render: (h, row) => {
            return row.exempt ? <el-input v-model={row.supplement} disabled={ this.disabled } placeholder='请输入补充说明' /> : ''
          }
        },
        {
          label: '附件',
          show: this.type === 'supplementaryInfo',
          with: 150,
          render: (h, row, index) => {
            return row.exempt ? <cy-upload
              ref={`supplementaryInfoFile${index}`}
              upload-params={{
                mouldName: 'exemption'
              }}
              file-data={row.files}
              defaultDesc='请上传附件'
              disabled={this.disabled}
            /> : ''
          }
        }
      ]
    }
  },
  watch: {
    detailsInfo: {
      handler(val) {
        if (val === undefined) return
        this.conditionTableData = JSON.parse(JSON.stringify(val))
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
