<template>
  <div class="task">
    <nut-sticky top="46">
      <div class="daily_tab">
        <div :class="['tab_item', active === 1 ? 'active' : '']" @click="cut(1)">环境监测</div>
        <div :class="['tab_item', active === 2 ? 'active' : '']" @click="cut(2)">设备监测</div>
      </div>
    </nut-sticky>
    <nut-sticky top="87">
      <div class="daily_menu">
        <nut-row align="center">
          <nut-col :span="12" @click="showPigpen = true">
            <span>{{pigpenName}}</span>
            <Icon name="arrow-down" color="#0091FF"></Icon>
          </nut-col>
          <nut-col :span="12" @click="showUnit = true">
            <span>{{unitName}}</span>
            <Icon name="arrow-down" color="#0091FF"></Icon>
          </nut-col>
        </nut-row>
      </div>
    </nut-sticky>
    <div class="content">
      <!--  环境监测  -->
      <template v-if="active === 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">{{envData.temp ? envData.temp + '℃' : '无数据'}}</div>
              </div>
            </div>
            <div class="monitor_item">
              <div class="icon_hum"></div>
              <div>
                <div class="icon_min">湿度</div>
                <div class="icon_blue">{{envData.hum ? envData.hum + 'RH' : '无数据'}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="resize">
          <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="resize">
          <x-line text="湿度曲线"></x-line>
          <div class="chart_content">
            <chart-hum v-if="humList.length > 0" :id="0" :list="humList"></chart-hum>
            <nut-empty v-else description="无湿度曲线数据"></nut-empty>
          </div>
        </div>
      </template>
      <!--  设备监测  -->
      <template v-else-if="active === 2">
        <div class="device">
          <x-line text="设备总览"></x-line>
          <div class="device_flex">
            <div class="device_item">
              <div class="device_num color_blue">4</div>
              <div class="device_title">设备总数</div>
            </div>
            <div class="device_item">
              <div class="device_num color_green">4</div>
              <div class="device_title">在线设备</div>
            </div>
            <div class="device_item">
              <div class="device_num color_red">4</div>
              <div class="device_title">离线设备</div>
            </div>
            <div class="device_item">
              <div class="device_num color_red">50%</div>
              <div class="device_title">设备在线率</div>
            </div>
          </div>
        </div>
        <div class="device">
          <x-line text="设备管理"></x-line>
          <div class="device_flex_warp">
            <div v-for="(item, i) in deviceList" :key="item.id" :class="['flex_item', i < 2  ? 'margin_bottom' : '']">
              <div :class="['icon_fan', item.status === 1 ? 'select'+i : 'none'+i]"></div>
              <div>
                <div>{{item.name}}</div>
                <div :class="[ 'text-right' , item.status === 1 ? 'color_green' : 'color_res']">{{ item.status === 1 ? '在线' : '离线' }}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
  <nut-popup v-model:visible="showPigpen" position="bottom">
    <nut-picker
      :columns="pigpenList"
      title="选择栋舍"
      @confirm="pigpenChange"
      @cancel=" () => showPigpen = false"
    >
    </nut-picker>
  </nut-popup>
  <nut-popup v-model:visible="showUnit" position="bottom">
    <nut-picker
      :columns="unitList"
      title="选择单元"
      @confirm="unitChange"
      @cancel=" () => showUnit = false"
    >
    </nut-picker>
  </nut-popup>
</template>

<script>
export default {
  name: "Env"
}
</script>
<script setup>
  import {onMounted, ref, getCurrentInstance} from 'vue';
  import { Icon } from 'vant';
  import { getPigpenList, getUnitList, getEnvByUnit, getEnvByChart } from "../../utils/api";
  import XLine from "../../components/XLine.vue";
  import ChartTemp from "./charts/ChartTemp.vue";
  import ChartHum from "./charts/ChartHum.vue";

  const { proxy } = getCurrentInstance()

  const active = ref(1)

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


  const pigpenId = ref('')
  const pigpenList = ref([])
  const showPigpen = ref(false)
  const pigpenName = ref('')
  const pigpenChange = ({ selectedValue, selectedOptions }) => {
      pigpenId.value = selectedOptions[0].value;
      pigpenName.value = selectedOptions[0].text;
      showPigpen.value = false;
      initUnit()
  }

  // 获取栋舍
  const initPigpen = async () => {
    await getPigpenList({}).then(res => {
      if(res.code === 200) {
        res.data.forEach(item => {
          item.text = item.buildName;
          item.value = item.id;
        })
        pigpenName.value = res.data[0].text;
        pigpenId.value = res.data[0].value;
        pigpenList.value = res.data
      }
    })
    if(pigpenId.value) {
      await initUnit()
    } else {
      return;
    }
  }

  const unitId = ref('')
  const unitList = ref([])
  const showUnit = ref(false)
  const unitName = ref('')
  const unitChange = ({ selectedValue, selectedOptions }) => {
    unitId.value = selectedOptions[0].value;
    unitName.value = selectedOptions[0].text;
    showUnit.value = false;
    init()
  }

  // 获取单元
  const initUnit = async () => {
    let params = {
      id: pigpenId.value
    }
    await getUnitList(params).then(res => {
      if(res.code === 200) {
        res.data.forEach(item => {
          item.text = item.fullName;
          item.value = item.id;
        })
        unitId.value = res.data[0].value;
        unitName.value = res.data[0].text;
        unitList.value = res.data;
      }
    })
  }

  // 根据unitId查询环控数据
  const envData = ref({
    temp: '',
    hum: ''
  })

  const tempList = ref([])
  const humList = ref([])
  const deviceList = ref([
  {
    id: 1,
    name: '风机',
    status: 1
  },
  {
    id: 2,
    name: '吊顶小窗',
    status: 1
  },
  {
    id: 3,
    name: '湿帘',
    status: 0
  },
  {
    id: 4,
    name: '幕布',
    status: 0
  },
])
  const init = async () => {
    if(unitId.value) {
      if(active.value === 1) {
        let params = {
          pigpenId: unitId.value
        }
        await getEnvByUnit(params).then(res => {
          if(res.code === 200) {
            envData.value = {
              temp: res.data[0].temp,
              hum: res.data[0].hum
            }
          }
        })
        let params1 = {
          pigpenId: unitId.value,
          type: 0
        }
        await getEnvByChart(params1).then(res => {
          if(res.code === 200) {
            if(res.data.list.length > 0) {
              res.data.list.forEach(item => {
                item.time = proxy.$moment(item.createTime).format('HH:mm')
              })
              tempList.value = res.data.list;
              humList.value = res.data.list;
            } else {
              tempList.value = []
              humList.value = []
            }
          }
        })
      } else if(active.value === 2) {

      }
    } else {
      return;
    }
  }


  onMounted(async () => {
    await initPigpen()
    await init()
  })
</script>

<style scoped>
  /deep/.nut-menu .nut-menu__bar {
    line-height: 30px;
    background-color: transparent;
    box-shadow: none;
    color: #0091FF;
  }
  .task {
    width: 100%;
    height: 100%;
  }
  .daily_tab {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: flex;
  }
  .tab_item {
    width: 50%;
    height: 40px;
    background-color: #fff;
  }
  .active {
    background-color: #0091FF;
    color: #fff;
  }
  .daily_menu {
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 30px;
  }
  .daily_menu span{
    font-size: 14px;
    color: #0091FF;
  }
  .content {
    width: 100%;
    height: calc(100% - 70px);
    overflow: auto;
    box-sizing: border-box;
    padding: 10px;
    margin-top: 30px;
  }
  .monitor {
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  .monitor_flex {
    margin-top: 10px;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .monitor_item {
    width: 46%;
    height: 100%;
    border: 1px solid #ddd;
    box-sizing: border-box;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .icon_temp {
    width: 20px;
    height: 30px;
    background: url("../../assets/images/env/temp.png") no-repeat;
    background-size: 100% 100%;
  }
  .icon_hum {
    width: 20px;
    height: 30px;
    background: url("../../assets/images/env/hum.png") no-repeat;
    background-size: 100% 100%;
  }
  .icon_min {
    font-size: 12px;
  }
  .icon_blue {
    color: #0B65FF;
  }
  .resize {
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  .chart_content {
    width: 100%;
    height: 300px;
  }
  .device {
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    margin-bottom: 10px;
  }
  .device_flex {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .device_item {
    width: 24%;
    height: 70px;
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
  }
  .device_num {
    padding-top: 15px;
    font-size: 16px;
    margin-bottom: 5px;
  }
  .color_blue {
    color: #008CFF;
  }
  .color_green {
    color: #00DB58;
  }
  .color_red {
    color: #FF0000;
  }
  .device_title {
    font-size: 12px;
  }
  .device_flex_warp {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
    margin-top: 10px;
  }
  .flex_item {
    width: 48%;
    height: 70px;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .margin_bottom {
    margin-bottom: 10px;
  }
  .icon_fan {
    width: 36px;
    height: 36px;
  }
  .select0 {
    background: url("../../assets/images/env/fan_select.png") no-repeat;
    background-size: 100% 100%;
  }
  .none0 {
    background: url("../../assets/images/env/fan.png") no-repeat;
    background-size: 100% 100%;
  }
  .select1 {
    background: url("../../assets/images/env/chuang_select.png") no-repeat;
    background-size: 100% 100%;
  }
  .none1 {
    background: url("../../assets/images/env/chuang.png") no-repeat;
    background-size: 100% 100%;
  }
  .select2 {
    background: url("../../assets/images/env/lian_select.png") no-repeat;
    background-size: 100% 100%;
  }
  .none2 {
    background: url("../../assets/images/env/lian.png") no-repeat;
    background-size: 100% 100%;
  }
  .select3 {
    background: url("../../assets/images/env/bu_select.png") no-repeat;
    background-size: 100% 100%;
  }
  .none3 {
    background: url("../../assets/images/env/bu.png") no-repeat;
    background-size: 100% 100%;
  }
  .text-right{
    text-align: right;
  }
</style>
