<template>
  <div class="info p-20" v-loading="loading">
    <div class="flex p-b-40">
      <vue-qr id="qrImg" :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.linkId }}</el-descriptions-item>
          <el-descriptions-item label="code">{{ link.linkCode }}</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-tag size="mini">{{ link.memberLabelName }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="链接描述">{{ link.remark }}</el-descriptions-item>
        </el-descriptions>
        <div class="m-t-10">
          <el-button icon="el-icon-download" plain @click="downloadQR">下载二维码</el-button>
          <el-button v-if="link.linkType == 2" v-clipboard:text="link.linkUrl" plain>复制链接</el-button>
          <el-button v-if="link.linkType == 2" plain @click="goEdit">修改</el-button>
        </div>
      </div>
    </div>
    <div class="fixed-tab" v-if="scrollTop > 300">
      <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">
        <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" v-show="page.pageTitle">
          <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">
        <div class="statistics">
          <dm-sub-title>
            <div class="title">
              <span>概览</span>
              <el-button type="text"><i class="iconfont-hb3 iconzhibiaoshuoming  info-icon"></i>指标说明</el-button>
            </div>
          </dm-sub-title>
          <el-row :gutter="20">
            <el-col :span="6" 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()" @change="onDateChange" value-format="yyyy-MM-dd"> </el-date-picker>
            </div>
          </div>
          <new-add-chart :charData="charData" id="new-add-chart"></new-add-chart>
          <dm-sub-title>
            <div class="title">
              <span>查看明细</span>
              <el-button type="text"><i class="iconfont-hb3 iconzhibiaoshuoming  info-icon"></i>指标说明</el-button>
            </div>
          </dm-sub-title>
          <data-detail :id="linkId" :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 {
      filters,
      statisticsClerk,
      loading: false,
      activeName: this.$route.query.type,
      link: {
        // linkId: 419648718594129960,
        // customRuleJson: '{"fw_store":{"open":1,"zs":1,"dz":1,"dy":1},"xg_store":{"open":1,"zs":1,"dz":1,"dy":0}}',
        // linkType: 2,
        // memberLabelId: 'fd6b44967aa647bcadfad10706244c56',
        // memberLabelName: '测试121212-木瑾0630测试标签值50',
        // name: '活码链接-711',
        // pageId: 418460224953786370,
        // remark: '说明',
        // linkUrl: 'www.baidu.com',
        // storeList: [
        //   {
        //     storeId: 'ff80808181e0effb0181e26a674c000e',
        //     storeName: '测试有赞商城',
        //     storeCode: '991001'
        //   },
        //   {
        //     storeId: 'ff80808181e0effb0181e128d0b70000',
        //     storeName: '达达店铺',
        //     storeCode: 'DADA'
        //   }
        // ],
        // storeRuleJson: '{"store_type":2,"open":0,"store":{"dz":0,"dy":1,"ndz":0,"ndy":1}, "city_store":{"open":1,"dz":1,"dy":1}}',
        // welcomeId: '04af9e55515d4352be0b2a3119005ce9',
        // enterpriseId: 'ff8080815dacd3a2015dacd3ef5c0000',
        // wxEnterpriseId: 'ca66a01b79474c40b3e7c7f93daf1a3b',
        // createTime: 1657594862000,
        // createorId: 'fefd1c81641711e69d0818c58a146fd2',
        // creatorName: '艾蜜雪管理员'
      },
      page: {
        // createTime: 1657594862000,
        // createorId: 'fefd1c81641711e69d0818c58a146fd2',
        // createorName: '艾蜜雪管理员',
        // enterpriseId: 'ff8080815dacd3a2015dacd3ef5c0000',
        // guideComment: '长按保存图片并识别二维码添加您的专属导购',
        // merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
        // merchantName: '金华达摩11',
        // merchantPhoneNumber: '12-31322',
        // modifierId: 'fefd1c81641711e69d0818c58a146fd2',
        // modifierName: '艾蜜雪管理员',
        // pageBackgroundImg: '',
        // pageCode: 'MB01419872763172380673',
        // pageId: '419872763172380673',
        // pageName: 'test1',
        // pageTitle: '嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡',
        // status: 1,
        // updateTime: 1657594862000,
        // wxEnterpriseId: 'ca66a01b79474c40b3e7c7f93daf1a3b'
      },
      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],
        endTime: this.dateDefault[1]
      };
      statisticsChart(para).then(res => {
        const { result } = res.data;
        this.charData = result;
      });
    },
    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.getChartList();
    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: 80px;
  z-index: 1;
  padding-bottom: 0;
  height: 40px;
  background: white;
}
.welcome-left-view {
  width: 639px;
}
.merchantLogo {
  width: 120px;
  height: 120px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #dcdfe6;
}
.title-right {
  margin-left: 30px;
  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;
  .info-icon {
    margin-right: 8px;
  }
}
.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>
