<template>
  <div style="width: 100%;">
    <template>
      <div class="search">
        <div class="left"></div>
        <div class="right" style="width: auto;">
          <div>
            <el-input
              v-model="search.fastSearch"
              placeholder="请输入店铺/企业名称"
              style="width: 180px !important; margin-right: 10px;"
            ></el-input>
            <el-select
              v-model="search.transCode"
              placeholder="请选择店铺状态"
              clearable
              style="width: 200px !important;"
            >
              <el-option
                v-for="item in transCodeList"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </div>
          <div class="leftBtn">
            <el-button type="primary" @click="fetchData">查询</el-button>
          </div>
        </div>
      </div>
      <cy-comm-table
        ref="commTable"
        v-loading="loading"
        :columns="columns"
        :table-options="tableOptions"
        :data="tableData"
        :count="total"
      />
    </template>
  </div>
</template>

<script>
// import { getAllTransCode, getSmbList } from '@/api/systemManage/smbLogManage/smbLogManage'

export default {
  name: 'SmbLogManage',
  data() {
    return {
      search: {
        fastSearch: '',
        transCode: ''
      },
      transCodeList: [],
      total: 20,
      loading: false,
      tableData: [{ enterpriseName: '1688', id: 1 }],
      tableOptions: {
        sortTable: true,
        maxHeight: 'calc(100vh - 395px)',
        height: 'calc(100vh - 395px)'
      },
      columns: [
        {
          label: '序号',
          index: true
        },
        {
          label: '企业名称',
          prop: 'enterpriseName',
          showTooltip: true
        },
        {
          label: '准入状态',
          prop: 'enterStatus',
          showTooltip: true
        },
        {
          label: '阶段',
          prop: 'stageName',
          showTooltip: true
        },
        {
          label: '失败原因',
          showTooltip: true,
          prop: 'reason'
        },
        {
          label: '基础额度（万元）',
          prop: 'basicAmount',
          showTooltip: true
        },
        {
          label: '创建时间',
          prop: 'gmtCreate',
          showTooltip: true
        },
        {
          label: '修改时间',
          prop: 'gmtModified',
          showTooltip: true
        },
        {
          label: '操作',
          show: true,
          render: (h, row) => {
            const btnList = [
              {
                msg: '查看',
                icon: 'iconfont icon-a-Group8141',
                power: '', // viewFinancingLoanInfo
                rowPower: [],
                category: 'see'
              },
              {
                msg: '补充材料',
                icon: 'iconfont icon-a-Group779',
                power: '', // viewFinancingLoanInfo
                rowPower: [],
                category: 'supInformation'
              },
              {
                msg: '修改',
                icon: 'iconfont icon-a-Group8151',
                power: '', // viewFinancingLoanInfo
                rowPower: [],
                category: 'edit'
              },
              {
                msg: '重新准入',
                icon: 'iconfont icon-a-Group8131',
                power: '', // viewFinancingLoanInfo
                rowPower: [],
                category: 'reAdd'
              }
            ]
            const options = btnList.map(item => {
              return (
                this.tablePower({ item, row }) && <el-tooltip class='item' effect='dark' content={item.msg} placement='top' >
                  <span class='table-icon-box' v-power={item.power}>
                    <i class={item.icon} onClick={() => { this.handlerOperate(item.category, row, item.msg) }}></i>
                  </span>
                </el-tooltip>
              )
            })
            return <div>{ options }</div>
          },
          width: 160
        }
      ]
    }
  },
  // mounted() {
  //   this.fetchData()
  // },
  computed: {
    tablePower() {
      return ({ item, row }) => {
        // const { rowPower, category } = item
        // if (category === 'see' && rowPower) {
        //   if (rowPower.includes(row.transCode)) {
        //     return true
        //   }
        //   return false
        // }
        return true
      }
    }
  },
  methods: {
    async fetchData() {
      // const params = {
      //   page: this.page,
      //   rows: this.size,
      //   transCode: this.search.transCode
      // }

      // this.loading = true

      // const res = await getSmbList(params)

      // this.loading = false

      // if (res.success) {
      //   this.tableData = res.rows || []
      //   this.total = res.records
      // }
    },
    async queryAllTransCode() {
      // const res = await getAllTransCode()

      // if (res.data.length) {
      //   this.transCodeList = res.data
      // }
    },
    handlerOperate(type, row, msg) {
      if (type === 'supInformation') {
        this.$router.push({
          name: 'StoreEnterpriseSupplement',
          query: {
            type: 'supInfo',
            id: row.id
          }
        })
      } else if (type === 'edit') {
        this.$router.push({
          name: 'StoreEnterpriseEdit',
          query: {
            type: 'edit',
            id: row.id
          }
        })
      } else if (type === 'reAdd') {
        this.$router.push({
          name: 'StoreEnterpriseReInvite',
          query: {
            type: 'edit',
            id: row.id
          }
        })
      } else if (type === 'see') {
        this.$router.push({
          name: 'StoreEnterpriseView',
          query: {
            type: 'edit',
            id: row.id
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">

</style>
