<template>
  <div class="table-page">
    <div class="table-page-content">
      <div class="left-tree">
        <tree-side ref="treeSide" :dataLoading="treeLoading" :default-expand-all="false" :defaultProps="defaultProps"
                   :tabList="['组织路段树']" :treeData="treeData" isDeselect
                   @currentChange="currentChange"></tree-side>
      </div>
      <div class="right-table">
        <div class="full-page bg">
          <div class="search-box">
            <div class="search-box-combination">
              <div class="search-box-label">来电时间：</div>
              <div>
                <el-date-picker
                  v-model="params.querys[2].value"
                  end-placeholder="来电时间"
                  range-separator="至"
                  start-placeholder="来电时间"
                  style="width: 360px"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :default-time="['00:00:00', '23:59:59']"
                  @change="datePickerChange"
                >
                </el-date-picker>
              </div>
              <SearchCommon :optionList="optionList" @search="handleSearch" />
            </div>
          </div>
          <div class="main-table-container">
            <div class="table-container" style="padding: 20px">
              <div ref="tableRef" class="table-content">
                <el-table ref="multipleSelection"
                          v-loading="tableLoading"
                          :data="tableData"
                          :max-height="tableMaxHeight" border class="table-list"
                          element-loading-background="rgba(10 ,38 ,61, 0.9)" row-key="id" stripe
                          @select="handleSelection"
                          @selection-change="handleSelectionChange" @row-dblclick="handleDbClick">
                  <el-table-column align="center" label="序号" type="index" width="60" />
                  <el-table-column :formatter="({ roadName }) => roadName || '-'" align="center" label="所属路段"
                                   min-width="80" prop="roadName" show-overflow-tooltip />
                  <el-table-column
                    :formatter="({ phone }) => phone || '-'"
                    align="center" label="来电号码" min-width="80"
                    prop="phone"
                    show-overflow-tooltip />
                  <el-table-column
                    :formatter="({ username }) => username || '-'"
                    align="center" label="接听人员" min-width="80"
                    prop="username"
                    show-overflow-tooltip />
                  <el-table-column
                    :formatter="({ leadtype }) => leadtype|| '-'"
                    align="center" label="工单类型" min-width="80"
                    prop="complaintCategory"
                    show-overflow-tooltip />
                  <el-table-column
                    :formatter="({ subordinate }) => subordinate|| '-'"
                    align="center" label="具体明细" min-width="80"
                    prop="complaintCategory"
                    show-overflow-tooltip />
                  <el-table-column :formatter="({ calltime }) => calltime || '-'" align="center"
                                   label="来电时间"
                                   min-width="90"
                                   prop="calltime" show-overflow-tooltip />
                  <el-table-column :formatter="({ entryTime }) => entryTime || '-'" align="center"
                                   label="入库时间"
                                   min-width="90"
                                   prop="entryTime" show-overflow-tooltip />
                  <el-table-column align="center" label="操作" min-width="80" show-overflow-tooltip>
                    <template v-slot="{ row }">
                      <el-link :underline="false" type="primary" @click="handleDbClick(row)">
                        详情
                      </el-link>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination ref="paginationPanel" :pageResult="params.pageBean" style="margin-top: 10px"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {refineRequestBody, setQueryValue} from '@/utils/requestWrappers'
import pagination from '@/components/SuperPagination/index.vue'
import {TableMixin} from '@/mixins/tableMixin'
import treeSide from '@/components/treeSide/index.vue'
import SearchCommon from '@/components/SearchCommon/index.vue'
import {getTree} from '@/api/tree'
import {tableData} from '@/api/patrolAndRescue/operationalMonitoring/callLogs'
import PubSub from 'pubsub-js'
import {dictionaryEscape} from '@/utils/dictionary'
import {mapState} from 'vuex'
import moment from 'moment'

export default {
  name: 'TablePage',
  components: {
    pagination,
    treeSide,
    SearchCommon
  },
  mixins: [TableMixin],
  computed: {
    action: () => `${window.context.portal}/monitor/bizEarlyWarningManagement/v1/importData`,
    ...mapState({
      headers: (state) => ({Authorization: `Bearer ${state.login.currentUser.token}`})
    })
  },
  data() {
    return {
      pubSub: null,
      tableMaxHeight: '600px',
      loading: false,
      treeLoading: true,
      tableLoading: false,
      treeData: [], //左边树
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      tableData: [],
      currentDataDel: [],
      optionList: [
        {title: '工单类型', prop: 'leadtype', type: 'input', default: true}
      ],
      params: {
        pageBean: {pageSize: 20, page: 1, total: 0},
        querys: [
          {operation: 'IN', property: 'roadId'},
          {group: 'quick', operation: 'LIKE', relation: 'OR', property: 'leadtype'},
          {
            operation: 'BETWEEN',
            property: 'calltime',
            value: [
              moment().subtract(1, 'month')
                .startOf('month')
                .format('YYYY-MM-DD HH:mm:ss'),
              moment()
                .endOf('month')
                .format('YYYY-MM-DD HH:mm:ss')
            ]
          }
        ],
        sorter: [{
          direction: 'DESC',
          property: 'calltime'
        }]
      },
      treeDialog: false, // 科目信息弹层
      treeItemId: '', // 树形目录id
      treeItem: {}, // 树形节点选中对象
      btnLoading: false
    }
  },
  created() {
    // 获取树形目录-
    this.getOrgTreeData(treeData => {
      this.treeItem = treeData[0] || {}
      let array = []
      if (this.treeItem.children.length > 0) {
        array = this.extractIds(this.treeItem)
      }
      this.$nextTick(_ => {
        this.$refs.treeSide?.setCurrentKey(treeData[0]?.id)//通过 $refs 获取treeSide组件引用，并调用 setCurrentKey方法设置当前选中的树节点。
        this.$refs.treeSide?.expandHandle(true, 2)
      })
      setQueryValue(this.params, 'roadId', array)
      this.loadData() //加载表格数据
    })
  },
  mounted() {
    this.pubSub = PubSub.subscribe('TablePage', (_, data) => {
      switch (data.type) {
        case 'add':
          this.params.pageBean.page = 1
          this.loadData()
          break
        case 'edit':
          this.loadData()
          break
      }
    })

  },
  methods: {
    dictionaryEscape,
    extractIds(node) {
      let ids = []
      // 如果当前节点有 children，则递归提取
      if (node.children) {
        ids = node.children.map(child => child.id) // 提取当前节点的 id
        // 递归提取子节点的 id
        node.children.forEach(child => {
          ids = ids.concat(this.extractIds(child))
        })
      }
      return ids
    },
    // 时间范围切换
    datePickerChange(val) {
      setQueryValue(this.params, 'calltime', val)
      this.params.pageBean.page = 1
      this.loadData()
    },
    // 获取公司树-异步方法，用于从后端获取树形数据
    async getOrgTreeData(callback) {
      try {
        this.treeLoading = true   //开始加载时显示加载状态
        let {value} = await getTree()  // 调用 API 获取树形数据
        this.treeData = [value]
      } finally {
        this.treeLoading = false// 无论成功或失败，都关闭加载状态
        callback && callback(this.treeData)// 如果提供了回调函数，则调用它并传入树形数据
      }
    },
    transformTreeData(data) {
      return {
        name: data.name,
        id: data.id,
        children: data.children.reduce((acc, child) => {
          acc.push({
            id: child.id,
            name: child.name,
            children: child.roadList.map(road => ({
              id: road.id,
              name: road.name,
              path: road.path
            }))
          })
          return acc
        }, [])
      }
    },
    //左边树节点
    currentChange(nodeItem) {
      // 判断是否是一级目录（有 children 属性）
      if (nodeItem.id === '1766017468444450816') {
        setQueryValue(this.params, 'roadId ', this.extractIds(nodeItem))
      } else if (nodeItem.children && nodeItem.children.length > 0) {
        const array = nodeItem.children.map(item => item.id)
        setQueryValue(this.params, 'roadId ', array)
      } else {
        setQueryValue(this.params, 'roadId ', [nodeItem?.id] || [])
      }
      // setQueryValue(this.params, 'roadId', nodeItem?.id || '')
      this.treeItem = nodeItem || {}
      this.calcTableHeight(500)
      PubSub.publish('TreeItemSelected', {
        id: nodeItem?.id || '',
        name: nodeItem?.name || '',
        path: nodeItem?.path || ''
      })
      this.params.pageBean.page = 1
      this.loadData()
    },
    //获取数据
    async loadData() {
      this.tableLoading = true
      const {total = 0, rows = []} = await tableData(refineRequestBody(this.params))
      this.params.pageBean.total = total
      this.tableData = rows
      this.tableLoading = false
    },

    //修改
    handleDbClick(row) {
      this.changePage('DetailPage', row)
    },

    // 改变页面
    changePage(pageName = '', row = {}) {
      if (!pageName) return
      this.$emit('changePage', pageName, _ => {
        PubSub.publish(pageName, row)
      }, '详情')
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

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