<template>
  <div class="Home">
    <div @click="linkTo('./HelpDocs')">
      <u-notice-bar mode="horizontal" :list="list"></u-notice-bar>
    </div>
    <!-- <div class="tips">
      <img src="../img/home/tips-icon.png" alt="">慧政务改版上线了，点此查看帮助文档！
    </div> -->
    <div class="content">
      <div class="user-info">
        <div class="left">
          <img :src="user.avatar" alt="" v-if="user.avatar">
          <img src="../img/user-icon.png" alt="" v-else>
        </div>
        <div class="right">
          <p class="name">你好，<AiOpenData v-if="user.wxUserId" type="userName" :openid="user.wxUserId"></AiOpenData></p>
          <p class="time">您已加入慧政务 <span>{{ girdInfo['加入天数'] }}</span>天</p>
        </div>
      </div>
      <div class="app-list">
        <div class="item" v-for="(item, index) in appList" :key="index" @click="linkTo(item.linkUrl)">
          <img :src="item.img" alt="">
          <p>{{ item.title }}</p>
        </div>
      </div>
      <div class="title">数据统计</div>
      <div class="tab-content">
        <div class="item" v-for="(item, index) in tabStatistics" :key="index">
          <p><span></span>{{ item.title }}</p>
          <div>{{ girdInfo[item.key] }}</div>
        </div>
      </div>
      <div class="title">居民活跃指数</div>
      <div class="chart-content" id="statistic"></div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import echarts from 'echarts'
export default {
  name: "Home",
  data() {
    return {
      appList: [
        {
          img: require('../img/home/home-jmgl-icon.png'),
          title: '居民管理',
          linkUrl: '/apps/AppResidentDocument/AppResidentDocument'
        },
        {
          img: require('../img/home/home-zfww-icon.png'),
          title: '走访慰问',
          linkUrl: '/apps/AppWalkask/AppWalkask'
        },
        {
          img: require('../img/home/home-mdtj-icon.png'),
          title: '矛盾调解',
          linkUrl: '/apps/AppConflictMediation/AppConflictMediation'
        },
        {
          img: require('../img/home/home-xftj-icon.png'),
          title: '宣发统计',
          linkUrl: '/apps/AppCooperationPropaganda/AppCooperationPropaganda'
        }
      ],
      tabStatistics: [
        {
          title: '网格数',
          key: '网格数'
        },
        {
          title: '网格员数',
          key: '网格员'
        },
        {
          title: '辖区户数',
          key: '辖区户数'
        },
        {
          title: '居民群数',
          key: '居民群'
        }
      ],
      echartData: null,
      list: ['慧政务改版上线了，点此查看帮助文档！'],
      girdInfo: {}
    }
  },
  computed: { ...mapState(['user']) },
  methods: {
    chartInit() {
      this.echartData = echarts.init(document.getElementById('statistic'))
      var option = {
        grid: {
          left: '5%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#E1E5EF', //x轴的颜色
              width: 1, //轴线的宽度
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666',
            },
          },
          data: ['4月', '5月', '6月', '7月', '8月',]
        },
        yAxis: {
          axisLine:{       //y轴
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666',
            },
          },
          type: 'value',
          minInterval: 50,
        },
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            data: [155, 130, 120, 160, 120, 130, 110],
            type: 'line',
            areaStyle: {//覆盖区域的渐变色
            	normal: {
            		color: {
                  type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
                  colorStops: [
                    {
                      offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
                    },
                    {
                      offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
		       		  },
            	}
            },
            lineStyle: {
              normal: {
                color: '#2891FF'
              }
            },
            itemStyle : {
              normal : {
                color:'#2891FF',
              }
            }
          }
        ]
      };
      this.echartData.setOption(option)
    },
    linkTo(url) {
      console.log(url)
      uni.navigateTo({ url })
    },
    getGirdInfo() {
      this.$http.post(`/app/appgirdmemberinfo/girdMemberOrNotStatistic`).then(res => {
        if (res.code == 0) {
          this.girdInfo = res.data
        }
      })
    }
  },
  created() {
    this.getGirdInfo()
    this.$nextTick(() => {
      this.chartInit()
    })
  },
}
</script>

<style lang="scss" scoped>
.Home {
  .tips {
    padding: 24px 32px;
    background-color: #3975C6;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #FFF;
    line-height: 40px;
    img {
      width: 32px;
      height: 32px;
      margin-right: 16px;
      vertical-align: middle;
    }
  }
  .content {
    padding: 0 32px;
    .user-info {
      display: flex;
      padding: 48px 0 32px 0;
      .left {
        width: 96px;
        height: 96px;
        margin-right: 32px;
        img {
          width: 96px;
          height: 96px;
          border-radius: 50%;
          border: 4px solid #FFFFFF;
          box-sizing: border-box;
        }
      }
      .right {
        width: calc(100% - 128px);
        margin-top: 6px;
        .name {
          font-size: 32px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #333;
          line-height: 44px;
        }
        .time {
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #999;
          line-height: 40px;
          span {
            color: #3975C6;
          }
        }
      }
    }
    .app-list {
      width: 100%;
      background: #FFF;
      box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
      border-radius: 8px;
      display: flex;
      .item {
        flex: 1;
        text-align: center;
        padding: 24px 0;
        img {
          width: 64px;
          height: 64px;
          margin-bottom: 8px;
        }
        p {
          font-size: 26px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #333;
          line-height: 36px;
        }
      }
    }
    .title {
      padding: 48px 0 24px 0;
      font-size: 32px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333;
      line-height: 44px;
    }
    .tab-content {
      .item {
        display: inline-block;
        width: calc(50% - 14px);
        height: 160px;
        background: #FFF;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
        border-radius: 16px;
        padding: 24px;
        box-sizing: border-box;
        margin-bottom: 16px;
        p {
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666;
          line-height: 40px;
          margin-bottom: 8px;
          span {
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 4px solid #3975C6;
            margin-right: 8px;
            box-sizing: border-box;
          }
        }
        div{
          font-size: 48px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333;
          line-height: 64px;
          padding-left: 24px;
        }
        
      }
      .item:nth-of-type(2n-1) {
        margin-right: 14px;
      }
      .item:nth-last-of-type(1) {
        p {
          span {
            border-color: #3ACEB3;
          }
        }
      }
    }
    .chart-content{
      width: 100%;
      height: 514px;
      background: #FFF;
      box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
      border-radius: 8px;
      margin-bottom: 82px;
    }
  }
  ::v-deep .u-type-warning-light-bg {
    padding: 20px 32px!important;
    background-color: #3975C6!important;
  }
  ::v-deep .u-icon__icon--warning {
    color: #D7E3F3;
    width: 32px;
    height: 32px;
    font-size: 0px!important;
    background-image: url('../img/home/tips-icon.png');
    background-size: 100%;
  }
  ::v-deep .u-type-warning {
    color: #fff;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    line-height: 40px;
  }
}
</style>
