<template>
  <!-- 所在路段选择弹层 -->
  <SuperTableSelectorDialog ref="superTableSelectorDialog" :defaultTreeExpandLevel="4" :isShow.sync="isShowDialog"
                            :isShowSelect="false" :isShowTree="false"
                            :search-option="optionList" :table-data="tableData" :table-loading="tableLoading"
                            :table-options="tableOptions"
                            :tableParams="params" :tree-item="treeItem"
                            :treeData="orgData" :treeTabList="['行政维度']"
                            hintLanguage="提示：请在列表中选择车辆后，点击确认。" isSingleChoice
                            select-title-name="派遣车辆"
                            selectKey="id"
                            selectLabel="carNumber" title="人员选择" v-bind="$attrs" width="75%" @closed="closed"
                            @confirm="handleConfirm"
                            @open="open" @tableRefresh="getTableData" @treeChange="treeChange"
                            v-on="$listeners" />
</template>

<script>
import {carList, tableAdd} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/bindUser'
import {setQueryValue} from '@/utils/requestWrappers'
import SuperTableSelectorDialog from '@/components/SuperTableSelectorDialog/index.vue'
import {dictionaryEscape} from '@/utils/dictionary'

export default {
  name: 'CarChoiceDialog',
  components: {SuperTableSelectorDialog},
  props: {
    isShow: {
      default: false,
      type: Boolean
    },
    carData: {
      default: () => ({}),
      type: Object
    },
    treeId: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      orgData: [], // 组织树
      optionList: [
        {title: '用户姓名', prop: 'tm.name_', type: 'input', default: true},
        {title: '账号名', prop: 'account', type: 'input', default: false},
        {title: '电话', prop: 'tm.tel_', type: 'input', default: false}
        // 添加 roadId 查询条件
        // {title: '所属路段', prop: 'road_Id_', type: 'input', default: false}
      ],
      tableOptions: [
        {label: '账号名', minWidth: '30', prop: 'account', formatter: ({account}) => account || '-'},
        {label: '用户姓名', minWidth: '30', prop: 'name', formatter: ({name}) => name || '-'},
        {
          label: '外包公司',
          minWidth: '30',
          prop: 'outCompanyId',
          formatter: ({outCompanyName}) => outCompanyName || '-'
        },
        {label: '手机号', minWidth: '30', prop: 'tel', formatter: ({tel}) => tel || '-'},
        {label: '所属路段', minWidth: '30', prop: 'roadName', formatter: ({roadName}) => roadName || '-'},
        {
          label: '人员职务',
          minWidth: '40',
          prop: 'carClass',
          formatter: ({type}) => dictionaryEscape('rylx-xcjyry', type + '') || '-'
        }
      ],
      params: {
        pageBean: {pageSize: 20, page: 1, total: 0},
        querys: [
          {operation: 'LIKE', property: 'TEAM_ID_'},
          {group: 'quick', operation: 'LIKE', relation: 'AND', property: 'tm.name_'},
          {group: 'quick', operation: 'LIKE', relation: 'AND', property: 'account'},
          {group: 'quick', operation: 'LIKE', relation: 'AND', property: 'tm.tel_'},
          // 添加 roadId 查询条件
          {group: 'quick', operation: 'LIKE', relation: 'AND', property: 'road_Id_'}
        ],
        sorter: []
      },
      tableData: [], // 所在路段数据
      treeItem: {}, // 树选中
      tableLoading: false // 表格loading
    }
  },
  computed: {
    isShowDialog: {
      get() {
        return this.isShow
      },
      set(val) {
        this.$emit('update:isShow', val)
      }
    }
  },
  created() {
  },
  methods: {
    // 打开弹层时触发
    open() {
      if (this.carData.roadId) {
        this.params.querys[4].value = this.carData.roadId
      }
      console.log('树节点数据:', this.carData) // 打印树节点数据
      this.getTableData()
    },

    // 关闭弹层触发
    closed() {
      const {orgData} = this
      // 重置data中的数据
      Object.assign(this.$data, this.$options.data.call(this), {orgData})
      this.treeItem = this.orgData[0] || {}
      setQueryValue(this.params, 'COMPANY_IDS_', this.treeItem?.path || '')
      // 重置 roadId 查询条件
      setQueryValue(this.params, 'road_Id_', '')
    },


    //获取所在路段列表数据
    async getTableData(params) {
      // this.tableData = []
      this.tableLoading = true
      try {
        // 请求 tableData 接口
        const response = await carList(this.params)
        this.params.pageBean.total = response.total
        // 假设接口返回的数据格式为 { data: [{ name: '巡查任务(件)', value: 5 }, ...] }
        if (response) {
          this.tableData = response.rows // 将接口返回的数据赋值给 taskListother
        }
      } catch (error) {
        console.error('请求数据失败:', error)
      } finally {
        this.tableLoading = false
      }
    },

    // 树改变
    treeChange(treeItem) {
      // 修改对应的字段值
      setQueryValue(this.params, 'COMPANY_IDS_', treeItem?.path || '')
      this.getTableData()
    },
    // 处理确认事件
    async handleConfirm(selectedData) {
      try {
        // 请求 tableData 接口
        const {state} = await tableAdd({memberId: selectedData.id, teamId: this.treeId})
        if (state) {
          this.$message.success('新增人员成功')
          this.$emit('confirm')
        }
      } catch (error) {
        console.error('请求数据失败:', error)
      } finally {
        this.tableLoading = false
      }
    }
  }
}
</script>

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