<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">
          <i class="iconfont-hb3 iconzhibiaoshuoming color-1890ff"></i>
          <div class="color-1890ff font-14 p-l-6" @click="explain('https://www.yuque.com/exnmlu/oo64hg/thm172#OoBcf')">指标说明</div>
        </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"> </el-date-picker>
        </div>
      </div>
      <new-add-chart :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">
          <i class="iconfont-hb3 iconzhibiaoshuoming color-1890ff"></i>
          <div class="color-1890ff font-14 p-l-6" @click="explain('https://www.yuque.com/exnmlu/oo64hg/thm172#OoBcf')">指标说明</div>
        </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 '';
      }
    }
  },
  mixins: [mixin],
  data() {
    return {
      loading: false,
      // dateList: [],
      dateList: [
        // { bizDate: '2018/8/1', 新增人数: 4623 }
        // { bizDate: '2018/8/2', 新增人数: 6145 },
        // { bizDate: '2018/8/3', 新增人数: 508 },
        // { bizDate: '2018/8/4', 新增人数: 289 },
        // { bizDate: '2018/8/5', 新增人数: 289 },
        // { bizDate: '2018/8/6', 新增人数: 289 },
        // { bizDate: '2018/8/7', 新增人数: 289 },
        // { bizDate: '2018/8/8', 新增人数: 289 },
        // { bizDate: '2018/8/9', 新增人数: 289 },
        // { bizDate: '2018/8/10', 新增人数: 289 },
        // { bizDate: '2018/8/11', 新增人数: 289 },
        // { bizDate: '2018/8/12', 新增人数: 289 },
        // { bizDate: '2018/8/13', 新增人数: 2589 },
        // { bizDate: '2018/8/14', 新增人数: 289 },
        // { bizDate: '2018/8/15', 新增人数: 289 },
        // { bizDate: '2018/8/16', 新增人数: 29 },
        // { bizDate: '2018/8/17', 新增人数: 289 },
        // { bizDate: '2018/8/18', 新增人数: 9 },
        // { bizDate: '2018/8/19', 新增人数: 2189 },
        // { bizDate: '2018/8/20', 新增人数: 289 },
        // { bizDate: '2018/8/21', 新增人数: 2869 },
        // { bizDate: '2018/8/22', 新增人数: 289 },
        // { bizDate: '2018/8/23', 新增人数: 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],
          endTime: that.dateDefault[1],
          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) {
            ((resData.result || {}).dateList || []).map(function(date) {
              date['新增人数'] = date.addNum;
            });
            that.overViewData = resData.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>
