<template>
  <div class="app-detail-wrap">
    <div>
      <div class="flex justify-between title">
        <div class="flex">
          <div class="blue-block"></div>
          <span class="font-w-500 color-303133">概览</span>
        </div>
        <div class="flex">
          <el-button type="text" v-jumpLink:codeGl><i class="iconfont-hb3 iconzhibiaoshuoming m-r-6"></i>指标说明</el-button>
        </div>
      </div>
      <ul class="flex">
        <li class="data-total-cell m-r-22">
          <div class="flex p-20">
            <div class="icon-background">
              <i class="iconfont-hb3 iconxinzengyonghu color-1890ff font-28"></i>
            </div>
            <div class="m-l-16">
              <div class="font-14 color-606266 line-20">添加好友人数</div>
              <span class="font-30 font-din" style="margin-top:1;">{{ overViewData.addNumT || 0 }}</span>
            </div>
          </div>
        </li>
        <li class="data-total-cell">
          <div class="flex p-20">
            <div class="icon-background" style="background: #d9f3fd;">
              <i class="iconfont-hb3 iconxinzengyonghu color-35C4FC font-28"></i>
            </div>
            <div class="m-l-16">
              <div class="font-14 color-606266 line-20">今日新增人数</div>
              <span class="font-30 font-din" style="margin-top:1;">{{ overViewData.addNum || 0 }}</span>
            </div>
          </div>
        </li>
      </ul>
      <div class="flex justify-end">
        <div class="rightBox">
          <ul class="datebox" v-for="(lis, index) in dateLis" :key="lis.key">
            <li :class="dateKey == index ? 'activeClass' : 'noActive'" class="dateLisBox" @click="btnChange(index)">{{ lis.value }}</li>
          </ul>
          <el-date-picker class="w256" v-model="dateDefault" type="daterange" range-separator="~" start-placeholder="创建开始日期" end-placeholder="创建结束日期" :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions()" @change="onDateChange" value-format="yyyy-MM-dd" :format="[2, 3, 4].includes(dateKey) ? 'yyyy-MM' : 'yyyy-MM-dd'" :clearable="false"> </el-date-picker>
        </div>
      </div>
      <new-add-chart :chart-width="chartWidth" :charData="overViewData.dateList" id="new-add-chart"></new-add-chart>
    </div>
    <div>
      <div class="flex justify-between title">
        <div class="flex">
          <div class="blue-block"></div>
          <span class="font-w-500 color-303133">查看明细</span>
        </div>
        <div class="flex">
          <el-button type="text" v-jumpLink:codeCkmx><i class="iconfont-hb3 iconzhibiaoshuoming m-r-6"></i>指标说明</el-button>
        </div>
      </div>
      <data-detail :id="hmId"></data-detail>
    </div>
  </div>
</template>
<script>
import dataDetail from '../../components/dataDetail.vue';
import newAddChart from './newAddChart.vue';
import { postJsonRequest } from '@/api/api';
import mixin from '../components/mixin';
import errMsg from '@/common/js/error';
export default {
  name: 'act-code-detail-statistics',
  components: { dataDetail, newAddChart },
  props: {
    hmId: {
      type: String,
      default() {
        return '';
      }
    },
    chartWidth: Number
  },
  mixins: [mixin],
  data() {
    return {
      loading: false,
      dateList: [
        // { bizDate: '2018/8/1', addNum: 4623 },
        // { bizDate: '2018/8/2', addNum: 6145 },
        // { bizDate: '2018/8/3', addNum: 508 },
        // { bizDate: '2018/8/4', addNum: 289 },
        // { bizDate: '2018/8/5', addNum: 289 },
        // { bizDate: '2018/8/6', addNum: 289 },
        // { bizDate: '2018/8/7', addNum: 289 },
        // { bizDate: '2018/8/8', addNum: 289 },
        // { bizDate: '2018/8/9', addNum: 289 },
        // { bizDate: '2018/8/10', addNum: 289 },
        // { bizDate: '2018/8/11', addNum: 289 },
        // { bizDate: '2018/8/12', addNum: 289 },
        // { bizDate: '2018/8/13', addNum: 2589 },
        // { bizDate: '2018/8/14', addNum: 289 },
        // { bizDate: '2018/8/15', addNum: 289 },
        // { bizDate: '2018/8/16', addNum: 29 },
        // { bizDate: '2018/8/17', addNum: 289 },
        // { bizDate: '2018/8/18', addNum: 9 },
        // { bizDate: '2018/8/19', addNum: 2189 },
        // { bizDate: '2018/8/20', addNum: 289 },
        // { bizDate: '2018/8/21', addNum: 2869 },
        // { bizDate: '2018/8/22', addNum: 289 },
        // { bizDate: '2018/8/23', addNum: 2809 }
      ],
      overViewData: { addNumT: 0, addNum: 0, dateList: [] }
    };
  },
  methods: {
    explain(url) {
      window.open(url);
    },
    getChartList() {
      const that = this;
      let para = {
        inFields: {
          hmId: that.hmId,
          startTime: that.dateDefault[0] + ' 00:00:00',
          endTime: that.dateDefault[1] + ' 23:59:59',
          type: that.dateKey >= 2 ? 2 : 1
        }
      };
      that.loading = true;
      postJsonRequest('/haoban-manage3-web/hm/qrcode/detail-data-statistics', para)
        .then(res => {
          let resData = res.data;
          that.loading = false;
          if (resData.code == 0) {
            let result = resData.result || { addNumT: 0, addNum: 0, dateList: [] };
            // result.dateList = [
            //   { bizDate: '2018/8/1', 新增人数: 0 },
            //   { bizDate: '2018/8/2', 新增人数: 1 },
            //   { bizDate: '2018/8/3', 新增人数: 1 },
            //   { bizDate: '2018/8/4', 新增人数: 1 }
            // ];
            result.dateList.map(function(date, index) {
              date['新增人数'] = date.addNum;
            });
            that.overViewData = result;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.loading = false;
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    onDateChange() {
      this.dateKey = -1;
      this.getChartList();
    }
  },
  mounted() {
    let that = this;
    // 默认显示近七天
    that.btnChange(0);
  }
};
</script>
<style lang="scss" scoped>
.blue-block {
  width: 4px;
  height: 16px;
  background: #2f54eb;
  margin: 7px 12px 7px 0;
}
.title {
  line-height: 30px;
  padding-bottom: 16px;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: flex-end;
}
.data-total-cell {
  position: relative;
  min-width: 282px;
  height: 96px;
  background: #ffffff;
  box-shadow: 0px 2px 8px 1px rgba(221, 227, 237, 0.34);
  border-radius: 10px;
  .icon-background {
    width: 48px;
    height: 48px;
    margin: 4px 0;
    background: #e7ebfe;
    border-radius: 12px;
    text-align: center;
    line-height: 48px;
  }
}
.color-35C4FC {
  color: #35c4fc;
}
.font-28 {
  font-size: 28px;
}
.line-20 {
  line-height: 20px;
}
.m-r-22 {
  margin-right: 22px;
}
.w256 {
  width: 256px;
}
.rightBox {
  //   float: right;
  line-height: 32px;
  padding-top: 20px;
  //   height: 32px;
  .datebox {
    display: inline-block;
    .dateLisBox {
      font-size: 14px;
      margin-right: 24px;
      cursor: pointer;
    }
  }
}
.activeClass {
  color: #2f54eb;
}
.noActive {
  color: #303133;
}
</style>
