<template>
  <view>
    <u-navbar
      :isBack="showAppbar"
      :title="title"
      :background="background"
      :custom-back="goback"
      :title-color="titleColor"
      v-if="showAppbar"
      :back-icon-color="titleColor"
    >
    </u-navbar>
    <view class="space-y-20rpx">
      <BaseChat
        :baseId="id"
        :cropId="item.id"
        v-for="(item, i) in crops"
        :key="item.id"
        :name="item.name"
        :type="i % 2 === 0 ? 'line' : 'column'"
      ></BaseChat>
      <SBYXZT v-if="isSB" :baseId="id"></SBYXZT>
      <QXSJ v-if="isQX" :baseId="id"></QXSJ>
      <SZJC v-if="isSZ" :baseId="id"></SZJC>
      <TRJC v-if="isTR" :baseId="id"></TRJC>
      <JK v-if="isJK" :baseId="id"></JK>
    </view>
  </view>
</template>
<script>
import { navigateBack } from '@/com/utils.js'
import { http } from '@/api/index.js'
import BaseChat from './components/base-chat.vue'
import SBYXZT from './components/sbyxzt.vue'
import QXSJ from './components/qxsj.vue'
import TRJC from './components/trjc.vue'
import JK from './components/JK.vue'
import SZJC from './components/szjc.vue'
export default {
  components: {
    BaseChat,
    SBYXZT,
    QXSJ,
    TRJC,
    SZJC,
    JK,
  },
  data() {
    return {
      background: {
        backgroundColor: '#2a7dc9',
      },
      titleColor: '#ffffff',
      id: '',
      devices: [],
      crops: [],
      title: '',
    }
  },
  computed: {
    isJK() {
      return this.devices.findIndex((e) => e.type == '监控设备') >= 0
    },
    isTR() {
      return this.devices.findIndex((e) => e.type == '土壤设备') >= 0
    },
    isQX() {
      return this.devices.findIndex((e) => e.type == '气象设备') >= 0
    },
    isSZ() {
      return this.devices.findIndex((e) => e.type == '水质设备') >= 0
    },
    isSB() {
      return this.devices.length > 0
    },
  },
  onLoad({ id }) {
    this.id = id
    this.init()
    window.postMessage({
      even:'appbarhidden'
    },{
      title:'基地详情'
    })
  },
  methods: {
    init() {
      if (!this.id) return
      http.get(`/api/agricultural-basic/${this.id}`).then(({ data }) => {
        const { crops, devices, name } = data.data
        this.title = name
        this.devices = devices
        uni.setNavigationBarTitle({ title: name })
        this.crops = crops
        try {
          uni.postMessage({
            data: {
              even:'xxxxxi'
            }
          });
        } catch (error) {
          
        }
      })
    },
    goback() {
      navigateBack()
    },
  },
}
</script>
