<template>
  <div class="monitor">
    <nut-cell-group>
      <nut-cell title="母猪编号" desc="1214123"></nut-cell>
      <nut-cell title="日龄" desc="200天"></nut-cell>
      <nut-cell title="位置" desc="哺乳舍一单元"></nut-cell>
      <nut-cell title="设备编号" desc="1214123"></nut-cell>
    </nut-cell-group>
  </div>
  <div class="padding">
    <div class="monitor_box">
      <x-line text="采食曲线"></x-line>
      <div class="chart_content">
        <chart-food v-if="foodList.length > 0" :id="0" :list="foodList"></chart-food>
        <nut-empty v-else description="无采食曲线数据"></nut-empty>
      </div>
    </div>
    <div class="monitor_box">
      <x-line text="饮水曲线"></x-line>
      <div class="chart_content">
        <chart-drink v-if="drinkList.length > 0" :id="0" :list="drinkList"></chart-drink>
        <nut-empty v-else description="无饮水曲线数据"></nut-empty>
      </div>
    </div>
    <div class="monitor_box">
      <x-line text="体温曲线"></x-line>
      <div class="chart_content">
        <chart-temp v-if="tempList.length > 0" :id="0" :list="tempList"></chart-temp>
        <nut-empty v-else description="无温度曲线数据"></nut-empty>
      </div>
    </div>
    <div class="monitor_box">
      <x-line text="活跃度曲线"></x-line>
      <div class="chart_content">
        <chart-act v-if="actList.length > 0" :id="0" :list="actList"></chart-act>
        <nut-empty v-else description="无活跃度曲线数据"></nut-empty>
      </div>
    </div>
    <div class="monitor_box">
      <x-line text="膘体曲线"></x-line>
      <div class="chart_content">
        <chart-pasty v-if="pastyList.length > 0" :id="0" :list="pastyList"></chart-pasty>
        <nut-empty v-else description="无膘体曲线数据"></nut-empty>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: "FeedDetail"
}
</script>
<script setup>
  import { ref, onMounted } from 'vue';
  import { useRoute } from "vue-router";
  import { getFeedDetailChart } from "../../utils/api";
  import XLine from "../../components/XLine.vue";
  import ChartFood from "./charts/ChartFood.vue";
  import ChartDrink from "./charts/ChartDrink.vue";
  import ChartTemp from "../Env/charts/ChartTemp.vue";
  import ChartAct from "./charts/ChartAct.vue";
  import ChartPasty from "./charts/ChartPasty.vue";

  const route = useRoute()

  const foodList = ref([]);
  const drinkList = ref([]);
  const tempList = ref([]);
  const actList = ref([]);
  const pastyList = ref([]);

  const init = () => {
    let params = {
      dataType: 1,
      eartagNum: id.value,
      timeType: 1,
    }
    getFeedDetailChart(params).then(res => {
      if(res.code === 200) {
        foodList.value = res.data
      }
    })
    let params1 = {
      dataType: 2,
      eartagNum: id.value,
      timeType: 1,
    }
    getFeedDetailChart(params1).then(res => {
      if(res.code === 200) {
        tempList.value = res.data
      }
    })
    let params2 = {
      dataType: 3,
      eartagNum: id.value,
      timeType: 1,
    }
    getFeedDetailChart(params2).then(res => {
      if(res.code === 200) {
        actList.value = res.data
      }
    })
    let params3 = {
      dataType: 4,
      eartagNum: id.value,
      timeType: 1,
    }
    getFeedDetailChart(params3).then(res => {
      if(res.code === 200) {
        pastyList.value = res.data
      }
    })
  }

  const id = ref('')
  onMounted(() =>{
    id.value = route.query.id;
    init()
  })
</script>

<style scoped>
  .monitor {
    box-sizing: border-box;
    padding: 0 10px;
    /*background-color: #fff;*/
    border-radius: 10px;
    margin-bottom: 10px;
    position: relative;
  }
  .padding {
    padding: 0 10px;
  }
  .monitor_box {
    box-sizing: border-box;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    position: relative;
    background: white;
  }
  .chart_content {
    width: 100%;
    height: 300px;
  }
</style>
