<script setup>
import {getTemplateByCodeAndType} from "@/api/zhu-yuan-yi-sheng/jian-yan-jian-cha-shen-qing";
import {getWindowSize} from "@/utils/window-size";
import {BizException, ExceptionEnum} from "@/utils/BizException";
import XEUtils from 'xe-utils'

const {isCheck, data} = defineProps({
  isCheck: {
    type: Boolean,
    default: true
  },
  data: {
    type: Array,
  }
})

const emits = defineEmits(['node-click', 'delClick'])

const vxeTableRef = ref(null)
const dialog = ref(false)
const tempList = ref([])

const cellClick = ({row}) => {
  getTemplateByCodeAndType(row.code, isCheck ? '3' : '2').then((res) => {
    dialog.value = true
    tempList.value = res
  })
}

const tempClick = (val) => {
  let {row, column} = val
  if (column.type !== 'checkbox') {
    vxeTableRef.value.toggleCheckboxRow(row);
  }
}

const confirm = () => {
  let temp = vxeTableRef.value.getCheckboxRecords()
  if (XEUtils.isEmpty(temp)) {
    BizException(ExceptionEnum.MESSAGE_ERROR, "请先选择数据。");
  }
  selectAll(temp)
}

const selectAll = (data) => {
  if (data) {
    data.forEach(item => {
      emits('node-click', item)
    })
  }
  dialog.value = false
}
</script>

<template>
  <vxe-table :height="662"
             style="width: 220px"
             border
             @cell-click="cellClick"
             :scroll-x="{gt: 50}"
             :scroll-y="{gt: 10}"
             :column-config="{resizable: true}"
             :row-config="{height: 24}"
             class="vxe-padding_zero vxe-header-max_content vxe-scroll_15"
             show-header-overflow
             show-overflow
             :data="data">
    <vxe-column field="name" title="名称"/>
    <vxe-column title="操作">
      <template #default="scope">
        <el-button type="danger" text @click.stop.prevent="emits('delClick',scope.row)">删除</el-button>
      </template>
    </vxe-column>
  </vxe-table>

  <el-dialog v-model="dialog" title="模板">
    <vxe-table :data="tempList"
               :height="getWindowSize.h - 400"
               style="width: 100%"
               border
               ref="vxeTableRef"
               :scroll-x="{gt: 50}"
               :scroll-y="{gt: 10}"
               @cell-click="tempClick"
               :column-config="{resizable: true}"
               :row-config="{height: 24}"
               class="vxe-header-max_content vxe-scroll_15"
               show-header-overflow
               show-overflow>
      <vxe-column type="checkbox" width="60">
      </vxe-column>
      <vxe-column field="name" title="名称"/>
    </vxe-table>

    <template #footer>
      <el-button type="danger" @click="dialog = false">取消</el-button>
      <el-button type="primary" @click="confirm">确认</el-button>
    </template>
  </el-dialog>

</template>

<style scoped lang="scss">

</style>
