<template>
  <el-row>
    <!-- 表格头部 -->
    <el-row class="mb-20">
      <span class="list-title">
        企业列表
        <Lookicon v-if="filterButton('company_lookicon')" ref="Lookicon" :look-status="searchParams.lookStatus" @changeLook="changeLook" />
      </span>
      <el-button v-if="filterButton('company_add')" type="primary" :loading="global.loading" @click="$emit('rowOperation', {}, -1, 'add')">新增</el-button>
      <!-- <el-button v-if="filterButton('export')" :loading="global.loading" @click="exportExcel">导出</el-button> -->
    </el-row>
    <!-- 表格内容 -->
    <TableElement
      :table-data="list"
      :colum-obj="columObj"
      :page-obj="pageObj"
      :loading="global.loading"
      @rowOperation="rowOperation"
      @selectionChange="selectionChange"
      @getList="getList()"
    >
      <template #status="{row}">
        <div class="project-num">
          <div :style="{ color: ({ 0: '#d9001b', 1: '#009900', 2: '#a6a6a6'})[row.status] }">{{ global.dict.status[row.status] || 0 }}</div>
        </div>
      </template>
      <template #projectNum="{row}">
        <div class="project-num">
          <el-button type="text" :disabled="!row.projectNum || row.projectNum <= 0" @click="rowOperation(row, row.index, 'seeDetail', 'project')">{{ row.projectNum || 0 }}</el-button>
        </div>
      </template>
    </TableElement>
  </el-row>
</template>
<script>
import TableElement from '@/components/ElmTable/index.vue'
import { deepClone } from '@/utils'
import { getCompanyPage } from '@/apiV2/company'

export default {
  components: { TableElement },
  inject: ['global'],
  props: {
    treeIds: { // 侧边栏
      type: String,
      default: ''
    },
    searchParams: { // 搜索栏
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      openExport: false,
      list: [], // 数据
      selectedList: [], // 选中的数据
      pageObj: { // 分页配置
        current: 1,
        size: 10,
        total: 0,
        pages: 0
      },
      columObj: { // 表格配置
        lazy: 'true',
        columnData: [
          { ownDefined: true, prop: 'index', label: '序号', width: 50, ownDefinedReturn: (row, index) => index + 1, align: 'center' },
          { text: true, prop: 'name', label: '企业名称', align: 'center' },
          { text: true, prop: 'userName', label: '企业账号', align: 'center' },
          { text: true, prop: 'contactName', label: '联系人', align: 'center' },
          { text: true, prop: 'contactMobile', label: '联系人手机', align: 'center' },
          { ownSlot: true, prop: 'status', label: '状态', align: 'center' },
          { ownSlot: true, prop: 'projectNum', label: '分配项目', align: 'center' },
          {
            isOperation: true, prop: 'operation', label: '操作', sortable: false, fixed: 'right', width: '240px',
            operation: [
              { operation: 'seeDetail', type: 'text', label: '查看', isShow: (row) => this.filterButton('company_see') },
              { operation: 'edit', type: 'text', label: '编辑', isShow: (row) => this.filterButton('company_edit') },
              { operation: 'serviceOn', type: 'text', label: '服务开通', isShow: (row) => this.filterButton('company_serviceOn') },
              { operation: 'serviceRenew', type: 'text', label: '服务续期', isShow: (row) => this.filterButton('company_serviceRenew') },
              { operation: 'serviceOff', type: 'text', label: '服务注销', isShow: (row) => this.filterButton('company_serviceOff') },
              { operation: 'resetPassword', type: 'text', label: '重置密码', isShow: (row) => this.filterButton('company_resetPassword') },
              { operation: 'toggleStatus', type: 'text', labelRow: row => row.status !== 0 ? '停用' : '启用', isShow: (row) => this.filterButton('company_disable') },
              { operation: 'delete', type: 'text', label: '删除', isShow: (row) => this.filterButton('company_delete') && row.status === 0, color: '#F56C6C' }
            ]
          }
        ]
      }
    }
  },
  methods: {
    async getList(params) { // 表格数据 - 获取
      this.global.loading = true
      if (params != null) this.searchParams = params
      try {
        // TODO: 获取数据
        // const { data } = { data: { records: [{ name: 'test' }], pages: 1, total: 1 }}
        // const { data } = await request('/fs/personinout/tvoucherrecords/freezeList', { params: this.genQuery() })
        const { data } = await getCompanyPage(this.genQuery())
        const { records, pages, total } = data
        this.list = this.filterTabledata(records)
        Object.assign(this.pageObj, { pages, total })
      } finally {
        this.global.loading = false
      }
    },
    filterTabledata(list) { // 表格数据 - 过滤
      return list.map(item => ({
        ...item
        // TODO: 表格数据展示是否要转换（看情况）
      }))
    },
    async exportExcel() { // 导出
      this.global.loading = true
      try {
        // TODO: 导出接口
        // const res = await request('/fs/personinout/tvoucherrecords/freezeExport', { params: this.genQuery() })
        // const res = await exportExchangeOrder(this.genQuery())
        // this.downloadExcel(res)
      } finally {
        this.global.loading = false
      }
    },
    genQuery() { // 产生最终参数
      const { current, size } = this.pageObj
      const query = Object.assign({ current, size }, this.filterSearchParams()) // 分页 & 查询
      return query
    },
    filterSearchParams() { // 查询字段过滤（请求数据过滤查询不影响原数据）
      // 复制一份
      const params = deepClone(this.searchParams)
      // 自定义部分
      // TODO: 搜索数据过滤
      // if (this.searchParams.timerange?.length) {
      //   params['starttime'] = this.searchParams.timerange[0]
      //   params['endtime'] = this.searchParams.timerange[1]
      //   delete params.timerange
      // }
      // 过滤空数据
      Object.entries(params).forEach(([key, val]) => {
        if (val == null || val === '') delete params[key]
      })
      return params
    },
    rowOperation(row, idx, actionName, params) { // 行操作
      console.log(actionName, row)
      this.$emit('rowOperation', row, idx, actionName, params)
    },
    selectionChange(list) { // 行选择
      this.selectedList = list
    },
    changeLook(e) {
      this.searchParams.lookStatus = e
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.project-num {
  text-align: center;
  width: 100%;
}
</style>

