eslint-disable vue/component-name-in-template-casing
<script lang="ts" setup name="TableContainer">
import { Menu } from '@element-plus/icons-vue'
import configDialog from './configColumnsDialog.vue'
const props = defineProps({
  // 内边距
  padding: {
    type: String,
    default: '0',
  },
  titleShow: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: '数据列表',
  },
  isCenter: {
    type: Boolean,
    default: false,
  },
  isConfig: {
    type: Boolean,
    default: false,
  },
  configTitle: {
    type: String,
    default: '',
  },
  columns: {
    type: Array,
    default: () => ([]),
  },
  configColumns: {
    type: Array,
    default: () => ([]),
  },
  edit: {
    type: Function,
    default: () => { },
  },
})

// 配置显示列
const configRef = ref()
const config = () => {
  if (props.isConfig && props.configTitle) {
    configRef.value.initDialog({
      columns: props.columns, // 初始列
      title: props.configTitle, // 本地存储的
    })
  }
}
// 确认显示列
const confirmColumns = (columns: any) => {
  localStorage.setItem(props.configTitle, JSON.stringify(columns))
  props.edit(columns)
}

if (localStorage.getItem(props.configTitle)) {
  // console.log('有存储', props.configTitle)
  props.edit(JSON.parse((localStorage.getItem(props.configTitle) as string)))
}
else {
  // console.log('无存储', props.configTitle, props.columns)
  props.edit(props.columns.filter((item: any) => item.isRequired !== false))
  // console.log(props.columns.filter((item: any) => item.isRequired !== false), '1111')
}
</script>

<template>
  <config-dialog ref="configRef" @confirm="confirmColumns" />
  <div class="table-container">
    <div class="button-area">
      <div class="custom" style="display: flex;align-items: center;">
        <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
          <!-- <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config"> -->
            <!-- <Menu /> -->
             <img v-if="isConfig" class="icon-menu" src="../../assets/images/menu.png" style="width: 20px;height: 20px;margin-right: 5px;" alt="" srcset="" @click="config">
          <!-- </el-icon> -->
          <span>
            {{ title }}
          </span>
        </div>
        <div class="button-left">
          <slot name="btns-left" />
        </div>
      </div>
      <div class="button-right">
        <slot name="btns-right" />
      </div>
    </div>
    <div class="table-body">
      <slot />
    </div>
  </div>
</template>

<style lang="scss" scoped>
// 样式
.table-container {
  background-color: #fff;
  padding: 10px;
  margin-top: 10px;
  border-radius: 7px;

  .button-area {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;

    .icon-menu {
      margin-right: 5px;

      &:hover {
        cursor: pointer;
      }
    }

    .title-left {
      margin-left: 5px;
      display: flex;
      align-items: center;
      height: 21px;
      vertical-align: center !important;
    }

    .title-center {
      margin-left: 5px;
      flex: 1;
      text-align: center;
    }

    .button-left {
      display: flex;
      justify-content: flex-start;
    }

    .button-right {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>