import * as echarts from '../../../../ec-canvas/echarts';
import {
  getPersonalFile,
  getFamilyRelationshipList,
  provincialSatisfactionPageList,
  communitySatisfactionPageList,
  eventPageList,
  recorHistory,
  serviceNumber
} from '../../../../utils/api'
var chart;

Page({
  data: {
    ec: {
      lazyLoad: true
    },
    id: '',
    tabList: [{
      label: '12345投诉',
      value: '1'
    }, {
      label: '省满意度调查',
      value: '2'
    }, {
      label: '社区满意度自查',
      value: '3'
    }],
    userInfo: {},
    userList: [],
    eventList: [],
    provincialList: [],
    communityList: [],
    businessIndex: 0,
    recorHistoryList: []
  },
  onLoad(options) {
    this.setData({
      id: options.id
    })

    this.getPersonal()
    this.getFamily()
    this.geteventPageList()

    this.getRecorHistory()

    this.getData()
  },
  tabChange(e) {
    this.setData({
      businessIndex: e.detail
    })
    console.log(e.detail)
    if (e.detail == '0') {
      this.geteventPageList()
    }
    if (e.detail == '1') {
      this.getprovincialSatisfactionPageList()
    }
    if (e.detail == '2') {
      this.getcommunitySatisfactionPageList()
    }
  },
  getPersonal() {
    getPersonalFile({ resid: this.data.id }).then(res => {
      this.setData({
        userInfo: res.data
      })
    })
  },
  getFamily() {
    getFamilyRelationshipList({
      id: this.data.id,
      type: '0'
    }).then(res => {
      this.setData({
        userList: res.data
      })
    })
  },
  getprovincialSatisfactionPageList() {
    let params = {
      residList: [this.data.id],
      pageNo: 1,
      pageSize: 5
    }
    provincialSatisfactionPageList(params).then(res => {
      this.setData({
        provincialList: res.data
      })
    })
  },
  getcommunitySatisfactionPageList() {
    let params = {
      residList: [this.data.id],
      pageNo: 1,
      pageSize: 5
    }
    communitySatisfactionPageList(params).then(res => {
      this.setData({
        communityList: res.data
      })
    })
  },
  geteventPageList() {
    let params = {
      residList: [this.data.id],
      pageNo: 1,
      pageSize: 5
    }
    eventPageList({ eventType: "3", ...params }).then(res => {
      this.setData({
        eventList: res.data.list
      })
    })
  },
  eventView(e) {
    wx.navigateTo({
      url: '/subpages/statistics/pages/event/detail/detail?id='+e.currentTarget.dataset.id,
    })
  },
  provincialView(e) {
    console.log(e.currentTarget.dataset.id);
    wx.navigateTo({
      url: '/subpages/statistics/pages/dissatisfied/detial/detail?id='+JSON.stringify(e.currentTarget.dataset.id),
    })
  },
  communityView(e) {
    console.log(e.currentTarget.dataset.id);
    wx.navigateTo({
      url: '/subpages/statistics/pages/dissatisfied/detial/detail?id='+JSON.stringify(e.currentTarget.dataset.id),
    })
  },
  getRecorHistory() {
    recorHistory().then(res => {
      this.setData({
        recorHistoryList: res.data
      })
    })
  },
  getData() {
    this.selectComponent('#enjoyService').init((canvas, width, height, dpr) => {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素比
      });
      canvas.setChart(chart);
      console.log(this.data.id)
      serviceNumber({ resid: this.data.id }).then(res => {

        const barData = res.data.map(item => {
          return {
            name: item.classification,
            value: item.classificationNum
          }
        })
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: '0%',
            left: '0%',
            right: '0%',
            bottom: '30',
          },
          xAxis: {
            type: 'category',
            data: barData.map(item => item.name),
            axisLabel: {
              textStyle: {
                fontSize: '12',
                color: '#999999'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#EAEAEA',
              },
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: true,
              color: '#EAEAEA'
            },
            axisLabel: {
              show: false
            }
          },
          series: [{
            type: 'bar',
            barWidth: 16,
            data: barData.map(item => item.value),
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "#3A80E7"
                }, {
                  offset: 1,
                  color: "#88B8FF"
                }]),
                label: {
                  show: true,
                  formatter: `{c}`,
                  position: 'top',
                  textStyle: {
                    fontSize: '13',
                    color: '#333333'
                  }
                }
              }
            },
          }]
        };
        chart.setOption(option);

      })

      return chart;
    });
  }
})