<template>
  <div class="app-detail-wrap p-20">
    <div class="flex p-b-40">
      <img v-if="!singleCode" class="img-200" src="../../../../assets/data/time.png" />
      <div class="text-ellipsis-white" :style="singleCode ? 'width:100%;' : 'width: calc(100% - 230px);'">
        <div class="p-t-12 flex">
          <div class="font-16 line-22 text-ellipsis-white height-22 font-w-500">活码名称活码名称活码名称活999</div>
          <el-tag effect="dark" type="success" style="margin-left: 8px;">正常</el-tag>
          <!-- 正常success/正常到上限warning/待生效info/已作废danger -->
        </div>
        <p class="font-14 m-t-10">ID：HM345675432456780</p>
        <div class="flex font-14" style="padding-top:20px;">
          <div class="flex flex-1">
            <div class="font-14 line-22">类 型：</div>
            <el-tag>{{ singleCode ? '单人活码' : '多人活码' }}</el-tag>
          </div>
          <div class="font-14 line-22 flex-1">创建人：达摩管理员</div>
          <div class="font-14 line-22 flex-1">创建时间：2022-05-23 11:30:08</div>
        </div>
        <div class="flex font-14" style="padding-top:15px;">
          <div class="font-14 line-22 flex-1">所属分组：分组名称</div>
          <div class="flex flex-1">
            <div class="font-14 line-22">自动通过好友：</div>
            <!-- 已开启/已关闭danger -->
            <el-tag>已开启</el-tag>
          </div>
          <div class="flex flex-1">
            <div class="font-14 line-22">活码标签：</div>
            <el-tag type="info">标签名称</el-tag>
          </div>
        </div>
        <div v-if="codeStatus != 5" class="flex" style="padding-top:20px;">
          <el-button v-if="!singleCode && codeStatus == 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>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="详情信息" name="first">
        <act-code-detail-info :brand-id="brandId"></act-code-detail-info>
      </el-tab-pane>
      <el-tab-pane label="数据统计" name="second">
        <act-code-detail-statistics :brand-id="brandId"></act-code-detail-statistics>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import actCodeDetailInfo from './actCodeDetailInfo.vue';
import actCodeDetailStatistics from './actCodeDetailStatistics.vue';
export default {
  name: 'actCodeDetail',
  components: { actCodeDetailInfo, actCodeDetailStatistics },
  props: {
    brandId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeName: 'second',
      singleCode: false,
      codeStatus: 1 // 1为正常 5为已作废
    };
  },
  methods: {
    // downloadQR() {},
    // modifyCode() {},
    // discardCode() {}
  }
};
</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;
}
.line-20 {
  line-height: 20px;
}
.text-ellipsis-white {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
