<template>
  <!-- 所在路段选择弹层 -->
  <SuperTableSelectorDialog width="75%" v-on="$listeners" v-bind="$attrs" title="路损项目选择" selectKey="propertySubjectId"
    selectLabel="roadName" select-title-name="路损项目明细" :treeTabList="['行政维度']" :isShow.sync="isShowDialog"
    hintLanguage="提示：请在列表中选择路损项目后，点击确认。" :search-option="optionList" :treeData="orgData" :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" @treeChange="treeChange" ref="superTableSelectorDialog" />
</template>

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

export default {
  name: 'EventChoiceDialog',
  components: { SuperTableSelectorDialog },
  props: {
    isShow: {
      default: false,
      type: Boolean,
    },
    roadId: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      orgData: [], // 组织树
      optionList: [
        { title: '项目明细名称、编码', prop: ['subjectName', 'subjectCode'], type: 'input', default: true },
        { title: '项目明细类型', prop: 'typeId', type: 'select', option: getDictionaryByCode('lsxmlx'), multiple: true },
        { title: '计费单位', prop: 'unit', type: 'input' },
        { title: '所在路段', prop: 'roadSegmentName', type: 'input' }
      ],
      tableOptions: [
        { label: '项目明细', minWidth: '30', prop: 'propertySubjectName' },
        { label: '项目明细类型', minWidth: '50', prop: 'typeId', formatter: ({ typeId }) => dictionaryEscape('lsxmlx', typeId) || '-' },
        { label: '规格型号', minWidth: '40', prop: 'model' },
        { label: '收费单价', minWidth: '45', prop: 'price' },
        { label: '计费单位', minWidth: '40', prop: 'unit' },
        { label: '所在路段', minWidth: '50', prop: 'roadSegmentName' }
      ],
      params: {
        pageBean: { pageSize: 20, page: 1, total: 0 },
        querys: [
          { operation: 'LIKE', property: 'TEAM_FULL_ID_' },
          { group: 'subjectNameCode', operation: 'LIKE', relation: 'OR', property: 'subjectName' },
          { group: 'subjectNameCode', operation: 'LIKE', relation: 'OR', property: 'subjectCode' },
          { operation: 'IN', property: 'typeId' },
          { operation: 'LIKE', property: 'unit' },
          { operation: 'LIKE', property: 'roadSegmentName' },
          { operation: 'LIKE', property: 'roadSegmentId' }
        ],
        sorter: [
          { direction: '', property: 'typeId' }
        ]
      },
      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, 'roadSegmentId', this.roadId || '')
      this.$nextTick(() => {
        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() {
      this.orgData = await orgTree()
      this.treeItem = this.orgData[0] || {}
      setQueryValue(this.params, 'COMPANY_IDS_', this.treeItem?.path || '')
    },

    //获取所在路段列表数据
    async getTableData() {
      this.tableData = []
      this.tableLoading = true
      const { total = 0, rows = [] } = await tableData(refineRequestBody(this.params))
      this.params.pageBean.total = total
      this.tableData = rows.map(i => {
        const { id: propertySubjectId, subjectName: propertySubjectName, model, price, unit, roadSegmentName, typeId } = i
        return { propertySubjectId, propertySubjectName, model, price, unit, roadSegmentName, typeId }
      })
      this.tableLoading = false
    },

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

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