<template>
  <div style="width: 100%; height: 100%">
    <Customize :configer="props.tableColumn" @change="changeCustomize" />
    <!-- hasChildren要在tableData中定义表示当前行有没有下一级 children要在tableData中定义表示下一级的数据-->
    <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange"
      @current-change="handleCurrentChange" @row-click="singleElection" :row-key="getConfiger.rowKey"
      :border="getConfiger.border" :default-expand-all="getConfiger.defaultExpandAll" :stripe="getConfiger.stripe"
      :height="tableWh ? tableWh : getConfiger.height" v-loading="tableloading" element-loading-text="数据加载中..."
      :lazy="getConfiger.lazy" :load="load" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      style="width: 100%; font-size: 13px" :header-cell-class-name="() => 'myTableHeadBgColor'"
      :highlight-current-row="getConfiger.showSelectType === 'radio'" :row-style="{
        height: getConfiger.rowHeight === 'auto' ? getConfiger.rowHeight : getConfiger.rowHeight + 'px'
      }">
      <el-table-column type="selection" width="55" v-if="getConfiger.showSelectType === 'checkBox'"
        :selectable="handleSelectTable" />
      <el-table-column width="55" v-else-if="getConfiger.showSelectType === 'radio'" #default="{ row }">
        <!-- {{ getConfiger.radioChoose }} -->
        <!-- <el-radio v-model="getConfiger.radioChoose"></el-radio> -->
        <el-radio class="radio" v-model="getConfiger.radioChoose" :label="row[getConfiger.rowKey]">&nbsp;</el-radio>
      </el-table-column>

      <el-table-column type="index" label="序号" v-if="getConfiger.showIndex" width="60" :align="getConfiger?.align" />
      <el-table-column v-for="(item, index) in pageData.tableColumnCustomize" :align="getConfiger?.align"
        :prop="item.prop" :key="index" :label="item.label" :width="item.width" style="width: 100%; font-size: 14px"
        :show-overflow-tooltip="item.showOverflowTooltip || false" :sortable="item.sortable || false"
        :fixed="item.fixed">
        <!-- 使用自定义 -->
        <template v-if="item.showSolt" #default="scope">
          <slot :name="item.prop" v-bind="scope"></slot>
        </template>
        <!-- 默认 -->
        <template v-if="!item.showSolt && item.prop" #default="{ row }">
          {{ row[item.prop] }}
        </template>
        <el-table-column v-if="item.suntab" v-for="(it, i) in item.suntab" :prop="it.prop" :label="it.label"
          :show-overflow-tooltip="it.showOverflowTooltip || false" :sortable="it.sortable || false" :width="it.width"
          :fixed="item.fixed">
          <!-- 使用自定义 -->
          <template v-if="it.showSolt" #default="scope">
            <slot :name="it.prop" v-bind="scope"></slot>
          </template>
          <!-- 默认 -->
          <template v-else #default="{ row }">
            {{ row[it.prop] }}
          </template>
        </el-table-column>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column v-if="getConfiger.haveControls" fixed="right" :label="getConfiger.controls"
        :width="controlsWidth" :align="getConfiger?.align">
        <template #default="scope">
          <slot name="controls" v-bind="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import Customize from "@/components/aboutTable/MyTable/components/Customize.vue"
import { nextTick, onMounted, reactive, ref, watch, watchEffect, computed } from "vue"
const props = defineProps({
  tableConfiger: {
    type: Object,
    default: () => { }
  },
  tableData: {
    type: Array,
    default: () => []
  },
  tableloading: {
    type: Boolean,
    default: false
  },
  selectable: {
    type: Boolean,
    default: false
  },
  tableColumn: {
    type: Array,
    default: () => {
      return []
      // return [
      //     {
      //         showSolt: true,  表示自定当前列的内容 比如 type=1 转文字
      //         showOverflowTooltip:false 当内容过多是否显示三个.
      //     },
      // ]
    }
  },
  controlsWidth: {
    type: Number,
    default: 180
  }
})
// 可选的时候选择的数据
const emit = defineEmits(["chooseData"])
const multipleTableRef = ref()
const tableWh = ref(null)
const currentRow = ref()
let tableloading = ref(false)
let getConfiger = reactive({
  showSelectType: null, // 显示多选还是单选还是没有选择 checkBox/radio/null
  showIndex: true, // 是否显示索引
  rowKey: null, // 如果是树形表格必须设置rowKey
  border: true, // 是否显示边框
  defaultExpandAll: false, // 是否展开全部
  loading: false,
  align: "center", // 列的对齐方式 left / center / right
  haveControls: true, // 是否有操作列
  controls: "操作", // 操作列的表头
  stripe: true, // 是否有斑马线
  lazy: true, // 树形表格的懒加载必须在tableDatez中给有children的项设置  hasChildren: true,才会显示展开icon
  portUrl: "", // 当树形表格使用懒加载的时候传入的请求路径/接口用于懒加载数据
  defaultSelectKeys: [], // 默认选中的key集合
  radioChoose: "", // 单选时选中的值------------------------------------------- 待完成
  rowHeight: "32", // 每行的高度
  height: "100%", // 表格的高度

})

const pageData = reactive({
  // tableColumnCustomize: computed(() => {
  //   return props.tableColumn.map(item => {
  //     return item
  //   })
  // })
  tableColumnCustomize: [],//自定义的列数据
})
//处理自定义列数据
const changeCustomize = val => {
  pageData.tableColumnCustomize = props.tableColumn.filter(item => {
    for (let i = 0; i < val.length; i++) {
      if ((item.prop || item.key) === val[i]) return item
    }
  })
}
// 可选的时候选择的数据
const handleSelectionChange = val => {
  emit("chooseData", val)
}
// 单选的时候选择的数据
const handleCurrentChange = val => {
  currentRow.value = val
  emit("chooseData", val, 'current')
}
const singleElection = val => {
  if (getConfiger.showSelectType === "radio") {
    getConfiger.radioChoose = val[getConfiger.rowKey]
    emit("chooseData", val)
  }
}
const handleSelectTable = row => {
  return !!props.selectable
}
// 懒加载数据的方法
const load = (date, treeNode, resolve) => {
  setTimeout(() => {
    resolve([
      {
        id: 31,
        date: "2016-05-01",
        name: "wangxiaohu",
        address: "No. 189, Grove St, Los Angeles"
      },
      {
        id: 32,
        date: "2016-05-01",
        name: "wangxiaohu",
        address: "No. 189, Grove St, Los Angeles"
      }
    ])
  }, 1000)
}

defineExpose({ tableWh });

onMounted(() => {
  nextTick(() => {
    pageData.tableColumnCustomize = props.tableColumn.map(item => { return item })
  })
  setDefaultChoose()
})
// 设置默认选中（在调用的父页面要确保 tableData传出来了如果延迟传过来默认选中不会生效）
function setDefaultChoose() {
  // 多选的默认选中
  if (props.tableConfiger.defaultSelectKeys?.length > 0 && props.tableConfiger.showSelectType === "checkBox") {
    props.tableData.forEach(item => {
      if (props.tableConfiger.defaultSelectKeys.findIndex(v => v === item[props.tableConfiger.rowKey]) > -1) {
        multipleTableRef.value.toggleRowSelection(item, true)
      }
    })
    // 单选的默认选中
  } else if (props.tableConfiger.defaultSelectKeys && props.tableConfiger.defaultSelectKeys?.length > 0 && props.tableConfiger.showSelectType === "radio") {
    getConfiger.radioChoose = props.tableConfiger.defaultSelectKeys[0]
  }
}
watchEffect(() => {
  getConfiger = { ...getConfiger, ...props.tableConfiger }
  if (props.tableConfiger.height) {
    getConfiger.height = props.tableConfiger.height
  }
  if (!props.tableConfiger.height) {
    getConfiger.height = window.innerHeight - 220
  }
  tableloading.value = props.tableloading
})
</script>

<style lang="scss">
.myTableHeadBgColor {
  background-color: #e6f2ff !important;
  color: #191919;
}
</style>
