<template>
  <div class="app-detail-wrap">
    <div v-if="welcomeSpeech">
      <div class="title flex">
        <div class="blue-block"></div>
        <span class="font-w-500">欢迎语</span>
      </div>
    </div>
    <div>
      <div class="title flex">
        <div class="blue-block"></div>
        <span class="font-w-500">使用成员</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.cardName }}</p>
            <p class="color-606266 line-18 text-ellipsis font-12">D3433433456</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.cardName }}</p>
            <p class="color-606266 line-18 text-ellipsis font-12">D3433433456</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.cardName }}</p>
            <p class="color-606266 line-18 text-ellipsis font-12">D3433433456</p>
          </template>
        </el-table-column>
        <el-table-column prop="" label="今日已达上限" show-overflow-tooltip min-width="185px">
          <template slot-scope="scope">
            {{ scope.row.cardName }}
          </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>
export default {
  name: 'act-code-detail-info',
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      welcomeSpeech: true,
      useMemberData: [{ cardName: '电话电话电话' }],
      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();
    },

    getUseTableList() {
      const that = this;
      that.loading = true;
      let para = {
        // gicEnterpriseId: that.brandId,
        pageNum: that.currentPage, // 当前页
        pageSize: that.pageSize // 一页显示个数
      };
      console.log(para);
      that.loading = false;
      //   postRequest('/haoban-app-customer-web/cardCoupon/find-card-page', para)
      //     .then(res => {
      //       let resData = res.data;
      //       that.loading = false;
      //       if (resData.errorCode == 1) {
      //         that.tableData = resData.result.list || [];
      //         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() {
    let that = this;
    // 判断brandId
    that.getUseTableList();
  }
};
</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;
}
</style>
