<script lang="ts" setup name="Summary">
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dataList from './dataList.vue'
import { expandSummary, exportSummary, getSummary } from '@/api/eqpt/measurementPlan/paln'
import { exportFile } from '@/utils/exportUtils'
const $router = useRouter()
const $route = useRoute()
// 关闭
const close = () => {
  $router.go(-1)
}
// 表单数据
const ruleForm = ref({
  companyId: '',
  companyName: '',
  deptId: '',
  deptName: '',
  planIds: [],
  relationList: '',
  aggrList: [],
  summaryName: '',
  year: '',
})
// 获取初始数据
const fetchData = () => {
  const data = JSON.parse($route.query.data as string)
  getSummary({
    companyId: data.commpanyId,
    deptId: data.isAdmin ? null : data.deptId,
    year: data.year,
  }).then((res) => {
    ruleForm.value = res.data
    console.log(ruleForm.value, 'ruleForm.value')
  })
}
fetchData()
// 获取展开行数据
const fetchExpandData = (name: string, fun: any) => {
  if (!name) {
    fun({ data: [] })
    return
  }
  expandSummary({
    planIds: ruleForm.value.planIds,
    equipmentName: name,
  }).then((res) => {
    fun(res)
  })
}
// 导出
const exportList = () => {
  const data = JSON.parse($route.query.data as string)
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(255, 255, 255, 0.8)',
  })
  exportSummary({
    companyId: data.commpanyId,
    deptId: data.isAdmin ? null : data.deptId,
    year: data.year,
  }).then((res) => {
    exportFile(res.data, ruleForm.value.summaryName)
    loading.close()
  }).catch(() => {
    loading.close()
  })
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page class="base-info-device" title="计量计划汇总">
      <template #btns>
        <el-button type="primary" @click="exportList">
          导出
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-com>
      <el-form
        ref="ruleFormRef" :model="ruleForm" label-position="right" label-width="110px" class="form"
        disabled
      >
        <el-row :gutter="24" class="marg">
          <el-col :span="12">
            <el-form-item label="计划名称" prop="summaryName">
              <el-input v-model.trim="ruleForm.summaryName" disabled style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单位" prop="companyName">
              <el-input v-model.trim="ruleForm.companyName" disabled style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col v-if="ruleForm.deptName" :span="6">
            <el-form-item label="部门" prop="deptName">
              <el-input v-model.trim="ruleForm.deptName" disabled style="width: 100%;" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block-com>
    <data-list :together-list="ruleForm.aggrList" :custom-list="true" :custom-expand="true" @fetchExpandData="fetchExpandData" />
  </app-container>
</template>

<style lang="scss" scoped>
.nortable-header {
  ::v-deep(.el-table__body-wrapper) {
    display: none;
  }
}
</style>