<template>
  <ai-list class="statistics" isTabs style="width: 100%" v-loading="loading">
    <template #left>
      <div class="villagecode-left">
        <div class="villagecode-left__title">
          <h2>地区</h2>
        </div>
        <div class="addressBook-left__list">
          <div class="addressBook-left__list--title">
            <el-input
              class="addressBook-left__list--search"
              size="mini"
              clearable
              placeholder="请输入地区名称"
              v-model="unitName"
              suffix-icon="iconfont iconSearch">
            </el-input>
          </div>
          <el-tree
            :filter-node-method="filterNode"
            ref="tree"
            :props="defaultProps"
            node-key="id"
            :data="areaTree"
            highlight-current
            :current-node-key="areaId"
            :default-expanded-keys="defaultExpanded"
            :default-checked-keys="defaultChecked"
            @current-change="onTreeChange">
          </el-tree>
        </div>
      </div>
    </template>
    <template slot="content">
      <ai-card title="近12个月居民参与活动人数统计">
        <template #content>
          <div class="chart1" style="height: 300px; width: 100%;"></div>
          <ai-empty v-if="false" style="height: 148px;"></ai-empty>
        </template>
      </ai-card>
      <ai-card title="活动统计">
        <template #right>
          <el-date-picker
            v-model="time1"
            type="month"
            size="small"
            :clearable="false"
            @change="getInfo"
            value-format="yyyy-MM"
            placeholder="请选择月份">
          </el-date-picker>
        </template>
        <template #content>
          <div class="middle">
            <div class="left">
              <div class="left-item">
                <h2>活动发布数量</h2>
                <div>
                  <span style="color: rgb(34, 102, 255);">{{ info['活动发布数量'] }}</span>
                </div>
              </div>
              <div class="left-item">
                <h2>活动报名人数</h2>
                <div>
                  <span style="color: rgb(34, 170, 153);">{{ info['活动报名人数'] || 0 }}</span>
                </div>
              </div>
              <div class="left-item">
                <h2>发布动态条数</h2>
                <div>
                  <span style="color: rgb(248, 180, 37);">{{ info['发布动态条数'] }}</span>
                </div>
              </div>
              <div class="left-item">
                <h2>发布动态人员占比</h2>
                <div>
                  <span style="color: red;">{{ info['发布动态人员占比']  }}%</span>
                </div>
              </div>
            </div>
            <div class="right">
              <h2>居民参与类型占比</h2>
              <div class="right-chart">
                <div class="chart2" style="height: 200px; width: 100%;"></div>
              </div>
            </div>
          </div>
        </template>
      </ai-card>
      <ai-card title="村民参与活动记录">
        <template #right>
          <el-date-picker
            v-model="time2"
            type="month"
            size="small"
            :clearable="false"
            @change="getInfo"
            value-format="yyyy-MM"
            placeholder="请选择月份">
          </el-date-picker>
        </template>
        <template #content>
          <ai-table
            style="margin-top: 12px;"
            :border="true"
            tableSize="small"
            :total="total"
            :tableData="list"
            :col-configs="colConfigs"
            :isShowPagination="false"
            :stripe="false"
            @getList="getInfo">
          </ai-table>
        </template>
      </ai-card>
    </template>
  </ai-list>
</template>

<script>
  import { mapState } from 'vuex'
  import * as echarts from 'echarts'
  export default {
    name: 'Statistics',

    props: {
      instance: Function,
      dict: Object
    },

    data () {
      return {
        chart1: null,
        info: {},
        chartWidth: '',
        loading: false,
        defaultExpanded: [],
        defaultChecked: [],
        areaTree: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        total: 0,
        colConfigs: [
          { prop: 'name',  label: '姓名', align: 'left' },
          { prop: 'gender', label: '性别', align: 'center', formart: v => this.dict.getLabel('sex', v) },
          { prop: 'num1', label: '报名次数', align: 'center' },
          { prop: 'num2', label: '发布动态条数', align: 'center' }
        ],
        time1: '',
        time2: '',
        chart2: '',
        currIndex: -1,
        list: [],
        areaList: [],
        unitName: '',
        areaId: ''
      }
    },

    computed: {
      ...mapState(['user'])
    },

    watch: {
      unitName (val) {
        this.$refs.tree.filter(val)
      }
    },

    mounted () {
      this.time1 = this.$moment(new Date()).format('YYYY-MM')
      this.time2 = this.$moment(new Date()).format('YYYY-MM')
      this.areaId = this.user.info.areaId
      this.areaName = this.user.info.areaName
      this.getTree()
      this.getAreaList()
      this.loading = true
      this.$nextTick(() => {
        this.chart1 = echarts.init(document.querySelector('.chart1'))
        this.chart2 = echarts.init(document.querySelector('.chart2'))
        window.addEventListener('resize', this.onResize)

        this.dict.load('sex').then(() => {
          this.getInfo()
        })
      })
    },

    destroyed () {
      window.removeEventListener('resize', this.onResize)
    },

    methods: {
      onResize () {
        this.chart1.resize()
      },

      onTreeChange (e) {
        this.areaId = e.id
        this.areaName = e.name

        this.$nextTick(() => {
          this.getInfo()
        })
      },

      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },

      getTree () {
        this.instance.post(`/admin/area/queryAllArea?id=${this.user.info.areaId}`).then(res => {
          if (res.code === 0) {
            let parent = res.data.map(v => {
              v.label = v.name
              v.children = []

              return v
            }).filter(e => !e.parentid)[0]
            this.defaultExpanded = [parent.id]
            this.defaultChecked = [parent.id]
            this.areaId = parent.id
            this.addChild(parent, res.data)
            this.areaTree = [parent]

            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(parent.id)
            })
          }
        })
      },

      addChild (parent, list) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].parentId === parent.id) {
            parent.children.push(list[i])
          }
        }

        if (list.length > 0) {
          parent['children'].map(v => this.addChild(v, list))
        }
      },

      getAreaList() {
        this.instance.post(`/admin/area/queryAreaByParentId?id=341021104000`).then(res => {
          if (res.code == 0) {
            this.areaList = res.data
          }
        })
      },

      getInfo () {
        this.loading = true
        this.instance.post(`/app/appvillageactivityinfo/statistic?areaId=${this.areaId}&time1=${this.time1 || ''}&time2=${this.time2 || '-'}`).then(res => {
          if (res.code == 0) {
            this.info = res.data.total
            this.initChart1(res.data.twelve)
            this.initChart2(res.data.gender)
            this.list = res.data.rank || []
            this.loading = false
          } else {
            this.loading = false
          }
        })
      },

      initChart2 (data) {
        const values = data && Object.keys(data).map(v => {
          return {
            value: data[v],
            name: v
          }
        }) || []
        let option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            right: '5%',
            top: 'center',
            orient: 'vertical'
          },
          series: [
            {
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '20',
                  color: '#2266FF'
                }
              },
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                normal:{ 
                  label:{ 
                    show: true, 
                    formatter: '{b} : {c} ({d}%)' 
                  }, 
                  labelLine :{show:true} 
                } 
              },
              labelLine: {
                show: false
              },
              color: ['#2266FF', '#22AA99', '#F8B425'],
              data: values
            }
          ]
        }
        this.chart2.setOption(option)
      },

      initChart1 (data) {
        const x = data ? data.map(v => v.time) : []
        let option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            type: "plain"
          },
          grid: {
            left: '10px',
            right: '28px',
            bottom: '14px',
            top: '30px',
            containLabel: true
          },
          color: ['#2266FF', '#22AA99', '#F8B425'],
          xAxis: {
            type: 'category',
            axisLabel: {
              align: 'center',
              padding: [2, 0, 0, 0],
              interval: 0,
              fontSize: 14,
              color: '#666666'
            },
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#E1E5EF'
              }
            },
            data: x
          },
          yAxis: {
            axisTick: {
              length: 0,
              show: false
            },
            splitLine: {
              show: true,
              lineStyle:{
                color: ['#E1E5EF'],
                width: 1,
                type: 'solid'
              }
            },
            nameTextStyle: {
              color: '#666666',
              align: 'left'
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              color: '#666666'
            },
            type: 'value'
          },
          series: [
            {
              name: '活动报名人数',
              type: 'line',
              data: data.map(v => v.total)
            },
            {
              name: '发布动态人数',
              type: 'line',
              data: data.map(v => v.active)
            }
          ]
        }
        this.chart1.setOption(option)
      }
    }
  }
</script>

<style scoped lang="scss">
  .statistics {
    padding: 0!important;
    ::v-deep .ai-list__content--right-wrapper {
      background: transparent!important;
      box-shadow: none!important;
      padding: 0 0 0!important;
    }

    ::v-deep .ai-list {
      padding: 0!important;
    }

    .middle {
      display: flex;
      height: 220px;

      & > div {
        width: 50%;
      }

      .right {
        h2 {
          font-size: 16px;
        }
      }

      .left {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        padding-right: 20px;

        .left-item {
          width: calc((100% - 10px) / 2);
          padding: 16px;
          margin-right: 10px;
          margin-bottom: 10px;
          background: #f9f9f9;
          -webkit-box-shadow: 0 4px 6px -2px rgb(15 15 21 / 15%);
          box-shadow: 0 4px 6px -2px rgb(15 15 21 / 15%);
          border-radius: 4px;

          &:nth-of-type(2n) {
            margin-right: 0;
          }

          h2 {
            margin-bottom: 16px;
            color: #888;
            font-size: 16px;
            font-weight: normal;
          }

          div {
            display: flex;
            align-items: center;

            i {
              font-style: normal;
            }

            span {
              font-size: 1.5em;
              color: #333;
              font-weight: 600;
            }
          }
        }
      }
    }

    .addressBook-left__list {
      height: calc(100% - 40px);
      padding: 8px 8px;
      overflow: auto;

      .addressBook-left__tags--item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
        padding: 0 8px 0 16px;
        color: #222222;

        &.addressBook-left__tags--item-active, &:hover {
          background: #E8EFFF;
          color: #2266FF;

          i, span {
            color: #2266FF;
          }
        }

        span {
          font-size: 14px;
        }

        i {
          cursor: pointer;
          color: #8e9ebf;
          font-size: 16px;
        }
      }

      .addressBook-left__list--title {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        .addressBook-left__list--search {
          flex: 1;
          ::v-deep input {
            width: 100%;
          }
        }

        .el-button {
          width: 84px;
          flex-shrink: 1;
          margin-right: 8px;
        }
      }

      span {
        color: #222222;
        font-size: 14px;
      }

      ::v-deep .el-tree {
        background: transparent;

        .el-tree-node__expand-icon.is-leaf {
          color: transparent!important;
        }

        .el-tree-node__content > .el-tree-node__expand-icon {
          padding: 4px;
        }

        .el-tree-node__content {
          height: 32px;
        }

        .el-tree__empty-text {
          color: #222;
          font-size: 14px;
        }

        .el-tree-node__children .el-tree-node__content {
          height: 32px;
        }

        .el-tree-node__content:hover {
          background: #E8EFFF;
          color: #222222;
          border-radius: 2px;
        }

        .is-current > .el-tree-node__content {
          &:hover {
            background: #2266FF;
            color: #fff;
          }

          background: #2266FF;
          
          span {
            color: #fff;
          }
        }
      }
    }

    ::v-deep .ai-list__content--left {
      margin-right: 10px;
    }

    .villagecode-left {
      width: 100%;
      height: auto;
      background: #FAFAFB;

      .villagecode-left__title {
        display: flex;
        align-items: center;
        height: 40px;
        padding: 0 16px;
        background: #fff;

        h2 {
          color: #222;
          font-size: 14px;
        }
      }

      .villagecode-left__list {
        height: calc(100% - 40px);
        padding: 8px 0;
        overflow: auto;

        span {
          display: block;
          height: 40px;
          line-height: 40px;
          padding: 0 24px;
          color: #222222;
          font-size: 14px;
          cursor: pointer;
          border-right: 2px solid transparent;
          background: transparent;

          &:hover {
            color: #2266FF;
            background: #E8EFFF;
          }

          &.left-active {
            color: #2266FF;
            border-color: #2266FF;
            background: #E8EFFF;
          }
        }
      }
    }

    ::v-deep .ai-list__content--right {

      .ai-list__content--right-wrapper {
        min-height: 100%;
      }
    }

    .statistics-top {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      & > div {
        flex: 1;
        height: 96px;
        line-height: 1;
        margin-right: 20px;
        padding: 16px 24px;
        background: #FFFFFF;
        box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
        border-radius: 4px;

        &:last-child {
          margin-right: 0;
        }

        h3 {
          font-size: 24px;
        }

        span {
          display: block;
          margin-bottom: 16px;
          color: #888888;
          font-size: 16px;
        }
      }
    }
  }
</style>
