<template>
  <div class="business-situation">
    <cy-info-title type="center">上游采购单据</cy-info-title>
    <cy-comm-table
      style="margin-top: 10px; width: 100%"
      :columns="columns"
      :data="tableData"
    />
    <cy-info-title type="center">下游销售单据</cy-info-title>
    <cy-comm-table
      style="margin-top: 10px; width: 100%"
      :columns="salesColumns"
      :data="salesTableData"
    />
  </div>
</template>

<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      tableData: [],
      columns: [
        {
          label: '合作企业名称',
          prop: 'name',
          showTooltip: true
        },
        {
          label: '上游采购单据',
          render: (h, row) => {
            return <cy-upload
              ref='fileStorage'
              uploadParams={{}}
              fileData={row.fileStorageDOS}
              disabled
              defaultDesc=''
            />
          }
        },
        {
          label: '是否达标',
          render: (h, row) => {
            return (<el-select v-model={ row.compliance } disabled={this.disabled} placeholder='请选择'>
              <el-option label='是' value={1}></el-option>
              <el-option label='否' value={0}></el-option>
            </el-select>)
          },
          width: '200'
        }
      ],
      salesTableData: [
      ],
      salesColumns: [
        {
          label: ' 国央企名称',
          prop: 'name',
          showTooltip: true
        },
        {
          label: '下游销售单据（请上传验收单、结算单或对账单、发票、近期回款凭证）',
          render: (h, row) => {
            return <cy-upload
              ref='fileStorage'
              uploadParams={{}}
              fileData={row.fileStorageDOS}
              disabled
              defaultDesc=''
            />
          }
        },
        {
          label: '是否达标',
          render: (h, row) => {
            return (<el-select v-model={ row.compliance } disabled={this.disabled} placeholder='请选择'>
              <el-option label='是' value={1}></el-option>
              <el-option label='否' value={0}></el-option>
            </el-select>)
          },
          width: '200'
        }
      ]
    }
  },
  watch: {
    detailsInfo: {
      handler(newV) {
        if (newV === undefined) return
        const { upstreamProcurementDocumentsList, salesDocumentsInfoList } = JSON.parse(JSON.stringify(newV))
        this.tableData = upstreamProcurementDocumentsList || []
        this.salesTableData = salesDocumentsInfoList || []
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getParams() {
      return {
        upstreamProcurementDocumentsList: this.tableData,
        salesDocumentsInfoList: this.salesTableData
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.business-situation {

}
</style>
