<template>
  <el-dialog :title="`添加${label}项目`" v-model="visible" width="1400px" height="400px" @close="close" append-to-body
    draggable>
    <!-- <div slot="title" class="dialog-title-container">
      <span class="title-label"><i class="el-icon-document" /> 检查指导项目选择</span>
      <i class="el-icon-close" @click="close" />
    </div> -->
    <div v-if="multiple" class="form-btns-container" style="display: inline-block; line-height: 36px;">
      <el-button type="success" size="default" @click="handleMultipleSelected">
        <i class="fa fa-floppy-o" aria-hidden="true" /> 确定选择
      </el-button>
    </div>
    <div class="dialog-list-container" style="height: 450px;">
      <el-row :gutter="2" style="height: 100%;" class="twins-row">
        <el-col :span="8" style="height: 100%;">
          <div class="page-container list-container">
            <div class="list-btns-container" style="padding-bottom: 12px; line-height: 30px;">
              <span class="title-label"><i class="el-icon-document" /> {{ label }}项目类别</span>
              <el-form class="dialog-title-search-container" size="default" :inline="true" style="line-height: 30px;"
                @submit.native.prevent>
                <el-form-item label="搜索：" style="margin-bottom: 0;">
                  <el-input v-model.trim="categoryQuery.keyword" size="default" type="text" placeholder="关键字"
                    :clearable="true" style="width: 90px;" />
                </el-form-item>
                <el-form-item style="margin-bottom: 0;">
                  <el-button type="success" icon="Search" @click="handleCategorySearch">搜索</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="el-table-container">
              <el-tree ref="categoryTable" size="default" v-loading="categoryLoading" :data="categories"
                :props="{ label: 'name', children: 'children' }" :expand-on-click-node="false" default-expand-all
                node-key="id" highlight-current @node-click="handleCurrentCategoryChange" style="height: 392px;overflow: auto;">
                <template #default="{ node, data }">
                  <div style="display: flex; width: 100%; justify-content: space-between">
                    <span>
                      <span v-if="data.parentId === '0'" style="display: inline-block; width: 20px">{{
    getNodeIndex(data) }}. </span>
                      <span>{{ node.label }}</span>
                    </span>
                  </div>
                </template>
              </el-tree>
            </div>
          </div>
        </el-col>
        <el-col :span="16" style="height: 100%;">
          <div class="page-container list-container">
            <div class="list-btns-container" style="padding-bottom: 12px;">
              <span class="title-label"><i class="el-icon-document" /> {{ label }}项目</span>
              <el-form class="dialog-title-search-container" size="default" :inline="true" style="line-height: 30px;"
                @submit.native.prevent>
                <el-form-item label="搜索：" style="margin-bottom: 0;">
                  <el-input v-model.trim="query.keyword" size="default" type="text" placeholder="关键字" :clearable="true"
                    style="width: 90px;" />
                </el-form-item>
                <el-form-item style="margin-bottom: 0;">
                  <el-button type="success" icon="Search" @click="handleInstructionSearch">搜索</el-button>
                  <el-button type="primary" icon="Delete" plain @click="searchReset">清空</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="el-table-container" :style="{ bottom: instructionTotal > 0 ? '35px' : '0' }">
              <el-table ref="instructionTable" v-loading="instructionLoading" row-key="id"
                :data="currentCategory ? instructionList : []" size="default" border height="100%"
                header-row-class-name="list-header-row" row-class-name="list-row"
                @selection-change="handleSelectionChange"
                @row-dblclick="(row) => multiple ? selectionRow(row) : handleSimpleSelected(row)">
                <el-table-column v-if="multiple" type="selection" width="40" align="center"
                  :selectable="selectableHandler" :reserve-selection="true" />
                <el-table-column type="index" label="序号" width="40" align="center" />
                <el-table-column prop="standard" label="检查标准" align="center" />
                <el-table-column prop="equipment" label="检查设备" width="200" align="center" />
                <el-table-column v-if="!multiple" label="操作" width="40" align="center">
                  <template #default="scope">
                    <el-button :disabled="!selectableHandler(scope.row, scope.$index)" type="success" size="default"
                      icon="el-icon-finished" circle @click="handleSimpleSelected(scope.row)" />
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <pagination v-show="instructionTotal > 0" :total="instructionTotal" v-model:page="query.pageNum"
              v-model:limit="query.pageSize" @pagination="loadInstruction" style="position: absolute; bottom: 0;" />
          </div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, toRefs, nextTick } from 'vue'
import { listCategory, list } from '@/api/business/inspectionInstruction'
const { proxy } = getCurrentInstance()
const props = defineProps({
  width: {
    type: String,
    default: '1000px'
  },
  multiple: {
    type: Boolean,
    default: () => false
  },
  simpleSelected: {
    type: Function,
    default: null
  },
  multipleSelected: {
    type: Function,
    default: null
  },
  selectableHandler: {
    type: Function,
    default: () => () => { return true }
  },
  label: {
    type: String,
    default: () => ''
  },
  type: {
    type: Number,
    default: () => 2
  }
})
const { width, multiple, simpleSelected, multipleSelected, selectableHandler, label } = toRefs(props)
const visible = ref(false)
const query = ref({
  type: props.type,
  categoryId: '0',
  keyword: '',
  pageSize: 20,
  pageNum: 1
})
const categoryQuery = ref({
  keyword: ''
})
const categories = ref([])
const instructionList = ref([])
const categoryLoading = ref(false)
const instructionLoading = ref(false)
const instructionTotal = ref(0)
const currentCategory = ref(null)
const selected = ref([])

function close() {
  visible.value = false
}

function open() {
  visible.value = true
  nextTick(_ => {
    proxy.$refs.instructionTable.clearSelection()
  })
  loadCategory()
}

function handleMultipleSelected() {
  if (multipleSelected.value) {
    multipleSelected.value(selected.value)
  }
  close()
}
function loadCategory() {
  categoryLoading.value = true
  listCategory({ ...categoryQuery.value, type: props.type }).then((res) => {
    categoryLoading.value = false
    categories.value = res.rows
    if (categories.value.length > 0) {
      currentCategory.value = categories.value[0]
      nextTick(() => {
        proxy.$refs.categoryTable.setCurrentKey(currentCategory.value.id)
        handleCurrentCategoryChange(currentCategory.value)
      })
    } else {
      currentCategory.value = {}
      instructionList.value = []
    }
  })
}

function handleCategorySearch() {
  loadCategory()
}

function loadInstruction() {
  instructionLoading.value = true
  query.value.categoryId = currentCategory.value.id
  list(query.value).then((res) => {
    instructionLoading.value = false
    instructionList.value = res.rows
    instructionTotal.value = res.total
  })
}
function handleSimpleSelected(row) {
  if (simpleSelected) {
    simpleSelected(row)
  }
  close()
}

function handleInstructionSearch() {
  loadInstruction()
}

function getNodeIndex(data) {
  const index = categories.value.findIndex((item) => item.id === data.id)
  return index + 1
}

function searchReset() {
  query.value = {
    type: props.type,
    categoryId: currentCategory.value.id,
    pageSize: 20,
    pageNum: 1
  }
  loadInstruction()
}

function handleSelectionChange(selection) {
  selected.value = selection
}

function handleCurrentCategoryChange(row) {
  if (row) {
    currentCategory.value = row
  } else {
    currentCategory.value = {}
    if (categories.value.length > 0) {
      currentCategory.value = categories.value[0]
    }
  }
  if (currentCategory.value.id) {
    loadInstruction()
  } else {
    instructionList.value = []
    instructionTotal.value = 0
  }
}

defineExpose({
  open,
})
</script>
<style lang="css">
.twins-row .el-table-container {
  position: absolute;
  top: 50px;
  bottom: 5px;
  left: 0px;
  right: 0px;
}

.twins-row .el-table-container-pages {
  position: absolute;
  top: 50px;
  bottom: 35px;
  left: 0px;
  right: 0px;
}

.twins-row .title-label {
  line-height: 35px;
}

.twins-row .list-container {
  display: flex;
  flex-direction: column;
  height: 100%
}
</style>