<template>
  <!-- <div> -->
  <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('http://baidu.com')">指标说明</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"> </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('http://baidu.com')">指标说明</div>
        </div>
      </div>
      <data-detail :id="hmId"></data-detail>
    </div>
  </div>
  <!-- </div> -->
</template>
<script>
import dataDetail from '../../components/dataDetail.vue';
import newAddChart from './newAddChart.vue';
export default {
  name: 'act-code-detail-statistics',
  components: { dataDetail, newAddChart },
  props: {
    hmId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      loading: false,
      dateKey: 0,
      dateLis: [
        { key: 0, value: '近7天' },
        { key: 1, value: '近30天' },
        { key: 2, value: '近三个月' },
        { key: 3, value: '近半年' },
        { key: 4, value: '近一年' }
      ],
      dateDefault: [],
      pickerOptions() {
        let pickerMinDate;
        return {
          onPick(obj) {
            pickerMinDate = obj.minDate;
          },
          disabledDate(time) {
            let start = new Date();
            start = new Date(`${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`);
            let start2 = new Date(pickerMinDate);
            let end = new Date();
            end = new Date(`${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()} 23:59:59`);
            let end2 = new Date(pickerMinDate);
            if (pickerMinDate) {
              start = start.setFullYear(start.getFullYear() - 2);
              start2 = start2.setDate(start2.getDate() - 60);
              start = start > start2 ? start : start2;
              end2 = end2.setDate(end2.getDate() + 60);
              end = end.getTime() > end2 ? end2 : end.getTime();
            } else {
              start = start.setFullYear(start.getFullYear() - 2);
              end = end.getTime();
            }
            return time.getTime() < start || time.getTime() > end;
          }
        };
      },
      overViewData: { addNumT: 0, addNum: 0, dateList: [] }
    };
  },
  methods: {
    explain(url) {
      window.open(url);
    },
    getChartList() {
      const that = this;
      // that.loading = true;
      // getRequest('/hm/qrcode/detail-data-statistics', {hmId: that.hmId})
      //     .then(res => {
      //       let resData = res.data;
      //       that.loading = false;
      //       if (resData.errorCode == 1) {
      let resData = {
        result: {
          addNumT: 20,
          addNum: 10,
          dateList: [
            { date: '2018/8/1', addNum: 4623 },
            { date: '2018/8/2', addNum: 6145 },
            { date: '2018/8/3', addNum: 508 },
            { date: '2018/8/4', addNum: 289 },
            { date: '2018/8/5', addNum: 289 },
            { date: '2018/8/6', addNum: 289 },
            { date: '2018/8/7', addNum: 289 },
            { date: '2018/8/8', addNum: 289 },
            { date: '2018/8/9', addNum: 289 },
            { date: '2018/8/10', addNum: 289 },
            { date: '2018/8/11', addNum: 289 },

            { date: '2018/8/12', addNum: 289 },
            { date: '2018/8/13', addNum: 2589 },
            { date: '2018/8/14', addNum: 289 },
            { date: '2018/8/15', addNum: 289 },
            { date: '2018/8/16', addNum: 29 },
            { date: '2018/8/17', addNum: 289 },

            { date: '2018/8/18', addNum: 9 },
            { date: '2018/8/19', addNum: 2189 },
            { date: '2018/8/20', addNum: 289 },
            { date: '2018/8/21', addNum: 2869 },
            { date: '2018/8/22', addNum: 289 },
            { date: '2018/8/23', addNum: 2809 }
          ]
        }
      };
      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
      //   });
      // });
    },
    getDateRange(setEndDate) {
      const start = new Date();
      let end = new Date();
      end = setEndDate(end);
      function getDate(date) {
        const result = [];
        result.push(date.getFullYear());
        result.push((date.getMonth() + 1).toString().padStart(2, '0'));
        result.push(
          date
            .getDate()
            .toString()
            .padStart(2, '0')
        );
        return result.join('-');
      }
      // yyyy-MM-dd
      return [getDate(start), getDate(end)];
    },
    btnChange(index) {
      let that = this;
      that.dateKey = index;
      that.dateDefault = [];
      let setDate;
      if (index == 0) {
        // 近7天
        setDate = endDate => {
          endDate.setDate(endDate.getDate() - 6);
          return new Date(endDate);
        };
      } else if (index == 1) {
        // 近30天
        setDate = endDate => {
          endDate.setDate(endDate.getDate() - 29);
          return new Date(endDate);
        };
      } else if (index == 2) {
        // 近三个月
        setDate = endDate => {
          endDate.setMonth(endDate.getMonth() - 3);
          return new Date(endDate);
        };
      } else if (index == 3) {
        // 近半年
        setDate = endDate => {
          endDate.setMonth(endDate.getMonth() - 6);
          return new Date(endDate);
        };
      } else {
        // 近一年
        setDate = endDate => {
          endDate.setFullYear(endDate.getFullYear() - 1);
          return new Date(endDate);
        };
      }
      const [start, end] = that.getDateRange(setDate);
      that.dateDefault.push(end);
      that.dateDefault.push(start);
      this.getChartList();
    },
    onDateChange() {
      this.dateKey = -1;
      this.getChartList();
    }
  },
  mounted() {
    let that = this;
    // 默认显示近七天
    that.btnChange(0);
    that.getChartList();
  }
};
</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>
