<template>
  <div v-loading="loading" class="supplier-list">
    <div class="role-list__title">
      <p class="title">
        <span class="font">供应商列表</span>

        <el-button
          type="warning"
          class="fr"
          size="mini"
          @click="restSearch"
        >重置</el-button>
      </p>
      <p class="search">
        <el-input
          v-model="parmValue.name"
          placeholder="供应商名称"
          class="input-with-select"
          size="small"
          @blur="
            parmValue.page = 1;
            pageInfo.curr = 1;
            searchList();
          "
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="
              parmValue.page = 1;
              pageInfo.curr = 1;
              searchList();
            "
          />
        </el-input>
      </p>
    </div>
    <div class="data-show">
      <p
        v-if="tableData.length == 0"
        style="line-height: 60px; text-align: center; color: #909399"
      >
        暂无数据
      </p>
      <ul v-else class="main">
        <li
          v-for="(item, index) in tableData"
          :key="'supplier' + index"
          class="role-list__item"
          :class="{ active: item.code == activeCode }"
          @click="switchRoleHandle(item.code)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>

    <div class="Pagination tc" style="bottom:-100px">
      <el-pagination
        :current-page="pageInfo.curr"
        :size="'small'"
        layout="total,  jumper"
        :total="pageInfo.total"
        @current-change="currentChange"
      />
    </div>
  </div>
</template>
<script>
import asyncRequest from '@/apis/service/serviceParam/supplierAccount'
import mixinPage from '@/mixins/elPaginationHandle'
import { mapGetters } from 'vuex'

import resToken from '@/mixins/resToken'
export default {
  name: 'SupplierAccount',
  mixins: [mixinPage, resToken],

  computed: {
    // 组件SIZE设置
    ...mapGetters(['tablebtnSize', 'searchSize', 'size'])
  },
  data() {
    return {
      loading: false,
      activeCode: '',
      parmValue: {
        page: 1, // 页码
        size: 20, // 每页显示条数
        start: '',
        end: '',
        status: '',
        creater: '',
        company_name: '',
        name: '',
        ocr_status: ''
      },

      // 表格 - 数据
      tableData: [],
      // 表格 - 参数
      table: {
        stripe: true,
        border: true,
        _defaultHeader_: ['setcol']
      },
      // 表格 - 分页
      pageInfo: {
        size: 20,
        curr: 1,
        total: 0
      }
    }
  },
  mounted() {
    this.searchList()
  },
  methods: {
    restSearch() {
      // 表格 - 分页
      this.pageInfo = {
        size: 20,
        curr: 1,
        total: 0
      }
      this.parmValue = {
        page: 1, // 页码
        size: 20, // 每页显示条数
        start: '',
        end: '',
        status: '',
        company_name: '', // 创建人部门
        creater: '',
        name: '',
        person: '',
        ocr_status: ''
      }
      this.searchList()
    },
    switchRoleHandle(code) {
      this.activeCode = code
      this.$emit('change', code)
    },
    async currentChange(e) {
      this.parmValue.page = e
      this.pageInfo.curr = e
      await this.searchList()
    },
    // 刷新表格
    async searchList() {
      if (this.loading) return
      this.activeCode = ''
      this.loading = true
      const { code, data } = await asyncRequest.slist(this.parmValue)
      const scode = parseInt(code)
      if (scode === 0) {
        const { list, count } = data
        this.tableData = list
        this.pageInfo.total = Number(count + '')
        if (list.length !== 0) {
          this.switchRoleHandle(list[0].code)
        } else {
          this.switchRoleHandle('')
        }
      } else if (scode >= 100 && scode <= 104) {
        await this.logout()
      } else {
        this.tableData = []
        this.pageInfo.total = 0
      }
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.supplier-list {
  position: relative;
  width: 100%;
  height: 100%;
  .role-list__title {
    width: 100%;
    top: 0;
    left: 0;
    padding: 12px 16px;
    background: #f7f7f7;
    position: absolute;
    z-index: 2;
    margin: 0 0 10px 0;
    p.title {
      height: 35px;
      line-height: 29px;
      padding-left: 5px;
      span.font {
        font-size: 16px;
        font-weight: bolder;
      }
    }
  }
  .data-show {
    padding: 100px 16px 70px 16px;
    .main {
      li {
        height: 33px;
        line-height: 33px;
        overflow: hidden;
        text-overflow: ellipsis;
        &:hover {
          cursor: pointer;
        }
        &.active {
          color: #6954f0;
          // background: #f7f7f7;
        }
      }
    }
  }

  .Pagination {
    background: #f7f7f7;
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    padding: 12px 0 18px 0;
    width: 100%;
  }
}
</style>
