<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">概览</span>
        </div>
        <div class="flex">
          <i class="iconfont-hb3 iconzhibiaoshuoming color-1890ff"></i>
          <div class="color-1890ff font-14 p-l-6" @click="explain">指标说明</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;">12345</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;">520</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>
    </div>
    <div>
      <div class="flex justify-between title">
        <div class="flex">
          <div class="blue-block"></div>
          <span class="font-w-500">查看明细</span>
        </div>
        <div class="flex">
          <i class="iconfont-hb3 iconzhibiaoshuoming color-1890ff"></i>
          <div class="color-1890ff font-14 p-l-6" @click="explain">指标说明</div>
        </div>
      </div>
      <data-detail :id="actCode"></data-detail>
    </div>
  </div>
</template>
<script>
import dataDetail from '../../components/dataDetail.vue';
export default {
  name: 'act-code-detail-statistics',
  components: { dataDetail },
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    },
    actCode: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      welcomeSpeech: false,
      useMemberData: [{ cardName: '电话电话电话' }],
      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;
          }
        };
      }
    };
  },
  methods: {
    explain() {
      console.log(11);
    },
    getUseTableList() {
      const that = this;
      that.loading = true;
      let para = {
        // gicEnterpriseId: that.brandId,
        pageNum: that.currentPage, // 当前页
        pageSize: that.pageSize // 一页显示个数
      };
      console.log(para);
      that.loading = false;
      //   postRequest('/haoban-app-customer-web/cardCoupon/find-card-page', para)
      //     .then(res => {
      //       let resData = res.data;
      //       that.loading = false;
      //       if (resData.errorCode == 1) {
      //         that.tableData = resData.result.list || [];
      //         that.total = resData.result.pageInfo ? resData.result.pageInfo.total : 0;
      //         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);
    },
    onDateChange() {
      this.dateKey = -1;
    }
  },
  mounted() {
    let that = this;
    // 判断brandId
    // 默认显示近七天
    that.btnChange(0);
    that.getUseTableList();
  }
};
</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>
