<template>
  <div class="data-table" :style="{ marginTop: props.marginTop }">
    <div :style="dataTableContentStyle" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="data-table-content">
      <div :class="props.isStatus || props.isStatuser ? 'flex' : 'flex-end'" class="data-table-btn">
        <div v-if="props.isStatus || props.isStatuser" class="vStatus">
          <slot name="header" />
        </div>
        <template v-if="props.isBtn">
          <template v-if="props.isAuth">
            <el-button v-if="props.btnAuthAdd" size="small" @click="handleAdd" plain type="primary">新增</el-button>
          </template>
          <template v-else>
            <el-button size="small" @click="handleAdd" plain type="primary">新增</el-button>
          </template>
        </template>
      </div>
    </div>
  </div>
  <Dialog :flag="rmFlag">
    <div class="airportInfoDialog">
      <div class="title del-title">删除</div>
      <div class="content del-content">
        <span class="el-icon-error error r10"></span>您是否确认删除<span class="error l10">{{ rmTitle }}</span>
        ？
      </div>
      <div class="foot right Delfoot">
        <el-button size="default" class="r24" @click="tableRemove" type="danger">删除</el-button>
        <el-button size="default" @click="rmFlag = false">取消</el-button>
      </div>
    </div>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import Dialog from '@/components/dialog/index.vue'
//-------props-------
const props = defineProps({
  isDialog: {
    type: Boolean,
    default: true
  },
  tableup: {
    type: Boolean,
    default: false
  },
  //接口ID
  dataId: {
    type: [String, Number],
    default: ''
  },
  editId: {
    type: [String, Number],
    default: ''
  },
  dataContent: {
    type: Object,
    default: () => ({})
  },
  //是否显示状态
  isStatus: {
    type: Boolean,
    default: false
  },
  //是否显示名称
  isStatuser: {
    type: Boolean,
    default: false
  },
  //弹框宽度
  width: {
    type: String,
    default: '560px'
  },
  //弹框表单-行数
  rows: {
    type: Number,
    default: 3
  },
  //弹框-表单文字宽度
  labelWidth: {
    type: String,
    default: '80px'
  },
  //表格高度
  tableHeight: {
    type: [String, Number],
    default: 0
  },
  minHeight: {
    type: Number,
    default: 65
  },
  //是否显示树形表格
  isTree: {
    type: Boolean,
    default: false
  },
  //树形props
  treeProps: {
    type: Object,
    default: function () {
      return { children: 'children', hasChildren: 'hasChildren' }
    }
  },
  //树形标识id
  rowKeyTree: {
    type: String,
    default: 'companyID'
  },
  //是否显示新增按钮
  isBtn: {
    type: Boolean,
    default: true
  },
  // 是否显示合计行
  showSummary: {
    type: Boolean,
    default: false
  },
  marginTop: {
    type: String,
    default: '0px'
  },
  // 是否可选中行
  selectionEnable: {
    type: Boolean,
    default: false
  },
  // 懒加载
  withLazyLoad: {
    type: Boolean,
    default: false
  },
  // 不换行，溢出隐藏
  showOverflowTooltip: {
    type: Boolean,
    default: false
  },
  // 表格-操作-列设置按钮显示
  withColumnSet: {
    type: Boolean,
    default: false
  },
  // 表格-操作-项设置按钮显示
  withItemSet: {
    type: Boolean,
    default: false
  },
  // 表格-操作-项设置按钮显示
  withlodSet: {
    type: Boolean,
    default: false
  },
  // 表格-操作-节点按钮显示
  withnodeSet: {
    type: Boolean,
    default: false
  },
  // 表格-操作-查询模板预览
  withPreview: {
    type: Boolean,
    default: false
  },
  //操作列宽度
  fixedWidth: {
    type: String,
    default: '180px'
  },
  //弹框是否显示在body上
  isBody: {
    type: Boolean,
    default: false
  },
  //新增按钮权限
  authAdd: {
    type: String,
    default: ''
  },
  //编辑按钮权限
  authEdit: {
    type: String,
    default: ''
  },
  //删除按钮权限
  authDel: {
    type: String,
    default: ''
  },
  //位置设置权限
  authWithnodeSet: {
    type: String,
    default: ''
  },
  //航站设置权限
  authWithlodSet: {
    type: String,
    default: ''
  },
  //是否启用权限按钮
  isAuth: {
    type: Boolean,
    default: false
  }
})

//--------emits--------
const emits = defineEmits(['handleAdd'])

//------------data--------
const asShow = ref<Boolean>(true)
const loading = ref<Boolean>(false)
const flag = ref<Boolean>(false)
const serviceId = ref<String>('')
const rmFlag = ref<Boolean>(false)
const rowTitle = ref<String>('')
const page = ref<Number>(0)
const noMore = ref<Boolean>(false)
const tableCols = ref<Array>([]) //表头数据
const tableData = ref<Array>([]) //表格数据
const tableColsCopy = ref<Array>([]) //表头数据缓存
const tableDataFilters = reactive<Object>({}) //表头数据缓存
const filterValues = reactive<Object>({}) //表头-下拉-选中数据
const tableDataCopy = ref<Array>([]) //缓存table数据
const tableGroups = ref<Array>([]) //表格分组数据
const colShowFilter = ref<String>('') //表头-下拉-箭头
const spanArr = ref<Array>([]) //表格分组数据缓存
const pos = ref<Number>(0) //表格分组计数
const tableTitle = ref<String>('新增') //弹框标题
const tableType = ref<String>('add') //弹框类型=新增/编辑
let tableForm = reactive<Object>({}) //弹框表单
const rmTitle = ref<String>('') //弹框-删除-标题
const tableObj = reactive<Object>({}) //增/删/改数据缓存
const tableOptions = reactive<Object>({}) //弹框-下拉数据缓存
const tableArrs = ref<Array>([]) //重组table-表头下拉
const roles = ref<Array>([]) //权限
const tableOptionscp = reactive<Object>({})
const tabledatacopy = reactive<Object>({})

//------computed-----
const dataTableContentStyle = computed(() => {
  const style = {}
  if (props.minHeight) {
    style['min-height'] = props.minHeight
  }
  if (props.tableHeight) {
    style['height'] = props.tableHeight
  }
  return style
})

//-------methods-------
//表格-新增
const handleAdd = () => {
  if (props.isDialog) {
    flag.value = true
    tableType.value = 'add'
    tableTitle.value = '新增'
    rmFlag.value = true
    tableForm = reactive({})
  } else {
    emits('handleAdd')
  }
}
const tableRemove = () => {
  console.log('删除')
}
</script>

<style lang="scss" scoped>
</style>