<template>
  <div class="info p-20" v-loading="loading">
    <div class="flex p-b-40">
      <vue-qr id="qrImg" class="m-r-30" :text="link.linkUrl" :size="200" :margin="5" v-if="link.linkType == 2"></vue-qr>
      <div class="title-right">
        <el-descriptions :title="link.name">
          <el-descriptions-item label="ID">{{ link.linkCode }}</el-descriptions-item>
          <el-descriptions-item label="code">{{ link.shortCode }}</el-descriptions-item>
          <el-descriptions-item label="链接类型">
            <el-tag size="mini" :class="link.linkType == 2 ? '' : 'el-tag--cyan'">{{ link.linkType == 1 ? '专用链接' : '通用链接' }}</el-tag></el-descriptions-item
          >
          <el-descriptions-item label="创建人">{{ link.creatorName }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ filters.formatTimeStamp(link.createTime) }}</el-descriptions-item>
          <el-descriptions-item label="链接标签">
            <el-tooltip :disabled="link.memberLabelStatus != 0" content="已删除" placement="top">
              <el-tag size="mini" :type="link.memberLabelStatus == 0 ? 'warning' : 'info'">{{ link.memberLabelName }}</el-tag>
            </el-tooltip>
          </el-descriptions-item>
          <el-descriptions-item label="链接描述">{{ link.remark }}</el-descriptions-item>
        </el-descriptions>
        <div class="m-t-10">
          <el-button v-if="link.linkType == 2" icon="iconfont-hb3  iconxiazai" type="primary" @click="downloadQR" style="width: 120px;">下载二维码</el-button>
          <el-button v-if="link.linkType == 2" v-clipboard:text="link.linkUrl" type="primary" plain style="width: 98px;">复制链接</el-button>
          <el-button plain @click="goEdit" :type="link.linkType == 1 ? 'primary' : ''" style="width: 98px;">修改</el-button>
        </div>
      </div>
    </div>
    <div class="fixed-tab" v-if="scrollTop >= fixedHeight">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="详情信息" name="first"> <div></div> </el-tab-pane>
        <el-tab-pane label="数据统计" name="second">
          <div></div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="详情信息" name="first" v-if="$getButtonLimit(this.$buttonCode.infoLink)" :limit-code="$buttonCode.infoLink">
        <act-code-detail-info type="actLink" :enterprise-id="link.enterpriseId" :welcome-id="link.welcomeId"></act-code-detail-info>
        <dm-sub-title>落地页配置</dm-sub-title>
        <div class="m-t-15">
          <div class="flex">
            <div class="welcome-left-view">
              <el-descriptions :column="1">
                <el-descriptions-item label="页面标题">{{ page.pageTitle }}</el-descriptions-item>
                <el-descriptions-item label="商户名称">{{ page.merchantName }}</el-descriptions-item>
                <el-descriptions-item label="商户电话">{{ page.merchantPhoneNumber }}</el-descriptions-item>
                <el-descriptions-item label="商户LOGO">
                  <img :src="page.merchantLogo" class="merchantLogo" />
                </el-descriptions-item>
                <el-descriptions-item label="引导语">{{ page.guideComment }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="preview">
              <p class="previewTitle">落地页预览</p>
              <previewPage :data="page" />
              <p class="previewBottom">此二维码只是样式预览效果，请勿直接使用</p>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="数据统计" name="second" v-if="$getButtonLimit(this.$buttonCode.dataLink)" :limit-code="$buttonCode.dataLink">
        <div class="statistics">
          <dm-sub-title>
            <div class="title">
              <span>概览</span>
              <el-button type="text" v-jumpLink:link><i class="iconfont-hb3 iconzhibiaoshuoming m-r-6"></i>指标说明</el-button>
            </div>
          </dm-sub-title>
          <el-row :gutter="20">
            <el-col :span="8" v-for="(el, index) in targetList" :key="index">
              <target-group :data-list="el"></target-group>
            </el-col>
          </el-row>
          <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()" :format="[2, 3, 4].includes(dateKey) ? 'yyyy-MM' : 'yyyy-MM-dd'" @change="onDateChange" value-format="yyyy-MM-dd" :clearable="false"> </el-date-picker>
            </div>
          </div>
          <new-add-chart :charData="charData" id="new-add-chart" style="margin-top:26px"></new-add-chart>
          <dm-sub-title>
            <div class="title">
              <span>查看明细</span>
              <el-button type="text" v-jumpLink:link><i class="iconfont-hb3 iconzhibiaoshuoming m-r-6"></i>指标说明</el-button>
            </div>
          </dm-sub-title>
          <data-detail :id="linkId" typeT="link" :api="statisticsClerk" class="m-t-15"></data-detail>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { linkDetail, statisticsTotal, statisticsChart, statisticsClerk } from '@/api/actCode';
import actCodeDetailInfo from '../../components/actCodeDetailInfo.vue';
import dataDetail from '../../components/dataDetail.vue';
import previewPage from '@/components/preview-page.vue';
import { _throttle } from '@/common/js/public';
import targetGroup from '@/components/target-group.vue';
import VueQr from 'vue-qr';
import newAddChart from './newAddChart.vue';
import filters from '@/filters/index';
import mixin from '../components/mixin';
export default {
  name: 'actCodeDetail',
  components: { actCodeDetailInfo, previewPage, VueQr, targetGroup, newAddChart, dataDetail },
  props: {
    hmId: {
      type: String,
      default: ''
    }
  },
  mixins: [mixin],
  data() {
    return {
      fixedHeight: 280,
      filters,
      statisticsClerk,
      loading: false,
      activeName: this.$route.query.type ? this.$route.query.type : 'first',
      link: {},
      page: {},
      originTargetList: [
        [
          {
            label: '添加好友人数',
            value: '',
            key: 'addNumT',
            type: 'number'
          },
          {
            label: '今日新增人数',
            value: '',
            key: 'addNum',
            type: 'number'
          }
        ],
        [
          {
            label: '点击总人次',
            value: '',
            key: 'clickTimesT',
            type: 'number'
          },
          {
            label: '今日点击人次',
            value: '',
            key: 'clickTimes',
            type: 'number'
          }
        ],
        [
          {
            label: '点击总人数',
            value: '',
            key: 'clickNumT',
            type: 'number'
          },
          {
            label: '今日点击人数',
            value: '',
            key: 'clickNum',
            type: 'number'
          }
        ]
      ],
      charData: [],
      welcome: {},
      targetData: {},
      scrollTop: 0,
      linkId: this.$route.params.id
    };
  },
  computed: {
    targetList() {
      return this.originTargetList
        .map(el => {
          return el.filter(item => {
            const value = this.targetData[item.key] || 0;
            item.value = value.toLocaleString();
            return true;
          });
        })
        .filter(el => el.length > 0);
    }
  },
  methods: {
    getChartList() {
      let para = {
        linkId: this.linkId,
        startTime: this.dateDefault[0] + ' 00:00:00',
        endTime: this.dateDefault[1] + ' 23:59:59'
      };
      statisticsChart(para).then(res => {
        const { result } = res.data;
        this.charData = result || [];
        // this.charData = [
        //   { addNum: 0, bizDate: '2022-07-22', clickNum: 0, clickTimes: 0 },
        //   { addNum: 0, bizDate: '2022-07-23', clickNum: 0, clickTimes: 0 },
        //   { addNum: 0, bizDate: '2022-07-24', clickNum: 0, clickTimes: 0 },
        //   { addNum: 0, bizDate: '2022-07-25', clickNum: 1, clickTimes: 2 },
        //   { addNum: 0, bizDate: '2022-07-26', clickNum: 3, clickTimes: 1 },
        //   { addNum: 0, bizDate: '2022-07-27', clickNum: 1, clickTimes: 2 }
        // ];
      });
    },
    statisticsTotal() {
      statisticsTotal({ linkId: this.linkId }).then(res => {
        const { result } = res.data;
        if (result) {
          this.targetData = result;
        }
      });
    },
    downloadQR() {
      const qrcode = document.getElementById('qrImg');
      console.log(qrcode);
      let img = qrcode.getElementsByTagName('img')[0];
      let link = document.createElement('a');
      let url = img.getAttribute('src');
      link.setAttribute('href', url);
      link.setAttribute('download', `${this.link.linkId}_${this.link.name}.png`);
      link.click();
    },
    goEdit() {
      this.$router.push(`/attractFlowLinkEdit/${this.link.linkId}`);
    },
    async getDetail() {
      this.loading = true;
      linkDetail({ linkId: this.linkId })
        .then(res => {
          const { result } = res.data;
          if (result) {
            const { link, page, welcome } = result;
            this.link = link;
            this.page = page;
            this.welcome = welcome;
          }
        })
        .catch(function(error) {
          this.$message.error({
            duration: 1000,
            message: error.message
          });
        })
        .finally(_ => {
          this.loading = false;
        });
    },
    onDateChange() {
      this.dateKey = -1;
      this.getChartList();
    },
    scrollMethod: _throttle(function() {
      // 节流会不自然 左右不滑动
      this.scrollTop = document.getElementById('hb-layout-pager-one').scrollTop;
    }, 100),
    handleClick(e) {
      const { name } = e;
      if (name == 'first') {
        this.getDetail();
      } else {
        this.getChartList();
      }
    }
  },
  mounted() {
    this.getDetail();

    this.statisticsTotal();
    this.btnChange(0);
    document.getElementById('hb-layout-pager-one').addEventListener('scroll', this.scrollMethod);
  },
  destroyed() {
    document.getElementById('hb-layout-pager-one').removeEventListener('scroll', this.scrollMethod);
  }
};
</script>
<style lang="less" scoped>
.info {
  /deep/ .el-descriptions__body {
    color: #303133;
  }
}

.fixed-tab {
  position: absolute;
  top: 110px;
  z-index: 1;
  padding-bottom: 0;
  height: 40px;
  background: white;
  width: calc(100% - 180px);
}
.welcome-left-view {
  width: 639px;
}
.merchantLogo {
  width: 120px;
  height: 120px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #dcdfe6;
}
.title-right {
  padding: 12px 0 12px 0;
}
.preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 100px;
  /deep/ .pageTitle {
    position: absolute !important;
    top: 44px !important;
  }
  .previewTitle {
    font-weight: 500;
    color: #303133;
    line-height: 20px;
    font-size: 14px;
    width: 70px;
    text-align: center;
    margin-bottom: 20px;
  }
  .previewBottom {
    font-size: 12px;
    text-align: center;
    width: 228px;
    color: #909399;
    line-height: 17px;
  }
}
.title {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.justify-end {
  justify-content: flex-end;
}
.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>
