<template>
  <div class="performance">
    <head-form-new
      ref="headForm"
      title=""
      :form-data="formData"
      :query-params="queryParams"
      :total="tableDataTotal"
      :isExcel="false"
      @handle-search="handleSearch"
    ></head-form-new>
    <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
    <tables
      v-if="!isSkeleton"
      :defaultSort="defaultSort"
      :tableLoading="tableLoading"
      :tableData="tableData"
      :forData="forData"
      :MaxPage=500
      :tableDataTotal="tableDataTotal"
      :queryParams="queryParams"
      @handle-current-change="handleCurrentChange"
      @sort-change="sortChange"
    >
      <template slot="tenderee" slot-scope="scope">
        <router-link :to="scope.row.tendereeUipId?`/enterprise/${encodeStr(scope.row.tendereeId)}`:`/company/${encodeStr(scope.row.tendereeId)}`" tag="a" class="a-link" v-if="scope.row.tendereeId&&scope.row.tenderee" v-html="scope.row.tenderee"></router-link>
        <div v-else v-html="scope.row.tenderee || '--'"></div>
      </template>
      <template slot="projectName" slot-scope="scope">
        <router-link :to="`/radar/Notice/details/${scope.row.bId}`" tag="a" class="a-link" v-if="scope.row.bId" v-html="scope.row.projectName"></router-link>
        <div v-else v-html="scope.row.projectName || '--'"></div>
      </template>
      <template slot="agency" slot-scope="scope">
        <router-link :to="scope.row.agencyUipId?`/enterprise/${encodeStr(scope.row.agencyId)}`:`/company/${encodeStr(scope.row.agencyId)}`" tag="a" class="a-link" v-if="scope.row.agencyId&&scope.row.agency" v-html="scope.row.agency"></router-link>
        <div v-else v-html="scope.row.agency || '--'"></div>
      </template>
      <template slot="stockPercent" slot-scope="scope">
        <div>{{scope.row.stockPercent || '--'}}{{scope.row.stockPercent ?  '%':''}}</div>
      </template>
      <template slot="projectType" slot-scope="scope">
        <div v-if="scope.row.projectType === '空白'">--</div>
        <div v-else>{{scope.row.projectType || '--'}}</div>
      </template>
      <template slot="bidAmount" slot-scope="scope">
        <div>{{scope.row.bidAmount || '--'}}{{scope.row.bidAmount ?  '万元':''}}</div>
      </template>
    </tables>
    <el-dialog :visible.sync="dialogExportVisible" width="640px" append-to-body class="dialogExport">
      <template slot="title">
        <img class="tip-img" src="@/assets/images/icon.png" />数据导出
      </template>
      <div class="table-item">
        <el-table :data="exportTableData">
          <el-table-column prop="issueTime" label="招标发布时间" width="110"></el-table-column>
          <el-table-column prop="tenderee" label="招标成员" width="200"></el-table-column>
          <el-table-column prop="stockPercent" label="持股比例" min-width="100"></el-table-column>
          <el-table-column prop="projectName" label="项目名称" min-width="220"></el-table-column>
          <el-table-column prop="bidAmount" label="预算金额" min-width="100"></el-table-column>
          <el-table-column prop="address" label="项目地区" min-width="110"></el-table-column>
          <el-table-column prop="subjectMatter" label="招标采购分类" min-width="130"></el-table-column>
          <el-table-column prop="projectType" label="项目类型" min-width="100"></el-table-column>
          <el-table-column prop="agency" label="代理单位" min-width="160"></el-table-column>
        </el-table>
      </div>
      <div class="input">
        导出数量：
        <el-input placeholder="" v-model="value" oninput="value=value.replace(/[^\d]/g,'')">
          <template slot="append">条</template>
        </el-input>
        <p v-if="value > 2000"><i class="el-icon-error"></i>最多支持导出2000条，如需更多联系大司空客服人员</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="clickEXCEL">确认导出</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogExportVisible1" width="640px" append-to-body class="dialogExport">
      <template slot="title">
        <img class="tip-img" src="@/assets/images/icon.png" />
        数据导出
      </template>
      <div class="content">
        <img class="success" src="@/assets/images/success.png" />
        <p class="p1">导出成功</p>
        <p class="p2">
          可在个人中心查看导出表格
          <span @click="toUrl">前往个人中心</span>
        </p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="downloadFile(exportData.url,exportData.originalName)">下载表格</el-button>
        <el-button @click="dialogExportVisible1 = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import mixin from '../../party-a/mixins/mixin'
  import CustomTimeSelect from '../../party-a/component/CustomTimeSelect'
  import CustomMoneySelect from '../../party-a/component/CustomMoneySelect'
  import {bidPage,exportBid} from '@/api/detail/groupAccount/groupAccount'
  import dataRegion from '@/assets/json/dataRegion1'
  import { getDictType } from '@/api/main'
  export default {
    name: 'qualifications',
    props: ['customerId'],
    mixins: [mixin],
    components:{CustomTimeSelect,CustomMoneySelect},
    data(){
      return{
        isSkeleton:true,
        tableLoading:false,
        isDetails: false,
        defaultSort: {prop: 'time', order: 'descending'},
        queryParams: {
          combineId: this.customerId,
          pageNum: 1,
          pageSize: 20,
        },
        forData: [
          {label: '招标发布时间', prop: 'issueTime',minWidth: '90'},
          {label: '招标成员', prop: 'tenderee', slot: true,minWidth: '190'},
          {label: '持股比例', prop: 'stockPercent',slot: true,minWidth: '80'},
          {label: '项目名称', prop: 'projectName', slot: true,minWidth: '220'},
          {label: '预算金额', prop: 'bidAmount',slot: true,minWidth: '100'},
          {label: '项目地区', prop: 'address',minWidth: '110'},
          {label: '招标采购分类', prop: 'subjectMatter',minWidth: '90'},
          {label: '项目类型', prop: 'projectType',minWidth: '80',slot: true},
          {label: '代理单位', prop: 'agency',minWidth: '160',slot: true},
        ],
        formData: [
          { type: 7, fieldName: 'province', value: '',props: {multiple: true,value: 'id',expandTrigger: 'hover'}, placeholder: '项目地区', options:[], uid: this.getUid()},
          { type: 5, fieldName: 'time', value: '', placeholder: '招标发布时间', startTime: 'startTime', endTime: 'endTime',timeList:[], uid: this.getUid() },
          { type: 6, fieldName: 'money', value: '', placeholder: '预算金额', startMoney: 'minAmount', endMoney: 'maxAmount',moneyList:[], uid: this.getUid() },
          { type: 1, fieldName: 'subjectMatters', value: '', placeholder: '招标采购分类', options: [],width:125, uid: this.getUid()},
          { type: 4, fieldName: 'projectTypes', value: '', placeholder: '项目类型', options: [],width:150, uid: this.getUid()},
          { type: 1, fieldName: 'cgbl', value: '', placeholder: '持股比例', options: [],width:110, uid: this.getUid()},
          { type: 3, fieldName: 'keys', value: '', placeholder: '输入关键词查询'},
        ],
        tableData:[],
        tableDataTotal:0,
        addressList: [],
        cgblList: [
          {name:'100%',value:'100%'},
          {name:'50%以上',value:'50%以上'},
          {name:'20%以上',value:'20%以上'},
          {name:'5%以上',value:'5%以上'},
          {name:'1%-5%',value:'1%-5%'},
        ],
        cgType: [
          {name:'工程',value:'工程'},
          {name:'货物',value:'货物'},
          {name:'服务',value:'服务'},
          {name:'其他',value:'其他'},
        ],
        timeList: ['近三天', '近七天', '近半月', '自定义'],
        moneyList: ['5000万以下', '5000万-1亿', '1亿-5亿', '5亿-10亿','10亿以上', '自定义'],
        dataEXCEL:{},
        dialogExportVisible:false,
        dialogExportVisible1:false,
        exportTableData:[
          {
            "address":"四川省-成都市",
            "stockPercent":"18.43%",
            "agency":'鞍钢股份有限公司',
            "issueTime":"2023-09-22",
            "subjectMatter":"其他",
            "memberLevel":"二级企业",
            "tenderee":"鞍钢冷轧钢板（莆田）有限公司综合部",
            "projectType":"其他",
            "bidAmount":"202万元",
            "projectName":"2023年中铁一局集团第二工程有限公司江浙区域项目自购物资集中招标采购文件（一）（钢材）招标公告",
          },
          {
            "address":"四川省-成都市",
            "stockPercent":"18.43%",
            "agency":'鞍钢股份有限公司',
            "issueTime":"2023-09-22",
            "subjectMatter":"其他",
            "memberLevel":"二级企业",
            "tenderee":"鞍钢股份有限公司",
            "projectType":"其他",
            "bidAmount":"202万元",
            "projectName":"太极集团四川太极制药有限公司转让持有的成都市4套住宅-高新区玉虹巷2号1栋6单元7层13号",
          },
        ],
        value:'',
        exportData:{}
      }
    },
    created() {
      this.dataRegion()
      this.handleQuery()
      this.formData[1].timeList=this.timeList;
      this.formData[2].moneyList=this.moneyList;
      this.formData[3].options=this.cgType;
      this.formData[5].options=this.cgblList;

      //项目类型
      getDictType('project_type_new').then(result=>{
        let data = result.code == 200 ? result.data:[];
        if(data.length > 0){
          for (var i=0;i<data.length;i++){
            this.formData[4].options.push({
              name: data[i].dictLabel,
              value: data[i].dictValue,
            })
          }
        }
      })


    },
    methods: {
      handleQuery(params){
        this.isSkeleton = true
        let data = this.getAreaList(params || this.queryParams)
        if(data.cgbl){
          if(data.cgbl === '100%'){
            data.minStockPercent=1
          }
          if(data.cgbl === '50%以上'){
            data.minStockPercent=0.5
          }
          if(data.cgbl === '20%以上'){
            data.minStockPercent=0.2
          }
          if(data.cgbl === '5%以上'){
            data.minStockPercent=0.05
          }
          if(data.cgbl === '1%-5%'){
            data.minStockPercent=0.01
            data.maxStockPercent=0.05
          }
          delete data.cgbl
        }
        if(data.subjectMatters){
          data.subjectMatters=[data.subjectMatters]
        }
        if(!data.endTime){
          data.endTime=this.formatDate(new Date())
        }
        this.dataEXCEL=JSON.parse(JSON.stringify(data));
        bidPage(data).then(res=>{
          this.tableData = res.code == 200 ? res.rows:[];
          this.tableDataTotal = res.total
          this.isSkeleton = false
          this.tableLoading = false
        })
      },
      formatDate(timestamp) {
        var time = new Date(timestamp)
        let year = time.getFullYear();
        let month = time.getMonth() + 1 >= 10 ? parseInt(time.getMonth() + 1) : "0" + parseInt(time.getMonth() + 1);
        let day = time.getDate() >= 10 ? time.getDate() : "0" + time.getDate();
        return year + '-' + month + '-' + day
      },
      //地区
      async dataRegion() {
        var str = [];
        for (let x = 0; x < 3; x++) {
          for (let i = 0; i < dataRegion.length; i++) {
            if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) {
              str.push({
                'id': dataRegion[i].id,
                "label": dataRegion[i].regionName,
                "short": dataRegion[i].short,
                "value": dataRegion[i].parentId,
                "children": []
              });
            }
          }
        }
        for (var i=0; i<str.length; i++) {
          if (str[i].children.length) {

          } else {
            delete str[i].children
          }
        }
        this.addressList = str;
        this.formData[0].options=str;
      },
      getAreaList(params){
        if(params.province&&params.province.length>0){
          let arr = this.$children[0].$refs.cascader[0].getCheckedNodes()
          let provinceIds = [], cityIds = [], districtIds = []
          for (var i in arr) {
            if (arr[i].parent) {
              if (!arr[i].parent.checked) {
                if(arr[i].hasChildren || arr[i].level==2){
                  cityIds.push(arr[i].data.id)
                }else{
                  districtIds.push(arr[i].data.id)
                }
              }
            } else {
              provinceIds.push(arr[i].data.id)
            }
          }
          delete params.province
          provinceIds.length>0?params.provinceIds = provinceIds:''
          cityIds.length>0?params.cityIds = cityIds:''
          districtIds.length>0?params.districtIds = districtIds:''
        }
        return params
      },
      //分页
      handleCurrentChange(e){
        let params = this.formParams()
        params.pageNum = e
        this.queryParams.pageNum = e
        this.handleQuery(params)
        this.$emit('handle-scroll')
      },
      changeSelect(){
        this.handleSearch()
      },
      clickFocus(e){
        document.getElementById(e).classList.toggle('span-ba')
      },

      clickDialog(){
        this.dialogExportVisible=true;
      },
      clickEXCEL() {
        if(this.value > 2000){
          return
        }
        this.dialogExportVisible=false;
        this.dataEXCEL.combineName=this.combineName;
        if(this.value){
          this.dataEXCEL.pageSize=this.value
        }else {
          this.dataEXCEL.pageSize=this.tableDataTotal > 2000 ? 2000 : this.tableDataTotal;
        }
        delete this.dataEXCEL.pageNum
        exportBid(this.dataEXCEL).then(res=>{
          if(res.code === 200){
            this.dialogExportVisible1=true;
            this.value=''
            this.exportData=res.data;
          }
        })
      },
      cancel(){
        this.dialogExportVisible=false
        this.value=''
      },
      downloadFile(url, fileName) {
        const x = new XMLHttpRequest()
        x.open("GET", url, true)
        x.responseType = 'blob'
        x.onload=function(e) {
          const url = window.URL.createObjectURL(x.response)
          const a = document.createElement('a')
          a.href = url
          a.download = fileName
          a.click()
          a.remove()
        }
        x.send()
      },
      toUrl(){
        this.dialogExportVisible1=false;
        this.$router.push({
          path: '/user/profile',
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .performance{
    @import "@/assets/styles/search-common.scss";
    background: #ffffff;
    border-radius: 4px;
    padding: 16px;
    height: calc(100% - 64px);

    ::v-deep .el-table__header-wrapper {
      position: sticky;
      top: 64px !important;
      z-index: 9;
    }


    .headForm{
      margin-bottom: 14px;
      .common-title{
        margin-right: 24px;
      }
      ::v-deep .el-input__inner{
        padding-right: 27px;
      }
      ::v-deep .el-form-item{
        margin-right: 8px !important;
      }
      ::v-deep .el-input--medium .el-input__icon{
        line-height: 34px;
      }
      ::v-deep .el-cascader{
        height: 34px;
        line-height: 34px;
        width: 190px;
        .el-input{
          input{
            height: 34px !important;
          }
        }
        .el-cascader__tags{
          flex-wrap: inherit;
          margin-top: 1px;
          .el-tag{
            max-width: 100px;
          }
        }
        .el-input__suffix{
          top: 1px;
        }
      }
      .cooperate-name {
        display: flex;
        border-radius: 2px;
        border: 1px solid #D9D9D9;
        line-height: 34px;
        height: 34px;
        span {
          width: 80px;
          height: 32px;
          line-height: 32px;
          font-size: 14px;
          background: #F5F5F5;
          text-align: center;
          color: #0081FF;
          border: 1px solid #EFEFEF;
          border-left: 0;
          cursor: pointer;
        }
        &.span-ba{
          /*border: 1px solid #0081FF;*/
          span{
            color: #ffffff;
            background: #0081FF;
            border: 1px solid #0081FF;
          }
        }
        ::v-deep .el-input{
          flex: 1;
        }
        ::v-deep .el-input__inner {
          border: 0;
          line-height: 32px;
          height: 32px;
          position: absolute;
          top: 0;
          padding-right: 22px;
          font-size: 12px;
          padding-left: 8px;
        }
      }
      .headForm-from {
        display: flex;
        .from-item{
          margin-right: 8px;
          &:last-child{
            margin-right: 0;
          }
          .fromTime{
            ::v-deep .el-range-input{
              width: 100%;
            }
            ::v-deep .el-range-separator, ::v-deep .el-range__close-icon{
              line-height: 24px;
              width: 20px;
            }
          }
          .fromTime-icon {
            display: none;
          }
          .el-select{
            .el-input__suffix{
              right: 10px;
            }
          }
        }
        ::v-deep .form-content-width{
          width: 170px;
        }
        ::v-deep .selectTag{
          .el-select__tags{
            .el-tag{
              &:first-child{
                width: 70px;
              }
            }
          }
        }
        ::v-deep .el-select__tags{
          .el-tag{
            &:first-child{
              //width: 100%;
            }
          }
        }
      }
      .ability-total{
        font-size: 12px;
        color: #3D3D3D;
        position: relative;
        &:before{
          content: '';
          display: inline-block;
          width: 2px;
          height: 2px;
          background: rgba(35,35,35,0.4);
          margin-right: 4px;
        }
      }
      .ability-excel{
        font-size: 14px;
        color: rgba(35,35,35,0.8);
        margin-left: 16px;
        cursor: pointer;
        &:hover{
          color: #0081FF;
        }
        img{
          width: 18px;
          height: 18px;
          margin-right: 4px;
        }
      }
    }
    ::v-deep .el-table{
      .has-gutter{
        tr{
          th:nth-last-child(2){
            border-right:0;
          }
          td:nth-last-child(2){
            border-right:0;
          }
        }
      }
      .el-table__cell.gutter{
        background: #F0F3FA;
      }
    }
    .custom-time-select{
      width: 150px;
    }
  }
  .dialogExport{
    ::v-deep .el-dialog{
      .el-dialog__header{
        height: 48px;
        line-height: 48px;
        padding: 0 16px;
        border-bottom: 1px solid #E1E1E1;
        font-weight: bold;
        color: #1D2129;
        font-size: 16px;
        .tip-img{
          width: 18px;
          height: 18px;
          margin-right: 7px;
          margin-bottom: -3px;
        }
        .el-dialog__headerbtn{
          font-size: 20px;
          font-weight: bold;
          top: 15px;
          .el-dialog__close{
            color:#999999;
          }
        }
      }
      .el-dialog__body{
        padding: 16px;
        .input{
          margin-top: 16px;
          .el-input{
            width: 160px;
            border-radius: 2px;
            height: 32px;
            .el-input__inner{
              height: 32px;
              line-height: 32px;
            }
          }
          .el-input-group__append{
            padding: 0 14px;
          }
          p{
            color: #FF3C3C;
            font-size: 12px;
            margin-left: 12px;
            display: inline-block;
            i{
              font-size: 14px;
              margin-right: 4px;
            }
          }
        }
        .content{
          text-align: center;
          margin-top: 36px;
          .success{
            width: 64px;
            height: 64px;
            margin-bottom: 16px;
          }
          p{
            padding: 0;
            margin: 0;
          }
          .p1{
            color: #232323;
            font-size: 16px;
            margin-bottom: 8px;
          }
          .p2{
            color: rgba(35,35,35,0.4);
            font-size: 14px;
            span{
              color:#0081FF;
              cursor: pointer;
            }
          }
        }
      }
      .el-dialog__footer{
        text-align: center;
        padding-bottom: 24px;
      }
    }
  }
</style>
