<template>
    <div class="members">
      <head-form
        title="集团成员"
        :form-data="formData"
        :query-params="queryParams"
        :total="tableDataTotal"
        :isExcel="false"
        @handle-search="handleSearch"
      >
        <template slot="slot">
          <div class="search-box">
            <span class="search-box-t"
                  :class=" queryParams.companyType||
                             queryParams.companyTypes.length > 0 ? 'search-box-ta' : ''"
                  @click="handleSearch1">筛选<i :class="searchState ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></span>
            <div v-show="searchState" id="showContent" class="search-main">
              <div class="item">
                <span class="wrap_label">科技型企业</span>
                <div class="item_ckquery">
                  <!--<span :class="{color_text:queryParams.companyTypes.length == 0}" @click="changeBeCurrent('','companyTypes')">全部</span>-->
                  <template v-for="(item,index) in kjxqy">
                    <span :class="{color_text:queryParams.companyTypes.includes(item.value)}" @click="changeBeCurrent(item.value,'companyTypes')">{{item.name}}</span>
                  </template>
                </div>
              </div>
              <div class="item">
                <span class="wrap_label">企业类型</span>
                <div class="item_ckquery">
                  <!--<span :class="{color_text:queryParams.companyTypes.length == 0}" @click="changeBeCurrent('','companyTypes')">全部</span>-->
                  <template v-for="(item,index) in qyType">
                    <span :class="{color_text:item.dictValue == queryParams.companyType}" @click="handleChange('1',item.dictValue)">{{item.dictLabel}}</span>
                  </template>
                </div>
              </div>
              <div class="item">
                <span class="wrap_label">持股比例</span>
                <div class="item_ckquery">
                  <template v-for="(item,index) in cgblList">
                    <span :class="{color_text:item == cgblName}" @click="handleChange('2',item)">{{item}}</span>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </template>
      </head-form>
      <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
      <tables
        v-if="!isSkeleton"
        :defaultSort="defaultSort"
        :tableLoading="tableLoading"
        :tableData="tableData"
        :forData="forData"
        :tableDataTotal="tableDataTotal"
        :queryParams="queryParams"
        :MaxPage=500
        @handle-current-change="handleCurrentChange"
        @sort-change="sortChange"
      >
        <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="stockPercent" slot-scope="scope">
          <div>{{scope.row.stockPercent || '--'}}{{scope.row.stockPercent ?  '%':''}}</div>
        </template>
      </tables>
    </div>
</template>

<script>
  import {memberList,memberCount} from '@/api/detail/groupAccount/groupAccount'
  import dataRegion from '@/assets/json/dataRegion'
  import { getDictType } from '@/api/main'
  import mixin from '../../party-a/mixins/mixin'
  export default {
    name: 'members',
    props: ['customerId'],
    mixins: [mixin],
    data(){
      return{
        isSkeleton:true,
        tableLoading:false,
        isDetails: false,
        defaultSort: {prop: 'time', order: 'descending'},
        queryParams: {
          combineId: this.customerId,
          pageNum: 1,
          pageSize: 20,
          companyTypes:[],
          companyType:'',
        },
        forData: [
          {label: '企业名称', prop: 'companyName', minWidth: '250', slot: true},
          {label: '成员层级', prop: 'combineMemberLevel', minWidth: '100'},
          {label: '法定代表人', prop: 'corporatePerson', minWidth: '100'},
          {label: '注册资本', prop: 'regCapital', minWidth: '150', sortable: 'custom', descending: '3', ascending: '4'},
          {label: '持股比例', prop: 'stockPercent', minWidth: '100', slot: true, sortable: 'custom', descending: '3', ascending: '4'},
          {label: '成立日期', prop: 'registeredDate', minWidth: '100'},
          {label: '企业地区', prop: 'address', minWidth: '200'},
        ],
        formData: [
          { type: 4, fieldName: 'combineMemberLevels', value: '', placeholder: '成员层级', options:[]},
          { type: 1, fieldName: 'businessType', value: '', placeholder: '主营业务', options:[]},
          { type: 7, fieldName: 'province', value: '',props: {multiple: true,value: 'id',expandTrigger: 'hover'}, placeholder: '地区', options:[]},
          { type: 6, fieldName: 'money', value: '', placeholder: '注册资本', startMoney: 'minAmount', endMoney: 'maxAmount',moneyList:[] },
          { type: 0, fieldName: 'penalizeReasonType', value: '', placeholder: '筛选', options: []},
          { type: 3, fieldName: 'searchValue', value: '', placeholder: '输入关键词查询'},
        ],
        cycj:[
          {
            name:'集团本身',
            value:'集团本身'
          },
          {
            name:'一级企业',
            value:'一级企业'
          },
          {
            name:'二级企业',
            value:'二级企业'
          },
          {
            name:'三级企业',
            value:'三级企业'
          },
          {
            name:'四级企业',
            value:'四级企业'
          },
          {
            name:'其他企业',
            value:'其他企业'
          },
        ],
        kjxqy:[
          {
            name:'高新技术企业',
            value:'3.2.1.'
          },
          {
            name:'科技型中小企业',
            value:'3.2.2.'
          },
          {
            name:'国家级企业技术中心',
            value:'3.2.3.'
          },
          {
            name:'省级企业技术中心',
            value:'3.2.4.'
          },
          {
            name:'专精特新',
            value:'3.2.5.'
          },
          {
            name:'雏鹰企业',
            value:'3.2.6.'
          },
          {
            name:'小巨人企业',
            value:'3.2.7.'
          },
        ],
        tableData:[],
        tableDataTotal:0,
        searchState:false,
        moneyList: ['1000万以下', '1000万-5000万', '5000万-1亿', '1亿-10亿','10亿以上', '自定义'],
        qyType:[],
        cgblList:['100%','50%以上','20%以上','5%以上','1%-5%'],
        cgblName:'',
        paramsData:[],  //储存组件筛选的条件
      }
    },
    watch:{
      searchState:{
        handler(newVal, olVal) {
          if (newVal) {
            setTimeout(() => {
              document.addEventListener('click', this.handleSearch1);
            }, 0);
          } else {
            document.removeEventListener('click', this.handleSearch1);
          }
        }
      }
    },
    created() {
      this.handleQuery()
      this.getMemberCount()
      this.dataRegion()
      this.formData[0].options=this.cycj;
      this.formData[3].moneyList=this.moneyList;
      //企业类型
      getDictType('company_type_new').then(result=>{
        let data = result.code == 200 ? result.data:[];
        this.qyType=data;
      })
    },
    methods: {
      //主营业务
      getMemberCount(){
        memberCount({combineId: this.queryParams.combineId}).then(res=>{
          let data = res.data
          let list=[]
          let qtArr=[]
          for(let key in data){
            if(key === '其他'){
              qtArr.push({
                name:  key+ '（' + data[key] + '）',
                value: key,
                key:data[key],
                disabled:data[key] !=0 ? false : true
              })
            }else {
              if(data[key] !=0){
                list.push({
                  name:  key+ '（' + data[key] + '）',
                  value: key,
                  key:data[key],
                  disabled:data[key] !=0 ? false : true
                })
              }
            }
          }
          list=list.concat(qtArr)
          // list.sort(function(a, b) {
          //   return b.key - a.key;
          // });
          this.formData[1].options=list
        })
      },
      // 筛选
      handleSearch1(event){
        // this.searchState=!this.searchState;
        let dom = document.getElementById("showContent");
        if(dom){
          if (!dom.contains(event.target)) {
            this.searchState = !this.searchState;
            document.removeEventListener('click', this.handleQuery);
          }
        }
      },
      handleQuery(params){
        this.paramsData=params;
        this.tableLoading=true
        let data = this.getAreaList(params || this.queryParams)
        memberList(data).then(res=>{
          this.isSkeleton = false
          this.tableLoading = false
          if(res.code === 200){
            this.tableData = res.rows
            this.tableDataTotal = res.total
          }else {
            this.tableData = []
          }
        })
      },
      //地区
      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":[]
                    });
                  }
                }
              }
            }
          }
        }
        this.addressList = str;
        this.formData[2].options=str;
      },
      changeBeCurrent(index,name) {
        if(index){
          let i = this.queryParams[name].indexOf(index)
          if(i == -1){
            this.queryParams[name].push(index);
          }else{
            this.queryParams[name].splice(i,1);
          }
        }else{
          this.queryParams[name] = []
        }
        if(this.paramsData){
          this.paramsData.companyType=this.queryParams.companyType
          this.paramsData.companyTypes=this.queryParams.companyTypes
          this.paramsData.pageNum =1
          this.queryParams.pageNum =1
        }
        this.handleQuery(this.paramsData ? this.paramsData : this.queryParams);
      },
      handleChange(key,name) {
        if(key === '1'){
          if(name === this.queryParams.companyType){
            this.queryParams.companyType=''
          }else {
            this.queryParams.companyType=name
          }
          if(this.paramsData){
            this.paramsData.companyType=this.queryParams.companyType
            this.paramsData.pageNum =1
            this.queryParams.pageNum =1
          }
        }
        if(key === '2'){
          if(name === this.cgblName){
            this.cgblName=''
          }else {
            this.cgblName=name;
          }
          if(this.cgblName){
            if(name === '100%'){
              this.queryParams.minStockPercent=1
            }
            if(name === '50%以上'){
              this.queryParams.minStockPercent=0.5
            }
            if(name === '20%以上'){
              this.queryParams.minStockPercent=0.2
            }
            if(name === '5%以上'){
              this.queryParams.minStockPercent=0.05
            }
            if(name === '1%-5%'){
              this.queryParams.minStockPercent=0.01
              this.queryParams.maxStockPercent=0.05
            }
          }else {
            this.queryParams.minStockPercent=''
            this.queryParams.maxStockPercent=''
          }
          if(this.paramsData){
            this.paramsData.minStockPercent=this.queryParams.minStockPercent
            this.paramsData.maxStockPercent=this.queryParams.maxStockPercent
            this.paramsData.pageNum =1
            this.queryParams.pageNum =1
          }
        }
        this.handleQuery(this.paramsData ? this.paramsData : this.queryParams);
      },
      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:''
          // provinceIds.length>0?this.queryParams.provinceIds = provinceIds:''
          // cityIds.length>0?this.queryParams.cityIds = cityIds:''
          // districtIds.length>0?this.queryParams.districtIds = districtIds:''
        }
        return params
      },
      sortChange({ column, prop, order }){
        this.queryParams.orderName = prop
        if(column.order === "ascending"){
          this.queryParams.orderType = 'asc'
        }else if(column.order === "descending"){
          this.queryParams.orderType = 'desc'
        }else {
          this.queryParams.orderType=''
          this.queryParams.orderName=''
        }
        this.pageIndex = 1;
        this.handleQuery()
      },
      //分页
      handleCurrentChange(e){
        let params = this.formParams()
        params.pageNum = e
        this.queryParams.pageNum = e
        this.handleQuery(params)
        setTimeout(() => {
          this.$nextTick(() => {
            this.$children[1].$refs.tableRef.bodyWrapper.scrollTop = 0
          });
        }, 500);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .members{
    background: #ffffff;
    border-radius: 4px;
    padding: 16px;
    .headForm{
      margin-bottom: 14px;
      .common-title{
        margin-right: 24px;
      }
    }
    .search-box {
      display: inline-block;
      border-radius: 4px;
      border: 1px solid #D9D9D9;
      width: 82px;
      /*cursor: pointer;*/
      position: relative;
      .search-box-t {
        font-size: 14px;
        font-weight: 400;
        line-height: 32px;
        color: #999999;
        margin-right: 8px;
        text-align: center;
        width: 82px;
        display: inline-block;
        cursor: pointer;
        i {
          color: rgba(35, 35, 35, 0.4);
          margin-left: 5px
        }
      }
      .search-box-ta {
        color: #0081FF;
        i {
          color: #0081FF;
        }
      }
      .search-main{
        background: #ffffff;
        box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
        border-radius: 4px;
        width: 640px;
        //height: 337px;
        padding: 16px;
        position: absolute;
        top: 34px;
        left: 0;
        z-index: 2001;
        .item{
          margin-bottom: 5px;
          display: flex;
          /*align-items: center;*/
          font-size: 14px;
          .wrap_label{
            color: rgba(35,35,35,0.8);
            margin-right: 12px;
            line-height: 24px;
            width: 77px;
            text-align: right;
            /*float: left;*/
          }
          .item_ckquery{
            position: relative;
            width: 520px;
            /*float: left;*/
            /*flex: 1;*/
            span{
              color: #232323;
              padding: 3px 6px;
              margin-bottom: 5px;
              display: inline-block;
              cursor: pointer;
              margin-right: 8px;
            }
            .color_text{
              background: #F3F4F5;
              border-radius: 4px;
              color: #0081FF;
            }
            .select-active{
              color: #0081FF;
            }
          }

          .cascader-region {
            position: absolute;
            left: 0;
            top: -6px;
            opacity: 0;
            line-height: 22px;
          }
        }
      }
    }
    ::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;
      }
    }
    ::v-deep .el-icon-arrow-down,.el-icon-arrow-up{
      font-size: 14px;
      color:#232323 !important;
    }
  }
</style>
