<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="eventTel"
    title="事件选择"
    v-bind="$attrs"
    width="75%"
    @closed="closed"
    @open="open"
    @tableRefresh="getTableData"
    @treeChange="treeChange"
    v-on="$listeners"
  />
</template>

<script>
import {orgTree} from '@/api/systemInterface'
import {tableData} from '@/api/patrolAndRescue/commandDispatch/eventInquiry'
import {refineRequestBody, setQueryValue} from '@/utils/requestWrappers'
import SuperTableSelectorDialog from '@/components/SuperTableSelectorDialog/index.vue'
import {dictionaryEscape, getDictionaryByCode} from '@/utils/dictionary'
import moment from 'moment'

export default {
  name: 'EventChoiceDialog',
  components: {SuperTableSelectorDialog},
  props: {
    isShow: {
      default: false,
      type: Boolean
    },
    roadId: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      orgData: [], // 组织树
      optionList: [
        {
          title: '事件类型',
          prop: ['event_Type_'],
          type: 'select',
          option: getDictionaryByCode('sjlx'),
          multiple: true,
          default: true
        },
        {
          title: '事件来源',
          prop: ['event_Src_'],
          type: 'select',
          option: getDictionaryByCode('sjly'),
          multiple: true
        },
        {
          title: '事件编号',
          prop: ['event_No_'],
          type: 'input'
        },
        {
          title: '事件状态',
          prop: ['event_Status_'],
          type: 'select',
          option: getDictionaryByCode('sj_zt'),
          multiple: true
        }
      ],
      tableOptions: [
        {label: '事件编号', minWidth: '60', prop: 'eventNo'},
        {label: '报案电话', minWidth: '30', prop: 'eventTel'},
        {
          label: '事件类型',
          minWidth: '40',
          prop: 'eventType',
          formatter: ({eventType}) =>
            dictionaryEscape('sjlx', eventType) || '-'
        },
        {
          label: '事件来源',
          minWidth: '45',
          prop: 'eventSrc',
          formatter: ({eventSrc}) => dictionaryEscape('sjly', eventSrc) || '-'
        },
        {
          label: '事件等级',
          minWidth: '40',
          prop: 'eventLevel',
          formatter: ({eventLevel}) => (eventLevel ? eventLevel + '级' : '-')
        },
        // {label: '所属路段', minWidth: '50', prop: 'roadName' },
        {label: '事件发生时间', minWidth: '50', prop: 'eventTime'},
        {
          label: '当前状态',
          minWidth: '50',
          prop: 'eventStatus',
          formatter: ({eventStatus}) =>
            dictionaryEscape('sj_zt', eventStatus, {congruent: false}) || '-'
        }
      ],
      params: {
        pageBean: {pageSize: 20, page: 1, total: 0},
        querys: [
          {operation: 'EQUAL', property: 'road_id_', value: ''},
          {operation: 'IN', property: 'event_Type_', value: ''},
          {operation: 'IN', property: 'event_Src_', value: ''},
          {operation: 'LIKE', property: 'event_No_', value: ''},
          {operation: 'IN', property: 'event_Status_', value: ''},
          {
            operation: 'BETWEEN',
            property: 'eventTime',
            value: [
              moment().subtract(6, 'months').format('YYYY-MM-DD 00:00:00'),
              moment().format('YYYY-MM-DD 23:59:59')
            ]
          }
        ],
        sorter: [{direction: 'DESC', property: 'eventTime'}]
      },
      tableData: [], // 所在路段数据
      treeItem: {}, // 树选中
      tableLoading: false // 表格loading
    }
  },
  computed: {
    isShowDialog: {
      get() {
        return this.isShow
      },
      set(val) {
        this.$emit('update:isShow', val)
      }
    }
  },
  created() {
    this.getOrgTreeData()
  },
  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 getOrgTreeData() {
      let {value} = await orgTree()
      this.orgData = value
      this.treeItem = this.orgData[0] || {}
      setQueryValue(this.params, 'COMPANY_IDS_', this.treeItem?.path || '')
    },

    //获取所在路段列表数据
    async getTableData() {
      this.tableData = []
      this.tableLoading = true
      this.params.querys[0].value = this.roadId
      const {total = 0, rows = []} = await tableData(
        refineRequestBody(this.params)
      )
      this.params.pageBean.total = total
      this.tableData = rows
      // this.tableData = rows.map((i) => {
      //   const {
      //     eventTel,
      //     eventType,
      //     eventSrc,
      //     eventLevel,
      //     roadName,
      //     id,
      //     eventTime,
      //     eventNo,
      //     eventStatus
      //   } = i
      //   return {
      //     eventTel,
      //     eventType,
      //     eventSrc,
      //     eventLevel,
      //     roadName,
      //     id,
      //     eventTime,
      //     eventNo,
      //     eventStatus
      //   }
      // })
      this.tableLoading = false
    },

    // 树改变
    treeChange(treeItem) {
      // 修改对应的字段值
      setQueryValue(this.params, 'COMPANY_IDS_', treeItem?.path || '')
      this.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
