<template>
    <!-- 所在路段选择弹层 -->
    <SuperTableSelectorDialog
      width="60%"
      v-on="$listeners"
      v-bind="$attrs"
      title="车辆选择"
      selectKey="id"
      selectLabel="carNumber"
      select-title-name="派遣车辆"
      :treeTabList="['行政维度']"
      :isShowTree.sync="isShowTree"
      :isShow.sync="isShowDialog"
      hintLanguage="提示：请在列表中选择车辆后，点击确认。"
      :search-option="optionList"
      :tree-item="treeItem"
      :defaultTreeExpandLevel="4"
      :table-data="tableData"
      :table-options="tableOptions"
      :table-loading="tableLoading"
      :tableParams="params"
      isSingleChoice
      :isShowSelect="false"
      @open="open"
      @closed="closed"
      @tableRefresh="getTableData"
      ref="superTableSelectorDialog"
    />
  </template>
  
  <script>
  import {orgTree} from '@/api/systemInterface'
  import {tableData} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/patrolAndRescueVehicleMgmt'
  import {refineRequestBody, setQueryValue} from '@/utils/requestWrappers'
  import SuperTableSelectorDialog from '@/components/SuperTableSelectorDialog/index.vue'
  import { getDictionaryByCode,dictionaryEscape  } from '@/utils/dictionary'
  
  export default {
    name: 'CarChoiceDialog',
    components: {SuperTableSelectorDialog},
    props: {
      isShow: {
        default: false,
        type: Boolean
      },
      carData: {
        default: () => [],
        type: Array
      }
    },
    data() {
      return {
        isShowTree: false,
        optionList: [
          { title: '车牌号或车辆品牌', prop: ['car_Number_', 'car_Brand_'], type: 'input', default: true },
          { title: '车辆类别',
            prop: 'car_Class_',
            type: 'select',
            option: getDictionaryByCode('jycl-cllx'),
            multiple: false
          },
          { 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: 'EQUAL', property: 'car_Class_' }
          ],
          sorter: []
        },
        tableData: [], // 所在路段数据
        treeItem: {}, // 树选中
        tableLoading: false // 表格loading
      }
    },
    computed: {
      isShowDialog: {
        get() {
          return this.isShow
        },
        set(val) {
          this.$emit('update:isShow', val)
        }
      }
    },
    created() {
      // this.getOrgTreeData()
    },
    methods: {
      // 打开弹层时触发
      open() {
        setQueryValue(this.params, 'TEAM_ID_', this.teamId || '')
        this.getTableData()
      },
  
      // 关闭弹层触发
      closed() {
        // 重置data中的数据
        Object.assign(this.$data, this.$options.data.call(this))
      },
  
      //获取所在路段列表数据
      async getTableData() {
        this.tableData = this.carData
        this.tableLoading = true
        // const {total = 0, rows = []} = await tableData(refineRequestBody(this.params))
        // this.params.pageBean.total = total
        // this.tableData = rows.map(i => {
        //   const { carNumber, carClass, engineNumber, memo, executeTime, id, code:roadCode, name:roadName } = i
        //   return { carNumber, carClass, engineNumber, memo, executeTime, id, roadCode, roadName }
        // })
        this.tableLoading = false
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  
  </style>
  