<template>
  <div class="task">
    <nut-sticky top="46">
      <div class="daily_tab">
        <span>{{name}}</span>
        <div class="float_right" @click="showFilter = true">
          <span>筛选</span>
          <Icon name="filter-o" color="#0B65FF" size="16"></Icon>
        </div>
      </div>
    </nut-sticky>
    <div class="content">
      <template v-if="type === 0">
        <div class="monitor">
          <x-line text="实时监测"></x-line>
          <div class="monitor_flex">
            <div class="monitor_item">
              <div class="icon_temp"></div>
              <div>
                <div class="icon_min">饲料消耗</div>
                <div class="icon_blue">{{whole.todayFeed}}kg</div>
              </div>
            </div>
            <div class="monitor_item">
              <div class="icon_hum"></div>
              <div>
                <div class="icon_min">饮水消耗</div>
                <div class="icon_blue">{{whole.todayWater}}吨</div>
              </div>
            </div>
          </div>
        </div>
        <div class="monitor">
          <x-line text="料塔余量"></x-line>
          <div class="monitor_flex">
            <div class="monitor_item" v-for="item in wholeList" :key="item.id">
              <div class="icon_liao"></div>
              <div>
                <div class="icon_min">{{item.unitName}}</div>
                <div class="icon_blue">{{item.value}}吨</div>
              </div>
            </div>
          </div>
        </div>
        <div class="monitor" v-for="(item, i) in wholeChart" :key="i">
          <x-line :text=" item.feedName + '余量曲线'"></x-line>
          <div class="chart_content">
            <chart-feed v-if="item.value.length > 0" :id="i" :list="item.value"></chart-feed>
            <nut-empty v-else description="无数据"></nut-empty>
          </div>
        </div>
<!--        <div class="monitor">-->
<!--          <x-line text="料塔2余量曲线"></x-line>-->
<!--          <div class="chart_content">-->
<!--            <chart-feed v-if="feedList.length > 0" :id="1" :list="feedList"></chart-feed>-->
<!--            <nut-empty v-else description="无数据"></nut-empty>-->
<!--          </div>-->
<!--        </div>-->
      </template>
      <template v-else-if="type === 1">
        <div class="monitor">
          <x-line text="实时监测"></x-line>
          <div class="monitor_flex">
            <div class="monitor_item">
              <div class="icon_temp"></div>
              <div>
                <div class="icon_min">今日总采食</div>
                <div class="icon_blue">{{pigpen.todayFeed}}吨</div>
              </div>
            </div>
            <div class="monitor_item">
              <div class="icon_hum"></div>
              <div>
                <div class="icon_min">今日总饮水</div>
                <div class="icon_blue">{{pigpen.todayWater}}kg</div>
              </div>
            </div>
          </div>
        </div>
        <div class="monitor">
          <x-line text="采食曲线"></x-line>
          <div class="date_flex">
            <div :class="[ active === 2 ? 'icon_blue' : '' , 'margin-right']" @click="cut(2)">月</div>
            <div :class="[ active === 1 ? 'icon_blue' : '' ]" @click="cut(1)">日</div>
          </div>
          <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">
          <x-line text="饮水曲线"></x-line>
          <div class="date_flex">
            <div :class="[ active === 2 ? 'icon_blue' : '' , 'margin-right']" @click="cut(2)">月</div>
            <div :class="[ active === 1 ? 'icon_blue' : '' ]" @click="cut(1)">日</div>
          </div>
          <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">
          <x-line text="料肉比"></x-line>
          <div class="date_flex">
            <div :class="[ active === 2 ? 'icon_blue' : '' , 'margin-right']" @click="cut(2)">月</div>
            <div :class="[ active === 1 ? 'icon_blue' : '' ]" @click="cut(1)">日</div>
          </div>
          <div class="chart_content">
            <chart-ratio v-if="ratioList.length > 0" :id="0" :list="ratioList"></chart-ratio>
            <nut-empty v-else description="无料肉比曲线数据"></nut-empty>
          </div>
        </div>
      </template>
      <template v-else-if="type === 2">
        <div class="search">
          <div class="search_input">
            <input v-model="searchName" placeholder="请输入母猪标号或者设备标号" class="input" type="text">
          </div>
          <div class="search_date" @click="showDialog = true">
            <div>起{{startTime}}</div>
            <div>至{{endTime}}</div>
          </div>
          <div class="search_button" @click="initUnit(true)">搜索</div>
        </div>
        <div class="monitor scroll_box">
          <div class="monitor_max">
            <div class="col-22">母猪编号</div>
            <div class="col-22">设备编号</div>
            <div class="col-22">日期</div>
            <div class="col-22">当前采食</div>
            <div class="col-12">操作</div>
          </div>
          <div class="monitor_scroll" v-infinite-scroll="init" :infinite-scroll-disabled="finished"
               infinite-scroll-watch-disabled="finished">
            <template v-if="list.length > 0">
              <div class="monitor_sub" v-for="(item, i) in list" :key="i">
                <div class="col-22 font_min">{{item.eartagNum}}</div>
                <div class="col-22 font_min">{{item.deviceCode}}</div>
                <div class="col-22 font_min">{{item.createDate}}</div>
                <div class="col-22 font_min">{{item.todayFeed}}kg</div>
                <div class="col-12 font_min icon_blue" @click="jump(item)">详情</div>
              </div>
            </template>
            <template v-else>
              <nut-empty description="无数据"></nut-empty>
            </template>
          </div>
        </div>
      </template>
    </div>
  </div>
  <nut-cascader
    title="选择栋舍"
    v-model:visible="showFilter"
    v-model="unitOn"
    @change="onChangeLocation"
    :options="schoolList"
    text-key="name"
    value-key="id"
    children-key="child"
  ></nut-cascader>
  <nut-calendar
    v-model:visible="showDialog"
    :default-value="date"
    type="range"
    :start-date="`2024-01-01`"
    :end-date="timeDate(new Date().getTime())"
    @close="closeSwitch"
    @choose="setChooseValue"
  >
  </nut-calendar>
</template>

<script>
export default {
  name: "Feed"
}
</script>
<script setup>
import {onMounted, ref} from 'vue';
  import { Icon } from 'vant';
  import { useRouter, onBeforeRouteLeave } from "vue-router";
  import XLine from "../../components/XLine.vue";
  import ChartFeed from "./charts/ChartFeed.vue";
  import ChartFood from "./charts/ChartFood.vue";
  import ChartDrink from "./charts/ChartDrink.vue";
  import ChartRatio from "./charts/ChartRatio.vue";
  import {timeDate, timeMd} from "../../utils";
  import { getPigpenTree, getFeedWhole, getFeedPigpen, getFeedUnitPage } from "../../utils/api";
  import { useKeepStore } from "../../store";

  const router = useRouter()
  const keepStore = useKeepStore()

  const name = ref('全场');
  const showFilter = ref(false);
  const unitOn = ref([]);
  const unitId = ref('');
  const schoolList = ref([
  ])

  const initSchool = () => {
    getPigpenTree({}).then(res => {
      if(res.code === 200) {
        schoolList.value = res.data
      }
    })
  }

  const onChangeLocation = (val, page) => {
    name.value = page[1].text;
    unitId.value = page[1].value;
    if(type.value === page[1].type) {
      return
    } else {
      type.value = page[1].type;
      init()
    }
  }
  // type(0,1,2 全场 栋舍 单元)
  const type = ref(0);

  // const feedList = ref([
  //   {
  //     time: '01:00',
  //     value: 30
  //   }
  // ]);

  // 全场
  const whole = ref({
    todayFeed: 0,
    todayWater: 0
  })
  const wholeList = ref([])
  const wholeChart = ref([])

  // 整栋
  const pigpen = ref({
    todayFeed: 0,
    todayWater: 0
  })

  const foodList = ref([])
  const drinkList = ref([])
  const ratioList = ref([])
  const init = () => {
    if(type.value === 0) {
      initWhole()
    } else if(type.value === 1) {
      initPigpen()
    } else if(type.value === 2) {
      initUnit(true)
    }
  }

  // 全场
  const initWhole = () => {
    getFeedWhole({}).then(res => {
      if(res.code === 200) {
        whole.value = {
          todayFeed: res.data.todayFeed,
          todayWater: res.data.todayWater
        }
        wholeList.value = res.data.feedingName;
        wholeChart.value = res.data.jsonArray;
      }
    })
  }

  // 整栋
  const initPigpen = () => {
    let params = {
      unitId: unitId.value,
      type: active.value
    }
    getFeedPigpen(params).then(res => {
      if(res.data === 200) {
        pigpen.value = {
          todayFeed: res.data.todayFeed,
          todayWater: res.data.todayWater
        }
        foodList.value = res.data.feedingList;
        drinkList.value = res.data.waterList;
        ratioList.value = res.data.bodyList;
      }
    })
  }

  const active = ref(1);

  const cut = (val) => {
    if(active.value === val) {
      return;
    } else {
      active.value = val;
      init()
    }
  }

  const searchName = ref('')
  const startTime = ref(timeMd(new Date().getTime() - 1000 * 60 * 60 * 24))
  const endTime = ref(timeMd(new Date().getTime()))

  const showDialog = ref(false)
  const startDate = ref(timeDate(new Date().getTime() - 1000 * 60 * 60 * 24))
  const endDate = ref(timeDate(new Date().getTime()))
  const date = ref([ timeDate(new Date().getTime() - 1000 * 60 * 60 * 24), timeDate(new Date().getTime())])
  const closeSwitch = () => {
    showDialog.value = false;
    date.value = [ timeDate(new Date().getTime() - 1000 * 60 * 60 * 24), timeDate(new Date().getTime())];
  }
  const setChooseValue = (params) => {
    startTime.value = params[0][1] + '-' + params[0][2];
    endTime.value = params[1][1] + '-' + params[1][2];
    startDate.value = params[0][3];
    endDate.value = params[1][3];
    showDialog.value = false;
  }

  const current = ref(1)
  const size = ref(10)
  const list = ref([])
  const finished = ref(false)

  //单元
  const initUnit = (bool) => {
    if(finished.value ) {
      return
    } else {
      let params = {
        current: current.value,
        eartagNum: searchName.value,
        size: size.value,
        startDate: startDate.value,
        endDate: endDate.value
      }
      getFeedUnitPage(params).then(res => {
        if(res.code === 200) {
          if(bool) {
            list.value = res.data.records;
          } else {
            list.value = list.value.concat(res.data.records)
          }
          if(res.data.records.length < size.value) {
            finished.value = true;
            return;
          }
          current.value++;
        }
      })
    }

  }


  const jump = (item) => {
      keepStore.SET_KEEPALIVE(['FeedDetail'])
      router.push({
        path: '/feedDetail',
        query: {
          id: item.eartagNum
        }
      })
    }

  onMounted(() => {
    initSchool()
    init()
  })

  onBeforeRouteLeave((to, from, next) => {
    if(to.path.indexOf('/feedDetail') > -1) {
      keepStore.SET_KEEPALIVE(['Feed'])
    } else {
      keepStore.SET_KEEPALIVE([''])
    }
    next()
  })


</script>

<style scoped>
  .task {
    width: 100%;
    height: 100%;
  }
  .daily_tab {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #0B65FF;
    background: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, .12);
    position: relative;
  }
  .float_right {
    position: absolute;
    top: 0;
    right: 10px;
    height: 40px;
  }
  .content {
    width: 100%;
    height: calc(100% - 40px);
    overflow: auto;
    box-sizing: border-box;
    padding: 10px;
  }
  .monitor {
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    position: relative;
    box-shadow: 0 0 4px rgba(0,0,0,.12);
  }
  .monitor_flex {
    margin-top: 10px;
    width: 100%;

    /*height: 70px;*/
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
  }
  .monitor_item {
    width: 48%;
    height: 70px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10px;
  }
  .icon_temp {
    width: 25px;
    height: 30px;
    background: url("../../assets/images/feed/feed.png") no-repeat;
    background-size: 100% 100%;
  }
  .icon_hum {
    width: 25px;
    height: 30px;
    background: url("../../assets/images/feed/water1.png") no-repeat;
    background-size: 100% 100%;
  }
  .icon_liao {
    width: 25px;
    height: 30px;
    background: url("../../assets/images/feed/liao.png") no-repeat;
    background-size: 100% 100%;
  }
  .icon_min {
    font-size: 12px;
  }
  .icon_blue {
    color: #0B65FF;
  }
  .chart_content {
    width: 100%;
    height: 300px;
  }
  .date_flex {
    position: absolute;
    display: flex;
    height: 25px;
    line-height: 25px;
    top: 10px;
    right: 20px;
  }
  .margin-right {
    margin-right: 20px;
  }
  .search {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .search_input {
    width: 60%;
    height: 40px;
    border: 1px solid #EDEDED;
    background: #fff;
    border-radius: 10px;
  }
  .input {
    width: 100%;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    padding-left: 15px;
    border: none;
    background: none;
    margin: 0;
    font-size: 14px;
  }
  .search_date {
    font-size: 12px;
    color: #0191FF;
  }
  .search_button {
    width: 20%;
    height: 40px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    background: #0191FF;
    border-radius: 16px;
  }
  .monitor_max {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
  }
  .col-22 {
    width: 22%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
  }
  .col-12 {
    width: 12%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
  }
  .scroll_box {
    width: 100%;
    height: calc(100% - 60px);
  }
  .monitor_scroll {
    width: 100%;
    height: calc(100% - 40px);
    overflow: auto;
  }
  .monitor_sub {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
  }
  .font_min {
    font-size: 12px;
    overflow: hidden;
  }
</style>
