<template>
  <div class="AppResidentFile">
    <u-tabbar v-model="currentTabBar" :list="lists" @change="changeTab" style="height: 0"></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">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 class="currentTabBar1" v-if="currentTabBar == 1">
      <AiAreaPicker v-model="areaId" all :areaId="areaId" @select="areaSelect"></AiAreaPicker>

      <div class="line"></div>

      <div class="peopleCard">
        <u-tabs :list="tabPeopleList" :is-scroll="false" :current="currentPeople" height="96" inactive-color="#000" active-color="#1365DD" @change="changePeople"></u-tabs>

        <div class="seachObj">
          <u-search v-model="keyword" :clearabled="true" placeholder="搜索" :show-action="false" bg-color="#F5F5F5" search-icon-color="#E2E8F1" color="#666" height="58" @search="handerSearch" @clear="handerClear"></u-search>
        </div>

        <div class="datas" v-if="data.length > 0">
          <div class="datass" v-for="(item, iindex) in data" :key="iindex" @click="toDetailCard(item)">
            <div class="left">
              <img :src="item.photo" alt="" v-if="item.photo" />
              <img src="./components/img/4.png" alt="" v-else />
            </div>

            <div class="right">
              <div class="rightTop">{{ item.name }}</div>
              <div class="rightBottom">
                <span>{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1****$2') }}</span>

                <span>{{ item.phone }}</span>
              </div>
            </div>
          </div>
        </div>

        <AiEmpty v-else></AiEmpty>
      </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: '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,
      areaId: '',
      currentPeople: 0,
      tabPeopleList: [
        {
          name: '本地居民',
        },
        {
          name: '流动人员',
        },
      ],
      current: 1,
      keyword: '',
      data: [],

      page: { current: 1, size: 10, total: 0 },
      search: { name: '' },
      list: [],
    }
  },
  computed: {
    ...mapState(['user', 'global']),
  },
  watch: {},
  onLoad() {
    this.getEchart()
    this.areaId = this.user.areaId
  },
  mounted() {
    this.Echarts1 = echarts.init(document.getElementById('echarts1'))
  },
  methods: {
    getList2() {
      this.$http
        .post('/app/wxcp/wxgroup/list', null, {
          params: { ...this.page, ...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.getList2()
      }
    },

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

    getList() {
      this.$http
        .post('/app/appresident/list', null, {
          params: {
            size: 10,
            current: this.current,
            areaId: this.areaId,
            con: this.keyword,
            residentType: this.currentPeople == 0 ? '0' : '1',
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records
            this.pages = res.data.pages
          }
        })
    },

    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)
    },

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

    areaSelect(e) {
      console.log(e)
      this.areaId = e.id
      this.getList()
    },

    handerSearch(e) {
      this.keyword = e
      this.current = 1
      this.getList()
    },

    handerClear() {
      this.keyword = ''
      this.current = 1
      this.getList()
    },

    changeTab(e) {
      this.currentTabBar = e
      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'))
        } else {
          this.Echarts2 = echarts.init(document.getElementById('echarts2'))
        }
        this.getEchart()
      })
    },

    changePeople(e) {
      this.currentPeople = e
      this.getList()
    },
  },
  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: 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;
        }
      }
    }
  }

  .currentTabBar1 {
    height: 100%;
    background: #fff;
    .AiAreaPicker {
      padding: 16px 0 14px 12px;
    }

    .line {
      height: 16px;
      background: #f5f5f5;
    }

    .peopleCard {
      background: #fff;
      .seachObj {
        border-bottom: 2px solid #f5f5f5;
        border-top: 2px solid #f5f5f5;
        padding: 20px 32px;
      }
      .datas {
        .datass {
          display: flex;
          padding: 24px 32px;
          .left {
            img {
              width: 80px;
              height: 80px;
              border-radius: 50%;
            }
          }
          .right {
            display: flex;
            flex-direction: column;
            margin-left: 32px;
            width: 100%;
            .rightTop {
              font-size: 32px;
              font-weight: 500;
              color: #333333;
            }
            .rightBottom {
              display: flex;
              justify-content: space-between;
              margin-top: 8px;
            }
          }
        }
      }
    }
  }

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