<template>
  <div class="table-wrap">
    <el-table ref="commontable" class="common-table-cnt" :class="{ 'only-operate': visibleColumn.length === 1 }"
      :data="tableData" style="width: 100%" size="mini" row-class-name="common-table-row" :row-key="rowKey"
      :tree-props="treeProps" @selection-change="handleSelectionChange" @row-click="rowClick" 
      highlight-current-row :max-height="maxHeight" :row-style="rowStyleMethod">
      <el-table-column v-if="isShowSelection" type="selection" width="55"></el-table-column>
      <el-table-column v-if="isShowRowNo" type="index" label="序号" width="80"></el-table-column>
      <el-table-column v-for="item in visibleColumn" :key="item.prop" :label="item.label" :width="item.width"
        :fixed="item.fixed" :sortable="item.sortable || false" :show-overflow-tooltip="!item.noShowTip ? true : false">
        <template slot-scope="scope" slot="header">
          <template v-if="item.slotType === 'header' || item.slotType1 === 'header'">
            <slot :name="item.slotType" :item="item" :row="scope.row" />
          </template>
          <template v-else>{{ item.label }}</template>
        </template>
        <template slot-scope="scope">
          <template v-if="item.type === 'slot'">
            <slot :name="item.slotType" :row="scope.row" />
          </template>
          <template v-else-if="item.type === 'myName'">
            <slot :name="item.type" :row="scope.row" />
          </template>
          <template v-else-if="item.type === 'myCustIdsn'">
            <slot :name="item.type" :row="scope.row" />
          </template>
          <template v-else>{{ scope.row[item.prop] }}</template>
        </template>
        <!-- <template slot-scope="scope" slot="cell">
          <template v-if="item.type=='cell'">{{ 111 }}</template>
          <template v-else="item.type=='cell'">{{ scope.row[item.prop] }}</template>
        </template> -->
      </el-table-column>
      <slot></slot>
    </el-table>
    <div class="pagination-cnt" v-if="isShow == '1'">
      <el-pagination v-if="pagination && totalNum > 0" :layout="layout" :current-page="currentPage" 
        :page-sizes="[5, 10, 20, 30, 50]" :total="totalNum" @current-change="onPageChange" @size-change="onSizeChange">
      </el-pagination>
    </div>
    <div class="pagination-cnt2" :class="{ 'pagination-disabled': tableData.length < pageSize }" v-if="isShow == '0'">
      <el-pagination layout="prev, pager, next, sizes" :current-page="currentPage" :page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]" @current-change="onPageChange" @size-change="onSizeChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalNum: 0,
      coloumns: []
    }
  },
  props: {
    pagination: {
      type: Boolean,
      default: false
    },
    isShow: {
      type: String,
      default: '1'
    },
    rowKey: {
      type: String,
      default: ''
    },
    treeProps: {
      type: Object,
      default: () => ({ children: 'children', hasChildren: 'hasChildren' })
    },
    tableData: {
      type: Array,
      required: true
    },
    tableColoumns: {
      type: Array,
      required: true
    },
    currentPage: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 5
    },
    totalRows: {
      type: Number,
      default: 0
    },
    isShowRowNo: {
      type: Boolean,
      default: false
    },
    isShowSelection: {
      type: Boolean,
      default: false
    },
    isShowFilter: {
      type: Boolean,
      default: false
    },
    configColoumns: {
      type: Object,
      default: () => ({})
    },
    layout: {
      type: String,
      default: "total, prev, pager, next, sizes"
    },
    maxHeight:{
      type:String,
      default:'500'
    },
    from:{
      type:String,
      default:""
    },
  },
  computed: {
    visibleColumn() {
      return this.coloumns?.filter((ot) => ot.visible)
    }
  },
  watch: {
    totalRows(val) {
      this.totalNum = val
    },
    configColoumns: {
      handler(obj) {
        this.coloumns = this.coloumns?.map((ot) => {
          if (ot.label === obj.label) {
            return {
              ...ot,
              visible: obj.checked
            }
          } else {
            return ot
          }
        })
      }
    },
    tableColoumns: {
      handler(val) {
        this.coloumns = val?.map((item) => ({
          ...item,
          visible: true
        }))
      },
      immediate: true
    }
  },
  methods: {
    rowStyleMethod({row,rowIndex}){
      // console.log(row,'111')
      if(this.from == 'drawArea'){
        if(row.highLight){
          return {
            background:'#edf3fe',
          }
        }
      }
    },
    onPageChange(newPage) {
      this.$emit('onPageChange', newPage)
    },
    onSizeChange(val) {
      this.$emit('onSizeChange', val)
    },
    handleSelectionChange(val) {
      this.$emit('onSelectionChange', val)
    },
    rowClick(row, column, event) {
      console.info(JSON.stringify(row));
      // if(this.drawArea == 'drawArea'){
      //   this.$emit('rowClick',row)
      // }
    }
  },
  mounted() {
    this.totalNum = this.totalRows
  }
}
</script>

<style lang="scss" scoped>
.pagination-cnt {
  margin: 20px 0 26px 0;
  text-align: right;
}

.pagination-cnt2 {
  margin: 20px 0 26px 0;
  text-align: right;

  ::v-deep .el-icon {
    font-weight: 900 !important;
    font-size: 14px !important;
  }

  ::v-deep .btn-prev {
    background-color: rgb(244, 244, 245) !important;
    margin-right: 20px;
  }

  ::v-deep .btn-next {
    background-color: rgb(244, 244, 245) !important;
    margin-right: 20px;
  }
}

.pagination-disabled {
  ::v-deep .btn-next {
    color: #C0C4CC;
    background-color: #f4f4f5 !important;
    cursor: not-allowed;
    pointer-events: none;
  }
}
</style>