<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.hmId }}</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-tag size="small" type="info">{{ codeInfo.memberLabelName || '--' }}</el-tag>
          </div>
        </div>
        <div v-if="codeInfo.statusFlag != 2" class="flex" style="padding-top:20px;">
          <el-button v-if="codeInfo.hmType == 2 && codeInfo.statusFlag == 1" icon="el-icon-download" type="primary" style="width:120px;margin-right: 12px;" @click="downloadQR">下载二维码</el-button>
          <el-button type="primary" plain style="width:98px;" @click="modifyCode">编辑</el-button>
          <el-button type="danger" plain style="width:98px;margin-left: 20px; border-color: #F5222D;" @click="discardCode">作废</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">
      <el-tab-pane label="详情信息" name="first">
        <act-code-detail-info :enterprise-id="codeInfo.enterpriseId" :welcome-id="codeInfo.welcomeId" :hm-id="$route.query.hmId"></act-code-detail-info>
      </el-tab-pane>
      <el-tab-pane label="数据统计" name="second">
        <act-code-detail-statistics :hm-id="$route.query.hmId"></act-code-detail-statistics>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import actCodeDetailInfo from './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 {
      codeInfo: {},
      loading: false,
      activeName: 'first',
      codeStatusLis: [
        { value: '', style: '' },
        { value: '正常', style: 'success' },
        { value: '已作废', style: 'danger' },
        { value: '待生效', style: 'info' },
        { value: '正常-今日已达上限', style: 'warning' }
      ],
      statusIndex: 1,
      scrollTop: 0,
      scrollStyle: 'position:fixed;top:80px;z-index:1;padding-bottom:0;height:40px;background:yellow;'
    };
  },
  methods: {
    downloadQR() {
      window.open(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 res = {
          //   data: {
          //     errorCode: 1,
          //     result: {
          //       name: '测试活码好的可以',
          //       hmId: '727363646474849483332',
          //       statusFlag: 1,
          //       overFlag: 1,
          //       hmType: 2,
          //       creatorName: '少见多怪',
          //       createTime: 182736347383,
          //       passFlag: 0,
          //       welcomeId: 'b680a2cf18b742cc9f4560f6195c9ec6',
          //       enterpriseId: '5bd929fd3b2c49deaa1184bcb0d669b3',
          //       wxQrcode: '',
          //       memberLabelName: '稍加稳得',
          //       hmGroupName: '测试分组'
          //     }
          //   }
          // };
          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;
            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)
  },
  mounted() {
    let that = this;
    this.activeName = this.$route.query.activeName || 'first';
    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: 80px;
  z-index: 1;
  padding-bottom: 0;
  height: 40px;
  background: white;
  width: 100%;
  // left: 50px;
}
</style>
