<template>
  <div class="app-detail-wrap">
    <div v-if="welcomeData" style="padding-bottom: 40px;">
      <div class="title flex">
        <div class="blue-block"></div>
        <span class="font-w-500 color-303133">欢迎语</span>
        <span class="font-w-500 color-303133 font-14" style="padding-left:780px;">欢迎语预览</span>
      </div>
      <div class="flex">
        <div class="welcome-left-view">
          <div class="flex line-20 font-14 color-303133">
            <div style="width: 84px;">欢迎语标题：</div>
            <div style="width: 555px;">{{ welcomeData.title }}</div>
          </div>
          <div class="flex p-t-20 line-20 font-14 color-303133">
            <div style="width: 84px;">欢迎语内容：</div>
            <div style="width: 555px;">{{ welcomeData.welcomeContent }}</div>
          </div>
          <div class="link-file-view" v-if="welcomeData.welcomeMediaList.length > 0">
            <div class="flexBoxContainer" v-for="(item, index) in welcomeData.welcomeMediaList" :key="index">
              <div class="flexBox">
                <svg-icon :iconname="iconType[item.mediaType]" size="16" style="margin-right: 13px;"> </svg-icon>
                <span class="popverText color-606266">
                  {{ item.mediaTitle }}
                  <span v-if="item.mediaType == 5">({{ item.miniProgramPage }})</span>
                </span>
              </div>
            </div>
          </div>
        </div>
        <preview-welcome :welcomeContent="welcomeData.welcomeContent" :mediaList="welcomeData.welcomeMediaList"></preview-welcome>
      </div>
    </div>
    <div v-if="type == 'actCode'">
      <div class="title flex">
        <div class="blue-block"></div>
        <span class="font-w-500 color-303133">使用成员</span>
      </div>
      <el-table ref="useMemberTableRef" v-loading="loading" :data="useMemberData" tooltip-effect="dark">
        <el-table-column prop="" label="导购信息" show-overflow-tooltip min-width="185px">
          <template slot-scope="scope">
            <p class="line-20 text-ellipsis">{{ scope.row.clerkName || '--' }}</p>
            <p class="color-606266 line-18 text-ellipsis font-12">{{ scope.row.clerkCode || '--' }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="" label="导购所属门店" show-overflow-tooltip min-width="185px">
          <template slot-scope="scope">
            <p class="line-20 text-ellipsis">{{ scope.row.storeName || '--' }}</p>
            <p class="color-606266 line-18 text-ellipsis font-12">{{ scope.row.storeCode || '--' }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="" label="企微号" show-overflow-tooltip min-width="185px">
          <template slot-scope="scope">
            {{ scope.row.staffName || '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="今日已达上限" show-overflow-tooltip min-width="185px">
          <template slot-scope="scope">
            {{ scope.row.overFlag == 1 ? '是' : '否' }}
          </template>
        </el-table-column>
      </el-table>
      <div class="text-right m-t-24 block" v-if="useMemberData.length != 0">
        <dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </dm-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import previewWelcome from '@/components/preview-welcome.vue';
import { getRequest, postJsonRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
  name: 'act-code-detail-info',
  components: { previewWelcome },
  props: {
    enterpriseId: {
      type: String,
      default() {
        return '';
      }
    },
    welcomeId: {
      type: String,
      default() {
        return '';
      }
    },
    hmId: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'actCode'
    }
  },
  data() {
    return {
      welcomeData: null,
      iconType: {
        1: 'iconwenjianleixingtupian',
        2: 'iconwenjianleixingshipin',
        3: 'iconwenjianleixing-wenjian',
        4: 'iconwenjianleixing-lianjie',
        5: 'iconwenjianleixing-xiaochengxu', // 小程序
        6: 'iconwenjianleixing-xiaochengxu', // 带参小程序
        7: 'icongongzhonghao1' // 带参公众号
      },
      useMemberData: [],
      loading: false,
      currentPage: 1,
      pageSize: 20,
      total: 0
    };
  },
  methods: {
    /**
     * 分页---页码变化
     *  @param {Number} val
     */
    handleSizeChange(val) {
      let that = this;
      that.currentPage = 1;
      that.pageSize = val;
      that.getUseTableList();
    },

    /**
     * 分页---当前页变化
     *  @param {Number} val
     */
    handleCurrentChange(val) {
      let that = this;
      that.currentPage = val;
      that.getUseTableList();
    },
    getwelcomeInfo() {
      let that = this;
      if (!this.welcomeId) return;
      let para = {
        welcomeId: this.welcomeId,
        enterpriseId: this.enterpriseId || ''
      };
      getRequest('/haoban-manage3-web/welcome/get', para)
        .then(res => {
          let resData = res.data;
          // that.loading = false;
          if (resData.code == 0 && resData.result) {
            that.welcomeData = resData.result;
          }
        })
        .catch(error => {
          // that.loading = false;
          this.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    getUseTableList() {
      const that = this;
      that.loading = true;
      let para = {
        hmId: that.hmId,
        pageNum: that.currentPage, // 当前页
        pageSize: that.pageSize // 一页显示个数
      };
      postJsonRequest('/haoban-manage3-web/hm/qrcode/detail-clerk-list', para)
        .then(res => {
          let resData = res.data;
          that.loading = false;
          if (resData.code == 0) {
            that.total = resData.result.totalCount || 0;
            that.useMemberData = resData.result.result || [];
            // that.total = resData.result.pageInfo ? resData.result.pageInfo.total : 0;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.loading = false;
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  mounted() {
    if (this.type == 'actCode') {
      this.getUseTableList();
    }
    this.getwelcomeInfo();
  },
  watch: {
    welcomeId: function(newData, oldData) {
      const that = this;
      if (!newData || newData.length <= 0) return;
      that.welcomeId = newData || '';
      that.getwelcomeInfo();
    }
  }
};
</script>
<style lang="scss" scoped>
.blue-block {
  width: 4px;
  height: 16px;
  background: #2f54eb;
  margin: 7px 12px 7px 0;
}
.title {
  line-height: 30px;
  padding-bottom: 16px;
}
.line-20 {
  line-height: 20px;
}
.welcome-left-view {
  width: 639px;
  // margin-right: 120px;
}
.link-file-view {
  margin: 12px 0 0 84px;
  background: #f7f8fa;
  border-radius: 2px;
  padding: 14px 20px;
  .flexBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 13px;
    .popverText {
      font-size: 12px;
      line-height: 16px;
      max-width: 80%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .flexBoxContainer:last-child {
    .flexBox {
      margin-bottom: 0;
    }
  }
}
</style>
