<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>
      <!-- <el-date-picker class="m-l-10 w-330" style="width: 330px" prefix-icon="el-icon-time" :picker-options="pickerOptions" v-model="conditionObj.dateRange" @change="changeDate" :editable="false" :value-format="'yyyy-MM-dd'" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"> </el-date-picker> -->
    </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>
  </div>
</template>
<script>
export default {
  name: 'act-code-detail-statistics',
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      welcomeSpeech: false,
      useMemberData: [{ cardName: '电话电话电话' }],
      loading: false,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ],
        onPick: ({ maxDate, minDate }) => {
          this.choiceDateCopy = [minDate.getTime()];
          if (maxDate) {
            this.choiceDateCopy = [];
          }
        },
        disabledDate: time => {
          if (this.choiceDateCopy.length) {
            const one = 365 * 24 * 3600 * 1000;
            const minTime = this.choiceDateCopy[0] - one;
            const maxTime = this.choiceDateCopy[0] + one;
            return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > Date.now() - 8.64e6;
          }
          return time.getTime() > Date.now() - 8.64e6;
        }
      }
    };
  },
  methods: {
    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
      //       });
      //     });
    }
  },
  mounted() {
    let that = this;
    // 判断brandId
    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;
}
.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;
}
</style>
