<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>
            <div class="flex">
              <img class="image-40" src="@/assets/user-default.svg" />
              <div class="p-l-10 line-20" style="width: calc(100% - 50px);">
                <div class="flex text-ellipsis">
                  <span class="text-ellipsis">飞扬飞扬飞扬飞扬飞扬飞扬飞扬</span>
                  <span class="color-909399 text-ellipsis"> (刘飞扬)</span>
                </div>
                <p class="font-12">189****5322</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="会员卡号" show-overflow-tooltip min-width="126px">
          <template slot-scope="scope">
            {{ scope.row.cardName }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="会员等级" show-overflow-tooltip min-width="86px">
          <template slot-scope="scope">
            {{ scope.row.cardName }}
          </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.cardName }}</p>
            <p class="color-606266 line-18 text-ellipsis font-12">DM34344444444DM34344444444</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="107px">
          <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="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.cardName }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="关联类型" show-overflow-tooltip min-width="103px">
          <template slot-scope="scope">
            {{ scope.row.cardName }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="关联信息" show-overflow-tooltip min-width="103px">
          <template slot-scope="scope">
            {{ scope.row.cardName }}
          </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 { postRequest } from '@/api/api';
export default {
  name: 'actCodeRecord',
  components: {},
  props: {
    hmId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      // searchInputStore: '',
      // searchInputGuide: '',
      tableData: [{ cardName: '常常常常常常常常常常常常常常常常', createTime: 1891282736363 }],
      // 分页参数
      currentPage: 1,
      pageSize: 20,
      total: 0,
      sortColumn: '',
      sortType: ''
      // 面包屑
    };
  },
  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.sortColumn = column.prop;
      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;
      let para = {
        // gicEnterpriseId: that.brandId,
        // store: that.searchInputStore || '', // 搜索字段
        // guide: that.searchInputGuide || '', // 搜索字段
        pageNum: that.currentPage, // 当前页
        pageSize: that.pageSize, // 一页显示个数
        hmId: that.hmId
      };
      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;
    that.getTableList();
  }
};
</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>
