<template>
  <el-dialog 
    :title="`设施详情 - ID: ${facilityId}`" 
    v-model="visible" 
    width="80%" 
    append-to-body
  >
    <el-tabs type="border-card">
      <el-tab-pane label="维修记录">
        <el-table 
          :data="repairData" 
          v-loading="repairLoading" 
          style="width: 100%"
          height="400"
        >
          <el-table-column label="维修ID" align="center" prop="id" width="80" />
          <el-table-column label="维修日期" align="center" prop="repairDate" width="120">
            <template #default="scope">
              <span>{{ parseTime(scope.row.repairDate, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="维修内容" align="center" prop="repairContent" />
          <el-table-column label="维修结果" align="center" prop="repairResult" width="120">
            <template #default="scope">
              <dict-tag :options="fire_repair_result" :value="scope.row.repairResult" />
            </template>
          </el-table-column>
          <el-table-column label="操作人员" align="center" prop="replacePerson" width="120" />
          <el-table-column label="备注" align="center" prop="remark" />
        </el-table>
        <pagination
          v-show="repairTotal > 0"
          :total="repairTotal"
          v-model:page="repairQueryParams.pageNum"
          v-model:limit="repairQueryParams.pageSize"
          @pagination="getRepairList"
        />
      </el-tab-pane>
      
      <el-tab-pane label="更换记录">
        <el-table 
          :data="replacementData" 
          v-loading="replacementLoading" 
          style="width: 100%"
          height="400"
        >
          <el-table-column label="更换ID" align="center" prop="id" width="80" />
          <el-table-column label="原设施ID" align="center" prop="oldFacilityId" width="120" />
          <el-table-column label="新设施ID" align="center" prop="newFacilityId" width="120" />
          <el-table-column label="更换日期" align="center" prop="replaceDate" width="120">
            <template #default="scope">
              <span>{{ parseTime(scope.row.replaceDate, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="更换原因" align="center" prop="replaceReason" />
          <el-table-column label="更换人" align="center" prop="replacePerson" width="120" />
          <el-table-column label="备注" align="center" prop="remark" />
        </el-table>
        <pagination
          v-show="replacementTotal > 0"
          :total="replacementTotal"
          v-model:page="replacementQueryParams.pageNum"
          v-model:limit="replacementQueryParams.pageSize"
          @pagination="getReplacementList"
        />
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script setup>


import { ref, reactive, getCurrentInstance } from 'vue'
import { listRepair } from '@/api/fire/repair'
import { listReplacement } from '@/api/fire/replacement'

const { proxy } = getCurrentInstance()

const props = defineProps({
  facilityId: {
    type: [String, Number],
    required: true
  }
})

const visible = ref(false)

// 维修记录相关
const repairData = ref([])
const repairLoading = ref(false)
const repairTotal = ref(0)
const repairQueryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  facilityId: ''
})

// 更换记录相关
const replacementData = ref([])
const replacementLoading = ref(false)
const replacementTotal = ref(0)
const replacementQueryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  oldFacilityId: props.facilityId,
  newFacilityId: props.facilityId
})

// 维修结果字典
const { fire_repair_result } = proxy.useDict("fire_repair_result")

// 获取维修记录
const getRepairList = () => {
   console.log('请求的参数' + repairQueryParams.facilityId);
  replacementLoading.value = true
  repairLoading.value = true
  listRepair(repairQueryParams).then(response => {
    repairData.value = response.rows
    repairTotal.value = response.total
    repairLoading.value = false
  }).catch(() => {
    repairLoading.value = false
  })
}

// 获取更换记录
const getReplacementList = () => {
   
  listReplacement(replacementQueryParams).then(response => {
    replacementData.value = response.rows
    replacementTotal.value = response.total
    replacementLoading.value = false
  }).catch(() => {
    replacementLoading.value = false
  })
}

// 打开对话框
const open = (SearchId) => {
  console.log('打开详情对话框', SearchId)
  visible.value = true
  // 重置分页参数
  // 维修记录
  repairQueryParams.pageNum = 1
  repairQueryParams.facilityId=SearchId
  // 更换记录
  replacementQueryParams.pageNum = 1
replacementQueryParams.oldFacilityId=SearchId

  // 获取数据
    
  getRepairList()
  getReplacementList()
}

// 明确暴露方法


defineExpose({ open })
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>