<template>
    <div class="edit-add-detail">
      <div class="crumbs">
        <Breadcrumb
          :breadcrumbOpt="breadcrumbOpt"
          svg-name="#icon-audit"
          @breadcrumb-click="handleClose"
        />
      </div>
        <div class="common-page-shadow">
          <!-- <div class="common-search-container" ref="contentPanel"></div> -->
          <el-row
            class="common-table-container flex searchPanel"
            :style="SearchPanel"
          >
            <el-col :span="24" class="common-table-wrapper">
              <div class="table">
                <el-table
                  border
                  stripe
                  key="first"
                  fit
                  :data="scoreData"
                  :span-method="objectSpanMethod"
                  style="width: 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="operateTime"
                    show-overflow-tooltip
                    min-width="120"
                    label="定标日期"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="quotationOrgCode"
                    min-width="100"
                    show-overflow-tooltip
                    label="中标供应商编号"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="quotationOrgName"
                    show-overflow-tooltip
                    min-width="100"
                    label="中标供应商名称"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="score"
                    min-width="100"
                    show-overflow-tooltip
                    label="总得分"
                  ></el-table-column>
                  <!-- <el-table-column
                    align="center"
                    prop="operateUserName"
                    min-width="100"
                    show-overflow-tooltip
                    label="评标人"
                  ></el-table-column> -->
                  <el-table-column
                    align="center"
                    prop="quotationAmount"
                    min-width="100"
                    show-overflow-tooltip
                    label="中标金额(元)"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    min-width="100"
                    show-overflow-tooltip
                    label="操作"
                  >
                    <template slot-scope="scope">
                      <el-button
                        size="small"
                        type="primary"
                        @click="handleDetais(scope.row)"
                        >查看明细</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-col>
          </el-row>
      </div>
      <el-dialog
        :close-on-click-modal="false"
        title="明细详情"
        :visible.sync="visible"
        width="80%"
        :close-on-press-escape="false"
        :before-close="close"
      >
        <template>
          <el-table
            ref="multipleSelection"
            v-loading="loading"
            border
            :data="detailsList"
            :style="{width: '100%'}"
            :max-height="tableMaxHeight"
            :cell-style="{'text-align': 'center'}"
            :header-cell-style="{'text-align': 'center'}"
          >
            <el-table-column
              prop="matCode"
              min-width="100px"
              label="企业物料编号"
              show-overflow-tooltip
              align="center"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="matPlatcode"
              min-width="100px"
              label="平台物料编号"
              show-overflow-tooltip
              align="center"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="matName"
              min-width="100px"
              label="物料名称"
              show-overflow-tooltip
              align="center"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="matMaterial"
              min-width="100px"
              label="物料牌号"
              show-overflow-tooltip
              align="center"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="matSpec"
              min-width="100px"
              label="规格型号"
              show-overflow-tooltip
              align="center"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="matNum"
              show-overflow-tooltip
              min-width="90px"
              align="center"
              label="数量"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="matUnit"
              show-overflow-tooltip
              min-width="90px"
              align="center"
              label="计量单位"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="quotationRounds"
              show-overflow-tooltip
              min-width="90px"
              align="center"
              label="报价轮次"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="quotationPrice"
              show-overflow-tooltip
              min-width="100"
              align="center"
              label="报价单价(元)"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="quotationAmount"
              show-overflow-tooltip
              min-width="100"
              align="center"
              label="报价金额(元)"
              resizable
            >
            <template slot-scope="scope">
              <div>
                {{( scope.row.quotationPrice * scope.row.matNum).toFixed(2) }}
              </div>
            </template>
            </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>
        </template>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
        </span>
      </el-dialog>
    </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: [],
        },
        bidFileList: [], //投标文件
        TenderList: [], //招标文件
        SupplementList: [], //补遗文件
        detailsList: [],
        searchForm: {manner: 1, name: '招标采购'}, // 顶部搜索对象
        scoreData: [],
        scoreColumn: [
          {prop: 'scoringFactors', label: '评分大项', width: 50},
          {prop: 'scoringContent', label: '评分细项', width: 50},
          {prop: 'evaluationStandard', label: '评分标准', width: 200},
          {prop: 'evaluationScore', label: '分值', width: 50},
        ],
        visible: false,
        form: {},
      }
    },
    mounted() {
      // this.$refs.multipleSelection.setCurrentRow(this.tableData[0])
    },
    created() {
      this.form = this.$route.query.rows
      this.getScoreData()
    },
    methods: {
      //获取数据
      getScoreData() {
        this.$http
          .post(
            '${portal}/bidEvaluation/v1/getCalibraDetailMaxScoreById?noticeId=' +
              this.$route.query.rows.id
          )
          .then((res) => {
            if (res.data.state) {
              this.scoreData = res.data.value
            }
          })
      },
      // 关闭//面包屑点击
      handleClose() {
        this.$router.push({
          name: 'notificationWinningBid',
          params: {
            tabsActiveName: 'projectNotification',
          },
        })
      },
      handleDetais(row) {
        this.form = row
        this.queryParam.querys = []
        this.queryParam.querys.push(
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'quo.QUOTATION_COMPANY_ID_',
            relation: 'AND',
            value: row.quotationOrgId,
          },
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'quo.NOTICE_ID_',
            relation: 'AND',
            value: row.noticeId,
          }
        )
        this.$http
          .post('${portal}/bizBiddingQuotation/v1/pageMatDetail', this.queryParam)
          .then((res) => {
            console.log(res, 11111111111)
            this.detailsList = res.data.value.rows
            this.queryParam.pageBean.page = res.data.value.page
            this.queryParam.pageBean.pageSize = res.data.value.pageSize
            this.queryParam.pageBean.total = res.data.value.total
            this.visible = true
          })
      },
      close() {
        this.visible = false
      },
      handleCurrentChange(page) {
        this.queryParam.pageBean = {...this.queryParam.pageBean, page}
        this.handleDetais(this.form)
      },
      handleSizeChange(pageSize) {
        this.queryParam.pageBean = {...this.queryParam.pageBean, pageSize}
        this.handleDetais(this.form)
      },
    },
    computed: {
      SearchPanel() {
        return {
          '--searchPanel': this.searchPanel + 'px',
        }
      },
      // 获取所有单元格合并数据
      spanArr() {
        if (!this.scoreColumn.length) return []
        const mergeCols = ['scoringFactors', 'Grade', 'Class'] // 需要合并的列（字段）
        return getMergeCells(this.scoreData, this.scoreColumn, mergeCols)
      },
    },
  }
  </script>
    
    <style lang="scss" scoped>
  /deep/.el-tabs__header {
    margin-bottom: 10px;
  }
  /deep/.el-table .cell {
    font-size: 14px;
  }
  .common-page-shadow{
    height: calc(100% - 50px);
  }
  .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>
    