<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"
            :expand-on-click-node="false"
            :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-search-bar>
        <template #left>
        </template>
        <template #right>
          <el-date-picker
            v-model="beginTime"
            type="date"
            size="small"
            value-format="yyyy-MM-dd"
            placeholder="选择开始日期"
            @change="getInfo()">
          </el-date-picker>
          <el-date-picker
            v-model="endTime"
            type="date"
            size="small"
            value-format="yyyy-MM-dd"
            placeholder="选择结束日期"
            @change="getInfo()">
          </el-date-picker>
        </template>
      </ai-search-bar>
      <div class="statistics-top">
        <div class="statistics-top__item">
          <span>排查人数</span>
          <h2 style="color: #2266FF;">{{ info['累计排查'] }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>今日排查</span>
          <h2 style="color: #22AA99;">{{ info['今日排查'] }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>核酸人数</span>
          <h2 style="color: #F8B425">{{ info['累计核酸人数'] }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>今日核酸</span>
          <h2 style="color: red">{{ info['今日核酸'] }}</h2>
        </div>
      </div>
      <ai-card title="排查数据统计">
        <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>
        </template>
        <template #content>
          <div class="middle">
            <div class="chart2" style="height: 200px; width: 100%;"></div>
          </div>
        </template>
      </ai-card>
    </template>
  </ai-list>
</template>

<script>
  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'
        },
        endTime: '',
        beginTime: '',
        chart2: '',
        currIndex: -1,
        list: [],
        unitName: '',
        areaId: ''
      }
    },

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

    mounted () {
      this.endTime = this.$moment().format('YYYY-MM-DD')
      this.beginTime = this.$moment(new Date().getTime() - 7 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
      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.getInfo()
      })
      this.instance.post(`/app/appdvcpconfig/getCorpArea`).then(res => {
        if (res.code == 0) {
          this.areaId = res.data
          this.getTree(res.data)
        }
      })
    },

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

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

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

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

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

      getTree (areaId) {
        this.instance.post(`/admin/area/queryAllArea?id=${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))
        }
      },

      getInfo () {
        this.loading = true
        this.instance.post(`/app/appepidemicpreventioncommunitymanagement/statistics?areaId=${this.areaId}&beginTime=${this.beginTime || ''}&endTime=${this.endTime || ''}`).then(res => {
          if (res.code == 0) {
            this.initChart1(res.data.trend)
            this.initChart2(res.data.sourceMap)
            this.info = res.data.numberMap
            this.loading = false
          } else {
            this.loading = false
          }
        })
      },

      initChart2 (data) {
        const values = data.map(v => {
          return {
            value: v.c,
            name: this.dict.getLabel('EP_registerInfoType', v.type)
          }
        }) || []
        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.ymd) : []
        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'
          },
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 20,
              minValueSpan: 20
            },
            {
              start: 0,
              end: 20
            }
          ],
          series: [
            {
              name: '已采核酸',
              type: 'line',
              data: data.map(v => v['已采核酸'])
            },
            {
              name: '排查人数',
              type: 'line',
              data: data.map(v => v['排查人数'])
            }
          ]
        }
        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;
      justify-content: center;
      height: 220px;
    }

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