<template>
  <div class="table-page">
    <div class="table-page-content">
      <div class="left-tree">
        <tree-side ref="treeSide" :dataLoading="treeLoading" :default-expand-all="false" :defaultProps="defaultProps"
                   :tabList="['组织队伍树']" :treeData="treeData" isDeselect
                   @currentChange="currentChange"></tree-side>
      </div>
      <div class="right-table">
        <div class="full-page bg">
          <div class="search-box">
            <SearchCommon :optionList="optionList" @search="handleSearch" />
          </div>
          <div class="main-table-container">
            <div class="table-container" style="padding: 20px">
              <div ref="btnPanel" class="btn-box">
                <el-button :disabled="isAddDisabled" class="btn btn-plus" icon="el-icon-plus" size="small"
                           type="primary" @click.native="showDialog('carChoice')">
                  添加
                </el-button>
                <el-button :disabled="!currentDataDel.length" class="btn btn-delete" icon="el-icon-delete" plain
                           size="small" type="danger" @click="handleDelete()">
                  删除
                </el-button>
              </div>
              <div ref="tableRef" class="table-content">
                <el-table ref="multipleSelection" v-loading="tableLoading" :data="tableData"
                          :max-height="tableMaxHeight" border class="table-list"
                          element-loading-background="rgba(10 ,38 ,61, 0.9)" row-key="id" stripe
                          @select="handleSelection"
                          @selection-change="handleSelectionChange">
                  <!--                  @row-dblclick="handleDbClick"-->
                  <el-table-column align="center" type="selection" width="55" />
                  <el-table-column align="center" label="序号" type="index" width="60" />
                  <!--                  <el-table-column :formatter="({ roadName }) => roadName || '-'" align="center" label="所属路段"-->
                  <!--                                   min-width="80" prop="roadName" show-overflow-tooltip />-->
                  <el-table-column align="center" label="车牌号" min-width="80" prop="carNumber"
                                   show-overflow-tooltip />
                  <el-table-column :formatter="({ carClass }) => dictionaryEscape('jycl-cllx', carClass + '')"
                                   align="center" label="车辆类别" min-width="80"
                                   prop="carClass"
                                   show-overflow-tooltip />
                  <el-table-column :formatter="({ useType }) => dictionaryEscape('jycl-clyt', useType + '')"
                                   align="center" label="车辆用途" min-width="80"
                                   prop="carClass"
                                   show-overflow-tooltip />
                  <!--                  <el-table-column :formatter="({ carBrand }) => carBrand || '-'" align="center" label="车辆品牌"-->
                  <!--                                   min-width="80" prop="carBrand" show-overflow-tooltip />-->
                  <el-table-column :formatter="({ buyDate }) => buyDate || '-'" align="center"
                                   label="购买时间" min-width="80"
                                   prop="buyDate"
                                   show-overflow-tooltip />
                  <el-table-column :formatter="({ registrationDate  }) => registrationDate  || '-'" align="center"
                                   label="检验有效期"
                                   min-width="80" prop="registrationDate " show-overflow-tooltip />
                  <!--                  <el-table-column align="center" label="操作" min-width="80" show-overflow-tooltip>-->
                  <!--                    <template v-slot="{ row }">-->
                  <!--                      <el-link :underline="false" type="primary" @click="handleDetailPage(row)">-->
                  <!--                        详情-->
                  <!--                      </el-link>-->
                  <!--                      <el-link :underline="false" type="danger" @click="handleDelete(row)">-->
                  <!--                        删除-->
                  <!--                      </el-link>-->
                  <!--                    </template>-->
                  <!--                  </el-table-column>-->
                </el-table>
                <pagination ref="paginationPanel" :pageResult="params.pageBean" style="margin-top: 10px"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 车辆选择 -->
    <CarChoiceDialog :carData="carData" :is-show.sync="carChoiceDialog" :selected-content.sync="addEditForm.car"
                     :treeId="treeItem.id"
                     @confirm="handleCarSelect" />
  </div>

</template>

<script>
import {refineRequestBody, setQueryValue} from '@/utils/requestWrappers'
import pagination from '@/components/SuperPagination/index.vue'
import {TableMixin} from '@/mixins/tableMixin'
import treeSide from '@/components/treeSide/index.vue'
import SearchCommon from '@/components/SearchCommon/index.vue'
import {getTree, tableData, tableDelete, treeDelete} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/bindCar'
import PubSub from 'pubsub-js'
import {dictionaryEscape, getDictionaryByCode} from '@/utils/dictionary'
// 路段
import {tableData as loadRoad} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/roadSectionInfo'
import CarChoiceDialog
  from '@/views/patrolAndRescue/infoMgmtPatrolsRescues/bindCar/components/CarChoiceDialog/index.vue'
// 救援点
import {tableData as rescuePoint} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/rescueSiteMgmt'


export default {
  name: 'TablePage',
  components: {
    CarChoiceDialog,
    pagination,
    treeSide,
    SearchCommon
  },
  mixins: [TableMixin],
  data() {
    return {
      addEditForm: {
        car: {}
      },
      carData: [],
      carChoiceDialog: false,
      isAddDisabled: true, // 新增按钮是否禁用
      pubSub: null,
      tableMaxHeight: '600px',
      loading: false,
      treeLoading: true,
      tableLoading: false,
      treeData: [], //左边树
      tabList: ['行政维度'], //左边tab
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      tableData: [],
      currentDataDel: [],
      optionList: [
        {title: '车牌号或车辆品牌', prop: ['car_Number_', 'car_Brand_'], type: 'input', default: true},
        {
          title: '车辆类别',
          prop: 'car_Class_',
          type: 'select',
          option: getDictionaryByCode('jycl-cllx'),
          multiple: true
        }
      ],
      params: {
        pageBean: {pageSize: 20, page: 1, total: 0},
        querys: [
          {operation: 'IN', property: 'tc.team_id_'},
          {group: 'quick', operation: 'LIKE', relation: 'OR', property: 'car_Number_'},
          {group: 'quick', operation: 'LIKE', relation: 'OR', property: 'car_Brand_'},
          {operation: 'IN', property: 'car_Class_'}
        ],
        sorter: [{direction: 'DESC', property: 'buyDate'}]
      },
      treeDialog: false, // 科目信息弹层
      treeItemId: '', // 树形目录id
      treeItem: {}, // 树形节点选中对象
      treeItemParentId: '', // 树形目录父级id
      rescuePointOptions: [],
      roadOptions: []
    }
  },
  created() {
    // 获取树形目录-
    this.getOrgTreeData(treeData => {
      // 回调中默认选中第一项并将其id作为参数请求表格
      this.treeItem = treeData[0] || {}
      let array = []
      if (this.treeItem.children.length > 0) {
        array = this.extractIds(this.treeItem)
      }
      this.$nextTick(_ => {
        this.$refs.treeSide?.setCurrentKey(treeData[0]?.id)//通过 $refs 获取treeSide组件引用，并调用 setCurrentKey方法设置当前选中的树节点。
        this.$refs.treeSide?.expandHandle(true, 2)
      })
      setQueryValue(this.params, 'tc.team_id_', array) //将选中的树节点的 path 设置为查询参数的一部分，用于后续的表格数据请求。
      this.loadData() //加载表格数据
    })

    this.loadRoadData()
    this.loadRescuePointData()
    // this.loadData()
  },
  mounted() {
    this.pubSub = PubSub.subscribe('TablePage', (_, data) => {
      switch (data.type) {
        case 'add':
          this.params.pageBean.page = 1
          this.loadData()
          break
        case 'edit':
          this.loadData()
          break
      }
    })

  },
  methods: {
    extractIds(node) {
      let ids = []
      // 如果当前节点有 children，则递归提取
      if (node.children) {
        ids = node.children.map(child => child.id) // 提取当前节点的 id
        // 递归提取子节点的 id
        node.children.forEach(child => {
          ids = ids.concat(this.extractIds(child))
        })
      }
      return ids
    },
    // 获取公司树-异步方法，用于从后端获取树形数据
    async getOrgTreeData(callback) {
      try {
        this.treeLoading = true   //开始加载时显示加载状态
        let {value} = await getTree()  // 调用 API 获取树形数据
        this.treeData = [this.transformTreeData(value)]
      } finally {
        this.treeLoading = false// 无论成功或失败，都关闭加载状态
        callback && callback(this.treeData)// 如果提供了回调函数，则调用它并传入树形数据
      }
    },
    handleCarSelect() {
      this.loadData()
    },
    transformTreeData(data) {
      return {
        name: data.name,
        id: data.id,
        children: data.children.reduce((acc, child) => {
          acc.push({
            id: child.id,
            name: child.name,
            path: child.path,
            children: child.teamList.map(grid => ({
              id: grid.id,
              name: grid.name,
              path: grid.path,
              roadId: grid.roadId,
              roadName: grid.roadName
            }))
          })
          return acc
        }, [])
      }
      // return data.map(item => ({
      //   id: item.id,
      //   name: item.name, // 一级目录的 label
      //   children: item.teamList.map(grid => ({
      //     id: grid.id,
      //     name: grid.name, // 二级目录的 label
      //     path: grid.path
      //   }))
      // }))
    },
    dictionaryEscape,
    // 路段信息
    async loadRoadData() {
      try {
        const {rows = {}} = await loadRoad({pageBean: {pageSize: -1, page: 1, total: 0}})
        this.roadOptions = rows
      } catch (err) {
        console.log(err)
      }
    },
    // 救援点信息
    async loadRescuePointData() {
      try {
        const {rows = {}} = await rescuePoint({pageBean: {pageSize: -1, page: 1, total: 0}})
        this.rescuePointOptions = rows
      } catch (err) {
        console.log(err)
      }
    },
    //获取科目树
    async getTreeData(callback) {
      this.treeData = [{
        name: '规章制度',
        edit: 1,
        id: '',
        parentId: '',
        children: await getTree('3')
      }]
      // 保证重新刷新树数据后，选中效果不失效
      if (this.treeItem.id) {
        this.$nextTick(_ => {
          this.$refs.treeSide?.setCurrentKey(this.treeItem.id)
        })
      }
      callback && callback(this.treeData)
    },


    //左边树节点
    currentChange(nodeItem) {
      if (nodeItem.id === '1766017468444450816') {
        this.isAddDisabled = true
        setQueryValue(this.params, 'tc.team_id_', this.extractIds(nodeItem))
      } else if (nodeItem.children && nodeItem.children.length > 0) {
        this.isAddDisabled = true
        const array = nodeItem.children.map(item => item.id)
        setQueryValue(this.params, 'tc.team_id_', array)
      } else {
        this.isAddDisabled = false
        setQueryValue(this.params, 'tc.team_id_', [nodeItem?.id] || [])
      }


      // console.log(nodeItem, '树节点点击')
      // console.log(nodeItem.id, '树的id')
      // // 判断是否是一级目录（有 children 属性）
      // if (nodeItem.children && nodeItem.children.length > 0) {
      //   this.isAddDisabled = true // 禁用新增按钮
      //   const array = nodeItem.children.map(item => item.id)
      //   setQueryValue(this.params, 'tc.team_id_ ', array)
      //   this.$message.warning('请选择二级目录进行新增操作')
      // } else {
      //   this.isAddDisabled = false // 启用新增按钮
      //   // 修改对应的字段值
      //   setQueryValue(this.params, 'tc.team_id_ ', [nodeItem?.id] || [])
      // }
      // 修改对应的字段值
      // setQueryValue(this.params, 'catalog_full_id_ ', nodeItem?.id || '')
      this.treeItem = nodeItem || {}
      this.calcTableHeight(500)
      PubSub.publish('TreeItemSelected', {
        id: nodeItem?.id || '',
        name: nodeItem?.name || '',
        path: nodeItem?.path || ''
      })
      this.params.pageBean.page = 1
      this.loadData()
    },
    //获取数据
    async loadData() {
      this.tableLoading = true
      const {total = 0, rows = []} = await tableData(refineRequestBody(this.params))
      this.params.pageBean.total = total
      this.tableData = rows.map(row => ({
        ...row,
        roadName: row.roadName || this.treeItem.name // 如果 row.orgName 为空，使用 treeItem.name
      }))
      console.log(this.tableData, '数据')
      this.tableLoading = false
    },
    // 树节点操作
    operateEvent(type, data) {
      switch (type) {
        case '新增':
          this.treeItemParentId = data.id
          this.treeDialog = true
          break
        case '编辑':
          this.treeItemId = data.id
          this.treeItemParentId = data.parentId
          this.treeDialog = true
          break
        case '删除':
          this.$confirm('确定删除选中车辆吗？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            const {state} = await treeDelete(data.id)
            if (state) {
              this.$message.success(`删除车辆成功`)
            } else {
              this.$message.error(`删除车辆失败`)
            }
            await this.getTreeData()
          }).catch(_ => _)
          break
      }
    },

    // 目录改变
    catalogChange(dialogName) {
      this.getTreeData(_ => this[dialogName] = false)
    },
    // 展示弹层
    showDialog(dialogName) {
      if (!dialogName) return
      if (dialogName === 'userChoice') {
        if (!this.addEditForm.teamId) {
          this.$message.error('请先选择救援派遣队伍')
        } else {
          this[dialogName + 'Dialog'] = true
        }
      } else {
        this[dialogName + 'Dialog'] = true
      }
    },
    // 删除
    handleDelete(row) {
      this.clickTimer = true
      this.$confirm('确定删除该车辆与队伍的绑定吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let ids = row ? row.id : this.currentDataDel.join()
        let {state, message} = await tableDelete(ids)
        if (state) {
          this.$message.success(`删除成功`)
          const {page, pageSize, total} = this.params.pageBean
          const totalPages = Math.ceil(total / pageSize) // 计算总页数
          if (totalPages > 1 && page === totalPages) {
            if (this.tableData.length === 1) { // 当前页只有一条数据
              this.params.pageBean.page -= 1 // 返回前一页
            }
          }
          await this.loadData()
        } else {
          this.$message.error(message)
        }
      }).catch(_ => _)
    },

    //修改
    handleDbClick(row) {
      console.log(row, '/////cascacas')
      if (this.clickTimer) return (this.clickTimer = false)
      // 确保 row 中包含 orgName
      const payload = {
        ...row,
        roadName: row.roadName || this.treeItem.name // 如果 row.orgName 为空，使用 treeItem.name
      }
      this.changePage('EditAddPage', payload)
    },

    // 改变页面
    changePage(pageName = '', row = {}) {
      if (!pageName) return
      const payload = row.id ? row : {
        catalogId: this.treeItem.id,
        roadName: this.treeItem.name,
        path: this.treeItem.path,
        clearForm: true // 清空表单标志
      }
      this.$emit('changePage', pageName, _ => {
        PubSub.publish(pageName, payload)
      }, row.id ? '编辑' : '添加')
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

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