<template>
  <section class="common-right-wrap">
    <div class="p-20">
      <!-- <div class="flex m-b-20">
        <el-input placeholder="请输入门店名称/code" v-model="searchInputStore" class="m-r-10" style="width: 260px;" @keyup.native="value => toInput(value, searchInputStore)" clearable @clear="clearInput()" prefix-icon="el-icon-search"></el-input>
        <el-input placeholder="请输入导购名称/code" v-model="searchInputGuide" style="width: 260px;" @keyup.native="value => toInput(value, searchInputGuide)" clearable @clear="clearInput()" prefix-icon="el-icon-search"></el-input>
      </div> -->
      <el-table ref="recordTableRef" v-loading="loading" :data="tableData" tooltip-effect="dark" class="act-code-table" @sort-change="sortChange">
        <el-table-column prop="" label="基本信息" show-overflow-tooltip min-width="210px" fixed>
          <template slot-scope="scope">
            <div class="flex">
              <img v-if="scope.row.memberImage" class="image-40" :src="scope.row.memberImage" />
              <img v-if="!scope.row.memberImage" class="image-40" src="@/assets/user-default.svg" />

              <div v-if="!scope.row.memberName && !scope.row.memberNick && !scope.row.memberPhone" class="p-l-10" style="width: calc(100% - 50px);line-height: 40px;">--</div>
              <div v-if="(scope.row.memberName || scope.row.memberNick) && scope.row.memberPhone" class="p-l-10 line-20" style="width: calc(100% - 50px);">
                <div class="flex text-ellipsis">
                  <span class="text-ellipsis">{{ scope.row.memberName }}</span>
                  <span :class="scope.row.memberName ? 'color-909399 text-ellipsis' : 'text-ellipsis'" v-if="scope.row.memberNick"> {{ !scope.row.memberName ? scope.row.memberNick : '（' + scope.row.memberNick + ')' }}</span>
                </div>
                <p class="font-12">{{ scope.row.memberPhone }}</p>
              </div>
              <div v-else>
                <div v-if="scope.row.memberName && scope.row.memberNick && !scope.row.memberPhone" class="p-l-10" style="line-height: 40px;">
                  <div class="flex text-ellipsis">
                    <span class="text-ellipsis">{{ scope.row.memberName }}</span>
                    <span class="color-909399 text-ellipsis"> （{{ scope.row.memberNick }})</span>
                  </div>
                </div>
                <div v-else class="p-l-10" style="width: calc(100% - 50px);line-height: 40px;">{{ scope.row.memberName || scope.row.memberNick || scope.row.memberPhone }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="会员卡号" show-overflow-tooltip min-width="126px">
          <template slot-scope="scope">
            {{ scope.row.memberCardNo || '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="会员等级" show-overflow-tooltip min-width="86px">
          <template slot-scope="scope">
            {{ scope.row.memberGradeName || '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="导购信息" show-overflow-tooltip min-width="128px">
          <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="107px">
          <template slot-scope="scope">
            {{ scope.row.staffName || '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="添加时间" show-overflow-tooltip min-width="106px" sortable>
          <template slot-scope="scope">
            <div class="line-20">{{ scope.row.createTime | timeStampToYmd }}</div>
            <div class="line-20">{{ scope.row.createTime | timeStampToHms }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="标签" show-overflow-tooltip min-width="144px">
          <template slot-scope="scope">
            {{ scope.row.memberLabelName || '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="关联类型" show-overflow-tooltip min-width="103px">
          <template slot-scope="scope">
            {{ scope.row.addChannel == 1 ? '引流链接' : '员工活码' }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="关联信息" show-overflow-tooltip min-width="150px">
          <template slot-scope="scope">
            {{ scope.row.addChannel == 1 ? scope.row.linkName || '--' : scope.row.hmName || '--' }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block common-wrap__page text-right m-t-24" v-if="tableData.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>
  </section>
</template>
<script>
import errMsg from '@/common/js/error';
// import { _debounce } from '@/common/js/public';
import { postJsonRequest } from '@/api/api';
export default {
  name: 'actCodeRecord',
  components: {},
  data() {
    return {
      loading: false,
      tableData: [],
      // searchInputStore: '',
      // searchInputGuide: '',
      // 分页参数
      currentPage: 1,
      pageSize: 20,
      total: 0,
      sortType: 'desc'
    };
  },
  methods: {
    // /**
    //  * 输入
    //  */
    // toInput: _debounce(function(e, value, type) {
    //   const that = this;
    //   that.currentPage = 1;
    //   that.getTableList();
    // }, 500),
    // clearInput() {
    //   const that = this;
    //   that.currentPage = 1;
    //   that.getTableList();
    // },
    /**
     * 排序
     */
    sortChange(column, prop, order) {
      const that = this;
      that.currentPage = 1;
      that.sortType = column.order == 'ascending' ? 'asc' : 'desc'; // 默认倒序
      that.getTableList();
    },
    /**
     * 分页---页码变化
     *  @param {Number} val
     */
    handleSizeChange(val) {
      let that = this;
      that.currentPage = 1;
      that.pageSize = val;
      that.getTableList();
    },

    /**
     * 分页---当前页变化
     *  @param {Number} val
     */
    handleCurrentChange(val) {
      let that = this;
      that.currentPage = val;
      that.getTableList();
    },
    /**
     * 获取列表数据
     */
    async getTableList() {
      const that = this;
      that.loading = true;
      const { startTime, endTime, clerkId, linkId, hmId } = this.$route.query;
      let para = {
        pageNum: that.currentPage, // 当前页
        pageSize: that.pageSize, // 一页显示个数
        linkId,
        hmId,
        clerkId,
        startTime,
        endTime,
        // addChannel: 1,
        addChannel: linkId ? 1 : hmId ? this.$route.query.addChannel : 0, // 不具备传0
        createTimeOrder: that.sortType || ''
      };
      postJsonRequest('/haoban-manage3-web/hm/qrcode/wxUserAddLog/list', para)
        .then(res => {
          let resData = res.data;
          that.loading = false;
          if (resData.code == 0) {
            that.tableData = resData.result.result || [];
            // that.tableData[0].memberPhone = '';
            // that.tableData[0].memberNick = '';
            // that.tableData[0].memberName = '';
            that.total = resData.result.totalCount || 0;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.loading = false;
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  mounted() {
    let that = this;
    that.getTableList();
    console.log(this.$route.query);
  }
};
</script>
<style type="text/scss" lang="scss" scoped>
.p-20 {
  padding: 20px;
  box-sizing: border-box;
}

.image-40 {
  height: 40px;
  width: 40px;
  border-radius: 20px;
}
.line-20 {
  line-height: 20px;
}
</style>
