<template>
  <div class="content">
    <div class="content-top">
      <div class="content-left">
        <InspectionTask />
      </div>
      <div class="content-center">
        <div class="userSelectParams">
          <CustomStyleSelect v-if="type === 'brigade'" v-model="params.inspectDepartmentId" :options="departments" />
          <el-date-picker
            v-model="params.time"
            type="daterange"
            range-separator="至"
            value-format="YYYY-MM-DD"
            start-placeholder="开始时间"
            end-placeholder="结束时间" />
        </div>
        <div class="quantity-overview">
          <div class="quantity-overview-item">
            <div>查获总数</div>
            <div style="font-size: 24px;">{{ infoNumber.total }}</div>
          </div>
          <div class="quantity-overview-item">
            <div>移交公安</div>
            <div style="font-size: 24px;">{{ infoNumber.policeTotal }}</div>
          </div>
          <div class="quantity-overview-item">
            <div>隐匿携带</div>
            <div style="font-size: 24px;">{{ infoNumber.concealTotal }}</div>
          </div>
        </div>
        <SeizeDetails />
      </div>
      <div class="content-right">
        <ProblemDiscovery />
        <IssueRectification :type="type" />
      </div>
    </div>
    <div class="content-bottom">
      <WorkPortrait />
    </div>
  </div>
</template>

<script setup>
import {
  InspectionTask,
  SeizeDetails,
  ProblemDiscovery,
  IssueRectification,
  WorkPortrait,
  CustomStyleSelect
} from '../pageItems';
import { getAppTotalSome, getDeptList } from '@/api/item/items'
import moment from 'moment'
import { useTimeOut } from '../pageItems/useTimeOut'
import { onMounted, onUnmounted, provide, computed } from 'vue'
const props = defineProps({
  type: {
    type: String,
    default: 'station'
  }
})

const params = ref({
  time: [moment().subtract(91, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
  inspectDepartmentId: props.type === 'brigade' ? '' : 'ALL'
})

const provideParams = computed(() => {
  return {
    startDate: params.value.time && params.value.time[0] ? params.value.time[0] : undefined,
    endDate:  params.value.time && params.value.time[1] ? params.value.time[1] : undefined,
    inspectDepartmentId: params.value.inspectDepartmentId,
    deptId: params.value.inspectDepartmentId,
    checkedDepartmentId: params.value.inspectDepartmentId,
  }
})

provide('provideParams', provideParams)

const infoNumber = ref({})
useTimeOut(() => {
  getAppTotalSome({
    startDate: provideParams.value.startDate,
    endDate: provideParams.value.endDate,
    inspectBrigadeId: provideParams.value.inspectDepartmentId === 'ALL' ? '' :  provideParams.value.inspectDepartmentId 
  }).then(res => {
    infoNumber.value = res.data
  })
}, [provideParams])
const departments = ref(props.type === 'brigade' ? [] : [
  { value: 'ALL', label: '全站' },
])
function buildBrigadeOptions (tree = []) {
  const result = [];
  function dfs (node, path = []) {
    const currentPath = [ ...path, node.label ];
    // 如果是 DEPARTMENT 节点
    if (node.deptType === "BRIGADE") {
      result.push({
        text: currentPath.join(' / '),
        value: node.id
      });
    }
    // 继续递归子节点
    if (node.children && Array.isArray(node.children)) {
      node.children.forEach(child => dfs(child, currentPath));
    }
  }
  tree.forEach(root => dfs(root));
  return result;
}
const defaultIndex = ref(0)
onMounted(() => {
  props.type === 'brigade' && getDeptList().then(res => {
    departments.value = [ ...departments.value, ...buildBrigadeOptions(res.data || []).map(item => ({
      ...item,
      label: item.text?.split('/')[ 1 ],
      value: item.value.toString()
    }))]
    params.value.inspectDepartmentId = departments.value && departments.value[0] ? departments.value[0].value : ''
  })
})

defineExpose({
  next: () => {
    defaultIndex.value++
    if (defaultIndex.value === departments.value.length) {
      return () => { // resetIndex
        defaultIndex.value = 0
      }
    } else {
      params.value.inspectDepartmentId = departments.value[ defaultIndex.value ] ? departments.value[ defaultIndex.value ].value : ''
      return false
    }
  }
})

</script>

<style lang="scss" scoped>
.content {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  row-gap: 15px;
  :deep(.el-select__wrapper) {
    font-size: 16px;
  }
}

.content-top {
  flex: 1;
  display: flex;
  width: 100%;
  column-gap: 10px;
  overflow: hidden;

  .content-left {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    &>*:nth-child {
      width: 100%;
      height: 100%;
    }
  }

  .content-center {
    flex: 1;
    // min-width: 800px;
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    overflow: hidden;

    .userSelectParams {
      display: flex;
      column-gap: 30px;
      padding: 20px 20px 0;
      --el-input-height: 40px;
      --el-font-size-base: 18px;
      &>*:nth-child(1) {
        flex: 1;
      }

      &>*:nth-child(2) {
        flex: 2;
      }
    }

    .public-inheritance-style {
      width: 100%;
      display: flex;
      column-gap: 10px;
    }

    .quantity-overview {
      @extend .public-inheritance-style;
      height: 140px;
      color: #fff;
      font-size: 20px;
      display: flex;
      column-gap: 25px;
      padding: 10px 20px 10px;
      box-sizing: border-box;

      .quantity-overview-item {
        flex: 1;
        height: 100%;
        background: #051E40;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        row-gap: 10px;
        border-radius: 5px;
        font-weight: bold;
      }
    }
  }

  .content-right {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    row-gap: 15px;

    &>*:nth-child {
      width: 100%;
      height: 50%;
    }

  }
}

.content-bottom {
  height: 35%
}
</style>