<template>
  <div id="region-custom-container">
    <div class="search-zone">
      <el-cascader collapse-tags clearable
      :props="{multiple: true,value:'name',children:'city',label:'name'}" :options="locationOptions"  
      @change="handleRegionChange" placeholder="请选择区域" 
      style="width:240px;marginBottom:30px;"></el-cascader>
    </div>
    <el-table :data="dataList" border @sort-change="handleSortChange" 
    row-key="ind" :tree-props="{ children: 'Item' }">
      <el-table-column label="区域" align="center" prop="region">
        <template slot-scope="{row}">
          {{row.Name}}
        </template>
      </el-table-column>
      <el-table-column label="正式" align="center" sortable="custom" prop="FormalNum">
        <template slot-scope="{row}">
          <span class="table-data-detail" v-if="row.CompanyAreaNumNumList[0].FormalNum!=0"
           @click="toDetail(row,'正式')">{{row.CompanyAreaNumNumList[0].FormalNum}}</span>
          <span v-else>{{row.CompanyAreaNumNumList[0].FormalNum}}</span>
        </template>
      </el-table-column>
      <el-table-column label="试用" align="center" sortable="custom" prop="TryOutNum">
        <template slot-scope="{row}">
          <span class="table-data-detail" v-if="row.CompanyAreaNumNumList[0].TryOutNum!=0" 
          @click="toDetail(row,'试用')">{{row.CompanyAreaNumNumList[0].TryOutNum}}</span>
          <span v-else>{{row.CompanyAreaNumNumList[0].TryOutNum}}</span>
        </template>
      </el-table-column>
      <el-table-column label="推进" align="center" sortable="custom" prop="TryStagePushNum">
        <template slot-scope="{row}">
          <span class="table-data-detail" v-if="row.CompanyAreaNumNumList[0].TryStagePushNum!=0"
           @click="toDetail(row,'推进')">{{row.CompanyAreaNumNumList[0].TryStagePushNum}}</span>
          <span v-else>{{row.CompanyAreaNumNumList[0].TryStagePushNum}}</span>
        </template>
      </el-table-column>
      <el-table-column label="跟踪" align="center" sortable="custom" prop="TryStageFollowNum">
        <template slot-scope="{row}">
          <span class="table-data-detail" v-if="row.CompanyAreaNumNumList[0].TryStageFollowNum!=0" 
          @click="toDetail(row,'跟踪')">{{row.CompanyAreaNumNumList[0].TryStageFollowNum}}</span>
          <span v-else>{{row.CompanyAreaNumNumList[0].TryStageFollowNum}}</span>
        </template>
      </el-table-column>
      <el-table-column label="预备" align="center" sortable="custom" prop="TryStageReadyNum">
        <template slot-scope="{row}">
          <span class="table-data-detail" v-if="row.CompanyAreaNumNumList[0].TryStageReadyNum!=0" 
          @click="toDetail(row,'预备')">{{row.CompanyAreaNumNumList[0].TryStageReadyNum}}</span>
          <span v-else>{{row.CompanyAreaNumNumList[0].TryStageReadyNum}}</span>
        </template>
      </el-table-column>
      <el-table-column label="未分类" align="center" sortable="custom" prop="TryStageInitNum">
        <template slot-scope="{row}">
          <span class="table-data-detail" v-if="row.CompanyAreaNumNumList[0].TryStageInitNum!=0" 
          @click="toDetail(row,'未分类')">{{row.CompanyAreaNumNumList[0].TryStageInitNum}}</span>
          <span v-else>{{row.CompanyAreaNumNumList[0].TryStageInitNum}}</span>
        </template>
      </el-table-column>
      <el-table-column label="合计" align="center" sortable="custom" prop="TotalNum">
        <!-- 自定义表头 -->
        <template slot="header" slot-scope="{column,$index}">
          <span>
            合计
          </span>
          <el-tooltip content="该区域的正式和试用客户合计数量" placement="top" effect="dark">
            <i class="el-icon-info" style="color: #333333;"/>
          </el-tooltip>
        </template>
        <!-- 自定义表头 -->
        <template slot-scope="{row}">
          {{row.CompanyAreaNumNumList[0].TotalNum}}
        </template>
      </el-table-column>
      <div slot="empty" class="table-noData">
        <img src="~@/assets/img/data_m/nodata-big.png">
        <span>暂无数据</span>
      </div>
    </el-table>
  </div>
</template>

<script>

import {locationOptions} from "./location"
import { customInterence } from '@/api/api.js'
export default {
  name:'regionCustom',
  data() {
    return {
      Role:localStorage.getItem('Role'),
      isAdmin:false,//如果为true 则可以跳转
      locationOptions,
      dataList:[],
      // 不参与筛选的列表
      allDataList:[]
    }
  },
  computed:{
    // 是否是管理员和Ficc管理员
    // isAdmin(){
    //   return ['admin','ficc_admin'].includes(this.Role)
    // }
  },
  created() {
    this.getList()
  },
  // watch:{
  //   allDataList:{
  //     handler:function(newVal,oldVal){
  //       console.log(newVal,'newVal');
  //       console.log(oldVal,'oldVal');
  //     },
  //     deep:true
  //   }
  // },
  methods: {
    // 地区搜索
    handleRegionChange(regionData) {
      let tempArr=[]
      if(regionData.length>0){
        tempArr=this.allDataList.filter(item =>regionData.findIndex(it => it[0]==item.Name)!=-1)
        // 为了不影响 做一次深拷贝  filter不会改变原数组内容，但是会改变原数组指向 使得原数组和新数组的指向一样
        this.dataList = _.cloneDeep(tempArr)
        this.dataList.forEach((element,index) =>{
          element.Item=element.Item.filter(item => regionData.findIndex(it => it[0]==element.Name && it[1]==item.Name)!=-1)
          if(element.Item.length==0){
            this.dataList.splice(index,1)
          }
        })
      }else{
        tempArr=this.allDataList.filter(item => true)
        this.dataList = _.cloneDeep(tempArr)
      }
      
    },
    // 排序
    handleSortChange({order,prop}){
      this.dataList.sort((a,b)=>{
        if(order == 'ascending'){
          return a.CompanyAreaNumNumList[0][prop]-b.CompanyAreaNumNumList[0][prop]
        }else if(order == 'descending'){
          return b.CompanyAreaNumNumList[0][prop]-a.CompanyAreaNumNumList[0][prop]
        }
      })
      this.dataList.forEach(element => {
        if(element.Item){
          element.Item.sort((a,b)=> {
            if(order == 'ascending'){
              return a.CompanyAreaNumNumList[0][prop]-b.CompanyAreaNumNumList[0][prop]
            }else if(order == 'descending'){
              return b.CompanyAreaNumNumList[0][prop]-a.CompanyAreaNumNumList[0][prop]
            }
          })
        }
        
      });
    },
    // 点击进入详情
    toDetail(row,status){
      // console.log(row,status);
      // 非超管、ficc管理员人员 查看详情
      if(!this.isAdmin){
        console.log(row,status);
        let ids = ''
        const StatusMap = {
          '正式':'FormalIds',
          '试用':'TryOutIds',
          '推进':'TryStagePushIds',
          '跟踪':'TryStageFollowIds',
          '预备':'TryStageReadyIds',
          '未分类':'TryStageInitIds'
        }
        ids = row.CompanyAreaNumNumList[0][StatusMap[status]]
        if(!ids) return
        this.$router.push({
          path:'/regionCustomerDetail',
          query:{
            title:row.parentName?`${row.parentName}/${row.Name}/${status}`:`${row.Name}/${status}`,
            ids:ids
          }
        })
        return
      }

      const StatusArray=['未分类','推进','跟踪','预备']
      let Status = StatusArray.includes(status) ? '试用':status
      let TryStage = ['试用','正式'].includes(status) ? 0:(StatusArray.findIndex(item =>item==status)+1)
      let regionData=[]
      if(!row.Item){
        regionData.push([row.parentName,row.Name])
      }else{
        row.Item.map(item =>{ 
          regionData.push([row.Name,item.Name])
        })
      } 
      sessionStorage.setItem('regionData',JSON.stringify(regionData))
      // this.$router.push({
      //   path:'/customList',
      //   query:{CompanyType:'ficc',Status,TryStage,valueLocation:'regionData'}
      // })
      // params参数 刷新即没
      this.$router.push({
        name:'客户列表',
        params:{CompanyType:'ficc',Status,TryStage,valueLocation:'regionData'}
      })
    },
    // 获取区域客户列表
    getList(){
      customInterence.getRegionCustom({
        Date:this.$moment(new Date()).format('YYYY-MM-DD'),
        ProductId:1
      }).then(res=>{
        if(res.Ret==200){
          this.isAdmin=res.Data.IsAdmin
          // 过滤掉没有省市、以及省市没有客户的数据
          this.dataList = res.Data.List ? 
          res.Data.List.filter(element => {
            element.Item=element.Item.filter(item => item.Name && item.CompanyAreaNumNumList[0].TotalNum)
            return element.Name && element.CompanyAreaNumNumList[0].TotalNum
          })
          : []
        }
        let index=1
        this.dataList.forEach(element => {
          element.ind = index
          index++
          element.Item.forEach((item=>{
            item.ind = index
            // 所在市级的省级
            item.parentName = element.Name
            index++
          }))
        });
        this.handleSortChange({order:'descending',prop:'FormalNum'})
        // this.allDataList=JSON.parse(JSON.stringify(this.dataList))
        this.allDataList=_.cloneDeep(this.dataList)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  #region-custom-container{
    background-color: white;
    padding: 30px;
    height: calc(100vh - 120px);
    overflow-y: auto;
    box-sizing: border-box;
    .table-data-detail{
      color: rgb(64, 158, 255);
      cursor: pointer;
    }
    .table-noData{
      margin-top:28vh;
      color:#999;
      img{
        display:block;
        width:260px;
        height:200px;
        margin: auto;
      }
    }
  }
</style>
<style lang="scss">
  #region-custom-container{
    .el-input__inner::placeholder{
      color: #606266;
      font-size: 16px;
    }
    .el-table__indent{
      padding-left:0!important;
    }
    .el-table__placeholder{
      width: 0;
    }
    .el-table__expand-icon{
      position: absolute;
      left: 5px;
    }
  }
</style>