<template>
  <div class="app-container">
      <div class="app-content">
           <div class="title">
             客户来源分析
          </div>
         <el-form class="search-form" :inline="true" >
          <el-form-item >
            <el-select v-model="value" placeholder="请选择日期">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item >
            <treeselect :clearable="false"  v-model="deptId"  :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
          </el-form-item>
          <el-form-item>
             <el-select v-model="userIds" multiple  placeholder="请选择员工">
                <el-option
                  v-for="item in users"
                  :key="item.userId"
                  :label="item.nickName"
                  :value="item.userId">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item>
              <el-button type="cyan" icon="el-icon-search"   @click="customer">搜索</el-button>
          </el-form-item>
        </el-form>
         <div class="data-box">
           <el-row>
             <el-col :span="12">
               <div class="echart-box">
                 <div id="echart-customer"></div>
               </div>
                <div class="table-box">
                 <el-table
                  :data="list"
                  border
                  max-height="500"
                  style="width: 100%;">
                  <el-table-column
                    prop="name"
                    label="地区">
                  </el-table-column>
                  <el-table-column
                    prop="value"
                    label="数量">
                  </el-table-column>
                  </el-table>
                </div>
             </el-col>
             <el-col :span="12">
               <div class="echart-box">
                 <div id="echart-customer2"></div>
               </div>
                <div class="table-box">
                 <el-table
                  :data="payList"
                  border
                  max-height="500"
                  style="width: 100%;">
                  <el-table-column
                    prop="name"
                    label="地区">
                  </el-table-column>
                  <el-table-column
                    prop="value"
                    label="数量">
                  </el-table-column>
                  </el-table>
                </div>
             </el-col>
           </el-row>

        </div>
      </div>

    </div>
</template>

<script>
import { customerMap } from "@/api/crm/statistics";
import { getUserListByDeptId} from "@/api/company/companyUser";
import echarts from 'echarts'
import 'echarts/map/js/china' // 导入中国地图数据
import resize from '../../dashboard/mixins/resize'
import { treeselect } from "@/api/company/companyDept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
name: 'Index',
mixins: [resize],
components: { Treeselect },
watch: {
// 监听deptId
'deptId': 'currDeptChange'
},
data() {
return {
 deptOptions:[],
 deptId:undefined,
 userIds:undefined,
 users:[],
 dateRange:[],
 chart: null,
 chart2: null,
 options: [{
    value: '1',
    label: '今天'
  }, {
    value: '2',
    label: '昨天'
  }, {
    value: '3',
    label: '本周'
  }, {
    value: '4',
    label: '上周'
  }, {
    value: '5',
    label: '本月'
  }
  , {
    value: '6',
    label: '上月'
  }
  , {
    value: '7',
    label: '本季度'
  }
  , {
    value: '8',
    label: '上季度'
  }
  , {
    value: '9',
    label: '本年'
  }
  , {
    value: '10',
    label: '上年'
  }],
  value: '5',

  dates:[],
  listDate:[],
  list: [
          { value: 0, name: '1' },
          { value: 310, name: '2' },
          { value: 234, name: '3' },
          { value: 135, name: '4' },
          { value: 1548, name: '5' }
  ],
  payListDate:[],
  payList: [
          { value: 0, name: '1' },
          { value: 310, name: '2' },
          { value: 234, name: '3' },
          { value: 135, name: '4' },
          { value: 1548, name: '5' }
  ],
}
},
created() {
this.getTreeselect();
},
methods: {
currDeptChange(val){
console.log(val)
this.deptId=val;
 this.getUserListByDeptId();
},
/** 查询部门下拉树结构 */
getTreeselect() {
var that=this;
treeselect().then((response) => {
  this.deptOptions = response.data;
  console.log(this.deptOptions)
  if(response.data!=null&&response.data.length>0){
    this.deptId=response.data[0].id;
    that.customer()
  }
});
},
handleExport(){
  var data;
  if(this.userIds!=undefined){
      data={type:this.value,userIds:this.userIds+"",deptId:this.deptId}
  }
  else{
      data={type:this.value,deptId:this.deptId}
  }
  exportCustomerRate(data).then((response) => {

     this.download(response.msg);
  });

},
getUserListByDeptId() {
  this.userIds=undefined;
  var data={deptId:this.deptId};
  getUserListByDeptId(data).then(response => {
    this.users = response.data;

  });
},
customer(){
    var data;
    if(this.userIds!=undefined){
        data={type:this.value,userIds:this.userIds+"",deptId:this.deptId}
    }
    else{
        data={type:this.value,deptId:this.deptId}
    }
    customerMap(data).then((response) => {
     this.list=response.list;
     this.payList=response.payList;

      if(this.list!=null){this.list = this.list.map(item => {
       if (item.name == '黑龙') {
         return { ...item, name: '黑龙江' };
       } else {
         return item;
       }
       if (item.name == '内蒙') {
         return { ...item, name: '内蒙古' };
       } else {
         return item;
       }
      });
     }
     if(this.payList!=null){
       this.payList = this.payList.map(item => {
         if (item.name == '黑龙') {
           return { ...item, name: '黑龙江' };
         } else {
           return item;
         }
         if (item.name == '内蒙') {
           return { ...item, name: '内蒙古' };
         } else {
           return item;
         }
       });
     }
      setTimeout(() => {
        this.initEchart();
      }, 500);
  });
},
initEchart(){
   var option = {
     title: {
       text: '全部客户',
       left: 'center'
     },
     tooltip: {
       trigger: 'item'
     },
     visualMap: {
       min: 0,
       max: 500,
       inRange: {
         color: ['#90feff','#e9ff1d', '#dd0000'] // 设定颜色范围
       },
       text: ['多', '少'],
       calculable: true
     },
     series: [
       {
         name: '客户数量',
         type: 'map',
         map: 'china', // 使用中国地图
         label: {
           show: true,
           fontSize: 9,
         },
         itemStyle: {
            borderColor: 'rgba(0, 0, 0, 0.1)' // 设置边界颜色为淡黑色
         },
         data: this.list
       }
     ]
  };

  var option2 = {
     title: {
       text: '成交客户',
       left: 'center'
     },
     tooltip: {
       trigger: 'item'
     },
     visualMap: {
       min: 0,
       max: 500,
       inRange: {
         color: ['#90feff','#e9ff1d', '#dd0000'] // 设定颜色范围
       },
       text: ['多', '少'],
       calculable: true
     },
     series: [
       {
         name: '客户数量',
         type: 'map',
         map: 'china', // 使用中国地图
         label: {
           show: true,
           fontSize: 9,
         },
         itemStyle: {
            borderColor: 'rgba(0, 0, 0, 0.1)' // 设置边界颜色为淡黑色
         },
         data: this.payList
       }
     ]
  };

  this.chart=echarts.init(document.getElementById("echart-customer"));
  this.chart.setOption(option,true);
  this.chart2=echarts.init(document.getElementById("echart-customer2"));
  this.chart2.setOption(option2,true);
},

}
}
</script>

<style lang="scss" scoped>
.app-container{
border: 1px solid #e6e6e6;
padding: 12px;

.app-content{
background-color: white;
.title{
  padding: 20px 30px 0px 30px;
  font-size: 18px;
  font-weight: bold;
  color: black;

}
.search-form{
  margin: 20px 30px 0px 30px;
}
.data-box{
  padding: 30px;
  background-color:  rgb(255, 255, 255);
  height: 100%;

  .echart-box{
    margin: 0 auto;
    text-align: center;
  }
  .el-select{
    margin: 5px 10px;
  }
  .table-box{
    margin-top: 15px;
    .export{
      float: right;
      margin: 10px 0px;
    }
  }
}
}
}
#echart-customer{
width:100%;
height:350px
}
#echart-customer2{
width:100%;
height:350px
}
.vue-treeselect{
width: 217px;
height: 36px;
}

</style>
<style>
.vue-treeselect__control{
display: block;
}
</style>
