<template>
  <el-table 
    ref="tableRef" 
    row-key="id" 
    :data="props.tableData" 
    :border="true"
    @sort-change="sortChange"
    @selection-change="tableSelectionHandle"
    :row-class-name="props.tableRowClassName"
    :cell-class-name="props.tableCellClassName"
  >
    <!-- 多选框 -->
    <el-table-column 
      v-if="props.multipleTable"
      type="selection" 
      :fixed="'left'"
      width="55" 
      :selectable="selectableDisabled"
    />
    <!-- 序号 -->
    <el-table-column v-if="props.showTableIndex" :fixed="'left'" type="index" width="50" />
    <!-- 左侧操作列 -->
    <el-table-column 
      v-if="props.leftOperation && props.leftOperation.length > 0"
      :fixed="'left'"
      :width="props.leftOperationColumnWidth"
      label="操作"
      :align="'center'">
      <template #default="scope">
        <el-button
          v-for="(btn,index) in props.leftOperation"
          :key="index"
          :type="btn.type"
          :link="btn.link"
          @click="leftOperationHadel(btn,scope)"
        >{{btn.label}}</el-button>
      </template>
    </el-table-column>

    <!-- 数据列 -->
    <el-table-column
      v-for="(item, index) in props.tableColumns" 
      :key="index"
      :label="item.title"
      :prop="item.prop"
      :sortable="item.sortable || 'custom'"
      :fixed="item.fixed"
      :width="item.width || props.columnWidth"
      :align="item.align || props.columnAlign"
      :show-overflow-tooltip="item.tooltip"
      :header-align="item.headerAlign || props.columnHeaderAlign">
      <template #default="scope">
        <!-- 时间格式 -->
        <span v-if="item.type == 'datetime'"> {{ formatTableDate(scope.row[item.prop]) }} </span>
        <!-- 标签格式 -->
        <el-tag
          v-else-if="item.type == 'tagFilter'"
          :type="formatTableTagFilter('type',scope.row,item)"
        >
          {{ formatTableTagFilter('label',scope.row,item) }}
        </el-tag>
        <!-- 字典 -->
        <span v-else-if="item.type == 'filter'">{{ formatTableTagFilter('label',scope.row,item) }}</span>
        <!-- 【可编辑】文本 -->
        <el-input 
          v-else-if="item.type == 'input'"
          v-model="scope.row[item.prop]" 
          :placeholder="item.label" 
          :disabled="getEditItemDisabled(item,scope.row,scope)"
          :clearable="!item.noClear"
          @focus="(event)=>{editItemFocusHandle(item,scope,event)}"
          @change="editItemChangeHandle(item,scope,arguments)"
          @clear="editItemClearHandle(item,scope)"
        />
        <!-- 【可编辑】字典选择 -->
        <el-select
          v-else-if="item.type == 'filterSelect'"
          v-model="scope.row[item.prop]"
          :filterable="!item.noSearch"
          placeholder="请选择"
          :disabled="getEditItemDisabled(item,scope.row,scope)"
          :clearable="!item.noClear"
          @focus="(event)=>{editItemFocusHandle(item,scope,event)}"
          @change="editItemChangeHandle(item,scope,arguments)"
          @clear="editItemClearHandle(item,scope)">
          <el-option
            v-for="(op,op_index) in item.options"
            :key="op_index"
            :label="op.label"
            :value="op.value"
          />
        </el-select>
        <!-- 【可编辑】时间 -->
        <el-date-picker
          v-else-if="item.type == 'datetimeInput'"
          v-model="scope.row[item.prop]"
          style="width:100%"
          :type="item.inputType || 'datetime'"
          :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
          :value-format="item.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
          :clearable="!item.noClear"
          :disabled="getEditItemDisabled(item,scope.row,scope)"
          @focus="(event)=>{editItemFocusHandle(item,scope,event)}"
          @change="editItemChangeHandle(item,scope,arguments)"
          @clear="editItemClearHandle(item,scope)"
        />
        <!-- 【可编辑】数字 -->
        <el-input-number 
          v-else-if="item.type == 'numberInput'"
          v-model="scope.row[item.prop]" 
          :min="item.min"
          :max="item.max"
          :disabled="getEditItemDisabled(item,scope.row,scope)"
          @focus="(event)=>{editItemFocusHandle(item,scope,event)}"
          @change="editItemChangeHandle(item,scope,arguments)"
        />
        <!-- 正常直接显示 -->
        <span v-else> {{ scope.row[item.prop] }} </span>
      </template>
    </el-table-column>

    <!-- 右侧操作列 -->
    <el-table-column 
      v-if="props.rightOperation && props.rightOperation.length > 0"
      v-auth-any="getShowRightOpera()"
      :fixed="'right'"
      :width="props.rightOperationColumnWidth"
      :align="'center'"
      label="操作">
      <template #default="scope">
        <el-button
          v-for="(btn,index) in props.rightOperation"
          v-show="typeof btn.hide == 'function' ? !btn.hide(scope.row,scope) : !btn.hide"
          :key="index"
          :type="btn.type"
          :link="btn.link"
          @click="rightOperationHadel(btn,scope)"
          v-auth="btn.auth"
        >{{btn.label}}</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
  
<script setup>
  defineOptions({ name: 'elTable' })
  import { h,reactive, ref, onMounted } from 'vue'
  import { ElMessageBox, ElMessage,ElTable, ElTableColumn } from 'element-plus'
  import { formatTimeStrToStr } from "@/utils/formatTime";
  
  const state = reactive({})

  const props = defineProps({
    // 多选
    multipleTable:{
      type: Boolean,
      default: false
    },
    // 序号
    showTableIndex:{
      type: Boolean,
      default: false
    },
    // 左侧操作列
    leftOperation:{
      type: Object,
      default: null
    },
    // 左侧操作列宽度
    leftOperationColumnWidth:{
      type: Number,
      default: 120
    },
    // 右侧操作列
    rightOperation:{
      type: Object,
      default: null
    },
    // 右侧操作列宽度
    rightOperationColumnWidth:{
      type: Number,
      default: 150
    },
    // table数据
    tableData: {
      type: Object,
      default: []
    },
    // table表头
    tableColumns: {
      type: Object,
      default: []
    },
    // 表头宽度
    columnWidth:{
      type: Number,
      default: null
    },
    // 表头对齐
    columnHeaderAlign:{
      type: String,
      default: 'center'
    },
    // 表内容对齐
    columnAlign:{
      type: String,
      default: 'center'
    },
    // 可编辑单元格判断禁用
    getEditItemDisabled:{
      type: [Function,Boolean],
      default: false
    },
    // table的复选框是否禁用判断
    selectableDisabled:{
      type: [Function,Boolean],
      default: true
    },
    // 行class
    tableRowClassName:{
      type: Function,
      default: null
    },
    // 单元格class
    tableCellClassName:{
      type: Function,
      default: null
    },
  })

  const emits = defineEmits([
    'sortChange',
    'leftOperationHadel',
    'rightOperationHadel',
    'tableSelectionHandle',
    'editItemFocusHandle',
    'editItemChangeHandle',
    'editItemClearHandle',
  ])

  // 多选
  function tableSelectionHandle (val){
    emits('tableSelectionHandle',val)
  }

  // 格式化时间
  function formatTableDate(time) {
    let _time = '-'
    if (time) { _time = formatTimeStrToStr(time) }
    return _time
  }
  
  // 格式化TagFilter
  function formatTableTagFilter(type,row,item){
    let _op = item.options.filter(op=>op.value == row[item.prop])
    if(!_op || _op.length <=0 || !_op[0][type]){
      if(type=='type'){return 'info'}
      else{return '--'}
    }else{
      return _op[0][type]
    }
  }

  
  //排序
  function sortChange(data) {
    emits('sortChange',data)
  }

  // 左侧操作列
  function leftOperationHadel(btn,scope) {
    emits('leftOperationHadel',btn,scope)
  }

  // 判断是否显示右侧操作权限
  function getShowRightOpera(){
    let _arr = []
    props.rightOperation.forEach(item=>{_arr.push(item.auth)})
    return _arr
  }

  // 判断可编辑元素是否禁用
  function getEditItemDisabled(item,row,scope){
    if(typeof props.getEditItemDisabled == 'boolean'){
      return props.getEditItemDisabled
    }else{
      return props.getEditItemDisabled(item,row,scope.$index)
    }
  }

  // table的复选框是否禁用判断
  function selectableDisabled(row,index){
    if(typeof props.selectableDisabled == 'function'){
      return props.selectableDisabled(row,index)
    }else{
      return props.selectableDisabled
    }
  }

  // 可编辑元素Focus事件
  function editItemFocusHandle(item,scope,event) {
    emits('editItemFocusHandle',item,scope,event)
  }

  // 可编辑元素change事件
  function editItemChangeHandle(item,scope,data) {
    emits('editItemChangeHandle',item,scope,data)
  }

  // 可编辑元素clear事件
  function editItemClearHandle(item,scope) {
    emits('editItemClearHandle',item,scope)
  }

  // 右侧操作列
  function rightOperationHadel(btn,scope) {
    emits('rightOperationHadel',btn,scope)
  }

  onMounted(() => {})

</script>
  
<style scope lang="scss">
.current-select-tableRow{
  background:#e1f3d8 !important;
  td{
    background:#e1f3d8 !important;
  }
}
.normal-tableRow{
  td{
    background:#fff;
  }
}
</style>
  