<template>
  <div class="AppResidentFile">
    <u-tabbar v-model="currentTabBar" :list="list" @change="changeTab" style="height: 0"></u-tabbar>

    <div v-if="currentTabBar == 0">
      <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>

      <div class="peopleGroup" v-if="currentTabs == 0">
        <div class="topcard">
          <div class="cards">
            <div class="items">
              <span class="items1">1</span>
              <span>群聊人数</span>
            </div>

            <div class="items">
              <span class="items2">1</span>
              <span>群成员总数</span>
            </div>

            <div class="items">
              <span class="items3">1</span>
              <span>今日入群</span>
            </div>

            <div class="items">
              <span class="items4">1</span>
              <span>今日退群</span>
            </div>
          </div>
        </div>

        <div class="echartes" id="echarts1">
          <div class="echartss"></div>
        </div>
      </div>

      <div class="people" v-if="currentTabs == 1">
        <div class="topcard">
          <div class="cards">
            <div class="items">
              <span class="items1">1</span>
              <span>群聊人数</span>
            </div>

            <div class="items">
              <span class="items2">1</span>
              <span>群成员总数</span>
            </div>

            <div class="items">
              <span class="items3">1</span>
              <span>今日入群</span>
            </div>

            <div class="items">
              <span class="items4">1</span>
              <span>今日退群</span>
            </div>
          </div>
        </div>

        <div class="echartes" id="echarts2">
          <div class="echartss"></div>
        </div>
      </div>
    </div>

    <div v-if="currentTabBar == 1">1</div>

    <div v-if="currentTabBar == 2">2</div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { mapState } from 'vuex'

export default {
  name: 'AppResidentFile',
  appName: '居民档案',
  components: {},
  props: {},
  data() {
    return {
      list: [
        {
          iconPath: 'home',
          selectedIconPath: 'home-fill',
          text: '统计分析',
          isDot: true,
          customIcon: false,
        },
        {
          iconPath: 'photo',
          selectedIconPath: 'photo-fill',
          text: '居民列表',
          customIcon: false,
        },

        {
          iconPath: 'play-right',
          selectedIconPath: 'play-right-fill',
          text: '居民群列表',
          customIcon: false,
        },
      ],
      currentTabBar: 0,
      currentTabs: 0,
      tabList: [
        {
          name: '居民群管理',
        },
        {
          name: '居民管理',
        },
      ],
      Echarts1: null,
      Echarts2: null,
    }
  },
  computed: {
    ...mapState(['user', 'global']),
  },
  watch: {},
  onLoad() {
    this.getEchart()
  },
  mounted() {
    this.Echarts1 = echarts.init(document.getElementById('echarts1'))
  },
  methods: {
    getEchart() {
      this.$http.post(`/app/appresident/queryCustInfoByAreaId?areaId=${this.user.areaId}`).then((res) => {
        if (res.code === 0) {
          this.initEcharts1(res.data['年龄层次'])
          this.initEcharts2(res.data['人口分布'])
        }
      })
    },

    initEcharts1(data) {
      var option = {
        xAxis: {
          type: 'category',
          data: data.map((v) => v.v1),
          axisLine: {
            lineStyle: { color: '#157EFF' },
          },
          axisLabel: {
            show: true,
            interval: 0,
          },
          axisTick: {
            interval: 'auto',
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#666',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#D8DDE6',
            },
          },
          axisLabel: {
            show: true,
            interval: 0,
          },
        },
        series: [
          {
            color: '#0072FF',
            barWidth: 30,
            data: data.map((v) => v.v2),
            type: 'line',
          },
        ],
      }

      option && this.Echarts1.setOption(option)
    },

    initEcharts2(data) {
      var options = {
        xAxis: {
          type: 'category',
          data: data.map((v) => v.name),
          axisLine: {
            lineStyle: { color: '#157EFF' },
          },
          axisLabel: {
            show: true,
            interval: 0,
          },
          axisTick: {
            interval: 'auto',
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#666',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#D8DDE6',
            },
          },
          axisLabel: {
            show: true,
            interval: 0,
          },
        },
        series: [
          {
            color: '#0072FF',
            barWidth: 30,
            data: data.map((v) => v.v1),
            type: 'line',
          },
        ],
      }

      options && this.Echarts2.setOption(options)
    },

    changeTab(e) {
      this.currentTabBar = e
    },

    change(index) {
      this.currentTabs = index
      this.$nextTick(() => {
        if (index == 0) {
          this.Echarts1 = echarts.init(document.getElementById('echarts1'))
        } else {
          this.Echarts2 = echarts.init(document.getElementById('echarts2'))
        }
        this.getEchart()
      })

      // this.getList()
      // this.getEchart()
    },
  },
  onReachBottom() {
    // this.current = this.current + 1
    // this.getList()
  },
}
</script>

<style scoped lang="scss">
uni-page-body {
  height: 100%;
}
.AppResidentFile {
  height: 100%;
  .peopleGroup,
  .people {
    .topcard {
      position: relative;
      background: url(http://respub.sinoecare.net/20211221/4-20211221095551.png) no-repeat;
      // background: url(http://respub.sinoecare.net/20211221/44-20211221095613.png) no-repeat;
      background-size: 100% 100%;
      height: 320px;
      .cards {
        box-sizing: border-box;
        position: absolute;
        bottom: -35px;
        width: 92%;
        box-sizing: border-box;
        margin: 0 32px;
        height: 232px;
        background: #ffffff;
        border-radius: 8px;
        z-index: 999;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .items {
          display: flex;
          flex-direction: column;
          align-items: center;
          span {
            font-size: 30px;
            font-weight: 500;
            color: #999999;
          }
          .items1 {
            font-size: 40px;
            font-weight: bold;
            color: #354fc7;
          }
          .items2 {
            font-size: 40px;
            font-weight: bold;
            color: #868686;
          }
          .items3 {
            font-size: 40px;
            font-weight: bold;
            color: #5fba95;
          }
          .items4 {
            font-size: 40px;
            font-weight: bold;
            color: #f09535;
          }
        }
      }
    }

    .echartes {
      margin-top: 64px;
      height: 616px;
      background: #fff;
      box-sizing: border-box;

      .echartss {
        margin: 0 32px;
        height: 100%;
        padding-top: 16px;
        box-sizing: border-box;
      }
    }
  }
}
</style>
