<template>
  <el-input v-model="filterText" placeholder="搜索" prefix-icon="Search" class="mb-16" />

  <el-table :data="data" :max-height="tableHeight">
    <el-table-column prop="name" :label="isApplication ? '应用名称' : '数据集名称'">
      <template #default="{ row }">
        <div class="flex align-center">
          <AppAvatar
            v-if="isApplication"
            :name="row.name"
            pinyinColor
            class="mr-12"
            shape="square"
            :size="24"
          />
          <AppAvatar v-else-if="isDataset" class="mr-12" shape="square" :size="24">
            <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
          </AppAvatar>
          <span class="ellipsis-1"> {{ row?.name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="管理" align="center">
      <!-- <template #header>
        <el-checkbox
          v-model="allChecked[MANAGE]"
          label="管理"
          @change="handleCheckAllChange($event, MANAGE)"
        />
      </template> -->
      <template #default="{ row }">
        <el-checkbox v-model="row.operate[MANAGE]" @change="checkedOperateChange(MANAGE, row)" />
      </template>
    </el-table-column>
    <el-table-column label="使用" align="center">
      <!-- <template #header>
        <el-checkbox
          v-model="allChecked[USE]"
          label="使用"
          @change="handleCheckAllChange($event, USE)"
        />
      </template> -->
      <template #default="{ row }">
        <el-checkbox v-model="row.operate[USE]" @change="checkedOperateChange(USE, row)" />
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import { MANAGE, USE, DATASET, APPLICATION } from './../utils'

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  id: String,
  type: String
})

const isDataset = computed(() => props.type === DATASET)
const isApplication = computed(() => props.type === APPLICATION)

const emit = defineEmits(['update:data'])
const allChecked: any = ref({
  [MANAGE]: false,
  [USE]: false
})

const tableHeight = ref(0)

const filterText = ref('')

watch(
  () => props.data,
  (val) => {
    Object.keys(allChecked.value).map((item) => {
      allChecked.value[item] = compare(item)
    })
    emit('update:data', val)
  },
  {
    deep: true
  }
)

function handleCheckAllChange(val: string | number | boolean, Name: string | number) {
  if (val) {
    props.data.map((item: any) => {
      item.operate[Name] = true
    })
  } else {
    props.data.map((item: any) => {
      item.operate[Name] = false
    })
  }
}
function checkedOperateChange(Name: string | number, row: any) {
  if (Name === MANAGE && row.operate[MANAGE]) {
    props.data.map((item: any) => {
      if (item.id === row.id) {
        item.operate[USE] = true
      }
    })
  }
  allChecked.value[Name] = compare(Name)
}

function compare(attrs: string | number) {
  const filterData = props.data.filter((item: any) => item?.operate[attrs])
  return props.data.length > 0 && filterData.length === props.data.length
}

onMounted(() => {
  tableHeight.value = window.innerHeight - 300
  window.onresize = () => {
    return (() => {
      tableHeight.value = window.innerHeight - 300
    })()
  }
  Object.keys(allChecked.value).map((item) => {
    allChecked.value[item] = compare(item)
  })
})
</script>
<style lang="scss" scope></style>
