<template>
  <div class="fv-table-container">
    <!-- 表格头部按钮 -->
    <div class="fv-table-btn" v-if="tableConfig.btns">
      <div class="table-head-btn">
        <el-button
            v-for="btn in tableConfig.btns"
            :key="btn.key"
            :type="btn.type || ''"
            :color="btn.color || ''"
            v-perm="btn.auth || ['*:*:*']"
            @click="handleClickBtns(btn.key)"
        >
          {{ btn.name }}
        </el-button>
      </div>
    </div>
    <el-button v-if="tableConfig.export && tableConfig.export.open" @click="exportTable" color="#DED0B2"
               style="margin-bottom: 10px">导出
    </el-button>
    <!-- 列显示配置 -->
    <div v-if="isSettingCol" style="float: right">
      <el-tooltip effect="dark" content="列配置" placement="bottom">
        <el-button ref="buttonRef" link>
          <el-icon size="18">
            <Setting/>
          </el-icon>
        </el-button>
      </el-tooltip>
      <el-popover
          placement="bottom"
          :width="200"
          ref="popoverRef"
          :virtual-ref="buttonRef"
          virtual-triggering
          trigger="click">
        <div class="col-setting-checkall">
          <el-checkbox label="列展示" v-model="localData.allColShow" :indeterminate="localData.indeterminate"
                       @change="changeIsShowAll"></el-checkbox>
        </div>
        <div class="col-setting-list">
          <el-checkbox-group v-model="localData.checkGroup" @change="changeColShow">
            <el-space direction="vertical" alignment="flex-start" :size="0">
              <el-checkbox
                  v-for="item in tableConfig.columns"
                  :key="item.prop"
                  :label="item.label"
                  :value="item.prop"
              />
            </el-space>
          </el-checkbox-group>
        </div>
      </el-popover>
    </div>
    <!-- 表格部分 -->
    <div class="fv-table">
      <el-table
          :data="localData.list"
          v-loading="localData.loading"
          :row-key="tableConfig?.rowKey || 'id'"
          v-bind="$attrs"
          :show-overflow-tooltip="true"
          highlight-current-row
          @selection-change="selectionChange"
          @row-click="rowClick"
          @row-dblclick="rowDblclick"
          @cell-click="cellClick"
          v-tabh
          ref="tableInstance"
      >
        <template #default>
          <fvTableColumn v-for="column in localData.columns" :key="column.prop" :columns="column">
            <template v-if="column?.slots?.header" #[column?.slots?.header]="params">
              <slot :name="column?.slots?.header" v-bind="params || {}"></slot>
            </template>
            <template v-if="column?.slots?.default" #[column?.slots?.default]="params">
              <slot :name="column?.slots?.default" v-bind="params || {}"></slot>
            </template>
          </fvTableColumn>
        </template>
        <template #empty>
          <slot name="empty"></slot>
        </template>
        <template #append>
          <slot name="append"></slot>
        </template>
      </el-table>
      <!-- 分页 -->
      <fvPagination
          v-if="pagination"
          :current-page="localData.query.pageNum"
          :page-size="localData.query.pageSize"
          :page-sizes="[10, 20, 30, 40,50]"
          :total="localData.total"
          @changeSize="handleSizeChange"
          @goPage="handleCurrentChange"
      >
      </fvPagination>
    </div>
  </div>
</template>

<script setup>
import {ElNotification} from 'element-plus';
import {requestList} from '../../api/common';
import {exportExcel} from "@/utils/export-excel";

const props = defineProps({
  //表格配置
  tableConfig: {
    type: Object,
    default: {}
  },
  //若使用外部数据
  data: {
    type: Array,
    default: []
  },
  //是否使用分页
  pagination: {
    type: Boolean,
    default: true
  },
  // 是否显示列配置
  isSettingCol: {
    type: Boolean,
    default: true
  }
})

const tableInstance = ref()
const buttonRef = ref()
const popoverRef = ref()


const exportTable = () => {
  const $e = tableInstance.value.$el
  let $table = $e.querySelector('.el-table__fixed')
  if (!$table) {
    $table = $e
  }
  let fileName = ""
  if (props.tableConfig.export && props.tableConfig.export) {
    fileName = props.tableConfig.export.fileName
  }
  exportExcel($table, Object.keys(localData.list[0]), fileName)
}

const localData = reactive({
  list: [], // 表格数据
  query: {
    pageSize: 10,
    pageNum: 1
  },
  total: 0,
  loading: false,
  // 列展示设置
  columns: [],
  allColShow: true, // 默认全部列都展示
  indeterminate: false,
  checkGroup: []
})

const emits = defineEmits(['headBtnClick', 'selectionChange', 'rowClick', 'rowDblclick', 'getBaseQuery', 'cellClick', 'getTotal'])

const handleClickBtns = (key) => {
  emits('headBtnClick', key)
}

const filterColumns = () => {
  localData.columns = props.tableConfig.columns.map(item => {
    if (item.prop) {
      return {
        ...item
      }
    }
  })
}

const changeIsShowAll = (val) => {
  if (val) {
    filterColumns()
    localData.indeterminate = false
    localData.checkGroup = props.tableConfig.columns.map(item => item.prop)
  } else {
    localData.columns.length = 0
    localData.checkGroup.length = 0
    localData.indeterminate = false
  }
}

const changeColShow = (val) => {
  if (val.length == props.tableConfig.columns.length) {
    localData.indeterminate = false
    localData.allColShow = true
  } else if (val.length !== props.tableConfig.columns.length && val.length != 0) {
    localData.allColShow = false
    localData.indeterminate = true
  } else {
    localData.indeterminate = false
    localData.allColShow = false
  }
  const template = []
  props.tableConfig.columns.forEach(item => {
    val.forEach(v => {
      if (item.prop == v) {
        template.push(item)
      }
    })
  })
  localData.columns = template
}

filterColumns()

const getList = async () => {
  const {api, params} = props.tableConfig
  const queryParmas = {...localData.query, ...params}
  if (api) {
    localData.loading = true
    try {
      const {code, data, msg} = await requestList(api, queryParmas).then(res=>{
        // console.log(res)
        return res
      })
      // console.log(code,data,msg)
      if (code === 1000) {
        if (data.rows) {
          localData.list = data.rows
        } else {
          localData.list = data
        }
        localData.total = data.total
        emits('getTotal', localData.total)
        localData.loading = false
      } else {
        ElNotification({
          title: '提示',
          message: msg,
          type: 'error'
        })
        localData.loading = false
      }
    } catch (error) {
      console.log("error",error)
      if (!error){
        return
      }
      ElNotification({
        title: '提示',
        message: '请求数据失败',
        type: 'error'
      })
      localData.loading = false
    }
  } else {
    localData.list = props.data
  }
}

const selectionChange = (data) => {
  emits('selectionChange', data)
}

const rowClick = (row, column) => {
  emits('rowClick', row, column)
}

const rowDblclick = (row, column) => {
  emits('rowDblclick', row, column)
}

const cellClick = (row, column) => {
  emits('cellClick', row, column)
}

//切换每页显示条数
const handleSizeChange = (val) => {
  localData.query.pageSize = val
  emits('getBaseQuery', localData.query)
  getList()
}
//点击页码进行分页功能
const handleCurrentChange = (val) => {
  localData.query.pageNum = val
  emits('getBaseQuery', localData.query)
  getList()
}

watchEffect(() => {
  if (localData.allColShow) {
    localData.checkGroup = props.tableConfig.columns.map(item => item.prop)
  }
})
//刷新
const refresh = ({resetPage = false} = {}) => {
  resetPage ? localData.query.pageNum = 1 : null
  getList()
}
//改变loading状态
const updateLoading = (status) => {
  localData.loading = status
}
//获取基础查询条件
const getQuery = () => {
  return localData.query
}

defineExpose({refresh, updateLoading, getQuery, tableInstance})

onMounted(() => {
  getList()
})


</script>

<style lang="scss" scoped>
.col-setting-checkall {
  border-bottom: 1px solid rgb(210, 210, 213);
}

.col-setting-list {
  max-height: 45vh;
  overflow-y: auto;
}

.table-head-btn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.fv-table-btn {
  display: flex;
  justify-content: space-between;
  align-content: center;
}

.fv-table {
  :deep(.el-tooltip) {
    width: 100% !important;
  }
}
</style>
