<template>
  <div id="business-list">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(item, i) in menuData" :key="i" :to="{ path: item.path }">{{ item.name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <header>
        <el-select v-model="search.status" placeholder="所有状态" @change="statusChanged" clearable>
          <el-option label="正常" :value="1"></el-option>
          <el-option label="合同欠费停用" :value="3"></el-option>
          <el-option label="商户冻结停用" :value="5"></el-option>
        </el-select>
        <el-input v-model.trim="search.input" placeholder="请输入内容" prefix-icon="el-icon-search" @keydown.enter.native="statusChanged">
          <i
            class="el-input__icon el-icon-error"
            slot="suffix"
            v-show="search.input.length > 0"
            @click="clearSearch"
          ></i>
        </el-input>
      </header>
      <el-table
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%">
        <el-table-column
          label="商户信息"
          show-overflow-tooltip>
          <template slot-scope="{row}">
            <div class="businessInfo">
              <img :src="row.qcloudImageUrl">
              <div class="businessInfoCon">
                <p>{{ row.enterpriseName || '--' }}</p>
                <p>{{ row.brandName || '--' }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="enterprise_id"
          show-overflow-tooltip>
          <template slot-scope="{row}">
            {{ row.enterpriseId || '--' }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="200">
          <template slot-scope="{row}">
            <el-button
              v-if="$getButtonLimit($buttonCode.customerInformation)" :limit-code="$buttonCode.customerInformation"
              @click.native.prevent="$router.push({ path: '/business-log?name=平台运维&icon=icon-03&code=platform_operation&tabCode=platform_business_list', query: { enterpriseId: row.enterpriseId } })"
              type="text">
              客户资料
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="tableData.length"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[20, 40, 60, 80]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="page.totalCount">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getRequest } from '@/api/api';

export default {
  name: 'business-list',
  data() {
    return {
      menuData: [
        {
          name: '商户列表',
          // path: '/api-retry'
        }
      ],
      search: {
        status: '',
        input: ''
      },
      tableData: [],
      page: {
        currentPage: 1,
        pageSize: 20,
        totalCount: 999
      },
    }
  },
  mounted() {
    this.getList();
    this.$emit('showTab', 'platform_business_list');
  },
  methods: {
    getList() {
      const { currentPage, pageSize } = this.page;
      const { input, status } = this.search;
      let params = {
        pageNum: currentPage,
        pageSize: pageSize,
        search: input || undefined,
        status: status || undefined,
      }
      getRequest('/gic-platform-operation/enterpriseLog/getEnterpriseList', params).then(res => {
        if(res.data.code == 0) {
          let result = res.data.result || {};
          this.page.totalCount = result.totalCount || 0;
          this.tableData = result.result || [];
        }
      })
    },
    statusChanged() {
      this.page.currentPage = 1;
      this.getList();
    },
    clearSearch() {
      this.search.input = '';
      this.page.currentPage = 1;
      this.getList();
    },
    // 改变每页显示数量
    handleSizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
      this.getList();
    },
    // 换页
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getList();
    },
  }
}
</script>
<style lang="scss" scoped>
#business-list {
  .el-breadcrumb {
    padding: 20px;
    border-bottom: 1px solid #DCDFE6;
  }
  .content {
    padding: 20px;
  }
  background-color: #fff;
  header {
    display: flex;
    margin-bottom: 20px;
    .el-select {
      width: 160px;
      margin-right: 10px;
    }
    .el-input {
      width: 247px;
    }
  }
  .businessInfo {
    display: flex;
    img {
      width: 40px;
      height: 40px;
      border-radius: 5px;
      margin-right: 10px;
    }
    &Con {
      display: flex;
      flex-direction: column;
      p:last-of-type {
        font-size: 12px;
        colot: #909399;
      }
    }
  }
}
.el-pagination {
  text-align: right;
  margin-top: 20px;
}
</style>
