// miniprogram/pages/ruins/index.js
import * as echarts from '../../ec-canvas/echarts';
Page({

  /**
   * 页面的初始数据
   */
  chart: undefined,
  data: {
    show: false,
    ec: {
      onInit: undefined,
      lazyload: true
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const db = wx.cloud.database()
    const $ = db.command.aggregate;
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.setData({
      ec: {
        onInit: this.initChart.bind(this)
      }
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    this.chart && this.chart.dispose && this.chart.dispose();
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  initChart: async function (canvas, width, height, dpr) {
    this.chart && this.chart.dispose && this.chart.dispose();
    this.chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr // 像素
    });

    const db = wx.cloud.database();
    const _ = db.command;
    let list = await db.collection('map_json').where({
      region: _.eq("china")
    }).get();
    console.log(JSON.stringify(list.data[0].geoJson))
    echarts.registerMap('CN', list.data[0].geoJson);
    var option = {
      tooltip: {
        show: false
      },
      geo: {
        map: "CN",
        roam: true,//改成true也完全没效果
        zoom: 1.25,
        scaleLimit: {
          //滚轮缩放的极限控制
          min: 1.25,
          max: 6,
        },
        top: "middle",
        label: {
          normal: {
            show: true,
            fontSize: "10",
            color: "rgb(249,80,77)",
          },
        },
        itemStyle: {
          normal: {
            areaColor: "rgba(0,0,0,0)",
            borderColor: "rgb(249,80,77)",
          },
          emphasis: {
            areaColor: "rgba(249,80,77,.3)",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            borderWidth: 0,
          },
        },
      },
      series: []
    };
    this.chart.setOption(option);
    this.chart.on("click", (params) => {
      wx.navigateTo({
        url: '/pages/provincialArea/index?title=' + params.region.name,
      })
    })
    return this.chart;
  }
})