<template>
  <div class="performance">
    <head-form
      title="集团业绩"
      :form-data="formData"
      :query-params="queryParams"
      :total="tableDataTotal"
      :isExcel="true"
      @handle-search="handleSearch"
      @handle-excel="clickDialog"
    >
      <template slot="slot">

      </template>
    </head-form>
    <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="bidTime" slot-scope="scope">
        <div>{{formatDate(scope.row.bidTime)}}</div>
      </template>
      <template slot="companyName" slot-scope="scope">
        <router-link :to="scope.row.uipId?`/enterprise/${encodeStr(scope.row.companyId)}`:`/company/${encodeStr(scope.row.companyId)}`" tag="a" class="a-link" v-if="scope.row.companyId&&scope.row.companyName" v-html="scope.row.companyName"></router-link>
        <div v-else v-html="scope.row.companyName || '--'"></div>
      </template>
      <template slot="projectName" slot-scope="scope">
        <router-link :to="`/biddetail/${scope.row.projectId}`" tag="a" class="a-link" v-if="scope.row.projectId" v-html="scope.row.projectName"></router-link>
        <div v-else v-html="scope.row.projectName || '--'"></div>
      </template>
      <template slot="projectUnit" slot-scope="scope">
        <router-link :to="scope.row.projectUnitUipId?`/enterprise/${encodeStr(scope.row.projectUnitId)}`:`/company/${encodeStr(scope.row.projectUnitId)}`" tag="a" class="a-link" v-if="scope.row.projectUnitId&&scope.row.projectUnit" v-html="scope.row.projectUnit"></router-link>
        <div v-else v-html="scope.row.projectUnit || '--'"></div>
      </template>
      <template slot="stockPercent" slot-scope="scope">
        <div>{{scope.row.stockPercent || '--'}}{{scope.row.stockPercent ?  '%':''}}</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="bidTime" label="中标时间" width="110"></el-table-column>
          <el-table-column prop="companyName" 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="120"></el-table-column>
          <el-table-column prop="boundType" label="业绩类型" min-width="130"></el-table-column>
          <el-table-column prop="projectType" label="项目类型" min-width="100"></el-table-column>
          <el-table-column prop="projectUnit" 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 {businessList,exportWinBid} 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:{},
    data(){
      return{
        isSkeleton:true,
        tableLoading:false,
        isDetails: false,
        defaultSort: {prop: 'time', order: 'descending'},
        queryParams: {
          combineId: this.customerId,
          pageNum: 1,
          pageSize: 20
        },
        forData: [
          {label: '中标时间', prop: 'bidTime',slot: true,minWidth: '80'},
          {label: '中标成员', prop: 'companyName', slot: true,minWidth: '190'},
          {label: '持股比例', prop: 'stockPercent',slot: true,minWidth: '80'},
          {label: '项目名称', prop: 'projectName', slot: true,minWidth: '260'},
          {label: '中标金额', prop: 'bidAmount',slot: true,minWidth: '110'},
          {label: '中标地区', prop: 'address',minWidth: '130'},
          {label: '业绩类型', prop: 'boundType',minWidth: '80'},
          {label: '项目类型', prop: 'projectType',minWidth: '80'},
          {label: '业主单位', prop: 'projectUnit', slot: true,minWidth: '190'},
        ],
        formData: [
          { type: 7, fieldName: 'province', value: '',props: {multiple: true,value: 'id',expandTrigger: 'hover'}, placeholder: '项目地区', options:[]},
          { type: 5, fieldName: 'time', value: '', placeholder: '中标时间', startTime: 'startBidTime', endTime: 'endBidTime',timeList:[],dateTo:this.formatDate(new Date()) },
          { type: 6, fieldName: 'money', value: '', placeholder: '中标金额', startMoney: 'minAmount', endMoney: 'maxAmount',moneyList:[] },
          { type: 4, fieldName: 'boundTypes', value: '', placeholder: '业绩类型', options: [],width:150},
          { type: 4, fieldName: 'projectTypes', value: '', placeholder: '项目类型', options: [],width:150},
          { type: 1, fieldName: 'cgbl', value: '', placeholder: '持股比例', options: [],width:100},
          { type: 3, fieldName: 'searchValue', 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%'},
        ],
        timeList: ['近三天', '近七天', '近半月', '自定义'],
        moneyList: ['5000万以下', '5000万-1亿', '1亿-5亿', '5亿-10亿','10亿以上', '自定义'],
        dataEXCEL:{},
        dialogExportVisible:false,
        dialogExportVisible1:false,
        exportTableData:[
          {
            "bidTime":"2023-09-21",
            "companyId":329637,
            "address":"浙江省",
            "stockPercent":"4.87%",
            "boundType":"施工",
            "projectUnit":"浙江浙能北仑发电有限公司",
            "memberLevel":"四级企业",
            "companyName":"浙江华业电力工程股份有限公司",
            "projectType":"机电工程",
            "bidAmount":"64.9565万元",
            "projectName":"浙江浙能北仑发电有限公司5号炉后包覆区域省煤器和后包覆受热面检修",
            "projectId":"147703347",
            "uipId":null,
            "projectUnitUipId":null
          },
          {
            "bidTime":"2023-09-21",
            "companyId":329637,
            "address":"河南省-郑州市",
            "stockPercent":"1.56%",
            "boundType":"施工",
            "projectUnit":"郑州地铁集团有限公司运营分公司",
            "memberLevel":"四级企业",
            "companyName":"中铁电气化局集团第三工程有限公司",
            "projectType":"机电工程",
            "bidAmount":"74.8018万元",
            "projectName":"郑州市轨道交通1号线、城郊线一期2023年加装摄像机技改项目",
            "projectId":"147703347",
            "uipId":null,
            "projectUnitUipId":null
          },
        ],
        value:'',
        exportData:{}
      }
    },
    created() {
      this.dataRegion()
      this.handleQuery()
      this.formData[1].timeList=this.timeList;
      this.formData[2].moneyList=this.moneyList;
      this.formData[5].options=this.cgblList;

      //业绩类型
      getDictType('bound_type').then(result=>{
        let data = result.code == 200 ? result.data:[];
        if(data.length > 0){
          for (var i=0;i<data.length;i++){
            this.formData[3].options.push({
              name: data[i].dictLabel,
              value: data[i].dictValue,
            })
          }
        }
      })
      //项目类型
      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
        }
        this.dataEXCEL=JSON.parse(JSON.stringify(data));
        businessList(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.$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')
      },

      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
        exportWinBid(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-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;
      }
    }
  }
  .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>
