<template>
  <div class="performance">
    <div class="headForm">
      <div class="flex-box query-box" style="margin-bottom: 12px;">
        <div class="flex-box query-params">
          <span class="common-title">集团招标</span>
          <div class="cooperate-name" id="focus00">
            <el-input clearable @clear="changeSelect" style="width: 300px;" @focus="clickFocus('focus00')" @blur="clickFocus('focus00')" v-model="queryParams.keys" placeholder="搜索招标成员名称/项目名称/代理单位"></el-input>
            <span @click="changeSelect">搜索</span>
          </div>
        </div>
      </div>
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <div class="headForm-from">
            <div class="from-item" :key="i" v-for="(form, i) in formData">
              <!-- 单选 -->
              <template v-if="form.type==1">
                <el-select
                  v-model="form.value"
                  clearable
                  class="form-content-width"
                  :style="form.width?'width:'+form.width+'px':'max-width: 110px'"
                  :placeholder="form.placeholder"
                  @change="changeSelect">
                  <el-option v-for="(item, index) in form.options" :key="index" :label="item.name" :value="item.value" :disabled="item.disabled"/>
                </el-select>
              </template>
              <!-- 年月日 -->
              <template v-if="form.type==2">
                <el-date-picker
                  @change="changeSelect"
                  class="fromTime"
                  style="width: 210px"
                  v-model="form.value"
                  type="daterange"
                  prefix-icon="fromTime-icon"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </template>
              <!-- 多选 -->
              <template  v-if="form.type==4">
                <el-select
                  class="form-content-width"
                  :class="form.value.length > 1 ? 'selectTag' : ''"
                  v-model="form.value"
                  multiple
                  collapse-tags
                  clearable
                  :style="form.width?'width:'+form.width+'px':'max-width: 170px'"
                  :placeholder="form.placeholder"
                  @change="changeSelect">
                  <el-option v-for="(item, index) in form.options" :key="index" :label="item.name" :value="item.value"/>
                </el-select>
              </template>
              <!-- 时间、自定义 -->
              <template v-else-if="form.type==5">
                <custom-time-select
                  :timeList="form.timeList"
                  v-model="form.value"
                  :placeholder="form.placeholder"
                  :dateFrom="form.dateFrom ? form.dateFrom : ''"
                  :dateTo="form.dateTo ? form.dateTo : ''"
                  @handle-search="changeSelect" />
              </template>
              <!-- 金额 -->
              <template v-else-if="form.type==6">
                <custom-money-select
                  :moneyList="form.moneyList"
                  v-model="form.value"
                  :placeholder="form.placeholder"
                  @handle-search="changeSelect" />
              </template>
              <!-- 地区选择 -->
              <template v-else-if="form.type==7">
                <el-cascader
                  ref="cascader"
                  :options="form.options"
                  :props="form.props"
                  v-model="form.value"
                  @change="changeSelect"
                  :placeholder="form.placeholder"
                  collapse-tags
                  clearable></el-cascader>
              </template>
            </div>

          </div>
        </div>
        <div class="flex-box">
          <span class="flex-box ability-total">共{{ tableDataTotal }}条</span>
          <span v-hasPermi="['combine:info:export:bid']" class="flex-box ability-excel" @click="clickDialog"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
        </div>
      </div>
    </div>
    <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','combineName'],
    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,
          keys:''
        },
        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:[]},
          { type: 5, fieldName: 'time', value: '', placeholder: '招标发布时间', startTime: 'startTime', endTime: 'endTime',timeList:[] },
          { type: 6, fieldName: 'money', value: '', placeholder: '预算金额', startMoney: 'minAmount', endMoney: 'maxAmount',moneyList:[] },
          { type: 1, fieldName: 'subjectMatters', value: '', placeholder: '招标采购分类', options: [],width:140},
          { type: 4, fieldName: 'projectTypes', value: '', placeholder: '项目类型', options: [],width:150},
          { type: 1, fieldName: 'cgbl', value: '', placeholder: '持股比例', options: [],width:110},
        ],
        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": []
              });
            }
            // else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 2) {
            //   for (let j = 0; j < str.length; j++) {
            //     if (str[j].id == dataRegion[i].parentId) {
            //       str[j].children.push({
            //         'id': dataRegion[i].id,
            //         "label": dataRegion[i].regionName,
            //         "short": dataRegion[i].short,
            //         "value": dataRegion[i].parentId,
            //         "children": []
            //       });
            //     }
            //   }
            // } else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 3) {
            //   for (let j = 0; j < str.length; j++) {
            //     for (let k = 0; k < str[j].children.length; k++) {
            //       if (str[j].children[k].id == dataRegion[i].parentId) {
            //         str[j].children[k].children.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.$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{
    background: #ffffff;
    border-radius: 4px;
    padding: 16px;
    .headForm{
      margin-bottom: 14px;
      .common-title{
        margin-right: 24px;
      }
      ::v-deep .el-input__inner{
        border: 1px solid #D9D9D9;
        height: 34px;
        line-height: 34px;
        padding-right: 27px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-radius: 4px;
      }
      ::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>
