<template>
  <el-table
      :data="hlsData"
      border
      style="width: 100%;"
  >
    <el-table-column label="ID" width="80" align="center">
      <template #default="scope">
        {{scope.row.hlScoreId || scope.row.dayId}}
      </template>
    </el-table-column>
    <el-table-column prop="updateTime" label="评分时间">
      <template #default="scope">
        <span v-if="scope.row.hlDate">{{ parseTime(scope.row.hlDate, '{y}-{m}-{d}')}}</span>
        <span v-else>
          {{scope.row.updateTime}}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="hlScore" label="健康度得分" width="200"  align="center" />
    <el-table-column label="操作" width="100" align="center">
      <template #default="scope">
        <el-button type="text" plain icon="Tickets" @click="handleHistoryDetails(scope.row)">明细</el-button>
      </template>
    </el-table-column>
  </el-table>
  <pagination
      v-show="total>0"
      :total="total"
      v-model:page="params.pageNum"
      v-model:limit="params.pageSize"
      @pagination="getHlsData"
  />

  <el-dialog :title="title" v-model="open" width="1200px" append-to-body style="margin-top:2px!important">
    <health-setting :modelId="hlScoreId" :details="true" :dialogType="dialogType"/>
  </el-dialog>

</template>
<script setup lang="ts">
import {hlsList} from "@/api/hl/hlScore"
import {hlDayList} from "@/api/hl/hlDay"
import {onMounted, watch} from "vue"
import healthSetting from "./healthSetting.vue"
const props = defineProps(['modelId','dialogType'])
const hlsData = ref([])
const total = ref(0)
const open = ref(false)
const title = ref("")
const hlScoreId = ref(0)
const params=reactive({
  pageNum: 1,
  pageSize: 10,
})

onMounted(()=>{
  getHlsData()
})

function handleHistoryDetails(row){
  if(props.dialogType === 'history'){
    title.value = "历史健康度明细"
    hlScoreId.value = row.hlScoreId
  }else{
    title.value = "日健康度明细"
    hlScoreId.value = row.dayId
  }
  open.value = true
}

function getHlsData(){
  const request = props.dialogType === 'history' ? hlsList : hlDayList
  request(props.modelId,params).then(res=>{
    hlsData.value = res.rows
    total.value = res.total
  })
}

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