<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="earlyId"
                            selectLabel="carNumber" title="预警信息选择" v-bind="$attrs" width="75%" @closed="closed"
                            @confirm="handleConfirm"
                            @open="open" @tableRefresh="getTableData"
                            v-on="$listeners" />
</template>

<script>
import {refineRequestBody, setQueryValue} from '@/utils/requestWrappers'
import SuperTableSelectorDialog from '@/components/SuperTableSelectorDialog/index.vue'
import {dictionaryEscape, getDictionaryByCode} from '@/utils/dictionary'
import {calledPartDetail} from '@/api/patrolAndRescue/operationalMonitoring/calledPartyAnswer'

export default {
  name: 'EarlyDialog',
  components: {SuperTableSelectorDialog},
  props: {
    isShow: {
      default: false,
      type: Boolean
    },
    treeId: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      orgData: [], // 组织树
      optionList: [
        {title: '所属区域', prop: 'regional_name_', type: 'input', default: true},
        {
          title: '预警类型',
          prop: 'warning_type_',
          type: 'select',
          option: getDictionaryByCode('yxjc-yjlx'),
          multiple: true
        },
        {
          title: '预警灾害类型',
          prop: 'warning_value_',
          type: 'select',
          option: getDictionaryByCode('yjlxdm'),
          multiple: true
        }
      ],
      tableOptions: [
        {label: '所属区域', minWidth: '60', prop: 'regionalName', formatter: ({regionalName}) => regionalName || '-'},
        {label: '预警发布单位', minWidth: '60', prop: 'warningUnit', formatter: ({warningUnit}) => warningUnit || '-'},
        {
          label: '预警信息来源',
          minWidth: '60',
          prop: 'warningChannel',
          formatter: ({warningChannel}) => warningChannel || '-'
        },
        {
          label: '预警类型',
          minWidth: '60',
          prop: 'warningType',
          formatter: ({warningType}) => dictionaryEscape('yxjc-yjlx', warningType + '') || '-'
        },
        {
          label: '预警内容',
          minWidth: '100',
          prop: 'warningContent',
          formatter: ({warningContent}) => warningContent || '-'
        },
        {
          label: '预警灾害类型',
          minWidth: '60',
          prop: 'warningValue',
          formatter: ({warningValue}) => dictionaryEscape('yjlxdm', warningValue + '') || '-'
        },
        {
          label: '预警时间',
          minWidth: '100',
          prop: 'warningTime',
          formatter: ({warningTime}) => warningTime || '-'
        }
      ],
      params: {
        pageBean: {pageSize: 20, page: 1, total: 0},
        querys: [
          {group: 'quick', operation: 'LIKE', relation: 'AND', property: 'roadId'},
          {group: 'quick', operation: 'LIKE', relation: 'AND', property: 'regional_name_'},
          {group: 'quick', operation: 'IN', relation: 'AND', property: 'warning_value_'},
          {group: 'quick', operation: 'IN', relation: 'AND', property: 'warning_type_'}
        ],
        sorter: [
          {
            property: 'createTime',
            direction: 'DESC'
          }
        ]
      },
      tableData: [], // 所在路段数据
      treeItem: {}, // 树选中
      tableLoading: false // 表格loading
    }
  },
  computed: {
    isShowDialog: {
      get() {
        return this.isShow
      },
      set(val) {
        this.$emit('update:isShow', val)
      }
    }
  },
  created() {
  },
  methods: {
    // 打开弹层时触发
    open() {
      setQueryValue(this.params, 'roadId', this.treeId)
      this.getTableData()
    },

    // 关闭弹层触发
    closed() {
      const {orgData} = this
      // 重置data中的数据
      Object.assign(this.$data, this.$options.data.call(this), {orgData})
      this.treeItem = this.orgData[0] || {}
    },


    //获取所在路段列表数据
    async getTableData(params) {
      this.tableData = []
      this.tableLoading = true
      try {
        const {rows = [], total, pageSize} = await calledPartDetail(
          refineRequestBody(this.params)
        )
        this.tableData = rows
        this.params.pageBean.total = total
      } catch (error) {
        console.error('请求数据失败:', error)
      } finally {
        this.tableLoading = false
      }
    },

    // 处理确认事件
    async handleConfirm(selectedData) {
      try {
        this.$emit('confirm', selectedData)
      } catch (error) {
        console.error('请求数据失败:', error)
      } finally {
        this.tableLoading = false
      }
    }
  }
}
</script>
<style>
.el-tooltip__popper {
  max-width: 800px;
}
</style>
<style lang="scss" scoped>

</style>
