<template>
  <div class="AppResidentFile">
    <u-tabbar v-model="currentTabBar" :list="lists" @change="changeTab" active-color="#3267F0" inactive-color="#C4CAD4" style="height: 0" class="u-tabbar"></u-tabbar>

    <div class="currentTabBar0" 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">{{ groupSum }}</span>
              <span>群聊总数</span>
            </div>

            <div class="items">
              <span class="items2">{{ todayList1.total }}</span>
              <span>群成员总数</span>
            </div>

            <div class="items">
              <span class="items3">{{ todayList1.increase }}</span>
              <span>今日入群</span>
            </div>

            <div class="items">
              <span class="items4">{{ todayList1.decrease }}</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">{{ todayList2.total }}</span>
              <span>居民总数</span>
            </div>

            <div class="items">
              <span class="items3">{{ todayList2.increase }}</span>
              <span>今日新增</span>
            </div>

            <div class="items">
              <span class="items4">{{ todayList2.decrease }}</span>
              <span>今日流失</span>
            </div>
          </div>
        </div>

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

    <div class="currentTabBar1" v-if="currentTabBar == 1">
      <AiTopFixed>
        <u-search placeholder="请输入昵称、姓名" :show-action="false" search-icon-color="#ccc" v-model="search.name" @search=";(page.current = 1), getList()" />
        <AiCell>
          <b slot="label" class="title">共<i v-html="page.total || 0" />个居民</b>
        </AiCell>
      </AiTopFixed>

      <div class="mainPane">
        <AiCell v-for="item in data" :key="item.id" @click.native="showResident(item)">
          <template #label>
            <AiImage :src="item.avatar" preview />
          </template>
          <div class="card wrap start" flex>
            <b>{{ item.name }}</b>
            <div flex class="tag" v-for="(tag, j) in item.tags" :key="j">{{ tag.tagName }}</div>
            <div class="realName" shrink v-html="`真实姓名：${item.realName || '-'}`" />
          </div>
        </AiCell>
      </div>
    </div>

    <div class="currentTabBar2" v-if="currentTabBar == 2">
      <AiTopFixed>
        <u-search placeholder="请输入群名、群主名" :show-action="false" search-icon-color="#ccc" v-model="search.name" @search=";(page.current = 1), getList()" />
        <AiCell>
          <b slot="label" class="title">共<i v-html="page.total || 0" />个居民群</b>
        </AiCell>
      </AiTopFixed>

      <div class="mainPane">
        <AiCell v-for="(item, i) in list" :key="i" @click.native="toGroupList(item)">
          <template #label>
            <AiImage :src="item.avatar" preview />
          </template>
          <div class="card column start" flex>
            <div flex class="groupName">
              <b>{{ item.name || '群聊' }}</b>
              <div class="personCount" v-if="item.personCount">({{ item.personCount }})</div>
            </div>
            <div class="owner" v-html="`群主：${item.ownerName}`" />
            <div flex class="trends">
              <div flex v-html="`今日入群：<em>${item.increase || 0}</em>`" />
              <div flex v-html="`今日退群：<p>${item.decrease || 0}</p>`" />
            </div>
          </div>
        </AiCell>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'AppResidentFile',
  appName: '居民信息管理',
  components: {},
  props: {},
  data() {
    return {
      lists: [
        {
          iconPath: 'http://respub.sinoecare.net/20211227/1n-20211227162529.png',
          selectedIconPath: 'http://respub.sinoecare.net/20211227/1h-20211227164832.png',
          text: '统计分析',
          customIcon: false,
        },
        {
          iconPath: 'http://respub.sinoecare.net/20211227/2n-20211227164853.png',
          selectedIconPath: 'http://respub.sinoecare.net/20211227/2h-20211227164906.png',
          text: '居民列表',
          customIcon: false,
        },

        {
          iconPath: 'http://respub.sinoecare.net/20211227/3n-20211227164927.png',
          selectedIconPath: 'http://respub.sinoecare.net/20211227/3h-20211227165003.png',
          text: '居民群列表',
          customIcon: false,
        },
      ],
      currentTabBar: 0,
      currentTabs: 0,
      tabList: [
        {
          name: '居民群统计',
        },
        {
          name: '居民统计',
        },
      ],
      Echarts1: null,
      Echarts2: null,
      areaId: '',
      current: 1,
      keyword: '',
      data: [],
      page: { current: 1, size: 10, total: 0 },
      search: { name: '' },
      list: [],
      weekList: [],
      groupSum: '',
      todayList1: [],
      todayList2: [],
      counts1: '',
      counts2: '',
      page2: { current: 1, size: 10, total: 0 },
      search2: { name: '' },
      page1: { current: 1, size: 10, total: 0 },
      search1: { name: '' },
    }
  },
  computed: {
    ...mapState(['user', 'global']),
  },
  watch: {},
  onLoad() {
    document.title = '居民信息管理'
    this.getEchart1()
    this.areaId = this.user.areaId
  },
  mounted() {
    this.Echarts1 = echarts.init(document.getElementById('echarts1'))
  },
  methods: {
    getList() {
      this.$http
        .post('/app/wxcp/wxcustomer/list', null, {
          params: { ...this.page1, ...this.search, type: 1 },
        })
        .then((res) => {
          if (res?.data) {
            if (this.page.current > 1) {
              this.data = [...this.data, ...res.data.records]
            } else this.data = res.data.records
            this.page.total = res.data.total
          }
        })
    },

    reachBottom() {
      if (this.page.total > this.list.length) {
        this.page.current++
        this.getList()
      }
    },

    showResident({ id }) {
      id &&
        uni.navigateTo({
          url: './resident?id=' + id,
        })
    },

    getList2() {
      this.$http
        .post('/app/wxcp/wxgroup/list', null, {
          params: { ...this.page2, ...this.search },
        })
        .then((res) => {
          if (res?.data) {
            let meta = res.data.records?.map((e) => ({
              ...e,
              avatar: e?.avatar || this.$cdn + 'groupAvatar.png',
            }))
            if (this.page.current > 1) {
              this.list = [...this.list, ...meta]
            } else this.list = meta
            this.page.total = res.data.total
          }
        })
    },

    reachBottom() {
      if (this.page.total > this.list.length) {
        this.page.current = this.page.current + 1
        this.getList2()
      }
    },

    toGroupList(item) {
      uni.navigateTo({
        url: `./GroupList?id=${item.id}`,
      })
    },

    // 居民群统计
    getEchart1() {
      this.$http.post(`/app/wxcp/wxgroup/groupStatistic`).then((res) => {
        if (res.code === 0) {
          this.weekList = res.data.list
          this.initEcharts1(this.weekList)
          this.groupSum = res.data.groupSum
          this.todayList1 = res.data.today
        }
      })
    },

    // 居民统计
    getEchart2() {
      this.$http.post(`/app/wxcp/wxcustomerlog/customerStatistic?areaId=${this.user.areaId}`).then((res) => {
        if (res.code === 0) {
          this.initEcharts2(res.data.list)
          this.todayList2 = res.data.today
        }
      })
    },

    initEcharts1(data) {
      var option = {
        legend: {
          data: ['群成员总数', '入群人数', '退群人数'],
          y: 'bottom',
        },
        color: ['#4A86FD', '#32C5FF', '#FFAA44'],
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: '9%',
          left: '6%',
          right: '8%',
          bottom: '9%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: Object.keys(data).map((e) => e.substring(e.length - 5, e.length)),
          axisLine: {
            show: true,
            lineStyle: { color: '#666' },
          },
          axisLabel: {
            show: true,
            interval: 0,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#D8DDE6',
            },
          },
          axisLabel: {
            show: true,
            interval: 0,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            lineStyle: {
              normal: {
                lineStyle: {
                  color: '#4A86FD',
                },
              },
            },
            color: '#4A86FD',
            name: '群成员总数',
            type: 'line',
            stack: 'Total',
            data: Object.values(data).map((e) => e.total),
          },
          {
            lineStyle: {
              normal: {
                lineStyle: {
                  color: '#32C5FF',
                },
              },
            },
            color: '#32C5FF',
            name: '入群人数',
            type: 'line',
            stack: 'Total',
            data: Object.values(data).map((e) => e.increase),
          },
          {
            lineStyle: {
              normal: {
                lineStyle: {
                  color: '#FFAA44',
                },
              },
            },
            color: '#FFAA44',
            name: '退群人数',
            type: 'line',
            stack: 'Total',
            data: Object.values(data).map((e) => e.decrease),
          },
        ],
      }

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

    initEcharts2(data) {
      var options = {
        legend: {
          data: ['居民总数', '新增居民数', '流失居民数'],
          y: 'bottom',
        },
        color: ['#4A86FD', '#32C5FF', '#FFAA44'],
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: '9%',
          left: '6%',
          right: '8%',
          bottom: '9%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: Object.keys(data).map((e) => e.substring(e.length - 5, e.length)),
          axisLine: {
            show: true,
            lineStyle: { color: '#666' },
          },
          axisLabel: {
            show: true,
            interval: 0,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#D8DDE6',
            },
          },
          axisLabel: {
            show: true,
            interval: 0,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            lineStyle: {
              normal: {
                lineStyle: {
                  color: '#4A86FD',
                },
              },
            },
            color: '#4A86FD',
            name: '居民总数',
            type: 'line',
            stack: 'Total',
            data: Object.values(data).map((e) => e.total),
          },
          {
            lineStyle: {
              normal: {
                lineStyle: {
                  color: '#32C5FF',
                },
              },
            },
            color: '#32C5FF',
            name: '新增居民数',
            type: 'line',
            stack: 'Total',
            data: Object.values(data).map((e) => e.increase),
          },
          {
            lineStyle: {
              normal: {
                lineStyle: {
                  color: '#FFAA44',
                },
              },
            },
            color: '#FFAA44',
            name: '流失居民数',
            type: 'line',
            stack: 'Total',
            data: Object.values(data).map((e) => e.decrease),
          },
        ],
      }

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

    changeTab(e) {
      this.currentTabBar = e
      if (this.currentTabBar == 0) {
        this.getList()
        this.$nextTick(() => {
          if (this.currentTabs == 0) {
            this.Echarts1 = echarts.init(document.getElementById('echarts1'))
            this.getEchart1()
          }
          if (this.currentTabs == 1) {
            this.Echarts2 = echarts.init(document.getElementById('echarts2'))
            this.getEchart2()
          }
        })
      }
      if (this.currentTabBar == 1) {
        this.getList()
      }
      if (this.currentTabBar == 2) {
        this.getList2()
      }
    },

    change(index) {
      this.currentTabs = index
      this.$nextTick(() => {
        if (index == 0) {
          this.Echarts1 = echarts.init(document.getElementById('echarts1'))
          this.getEchart1()
        } else {
          this.Echarts2 = echarts.init(document.getElementById('echarts2'))
          this.getEchart2()
        }
      })
    },
  },
  onReachBottom() {
    this.current = this.current + 1
    this.getList()
  },
}
</script>

<style scoped lang="scss">
uni-page-body {
  height: 100%;
}
.AppResidentFile {
  height: 100%;

  .currentTabBar0 {
    .peopleGroup,
    .people {
      .topcard {
        position: relative;
        background: url(http://respub.sinoecare.net/20211221/4-20211221095551.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;
        padding-bottom: 20px;
        height: 616px;
        background: #fff;
        box-sizing: border-box;

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

  .currentTabBar1 {
    height: 100%;
    background: #fff;
    ::v-deep .AiTopFixed {
      b.title {
        color: #333;
        font-size: 32px;

        & > i {
          color: #267fce;
          font-style: normal;
          margin: 0 4px;
        }
      }
    }

    ::v-deep .mainPane {
      background: #fff;
      padding: 0 32px;

      .AiCell {
        flex-shrink: 0;
        justify-content: flex-start;

        .content {
          flex: 1;
          min-width: 0;
          max-width: unset;
          border-bottom: 1px solid rgba(221, 221, 221, 1);
          min-height: 160px;
        }
      }

      .card {
        text-align: left;

        b {
          max-width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 36px;
        }

        .tag {
          justify-content: center;
          background: #f3f4f7;
          border-radius: 4px;
          padding: 0 16px;
          font-size: 28px;
          font-weight: 400;
          color: #333;
          margin-left: 16px;
          margin-bottom: 16px;
          height: 56px;
        }

        .realName {
          width: 100%;
          margin-top: 8px;
          font-size: 28px;
          font-weight: 400;
          color: #999;
        }
      }

      .AiImage {
        margin-right: 24px;

        image {
          width: 112px;
          height: 112px;
        }
      }
    }
  }

  .currentTabBar2 {
    ::v-deep .AiTopFixed {
      b.title {
        color: #333;
        font-size: 32px;

        & > i {
          color: #267fce;
          font-style: normal;
          margin: 0 4px;
        }
      }
    }

    ::v-deep .mainPane {
      background: #fff;
      padding: 0 32px;

      .AiCell {
        align-items: center;
        height: 230px;
        justify-content: flex-start;

        .content {
          flex: 1;
          min-width: 0;
          height: 100%;
          max-width: unset;
          border-bottom: 1px solid rgba(221, 221, 221, 1);
        }
      }

      .card {
        height: 100%;
        justify-content: center;

        b {
          font-size: 36px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .tag {
          justify-content: center;
          background: #f3f4f7;
          border-radius: 4px;
          padding: 0 16px;
          font-size: 28px;
          font-weight: 400;
          color: #333;
          margin-left: 16px;
          height: 56px;
        }

        .groupName {
          width: 100%;
          text-align: left;
        }

        .owner,
        .trends {
          margin-top: 8px;
          font-size: 28px;
          font-weight: 400;
          color: #999;
        }

        .personCount {
          flex-shrink: 0;
          font-size: 30px;
          font-weight: 400;
          color: #666;
        }

        .trends {
          * + * {
            margin-left: 24px;
          }

          em {
            font-style: normal;
            color: #5fba95;
          }

          p {
            color: #f09535;
          }
        }
      }

      .AiImage {
        margin-right: 24px;

        image {
          width: 112px;
          height: 112px;
        }
      }
    }
  }
}
</style>
