<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/bindCar'
import {setQueryValue} from '@/utils/requestWrappers'
import SuperTableSelectorDialog from '@/components/SuperTableSelectorDialog/index.vue'
import {dictionaryEscape, getDictionaryByCode} from '@/utils/dictionary'

export default {
  name: 'CarChoiceDialog',
  components: {SuperTableSelectorDialog},
  props: {
    isShow: {
      default: false,
      type: Boolean
    },
    carData: {
      default: () => [],
      type: Array
    },
    treeId: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      orgData: [], // 组织树
      optionList: [
        {title: '车牌号或车辆品牌', prop: ['car_Number_', 'car_Brand_'], type: 'input', default: true},
        {
          title: '车辆类别',
          prop: 'car_Class_',
          type: 'select',
          option: getDictionaryByCode('jycl-cllx'),
          multiple: true
        }
        // {title: '所属路段', prop: 'category', type: 'select', option: [], multiple: false},
        // {title: '常驻救援点', prop: 'direction', type: 'select', option: [], multiple: false},
        // {title: '所属巡查救援队伍', prop: 'direction', type: 'select', option: [], multiple: false}
      ],
      tableOptions: [
        {label: '车牌号', minWidth: '30', prop: 'carNumber', formatter: ({carNumber}) => carNumber || '-'},
        {label: '车辆品牌', minWidth: '30', prop: 'carBrand', formatter: ({carBrand}) => carBrand || '-'},
        {
          label: '车辆类别',
          minWidth: '40',
          prop: 'carClass',
          formatter: ({carClass}) => dictionaryEscape('jycl-cllx', carClass + '') || '-'
        },
        {
          label: '车辆用途',
          minWidth: '40',
          prop: 'useType',
          formatter: ({useType}) => dictionaryEscape('jycl-clyt', useType + '') || '-'
        },
        {label: '发动机编号', minWidth: '45', prop: 'engineNumber', formatter: ({engineNumber}) => engineNumber || '-'}
      ],
      params: {
        pageBean: {pageSize: 20, page: 1, total: 0},
        querys: [
          {operation: 'LIKE', property: '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: []
      },
      tableData: [], // 所在路段数据
      treeItem: {}, // 树选中
      tableLoading: false // 表格loading
    }
  },
  computed: {
    isShowDialog: {
      get() {
        return this.isShow
      },
      set(val) {
        this.$emit('update:isShow', val)
      }
    }
  },
  created() {
  },
  methods: {
    // 打开弹层时触发
    open() {
      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 || '')
    },


    //获取所在路段列表数据
    async getTableData(params) {
      console.log(params, '发呢也西安')
      // this.tableData = []
      this.tableLoading = true
      try {
        // 请求 tableData 接口
        const response = await carList(this.params)
        this.params.pageBean.total = response.total
        console.log(response, '数据1111111车')
        // 假设接口返回的数据格式为 { 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) {
      console.log(selectedData.id, '点的数据')
      try {
        // 请求 tableData 接口
        const {state} = await tableAdd({carId: selectedData.id, teamId: this.treeId})
        if (state) {
          this.$message.success('新增车辆成功')
          this.$emit('confirm')
        }
      } catch (error) {
        console.error('请求数据失败:', error)
      } finally {
        this.tableLoading = false
      }
      console.log('选中的数据:', selectedData)
    }
  }
}
</script>

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