<template>
  <div style="padding: 20px">
    <el-input
      placeholder="请输入企业/商户"
      style="width: 180px"
      prefix-icon="el-icon-search"
      clearable
      v-model.trim="search.search"
      @change="onSearch"
    ></el-input>
    <el-select style="margin-left: 10px;width: 106px" placeholder="全部版本" clearable v-model="search.version" @change="onSearch">
      <el-option v-for="el in versionList" :key="el.value" :value="el.value" :label="el.label"></el-option>
    </el-select>
    <el-select style="margin-left: 10px;width: 106px" placeholder="全部状态" clearable v-model="search.bindFlag" @change="onSearch">
      <el-option v-for="el in bindFlagList" :key="el.value" :value="el.value" :label="el.label"></el-option>
    </el-select>
    <el-table style="margin-top:20px" :data="enterpriseList">
      <el-table-column label="企业信息" show-overflow-tooltip>
        <div slot-scope="{ row }" class="enterprise-info">
          <div class="logo">
            <img v-if="row.corpSquareLogoUrl" :src="row.corpSquareLogoUrl" alt="">
          </div>
          <span class="enterprise-name">{{ row.wxEnterpriseName }}</span>
        </div>
      </el-table-column>
      <el-table-column label="订购版本" prop="version" :formatter="formatVersion"></el-table-column>
      <el-table-column label="授权GIC商户数" prop="enterpriseCount"></el-table-column>
      <el-table-column label="最近授权时间">
        <div slot-scope="{ row }" style="line-height: normal">
          <p>{{ row.createTime | timeStampToYmd }}</p>
          <p>{{ row.createTime | timeStampToHms }}</p>
        </div>
      </el-table-column>
      <el-table-column label="最近编辑时间">
        <div slot-scope="{ row }" style="line-height: normal">
          <p>{{ row.updateTime | timeStampToYmd }}</p>
          <p>{{ row.updateTime | timeStampToHms }}</p>
        </div>
      </el-table-column>
      <el-table-column label="操作">
        <el-button slot-scope="{ row }" type="text" @click="toEnterpriseDetail(row)">详情</el-button>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="pager.total > 0"
      style="text-align: right"
      background
      layout="total,sizes,prev,pager,next"
      :total="pager.total"
      :page-sizes="pager.pageSizes"
      :page-size="pager.pageSize"
      :current-page="pager.currentPage"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
import api from '@/api/enterprise.js';

const { getEnterpriseList } = api;

export default {
  name: 'EnterpriseList',
  data() {
    return {
      versionList: [
        { label: '基础版', value: '1' },
        { label: '高级版', value: '2' }
      ],
      bindFlagList: [
        { label: '未绑定', value: '1' },
        { label: '已绑定', value: '2' }
      ],
      // 查询相关的数据
      search: {
        search: '',
        version: '',
        bindFlag: ''
      },
      // 分页相关的数据
      pager: {
        total: 0,
        pageSizes: [ 20, 40, 60, 80 ],
        pageSize: 20,
        currentPage: 1
      },
      // 企业列表
      enterpriseList: []
    };
  },
  created() {
    this.getEnterpriseList();
  },
  methods: {
    // 获取企业列表
    getEnterpriseList() {
      const { search, version, bindFlag } = this.search;
      const { pageSize, currentPage } = this.pager;
      const params = {
        search,
        version,
        bindFlag,
        pageSize,
        pageNum: currentPage
      };
      getEnterpriseList(params).then(res => {
        const { totalCount, result } = res.result || {};
        this.pager.total = totalCount || 0;
        this.enterpriseList = result || [];
      });
    },
    onSearch() {
      this.pager.currentPage = 1;
      this.getEnterpriseList();
    },
    onCurrentChange(currentPage) {
      this.pager.currentPage = currentPage;
      this.getEnterpriseList();
    },
    onSizeChange(pageSize) {
      this.pager.pageSize = pageSize;
      this.onSearch();
    },
    formatVersion(row, col, val) {
      let result = '--';
      this.versionList.some(el => {
        if (el.value == val) {
          result = el.label;
        }
        return el.value == val;
      });
      return result;
    },
    toEnterpriseDetail(enterpriseData) {
      const { wxEnterpriseId } = enterpriseData;
      this.$router.push(`/enterprise-detail?enterpriseId=${wxEnterpriseId}`);
    }
  }
};
</script>

<style scoped>
.enterprise-info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.logo {
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}
.logo img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 2px;
}
.enterprise-name {
  display: block;
  width: calc(100% - 50px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
