<template>
  <ai-list class="statistics" isTabs style="width: 100%">
    <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"
              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="search.areaId"
            :default-expanded-keys="defaultExpanded"
            :default-checked-keys="defaultChecked"
            @current-change="onTreeChange">
          </el-tree>
        </div>
      </div>
    </template>
    <template slot="content" v-loading="loading">
      <div class="statistics-top">
        <div class="statistics-top__item">
          <span>居民总数</span>
          <h2 style="color: #2266FF;">{{ info.total }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>今日新增</span>
          <h2 style="color: #22AA99;">{{ info.increase }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>今日流失</span>
          <h2 style="color: #F8B425">{{ info.decrease }}</h2>
        </div>
      </div>
      <ai-card title="趋势图">
        <template #content>
          <div class="chart" style="height: 340px; width: 100%;"></div>
          <ai-empty v-if="false" style="height: 148px;"></ai-empty>
        </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 {
        chart: null,
        info: {},
        chartWidth: '',
        loading: false,
        defaultExpanded: [],
        defaultChecked: [],
        areaTree: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        areaId: '',
        currIndex: -1,
        areaList: [],
        unitName: '',
        search: {
          current: 1,
          areaId: ''
        }
      }
    },

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

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

    mounted () {
      this.search.areaId = this.user.info.areaId
      this.areaName = this.user.info.areaName
      this.getTree()
      this.getAreaList()
      this.loading = true
      this.$nextTick(() => {
        this.chart = echarts.init(document.querySelector('.chart'))
        window.addEventListener('resize', this.onResize)
        this.getInfo()
      })
    },

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

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

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

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

      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.search.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.instance.post(`/app/wxcp/wxcustomerlog/customerStatistic`).then(res => {
          if (res.code == 0) {
            this.info = res.data.today
            this.initChart(res.data.list)
            this.loading = false
          } else {
            this.loading = false
          }
        })
      },

      initChart (data) {
        const x = Object.keys(data)
        const y = Object.values(data)
        let option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            type: "plain"
          },
          grid: {
            left: '20px',
            right: '38px',
            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: y.map(v => v.total)
            },
            {
              name: '新增居民数',
              type: 'line',
              data: y.map(v => v.increase)
            },
            {
              name: '流失居民数',
              type: 'line',
              data: y.map(v => v.decrease)
            }
          ]
        }
        this.chart.setOption(option)
      }
    }
  }
</script>

<style scoped lang="scss">
.villagecode {
  .table-tags {
    .el-tag {
      margin-right: 8px;

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

  .statistics {
    ::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;
    }

  .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: 2px;
  }

  .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>
