<template>
  <div class="app-detail-wrap p-20" v-loading="loading">
    <div class="flex p-b-40">
      <el-image v-if="codeInfo.hmType == 2" class="img-200" :src="codeInfo.wxQrcode" />
      <div class="text-ellipsis-white color-303133" :style="codeInfo.hmType == 1 ? 'width:100%;' : 'width: calc(100% - 230px);'">
        <div class="p-t-12 flex height-22">
          <div class="font-16 line-22 text-ellipsis-white  font-w-500">{{ codeInfo.name }}</div>
          <el-tag size="small" effect="dark" :type="codeStatusLis[statusIndex].style" style="margin-left: 8px;">{{ codeStatusLis[statusIndex].value }}</el-tag>
          <!-- 正常success/正常到上限warning/待生效info/已作废danger -->
        </div>
        <p class="font-14 m-t-10 ">ID：{{ codeInfo.hmCode }}</p>
        <div class="flex font-14" style="padding-top:20px;">
          <div class="flex flex-1">
            <div class="font-14 line-22">
              类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：
            </div>
            <el-tag size="small">{{ codeInfo.hmType == 1 ? '单人活码' : '多人活码' }}</el-tag>
          </div>
          <div class="font-14 line-22 flex-1">创建人：{{ codeInfo.creatorName || '--' }}</div>
          <div class="font-14 line-22 flex-1">创建时间：{{ codeInfo.createTime | formatTimeStamp }}</div>
        </div>
        <div class="flex font-14" style="padding-top:15px;">
          <div class="font-14 line-22 flex-1">所属分组：{{ codeInfo.hmGroupName || '--' }}</div>
          <div class="flex flex-1">
            <div class="font-14 line-22">自动通过好友：</div>
            <el-tag size="small" :type="codeInfo.passFlag == 1 ? '' : 'danger'">{{ codeInfo.passFlag == 1 ? '已开启' : '已关闭' }}</el-tag>
          </div>
          <div class="flex flex-1">
            <div class="font-14 line-22">活码标签：</div>
            <el-tooltip :disabled="codeInfo.memberLabelStatus != 0" content="已删除" placement="top">
              <el-tag size="small" :type="codeInfo.memberLabelStatus == 0 ? 'warning' : 'info'">{{ codeInfo.memberLabelName || '--' }}</el-tag>
            </el-tooltip>
          </div>
        </div>
        <div v-if="codeInfo.statusFlag != 2 && codeInfo.statusFlag" class="flex" style="padding-top:20px;">
          <el-button v-if="codeInfo.hmType == 2 && codeInfo.statusFlag == 1" type="primary" style="width:120px;margin-right: 12px;" @click="downloadQR"><i class="iconfont-hb3 iconxiazai m-r-6"></i>下载二维码</el-button>
          <el-button type="primary" plain style="width:98px;" @click="modifyCode">编辑</el-button>
          <el-button class="button-discard specter" type="danger" plain :style="codeInfo.hmType == 2 && useMemberList.length > 0 ? '' : 'border-color: #F5222D;'" @click="discardCode">作废</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" ref="page">
      <el-tab-pane label="详情信息" name="first" v-if="$getButtonLimit($buttonCode.infoActCode)" :limit-code="$buttonCode.infoActCode">
        <act-code-detail-info :enterprise-id="codeInfo.enterpriseId" :welcome-id="codeInfo.welcomeId" :hm-id="$route.query.hmId" @useMemberList="useMemberData"></act-code-detail-info>
      </el-tab-pane>
      <el-tab-pane label="数据统计" name="second" v-if="$getButtonLimit($buttonCode.dataActCode)" :limit-code="$buttonCode.dataActCode">
        <act-code-detail-statistics :chart-width="chartWidth" :hm-id="$route.query.hmId"></act-code-detail-statistics>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import actCodeDetailInfo from '../../components/actCodeDetailInfo.vue';
import actCodeDetailStatistics from './actCodeDetailStatistics.vue';
import { _throttle } from '@/common/js/public';
import { getRequest, deleteRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
  name: 'actCodeDetail',
  components: { actCodeDetailInfo, actCodeDetailStatistics },
  props: {
    hmId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chartWidth: 0,
      fixedHeight: 217,
      codeInfo: {},
      loading: false,
      activeName: 'first',
      codeStatusLis: [
        { value: '', style: '' },
        { value: '正常', style: 'success' },
        { value: '已作废', style: 'danger' },
        { value: '待生效', style: 'info' },
        { value: '正常-今日已达上限', style: 'warning' }
      ],
      statusIndex: 1,
      scrollTop: 0,
      useMemberList: []
    };
  },
  methods: {
    downloadQR() {
      const downloadFile = (fileName, content) => {
        const url = content;
        const x = new XMLHttpRequest();
        x.open('GET', url, true);
        x.responseType = 'blob';
        x.onload = function(e) {
          const blob = new Blob([x.response]);
          let url = window.URL.createObjectURL(blob);
          let a = document.createElement('a');
          a.href = url;
          a.download = fileName + '.png';
          a.click();
        };
        x.send();
      };
      downloadFile(this.codeInfo.hmId + '_' + this.codeInfo.name, this.codeInfo.wxQrcode);
    },
    modifyCode() {
      this.$router.push(`/actCodeEdit?hmId=${this.$route.query.hmId}`);
    },
    discardCode() {
      const that = this;
      this.$confirm('此操作将永久废弃该活码，请确保不影响其他投放使用!', '确认要作废该活码？', {
        confirmButtonText: '作废',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.loading = true;
        deleteRequest('/haoban-manage3-web/hm/qrcode/del', { hmId: that.$route.query.hmId }).then(res => {
          that.loading = false;
          if (res.data.code == 0) {
            this.getActCodeInfo();
            return;
          }
          errMsg.errorMsg(res.data);
        });
      });
    },
    async getActCodeInfo() {
      const that = this;
      if (that.$route.query.hmId.length <= 0) return;
      that.loading = true;
      getRequest('/haoban-manage3-web/hm/qrcode/detail', { hmId: that.$route.query.hmId })
        .then(res => {
          let resData = res.data;
          that.loading = false;
          if (resData.code == 0) {
            that.statusIndex = resData.result.statusFlag == 1 && resData.result.overFlag == 1 ? 4 : resData.result.statusFlag;
            that.codeInfo = resData.result;
            that.fixedHeight = that.codeInfo.statusFlag != 2 ? 260 : 217;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    scrollMethod: _throttle(function() {
      // 节流会不自然 左右不滑动
      this.scrollTop = document.getElementById('hb-layout-pager-one').scrollTop;
    }, 100),
    useMemberData(data) {
      this.useMemberList = data;
    }
  },
  mounted() {
    let that = this;
    this.activeName = this.$route.query.activeName || 'first';
    this.chartWidth = this.$refs.page.$el.clientWidth;
    that.getActCodeInfo();
    document.getElementById('hb-layout-pager-one').addEventListener('scroll', that.scrollMethod);
  },
  destroyed() {
    document.getElementById('hb-layout-pager-one').removeEventListener('scroll', this.scrollMethod);
  }
};
</script>
<style lang="scss" scoped>
.app-detail-wrap {
  // height: 100%;
  background: #fff;
  .p-b-40 {
    padding-bottom: 40px;
  }
}
.img-200 {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  padding-right: 30px;
}
.height-22 {
  height: 22px;
}
.text-ellipsis-white {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fixed-tab {
  position: absolute;
  top: 110px;
  z-index: 20;
  padding-bottom: 0;
  height: 40px;
  background: white;
  width: calc(100% - 180px);
  padding-top: 20px;
  // left: 50px;
}
.button-discard {
  width: 98px;
  margin-left: 20px;
}
</style>
