<template>
  <a-card :bordered="false" :class="'cust-erp-sub-tab'">
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :scroll="{x:true}"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading">
      <span slot="action2" slot-scope="text, record">
        <a @click="wjInfo(record)">{{ record.htfj }}</a> &nbsp
      </span>
      <span slot="action3" slot-scope="text, record">
        <a @click="fpInfo(record)">发票管理</a> &nbsp
      </span>
      <span slot="action4" slot-scope="text, record">
                    <a @click="fkInfo(record)">付款管理</a> &nbsp
                </span>
      <span slot="action5" slot-scope="text, record">
                    <a @click="blpInfo(record)">{{record.blpNum}}</a> &nbsp
                </span>
    </a-table>
    <!--文件预览-->
    <j-modal
      title="文件查看"
      :visible="visibleWjck"
      @ok="handleCancelWjck"
      @cancel="handleCancelWjck"
    >
      <!-- PDF 预览 -->
      <div>
        <!--      <h3>PDF 预览</h3>-->
        <iframe :src="pdfSrc" width="100%" height="500px"></iframe>
      </div>
    </j-modal>

    <!--发票管理-->
    <j-modal
      @cancel="handleCancelfp"
      @ok="handleConfirmfp"
      title="发票管理"
      :width="width"
      :visible="visiblefp"
      cancelText="关闭"
    >
      <a-table :dataSource="dataSourcefp" :columns="columnsfp" :scroll="{x:true}">
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <div v-else>
            <span :title="text">{{ text.length > 20 ? text.substring(0, 20) + '...' : text }}</span>
            <a-button
              :ghost="true"
              type="primary"
              icon="download"
              size="small"
              @click="downloadFile(text)">
              下载
            </a-button>
          </div>
        </template>

      </a-table>
    </j-modal>
    <!-- 付款管理-->
    <j-modal
      @cancel="handleCancelpay"
      @ok="handleConfirmpay"
      title="付款管理"
      :width="width"
      :visible="visiblepay"
      cancelText="关闭"
    >
      <a-table :dataSource="dataSourcepay" :columns="columnspay" :scroll="{x:true}">
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <div v-else>
            <span :title="text">{{ text.length > 20 ? text.substring(0, 20) + '...' : text }}</span>
            <a-button
              :ghost="true"
              type="primary"
              icon="download"
              size="small"
              @click="downloadFile(text)">
              下载
            </a-button>
          </div>
        </template>

      </a-table>


    </j-modal>


    <!--    不良品库存-->
    <j-modal
      title="不良品库存"
      :width="width"
      :visible="visibleBlp"
      fullscreen
      @ok="handleConfirmblp"
      @cancel="handleCancelblp"
      cancelText="关闭">
      <TblTradeInventoryDefectiveProductList ></TblTradeInventoryDefectiveProductList>
    </j-modal>

  </a-card>
</template>
<script>
import { getAction, getFileAccessHttpUrl } from '@api/manage'
import TblTradeInventoryDefectiveProductList from '@views/trade/TblTradeInventoryDefectiveProductList.vue'

export default {
  name: "TabCmInfoList",
  components: { TblTradeInventoryDefectiveProductList },
  data(){
    return {
      loading: false,
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      visibleWjck: false,
      visiblefp: false,
      visiblepay: false,
      visibleBlp: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      modelpay: {},
      dataSourcepay: [],
      columnspay: [
        {
          title: '付款金额（元）',
          align: 'center',
          dataIndex: 'fsje'
        },
        {
          title: '付款时间',
          align: 'center',
          dataIndex: 'fksj'
        },
        {
          title: '采购员',
          align: 'center',
          dataIndex: 'createBy'
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status',
          customRender: (text) => {

            let re = ''
            if (text === 0) {
              re = '待审核'
            } else if (text === 1) {
              re = '审核通过'
            }else if (text === 2) {
              re = '拒绝'
            }
            return re
          }
        }
      ],
      confirmLoading: false,
      width: 892,
      pdfSrc: '',
      dataSource: [],
      dataSourcefp: [],
      columnsfp: [
        {
          title: '发票号码',
          align: 'center',
          dataIndex: 'fphm'
        }, {
          title: '发票金额',
          align: 'center',
          dataIndex: 'fpje'
        }, {
          title: '发票欠额',
          align: 'center',
          dataIndex: 'fpqe'
        }, {
          title: '附件',
          align: 'center',
          dataIndex: 'fj',
          scopedSlots: { customRender: 'fileSlot' }
        }, {
          title: '备注',
          align: 'center',
          dataIndex: 'bz'
        }

      ],
      columns:[
        {
          title: '供应商（TEL）',
          align: 'center',
          dataIndex: 'supplier'
        },
        {
          title: '采购渠道',
          align: 'center',
          dataIndex: 'procurementChannels'
        },
        {
          title: '合同号/订单号',
          align: 'center',
          dataIndex: 'hth'
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'purchaseQuantity'
        },
        {
          title: '单价（不含税，元）',
          align: 'center',
          dataIndex: 'unitPrice'
        },
        {
          title: '税率（%）',
          align: 'center',
          dataIndex: 'taxRate'
        },
        {
          title: '金额（元）',
          align: 'center',
          dataIndex: 'amount'
        },
        {
          title: '合同附件  ',
          dataIndex: 'action2',
          align: 'center',
          // fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action2' }
        },
        {
          title: '发票信息',
          dataIndex: 'action3',
          align: 'center',
          // fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action3' }
        },
        {
          title: '付款信息',
          dataIndex: 'action4',
          align: 'center',
          // fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action4' }
        },
        {
          title: '已入库数量',
          align: 'center',
          dataIndex: 'yrkNum'
        },
        {
          title: '剩余订单未入库数量',
          align: 'center',
          dataIndex: 'wrkNum'
        },
        {
          title: '不良品数量',
          align: 'center',
          dataIndex: 'action5',
          scopedSlots: { customRender: 'action5' }
        },
        {
          title: '退换货评级',
          align: 'center',
          dataIndex: 'thhPj',
          customRender: function(thhPj) {
            var str = ''
            if (thhPj === 1) {
              str = 'A'
            } else if (thhPj === 2) {
              str = 'B'
            } else if (thhPj === 3) {
              str = 'C'
            }else if (thhPj === 4) {
              str = 'D'
            }
            return str
          }
        },
        {
          title: '供应商评级',
          align: 'center',
          dataIndex: 'gysPj',
          customRender: function(gysPj) {
            var str = ''
            if (gysPj === 1) {
              str = 'A'
            } else if (gysPj === 2) {
              str = 'B'
            } else if (gysPj === 3) {
              str = 'C'
            } else if (gysPj === 4) {
              str = 'D'
            }
            return str
          }
        }
      ],
      url:{
        getCgInfo: '/trade/tblTradePurchaseInfo/getCgInfo',
        file: '/trade/tblTradePurchaseInfo/pdf/base64',
        fplist: '/trade/tblTradeFpgl/list',
        paylist: '/trade/tblTradePayManage/list',
      }
    }
  },
  methods:{
    clearData(){
      this.dataSource = []
    },
    handleCancelblp(){
      this.visibleBlp = false
    },
    handleConfirmblp(){
      this.visibleBlp = false
    },
    handleCancelpay() {
      this.visiblepay = false
    },
    handleConfirmpay() {
      this.visiblepay = false
    },
    handleCancelfp() {
      this.visiblefp = false
    },
    handleConfirmfp() {
      this.visiblefp = false
    },
    handleCancelWjck() {
      this.visibleWjck = false
    },
    loadData(rows){
      const row = rows[0]
      console.log("row",row)
      const materialCode = row.code
      const xjbswjh = row.xjbswjh
      getAction(this.url.getCgInfo, {
        wlbh: materialCode
      }).then((res) => {
        if (res.success) {
          this.dataSource = res.result.ycgList
        }

      })

    },
    blpInfo(record){
      this.visibleBlp = true
    },
    fkInfo(record) {
      this.modelpay = {}
      var cmid = record.id
      this.modelpay.cmId = cmid
      this.modelpay.fkfs = '1'
      this.modelpay.supplier = record.supplier
      this.modelpay.hth = record.hth
      this.modelpay.htje = record.amount
      this.paylist(cmid)

      this.visiblepay = true
    },
    //根据
    paylist(id) {
      getAction(this.url.paylist, { cmId: id }).then(
        res => {
          this.dataSourcepay = res.result.records
        }
      )
    },
    //打开发票管理
    fpInfo(record) {
      this.modelfp = {}
      this.visiblefp = true
      var cmid = record.id
      this.modelfp.cmId = cmid
      this.fplist(cmid)

    },
    //根据
    fplist(id) {
      getAction(this.url.fplist, { cmId: id }).then(
        res => {
          this.dataSourcefp = res.result.records
        }
      )
    },
    wjInfo(record) {
      var htfjPath = ''
      if (record.htfj.indexOf(',') > 0) {
        htfjPath = record.htfj.substring(0, record.htfj.indexOf(','))
      } else {
        htfjPath = record.htfj
      }
      getAction(this.url.file, { filePath: htfjPath }).then(
        res => {
          const base64Pdf = res.result
          this.pdfSrc = `data:application/pdf;base64,${base64Pdf}`
        }
      )

      this.visibleWjck = true
    },
    downloadFile(text) {
      if (!text) {
        this.$message.warning('未知的文件')
        return
      }

      // 将 text 按逗号分割成多个文件的 URL
      const fileUrls = text.split(',')

      // 遍历每个文件的 URL
      fileUrls.forEach((fileUrl, index) => {
        // 去除 URL 两端的空格
        fileUrl = fileUrl.trim()

        // 检查 URL 是否有效
        if (!fileUrl) {
          this.$message.warning(`第 ${index + 1} 个文件 URL 无效`)
          return // 跳过当前文件，继续下一个
        }

        // 生成文件访问 URL
        let url = getFileAccessHttpUrl(fileUrl)

        // 检查生成的 URL 是否有效
        if (!url) {
          this.$message.warning(`第 ${index + 1} 个文件无法生成访问链接`)
          return // 跳过当前文件，继续下一个
        }

        // 使用 fetch 下载文件
        fetch(url)
          .then(response => {
            if (!response.ok) {
              throw new Error(`第 ${index + 1} 个文件下载失败`)
            }
            return response.blob() // 将响应转换为 Blob 对象
          })
          .then(blob => {
            // 创建 Blob URL
            const blobUrl = URL.createObjectURL(blob)

            // 创建 <a> 标签并触发下载
            const link = document.createElement('a')
            link.href = blobUrl
            link.download = fileUrl // 替换为实际文件名
            link.style.display = 'none'
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)

            // 释放 Blob URL
            URL.revokeObjectURL(blobUrl)
          })
          .catch(error => {
            this.$message.error(`第 ${index + 1} 个文件下载失败`)
            console.error(`下载错误:`, error)
          })
      })
    },
  }
}


</script>
<style scoped>

</style>