<template>
  <div class="materialInformation">
    <div class="crumbs">
      <Breadcrumb
        :breadcrumbOpt="breadcrumbOpt"
        svg-name="#icon-audit"
        @breadcrumb-click="handleClose"
      />
    </div>
    <div class="content">
      <div class="common-page-shadow">
        <div class="material-management">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="成交明细" name="first"> </el-tab-pane>
            <el-tab-pane label="招标文件" name="five"></el-tab-pane>
            <el-tab-pane label="投标文件" name="second"></el-tab-pane>
            <el-tab-pane label="澄清提问" name="question"></el-tab-pane>
            <el-tab-pane label="补遗文件" name="addendum"></el-tab-pane>
          </el-tabs>
        </div>
        <el-row
          class="common-table-container flex searchPanel"
          :style="SearchPanel"
        >
          <el-col :span="24" class="common-table-wrapper">
            <div class="score-table" v-if="activeName === 'first'">
              <div class="table">
                <el-table
                  border
                  stripe
                  key="first"
                  fit
                  v-loading="tableLoading"
                  :data="tableData"
                  style="width: 100%"
                  height="100%"
                >
                  <el-table-column
                    type="index"
                    width="55"
                    align="center"
                    label="序号"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="noticeCode"
                    min-width="100"
                    show-overflow-tooltip
                    label="项目编号"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="noticeName"
                    min-width="100"
                    show-overflow-tooltip
                    label="项目名称"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="noticeType"
                    show-overflow-tooltip
                    min-width="100"
                    label="项目类型"
                  >
                    <template slot-scope="scope">
                      <span v-if="scope.row.noticeType == 1">物资</span>
                      <span v-if="scope.row.noticeType == 2">项目</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="procureOrgCode"
                    show-overflow-tooltip
                    min-width="100"
                    label="需求企业编号"
                  >
                  </el-table-column
                  ><el-table-column
                    align="center"
                    prop="procureOrgName"
                    show-overflow-tooltip
                    min-width="120"
                    label="需求企业名称"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="demandDate"
                    show-overflow-tooltip
                    min-width="120"
                    label="需求日期"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="matPlatcode"
                    show-overflow-tooltip
                    min-width="100"
                    label="物料编号"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="matName"
                    show-overflow-tooltip
                    min-width="100"
                    label="物料名称"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="matMaterial"
                    min-width="100"
                    show-overflow-tooltip
                    label="物料牌号"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="matSpec"
                    show-overflow-tooltip
                    min-width="100"
                    label="规格型号"
                  ></el-table-column>
                  <el-table-column
                    label="计划编号"
                    show-overflow-tooltip
                    min-width="100"
                    prop="planCode"
                  >
                  </el-table-column>
                  <el-table-column
                    label="品牌/产地"
                    show-overflow-tooltip
                    min-width="100"
                    prop="matBrand"
                  >
                  </el-table-column>
                  <el-table-column
                    label="基础扩展"
                    show-overflow-tooltip
                    min-width="100"
                    prop="matBaseExt"
                  >
                  </el-table-column>
                  <el-table-column
                    label="其他扩展"
                    min-width="100"
                    prop="matOtherExt"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    label="送货地址"
                    min-width="160"
                    prop="unloadAddress"
                  >
                  </el-table-column>
                  <el-table-column
                    label="企业补充说明"
                    min-width="160"
                    prop="purNote"
                  >
                  </el-table-column>
                  <el-table-column
                    label="成交人补充说明"
                    min-width="160"
                    prop="tenderExplain"
                  >
                  </el-table-column>
                  <el-table-column
                    label="挂账日期(月)"
                    min-width="100"
                    prop="pendingTime"
                  >
                  </el-table-column>
                  <el-table-column
                    label="承兑日期(月)"
                    min-width="100"
                    prop="acceptanceTime"
                  >
                  <template slot-scope="scope">
                    <div v-if="scope.row.quotationMethod == 2">
                      {{ scope.row.acceptanceTime }}
                    </div>
                  </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="vendorCode"
                    min-width="100"
                    show-overflow-tooltip
                    label="成交供应商编号"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="vendorName"
                    show-overflow-tooltip
                    min-width="100"
                    label="成交供应商名称"
                  ></el-table-column>
                  <!-- <el-table-column
                    align="center"
                    prop="score"
                    show-overflow-tooltip
                    min-width="90"
                    label="得分"
                  ></el-table-column> -->
                  <el-table-column
                    align="center"
                    prop="shareAllocationNum"
                    min-width="100"
                    show-overflow-tooltip
                    label="成交数量"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="matUnit"
                    show-overflow-tooltip
                    min-width="100"
                    label="计量单位"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="quotationMethod"
                    show-overflow-tooltip
                    min-width="100"
                    label="付款方式"
                  >
                    <template v-slot="{row}">
                      <span v-if="row.quotationMethod == 1">现金</span>
                      <span v-if="row.quotationMethod == 2">承兑</span>
                      <span v-if="row.quotationMethod == 3">其他</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="isTax"
                    show-overflow-tooltip
                    min-width="100"
                    label="是否含税"
                  >
                    <template v-slot="{row}">
                      <span v-if="row.isTax == 1">含税</span>
                      <span v-if="row.isTax == 2">不含税</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="winBidPrice"
                    show-overflow-tooltip
                    min-width="100"
                    label="成交价格(元)"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="winBidAmount"
                    min-width="100"
                    show-overflow-tooltip
                    label="成交金额(元)"
                  >
                    <template v-slot="{row}">
                      <div>
                        {{
                          (row.winBidPrice * row.shareAllocationNum).toFixed(2)
                        }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="taxRate"
                    show-overflow-tooltip
                    min-width="100"
                    label="税率(%)"
                  ></el-table-column>
                </el-table>
                <div class="common-pagenation">
                  <el-pagination
                    ref="paginationPanel"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryParam.pageBean.page"
                    :page-sizes="[20, 30, 40, 50]"
                    :page-size="queryParam.pageBean.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="queryParam.pageBean.total"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>

            <div class="quote-content" v-if="activeName === 'second'">
              <div class="rows">
                <div class="rows-left">
                  <div class="rows-hr"></div>
                </div>
                <div class="rows-title">
                  <div class="text-overflow">投标文件</div>
                </div>
              </div>
              <div class="content">
                <el-table
                  class="down"
                  v-loading="tableLoading"
                  :data="bidFileList"
                  border
                  stripe
                >
                  <el-table-column
                    prop="createOrgName"
                    key="second"
                    label="投标企业"
                  ></el-table-column>
                  <el-table-column
                    prop="name"
                    label="文件名称"
                  ></el-table-column>
                  <el-table-column width="150px" label="操作">
                    <template slot-scope="scope">
                      <el-button size="small" type="text">
                        <a @click="downloadFile(scope.row.name, scope.row.url)"
                          >下载</a
                        >
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="quote-content" v-if="activeName === 'question'">
              <div class="rows">
                <div class="rows-left">
                  <div class="rows-hr"></div>
                </div>
                <div class="rows-title">
                  <div class="text-overflow">澄清提问</div>
                </div>
              </div>
              <div class="content">
                <el-table
                  class="down"
                  :data="clarifyList"
                  size="mini"
                  border
                  stripe
                  height="100%"
                >
                  <el-table-column
                    prop="describe"
                    label="提问企业"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop="describe"
                    label="描述"
                    show-overflow-tooltip
                  ></el-table-column>

                  <el-table-column
                    prop="operateTime"
                    label="提出时间"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop="name"
                    label="文件名称"
                  ></el-table-column>
                  <el-table-column width="120px" label="操作">
                    <template slot-scope="scope">
                      <el-button size="small" type="text">
                        <a @click="downloadFile(scope.row.name, scope.row.url)"
                          >下载</a
                        >
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="quote-content" v-if="activeName === 'addendum'">
              <div class="rows">
                <div class="rows-left">
                  <div class="rows-hr"></div>
                </div>
                <div class="rows-title">
                  <div class="text-overflow">补遗文件</div>
                </div>
              </div>
              <div class="content">
                <el-table
                  class="down"
                  v-loading="tableLoading"
                  :data="SupplementList"
                  border
                  stripe
                >
                  <el-table-column
                    prop="describe"
                    key="addendum"
                    label="描述"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop="name"
                    label="文件名称"
                  ></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button size="small" type="text">
                        <a @click="downloadFile(scope.row.name, scope.row.url)"
                          >下载</a
                        >
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="quote-content" v-if="activeName === 'five'">
              <div class="rows">
                <div class="rows-left">
                  <div class="rows-hr"></div>
                </div>
                <div class="rows-title">
                  <div class="text-overflow">招标文件</div>
                </div>
              </div>
              <div class="content">
                <el-table
                  class="down"
                  v-loading="tableLoading"
                  :data="TenderList"
                  border
                  stripe
                >
                  <el-table-column
                    prop="name"
                    key="five"
                    label="文件名称"
                  ></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button size="small" type="text">
                        <a @click="downloadFile(scope.row.name, scope.row.url)"
                          >下载</a
                        >
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
  
  <script>
import {getMergeCells} from '@/utils/mergingTable.js'
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import pagination from '@/components/pagination'
import {TableMixin} from '@/mixins/tableMixin'
import routerManagement from '@/api/BasicDataManagement/routerManagement.js'
export default {
  name: 'evaluationManagement',
  components: {
    pagination,
    Breadcrumb,
  },
  mixins: [TableMixin],
  data() {
    return {
      breadcrumbOpt: [
        {breadcrumbName: '成交通知'},
        {breadcrumbName: '成交查看'},
      ],
      loading: false,
      tableLoading: false,
      activeName: 'first',
      form: {},
      queryParam: {
        pageBean: {
          page: 1,
          pageSize: 20,
          total: 0,
        },
        querys: [
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'a.WIN_NOTICE_ID_',
            relation: 'AND',
            value: '',
          },
        ],
      },
      bidFileList: [], //投标文件
      clarifyList: [],
      TenderList: [], //招标文件
      SupplementList: [], //补遗文件
      searchForm: {'a.WIN_NOTICE_ID_': ''},
      currentUser: {},
    }
  },
  mounted() {
    // this.$refs.multipleSelection.setCurrentRow(this.tableData[0])
  },
  created() {
    console.log(this.$route.query.rows);
    this.currentUser = JSON.parse(sessionStorage.getItem('currentUserDetail'))
    this.queryParam.querys[0].value = this.$route.query.id
    this.loadData()
  },
  methods: {
    // tab栏切换
    handleClick() {
      if (this.activeName == 'first') {
        this.loadData()
      }
      if (this.activeName == 'second') {
        this.tableLoading = true
        this.bidFileList = []
        let parmas = {
          pageBean: {
            pageSize: -1,
            page: -1,
          },
          querys: [],
        }
        parmas.querys.push(
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'projectApprovalId',
            relation: 'AND',
            value: this.$route.query.noticeId,
          },
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'projectApprovalType',
            relation: 'AND',
            value: 1,
          }
        )
        if (!this.getMethodauth('Transaction_View')) {
          parmas.querys.push({
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'supplierId',
            relation: 'AND',
            value: this.currentUser.org[0].orgId,
          })
        }
        this.$http
          .post('${portal}/bidDocuments/v1/page', parmas)
          .then((res) => {
            this.tableLoading = false
            let data = res.data.value.rows
            data.forEach((item) => {
              if (item.accessoryList && item.accessoryList.length != 0) {
                item.accessoryList.forEach((val) => {
                  if (item.id == val.sourceId) {
                    this.bidFileList.push(val)
                  }
                })
              }
            })
          })
      }
      if (this.activeName == 'question') {
        let parmas = {
          pageBean: {
            pageSize: -1,
            page: -1,
          },
          querys: [],
        }
        parmas.querys.push({
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'projectApprovalId',
          relation: 'AND',
          value: this.$route.query.noticeId,
        })
        this.$http
          .post('${portal}/clarifyQuestions/v1/pageAndAnswer', parmas)
          .then((res) => {
            this.clarifyList = []
            if (res.data.state) {
              this.clarifyList = res.data.value.rows
              this.clarifyList.forEach((item) => {
                if (item.accessoryList && item.accessoryList.length) {
                  item.accessoryList.forEach((val) => {
                    item.name = val.name
                    item.url = val.url
                  })
                }
              })
            }
          })
      }
      if (this.activeName == 'addendum') {
        this.tableLoading = true
        this.SupplementList = []
        let parmas = {
          pageBean: {
            pageSize: -1,
            page: -1,
          },
          querys: [],
        }
        parmas.querys.push(
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'projectApprovalId',
            relation: 'AND',
            value: this.$route.query.noticeId,
          },
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'projectApprovalType',
            relation: 'AND',
            value: 1,
          },
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'type',
            relation: 'AND',
            value: 2,
          }
        )
        this.$http
          .post('${portal}/tenderDocument/v1/pageAccessory', parmas)
          .then((res) => {
            this.tableLoading = false
            let data = res.data.value.rows
            data.forEach((item) => {
              if (item.accessoryList && item.accessoryList.length != 0) {
                item.accessoryList.forEach((val) => {
                  if (item.id == val.sourceId) {
                    val.describe = item.describe
                    this.SupplementList.push(val)
                  }
                })
              }
            })
          })
      }
      if (this.activeName == 'five') {
        this.tableLoading = true
        this.TenderList = []
        let parmas = {
          pageBean: {
            pageSize: -1,
            page: -1,
          },
          querys: [],
        }
        parmas.querys.push(
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'projectApprovalId',
            relation: 'AND',
            value: this.$route.query.noticeId,
          },
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'projectApprovalType',
            relation: 'AND',
            value: 1,
          },
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'type',
            relation: 'AND',
            value: 1,
          }
        )
        this.$http
          .post('${portal}/tenderDocument/v1/pageAccessory', parmas)
          .then((res) => {
            this.tableLoading = false
            let data = res.data.value.rows
            data.forEach((item) => {
              if (item.accessoryList && item.accessoryList.length != 0) {
                item.accessoryList.forEach((val) => {
                  if (item.id == val.sourceId) {
                    this.TenderList.push(val)
                  }
                })
              }
            })
          })
      }
    },
    //查看文件
    downloadFile(name, url) {
      const link = document.createElement('a')
      link.style.display = 'none'
      link.target = '_blank'
      // 设置下载地址
      link.setAttribute('href', url)
      // 设置文件名
      link.setAttribute('download', name)
      link.download = name
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    loadData() {
      this.tableLoading = true
      this.$http
        .post(
          '${portal}/bizWinBiddingNoticeDetaile/v1/pageWinNotice',
          this.queryParam
        )
        .then((res) => {
          if (res.data.state) {
            this.tableData = res.data.value.rows
            this.queryParam.pageBean = {
              page: res.data.value.page,
              pageSize: res.data.value.pageSize,
              total: res.data.value.total,
            }
            this.tableData.forEach((item) => {
              item.noticeType = this.$route.query.rows.noticeType
            })
          }
          this.tableLoading = false
        })
    },
    // 关闭//面包屑点击
    handleClose() {
      this.$router.push({
        name: 'confirmationWinningBid',
      })
    },
    handleCurrentChange(page) {
      this.queryParam.pageBean = {...this.queryParam.pageBean, page}
      this.loadData()
    },
    handleSizeChange(pageSize) {
      this.queryParam.pageBean = {...this.queryParam.pageBean, pageSize}
      this.loadData()
    },
    getMethodauth(elAuth) {
      let allMethod = window.sessionStorage.allMethod
      let methodAuth = window.sessionStorage.methodAuth
      let allMethodArray = allMethod && allMethod.split(',')
      let methodAuthArray = methodAuth && methodAuth.split(',')
      // 无权限则隐藏按钮
      if (
        methodAuthArray &&
        methodAuthArray.includes(elAuth) &&
        allMethodArray &&
        allMethodArray.includes(elAuth)
      ) {
        return true
      } else {
        return false
      }
    },
  },
  computed: {
    SearchPanel() {
      return {
        '--searchPanel': this.searchPanel + 'px',
      }
    },
  },
}
</script>
  
  <style lang="scss" scoped>
.materialInformation {
  width: 100%;
  height: 100%;
  .content {
    width: 100%;
    height: calc(100% - 70px);
    margin-top: 10px;
    .common-page-shadow {
      width: 100%;
      height: calc(100%);
      box-sizing: border-box;
      .common-table-container {
        margin: 0;
        height: calc(100% - 80px);
        .common-table-wrapper {
          height: 100%;
          .score-table {
            height: 100%;
            .table {
              height: calc(100% - 50px);
            }
          }
          .quote-content {
            height: 100%;
            position: relative;
            .content {
              height: calc(100% - 70px);
              overflow-y: scroll;
            }
            .btn {
              width: 100%;
              position: absolute;
              bottom: 16px;
              display: flex;
              justify-content: center;
            }
          }
        }
      }
    }
  }
}
/deep/.el-tabs__header {
  margin-bottom: 10px;
}
/deep/.el-table .cell {
  font-size: 14px;
}
.cloumn-btn {
  border: 1px solid #2761ff;
  padding: 3px 10px;
  border-radius: 5px;
  &:nth-child(1) {
    margin-right: 5px;
  }
  &:nth-child(2) {
    margin-right: 5px;
  }
  &:nth-child(1):hover {
    background-color: #2761ff;
    color: #fff;
  }
  &:nth-child(2):hover {
    background-color: #2761ff;
    color: #fff;
  }
  // &:nth-child(2):hover {
  //   background-color: #f56c6c;
  //   color: #fff;
  //   border-color: #f56c6c;
  // }
  /deep/ i,
  span {
    font-size: 16px;
  }
}
/deep/.el-tree-node.is-current > .el-tree-node__content {
  background-color: #ebf3fa;
  color: #409eff;
  font-weight: bold;
}

/deep/ .el-tree-node__content {
  padding: 5px 0;
}

/deep/ .el-table thead tr th {
  background-color: #eee !important;
  border-right: 1px solid #dfe2e8 !important;
}
/deep/ .el-table {
  border-collapse: collapse !important;
}
</style>
  