<template>
  <div class="app-container">
    <div class="app-container-search main-bgcolor main-radius">
      <h1 class="">客群分布</h1>
      <br />
      <!-- 搜索工作栏 -->
      <StatsForm
        ref="searchForm"
        :searchFormParam="{ queryParams, dataSource }"
        :showSearch.sync="showSearch"
        @handleQuery="handleQuery"
        @selectChage="selectChage"
      ></StatsForm>
    </div>
    <div
      class="echart"
      id="map"
      :style="{ float: 'left', width: '100%', height: '800px' }"
  ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import china from "./echarts/map/json/china.json";
import {
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
} from "echarts/components";
import "echarts/extension/bmap/bmap";
import { MapChart } from "echarts/charts";
import { getBusinessNameList } from '@/api/basic/businessInfo'
import StatsForm from '@/components/Customer/SearchForm'
import StatsTable from '@/components/EmptyTable'
import { getGoodsNameList } from '@/api/basic/goodsInfo'
export default {
  name: 'DiversionStats',
  components: {
    StatsForm,
    StatsTable,
  },
  data() {
    return {
      //展示层
      foldBoole: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 窜货统计列表
      list: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        dealerId: null,
        dealerName: null,
        batchId: null,
        goodsId: null,
        goodsName: null,
        num: null,
        belongBusinessId: null,
        belongBusinessName: null,
        businessName: null,
        timeHorizon: null,
        createTime: [],
      },
      //表对象
      dataSource: [
        {
          key: 'businessName', //商户名称
          itemType: 'select',
          label: '商户名称',
          placeholder: '请选择品牌',
          onEnterKeyUp: this.handleQuery,
          options: [],
          isNet: true,
        },
        {
          key: 'goodsName', //商品名称
          itemType: 'select',
          label: '商品',
          placeholder: '请输入',
          onEnterKeyUp: this.handleQuery,
          options: [],
        },
        {
          key: 'timeHorizon', //时间范围
          itemType: 'datePicker',
          label: '时间范围',
          placeholder: '请选择',
          onEnterKeyUp: this.handleQuery,
        },
      ],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        businessName: [
          { required: true, message: '商户名称不能为空', trigger: 'blur' },
        ],
        goodsName: [
          { required: true, message: '商品名称不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  mounted() {
    this.initMap();
  },
  created() {
    this.getList()
    this.getBusinessNameList()
  },
  methods: {
    initMap() {
      echarts.use([
        ToolboxComponent,
        TooltipComponent,
        VisualMapComponent,
        GeoComponent,
        MapChart,
      ]);
      var chartDom = document.getElementById("map");
      var mapChart = echarts.init(chartDom);
      var option;
      echarts.registerMap("china", china);
      mapChart.setOption(
        (option = {
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 1,
            borderType: "solid",
          },
          tooltip: {
            trigger: "item",
          },
          geo: [
            {
              // 绘制geo地图
              map: "china",
              selectedMode: "single",
              roam: false, // 是否可缩放
              aspectScale: 0.8,
              layoutCenter: ["50%", "50%"], // 地图在画布所处位置
              layoutSize: 1000,
              label: {
                // 文字基本样式
                show: false,
                color: "#0A62FF",
                fontSize: "0",
              },
              itemStyle: {
                borderColor: "00FFCC",
              },
              emphasis: {
                label: {
                  color: "#0A62FF",
                },
                itemStyle: {
                  areaColor: "#FB923C",
                },
              },
              select: {
                itemStyle: {
                  areaColor: "#FB923C",
                },
              },
              regions: [
                //隐藏南海诸岛
                {
                  name: "南海诸岛",
                  itemStyle: {
                    // 隐藏地图
                    opacity: 0, // 为 0 时不绘制该图形
                  },
                  label: {
                    show: false, // 隐藏省份文案，false 不隐藏
                  },
                },
                {
                  name: "江西",
                  itemStyle: {
                    areaColor: "#B5D1FC",
                  },
                },
                {
                  name: "四川",
                  itemStyle: {
                    areaColor: "#B5D1FC",
                  },
                },
              ],
            },
          ],
        })
      );
      mapChart.dispatchAction({
        type: "geoSelect",
        name: "四川",
      });
      option.geo[0].regions[1].selected = true;
      option && mapChart.setOption(option);
      mapChart.on("click", function (params) {
        console.log(params);
      });
    },
    selectChage({ value, type, book }) {
      if (type != 'goodsName') {
        this.queryParams.goodsName = ''
      }
      if (!book) {
        return
      }
      getGoodsNameList({
        ids: value,
      }).then((res) => {
        console.log(res, 'res')
        this.$nextTick(() => {
          this.dataSource[1].options = res.data.map((el) => {
            let obj = {
              label: el.goodsName,
              value: el.id,
              key: el.id,
            }
            return obj
          })
        })
      })
    },
    /** 查询列表 */
    getList() {
      this.loading = true
      // 执行查询
      getBusinessNameList(this.queryParams).then((response) => {
        this.list = response.data.list
        this.total = response.data.total
        this.loading = false
      })
    },
    //获取商户名称
    async getBusinessNameList() {
      const res = await getBusinessNameList()
      this.$nextTick(() => {
        this.dataSource[0].options = res.data.map((el) => {
          let obj = {
            label: el.businessName,
            value: el.id,
            key: el.id,
          }
          return obj
        })
      })
    },
    //获取商品名称
    async getGoodsNameList() {
      const res = await getGoodsNameList()
      this.$nextTick(() => {
        this.dataSource[1].options = res.data.map((el) => {
          let obj = {
            label: el.goodsName,
            value: el.id,
            key: el.id,
          }
          return obj
        })
      })
    },
    /** 取消按钮 */
    cancel() {
      this.open = false
      this.reset()
    },
    /** 表单重置 */
    reset() {
      this.form = {
        businessName: undefined,
        goodsName: undefined,
        timeHorizon: undefined,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if( !this.queryParams.businessName || !this.queryParams.goodsName || !this.queryParams.timeHorizon || this.queryParams.timeHorizon.length == 0 ){
        this.$message.error("搜索栏所有参数不能为空");
        return false;
      }
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleExport() {
      // 处理查询参数
      let params = { ...this.queryParams }
      params.pageNo = undefined
      params.pageSize = undefined
      this.$modal
        .confirm('是否确认导出所有窜货统计数据项?')
        .then(() => {
          this.exportLoading = true
          return exportDiversionStatsExcel(params)
        })
        .then((response) => {
          this.$download.excel(response, '窜货统计.xls')
          this.exportLoading = false
        })
        .catch(() => {})
    },
  },
}
</script>
