<template>
    <div class="charts_area">
        <el-card shadow="never">
<!--            <template #header>-->
<!--                <div class="top_nav flex">-->
<!--                    <template v-for="(item,index) in headerNav">-->
<!--                        <div class="nav_list" v-if="item.show"-->
<!--                            @click="changeNav(index,item.value)">{{ item.label }}<i-->
<!--                            :class="navIndex==index?'on':''"></i></div>-->
<!--                    </template>-->
<!--                </div>-->
<!--            </template>-->
            <div class="search">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
                    <el-form-item prop="blurry">
                        <el-form-item>
                            <el-date-picker
                                v-model="daterange"
                                type="monthrange"
                                range-separator="-"
                                value-format="YYYY-MM-DD"
                                start-placeholder="开始年月"
                                end-placeholder="结束年月"
                                @change="getDate"
                            />
                        </el-form-item>
                    </el-form-item>
                    <!-- <el-form-item prop="blurry">
                        <SelectOrg authorty clearable multiple  v-model="queryParams.deptIds"></SelectOrg>
                    </el-form-item> -->
                    <el-form-item prop="blurry">
                        <SelectUser authorty multiple v-model="queryParams.ownerByIds" ></SelectUser>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <div class="echarts-body">
            <div  style="width:100%;height:600px" ref="chartsDOM"></div>
        </div>
        <div class="table-body">
            <Table ref="publicTable"
                :tableParams="tableParams"
                :isCheckbox='false'
                :rightBtn="[]"
                :btnRole="[]"
                :isPagination="false"
                :tableData="tableData"
            >
            </Table>
        </div>

    </div>


  </template>

  <script setup name="customerRegionDistribution" lang="ts">
  import moment from 'moment'
  import auth from '@/plugins/auth'
  import {useDictCache} from '@/hooks/web/useDict'
  import {tableTypes} from '@/components/Table/types'
  import { getSalesSpreadSummaryTotal } from '@/api/statistics/data';
    import { DataVO, DataQuery } from '@/api/statistics/data/types';
  import { EChartsOption } from 'echarts'
  import * as echarts from 'echarts';
  import China from '@/api/map/China';
  import World from '@/api/map/world';
  import useUserStore from '@/store/modules/user';

  const {userInfo } = useUserStore()
  // import SelectUser from '@/components/SelectOrg/SelectUser.vue'
  const { queryDictDetailByCodes } = useDictCache(['work_data_group', 'follow_up_type',])
  queryDictDetailByCodes()

const daterange = ref('')
const getDate= (val:any)=>{
    tableParams.queryParams.beginCycleTime = val ? val[0] : ''
    tableParams.queryParams.endCycleTime = val ? moment(val[1]).endOf('month').format('YYYY-MM-DD') : ''
}

  // 顶部客户类型切换
const headerNav = [
    // {label: '按洲分布', value: '1',perPrefix: '',show: true},
    {label: '按国家分布', value: '2',perPrefix: '', show: true},
]
const navIndex = ref(1)
const changeNav = (index: number, val: string | number) => {
    navIndex.value = index
    tableParams.queryParams.areaType = val
    tableData.value = []
    handleQuery()
}

const queryFormRef = ref<ElFormInstance>();
const tableParams = reactive<tableTypes<DataQuery, DataVO>>({
    tableColumn: [
        {show: true, label: '排名', prop: 'rankNum', sortable: false},
        {show: true, label: '区域名称', prop: 'areaName', sortable: false},
        {show: true, label: '客户数', prop: 'customerNum', sortable: false},
        {show: true, label: '客户占比(%)', prop: 'customerRatio', sortable: false, render: ({ column }: { column: DataVO }) => {
                 return column.customerRatio +'%'
          }
          },
        {show: true, label: '成交次数', prop: 'orderDealNum', sortable: false},
        {show: true, label: '成交次数占比(%)', prop: 'orderDealRatio', sortable: false, render: ({ column }: { column: DataVO }) => {
                return (column.orderDealRatio ? column.orderDealRatio : 0 )+ '%'

            }},
        {show: true, label: '成交总额', prop: 'orderDealAmount', sortable: false},
        {show: true, label: '成交总额占比(%)', prop: 'orderDealAmountRatio', sortable: false, render: ({ column }: { column: DataVO }) => {
                return (column.orderDealAmountRatio ? column.orderDealAmountRatio : 0 )+ '%'

            }},
    ],
    queryParams: {
        beginCycleTime:null,
        endCycleTime:null,
        blurry:'',
        deptId:'',
        areaType: 2,
        ownerByIds: [userInfo.id],
        // deptIds: [userInfo.deptId],
    },
})

const {queryParams} = toRefs(tableParams);

const publicTable = ref()
const echartsData = ref([])
const tableData = ref([])
/** 搜索按钮操作 */
const handleQuery = async () => {
    getSalesSpreadSummaryTotal(tableParams.queryParams).then(res => {
        if(res.success) {
            let data = []
            res.result.forEach(item=>{
                data.push({seriesName: item.areaName, name :  item.areaName, value : item.customerNum})
            })
            tableData.value = res.result
            if(res.result){
            }
            initEcharts(data)
            // mapChart.setOption(option);
        }
    })
}

  /** 重置按钮操作 */
  const resetQuery = () => {
      queryParams.value = {
          beginCycleTime:null,
          endCycleTime:null,
          blurry:'',
          deptId:'',
          areaType: 2,
          ownerByIds: [userInfo.id],
          deptIds: [userInfo.deptId],
      }
      daterange.value = ''
      handleQuery();
  }
const chartsDOM = ref()
  const initEcharts = (data)=>{
      var mapChart = echarts.init(chartsDOM.value);
      const geoJson: any = World

      console.log(tableData.value, ">>>>>>>>>>>>>...ss")
      // 注册地图数据
      echarts.registerMap('world', geoJson);
      var option = {
          title : {
              text: '世界成交金额地图',
              x:'center',
              y:'top'
          },
          tooltip : {
              trigger: 'item',
              formatter : function (a) {
                  console.log(a)

                  return a.name + '<br/>' + (a.value ? a.value : 0) ;
              }
          },
          toolbox: {
              show : true,
              orient : 'vertical',
              x: 'right',
              y: 'center',
              feature : {
                  mark : {show: true},
                  dataView : {show: false, readOnly: false},
                  restore : {show: true},
                  saveAsImage : {show: true}
              }
          },
          dataRange: {
              min: 0,
              max: 1000000,
              text:['High','Low'],
              realtime: false,
              calculable : true,
              color: ['orangered','yellow','lightskyblue']
          },
          series : [
              {
                  name: '世界成交金额地图',
                  type: 'map',
                  mapType: 'world',
                  roam: true,
                  mapLocation: {
                      y : 60
                  },
                  itemStyle:{
                      emphasis:{label:{show:true}}
                  },
                  data: data,
                  nameMap : {
                      'Afghanistan':'阿富汗',
                      'Angola':'安哥拉',
                      'Albania':'阿尔巴尼亚',
                      'United Arab Emirates':'阿联酋',
                      'Argentina':'阿根廷',
                      'Armenia':'亚美尼亚',
                      'French Southern and Antarctic Lands':'法属南半球和南极领地',
                      'Australia':'澳大利亚',
                      'Austria':'奥地利',
                      'Azerbaijan':'阿塞拜疆',
                      'Burundi':'布隆迪',
                      'Belgium':'比利时',
                      'Benin':'贝宁',
                      'Burkina Faso':'布基纳法索',
                      'Bangladesh':'孟加拉国',
                      'Bulgaria':'保加利亚',
                      'The Bahamas':'巴哈马',
                      'Bosnia and Herzegovina':'波斯尼亚和黑塞哥维那',
                      'Belarus':'白俄罗斯',
                      'Belize':'伯利兹',
                      'Bermuda':'百慕大',
                      'Bolivia':'玻利维亚',
                      'Brazil':'巴西',
                      'Brunei':'文莱',
                      'Bhutan':'不丹',
                      'Botswana':'博茨瓦纳',
                      'Central African Republic':'中非共和国',
                      'Canada':'加拿大',
                      'Switzerland':'瑞士',
                      'Chile':'智利',
                      'China':'中国',
                      'Ivory Coast':'象牙海岸',
                      'Cameroon':'喀麦隆',
                      'Democratic Republic of the Congo':'刚果民主共和国',
                      'Republic of the Congo':'刚果共和国',
                      'Colombia':'哥伦比亚',
                      'Costa Rica':'哥斯达黎加',
                      'Cuba':'古巴',
                      'Northern Cyprus':'北塞浦路斯',
                      'Cyprus':'塞浦路斯',
                      'Czech Republic':'捷克共和国',
                      'Germany':'德国',
                      'Djibouti':'吉布提',
                      'Denmark':'丹麦',
                      'Dominican Republic':'多明尼加共和国',
                      'Algeria':'阿尔及利亚',
                      'Ecuador':'厄瓜多尔',
                      'Egypt':'埃及',
                      'Eritrea':'厄立特里亚',
                      'Spain':'西班牙',
                      'Estonia':'爱沙尼亚',
                      'Ethiopia':'埃塞俄比亚',
                      'Finland':'芬兰',
                      'Fiji':'斐',
                      'Falkland Islands':'福克兰群岛',
                      'France':'法国',
                      'Gabon':'加蓬',
                      'United Kingdom':'英国',
                      'Georgia':'格鲁吉亚',
                      'Ghana':'加纳',
                      'Guinea':'几内亚',
                      'Gambia':'冈比亚',
                      'Guinea Bissau':'几内亚比绍',
                      'Equatorial Guinea':'赤道几内亚',
                      'Greece':'希腊',
                      'Greenland':'格陵兰',
                      'Guatemala':'危地马拉',
                      'French Guiana':'法属圭亚那',
                      'Guyana':'圭亚那',
                      'Honduras':'洪都拉斯',
                      'Croatia':'克罗地亚',
                      'Haiti':'海地',
                      'Hungary':'匈牙利',
                      'Indonesia':'印尼',
                      'India':'印度',
                      'Ireland':'爱尔兰',
                      'Iran':'伊朗',
                      'Iraq':'伊拉克',
                      'Iceland':'冰岛',
                      'Israel':'以色列',
                      'Italy':'意大利',
                      'Jamaica':'牙买加',
                      'Jordan':'约旦',
                      'Japan':'日本',
                      'Kazakhstan':'哈萨克斯坦',
                      'Kenya':'肯尼亚',
                      'Kyrgyzstan':'吉尔吉斯斯坦',
                      'Cambodia':'柬埔寨',
                      'South Korea':'韩国',
                      'Kosovo':'科索沃',
                      'Kuwait':'科威特',
                      'Laos':'老挝',
                      'Lebanon':'黎巴嫩',
                      'Liberia':'利比里亚',
                      'Libya':'利比亚',
                      'Sri Lanka':'斯里兰卡',
                      'Lesotho':'莱索托',
                      'Lithuania':'立陶宛',
                      'Luxembourg':'卢森堡',
                      'Latvia':'拉脱维亚',
                      'Morocco':'摩洛哥',
                      'Moldova':'摩尔多瓦',
                      'Madagascar':'马达加斯加',
                      'Mexico':'墨西哥',
                      'Macedonia':'马其顿',
                      'Mali':'马里',
                      'Myanmar':'缅甸',
                      'Montenegro':'黑山',
                      'Mongolia':'蒙古',
                      'Mozambique':'莫桑比克',
                      'Mauritania':'毛里塔尼亚',
                      'Malawi':'马拉维',
                      'Malaysia':'马来西亚',
                      'Namibia':'纳米比亚',
                      'New Caledonia':'新喀里多尼亚',
                      'Niger':'尼日尔',
                      'Nigeria':'尼日利亚',
                      'Nicaragua':'尼加拉瓜',
                      'Netherlands':'荷兰',
                      'Norway':'挪威',
                      'Nepal':'尼泊尔',
                      'New Zealand':'新西兰',
                      'Oman':'阿曼',
                      'Pakistan':'巴基斯坦',
                      'Panama':'巴拿马',
                      'Peru':'秘鲁',
                      'Philippines':'菲律宾',
                      'Papua New Guinea':'巴布亚新几内亚',
                      'Poland':'波兰',
                      'Puerto Rico':'波多黎各',
                      'North Korea':'北朝鲜',
                      'Portugal':'葡萄牙',
                      'Paraguay':'巴拉圭',
                      'Qatar':'卡塔尔',
                      'Romania':'罗马尼亚',
                      'Russia':'俄罗斯',
                      'Rwanda':'卢旺达',
                      'Western Sahara':'西撒哈拉',
                      'Saudi Arabia':'沙特阿拉伯',
                      'Sudan':'苏丹',
                      'South Sudan':'南苏丹',
                      'Senegal':'塞内加尔',
                      'Solomon Islands':'所罗门群岛',
                      'Sierra Leone':'塞拉利昂',
                      'El Salvador':'萨尔瓦多',
                      'Somaliland':'索马里兰',
                      'Somalia':'索马里',
                      'Republic of Serbia':'塞尔维亚共和国',
                      'Suriname':'苏里南',
                      'Slovakia':'斯洛伐克',
                      'Slovenia':'斯洛文尼亚',
                      'Sweden':'瑞典',
                      'Swaziland':'斯威士兰',
                      'Syria':'叙利亚',
                      'Chad':'乍得',
                      'Togo':'多哥',
                      'Thailand':'泰国',
                      'Tajikistan':'塔吉克斯坦',
                      'Turkmenistan':'土库曼斯坦',
                      'East Timor':'东帝汶',
                      'Trinidad and Tobago':'特里尼达和多巴哥',
                      'Tunisia':'突尼斯',
                      'Turkey':'土耳其',
                      'United Republic of Tanzania':'坦桑尼亚联合共和国',
                      'Uganda':'乌干达',
                      'Ukraine':'乌克兰',
                      'Uruguay':'乌拉圭',
                      'United States':'美国',
                      'Uzbekistan':'乌兹别克斯坦',
                      'Venezuela':'委内瑞拉',
                      'Vietnam':'越南',
                      'Vanuatu':'瓦努阿图',
                      'West Bank':'西岸',
                      'Yemen':'也门',
                      'South Africa':'南非',
                      'Zambia':'赞比亚',
                      'Zimbabwe':'津巴布韦'
                  }

              }
          ]
      };
      mapChart.setOption(option);
  }

onMounted(async () => {
    // 初始化统计图对象
    handleQuery()

});
  </script>

  <style lang="scss" scoped>
  .top_nav{
    margin: 0;
  }
  .search .el-form-item--default{
    margin-bottom:0;
  }
.echarts-body{
    background-color: #fff;
    border-radius: 4px;
    margin:16px 0;
    padding:20px;
}
.table-body{
    flex:1
}
  </style>
