<template>
  <oa-scroll
    customClass="facilitiesDetails-container scroll-height"
    :isSticky="false"
    :refresherLoad="false"
    :refresherEnabled="false"
    :refresherEnabledTitle="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <view class="flex bg-white p15 mb15">
        <image style="width: 40px; height: 40px; margin: auto 15px auto 0" :src="dataArray.imagesUrl ? dataArray.imagesUrl : 'http://192.168.123.165:9300/statics/images/404.png'" mode="aspectFill"></image>

        <view style="margin: auto auto auto 0">
          <view style="font-size: 15px"> {{ dataArray.facilityName }} </view>
        </view>

        <view style="margin: auto 0 auto 0">
          <!-- {{ siteList.siteStatus == null }} -->
          <view style="font-size: 15px; color: #30bb00" :style="{ color: dataArray.status == 0 ? '#30bb00' : dataArray.status == 1 ? '#FF6000' : '#797979' }">
            {{ dataArray.status == 0 ? "正常" : dataArray.status == 1 ? "维修" : "关闭" }}
          </view>
          <!-- #f07d28 -->
        </view>
      </view>

      <view class="bg-white p15 mb15">
        <uni-section class="block mb10" title="基本信息" type="line"></uni-section>
        <view class="tableType3 p0">
          <u-empty v-if="dataList.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>

          <u-row v-for="po in dataList" :key="po">
            <u-col span="4">
              <view style="text-align: right; padding: 0px 5px 0px 5px">{{ po.title }}</view>
            </u-col>
            <u-col span="8">
              <view style="text-align: left; padding: 0px 5px 0px 5px">{{ po.value }}</view>
            </u-col>
          </u-row>
        </view>
      </view>

      <view class="bg-white p15 mb15">
        <uni-section class="block mb10" title="关联设备" type="line"></uni-section>

        <view class="flex mb10" style="height: 35px; line-height: 35px">
          <u-input
            v-model="state.deviceId"
            placeholder="设备编号"
            @change="deviceInfoApi()"
            disabledColor="transparent"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399"
            clearable
          />
        </view>

        <view class="tableType1">
          <u-row>
            <u-col span="1.5">
              <view>序号</view>
            </u-col>
            <u-col span="3">
              <view>设备编号</view>
            </u-col>
            <u-col span="3">
              <view>设备名称</view>
            </u-col>
            <u-col span="4.5">
              <view>设备地址</view>
            </u-col>
          </u-row>
          <u-row v-for="(co, index) in dataList1" :key="index">
            <u-col span="1.5">
              <view>{{ index + 1 }}</view>
            </u-col>
            <u-col span="3">
              <view>{{ co.deviceId }}</view>
            </u-col>
            <u-col span="3">
              <view>{{ co.deviceName }}</view>
            </u-col>
            <u-col span="4.5">
              <view>{{ co.installAddress }}</view>
            </u-col>
          </u-row>
        </view>
      </view>

      <view class="bg-white p15 mb15">
        <uni-section class="block mb10" title="关联建筑" type="line"></uni-section>

        <view class="flex mb10" style="height: 35px; line-height: 35px">
          <u-input
            v-model="state.buildNum"
            placeholder="建筑编号"
            @change="buildInfoApi()"
            disabledColor="transparent"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399"
            clearable
          />
        </view>

        <view class="tableType1">
          <u-row>
            <u-col span="1.5">
              <view>序号</view>
            </u-col>
            <u-col span="3">
              <view>建筑编号</view>
            </u-col>
            <u-col span="3">
              <view>建筑名称</view>
            </u-col>
            <u-col span="4.5">
              <view>建筑地址</view>
            </u-col>
          </u-row>
          <u-row v-for="(co, index) in dataList2" :key="index">
            <u-col span="1.5">
              <view>{{ index + 1 }}</view>
            </u-col>
            <u-col span="3">
              <view>{{ co.buildNum }}</view>
            </u-col>
            <u-col span="3">
              <view>{{ co.buildName }}</view>
            </u-col>
            <u-col span="4.5">
              <view>{{ co.address }}</view>
            </u-col>
          </u-row>
        </view>
      </view>
    </template>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { facilityInfo, deviceInfo, buildInfo } from "@/api/business/fireIot/facilitiesManage.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  id: undefined,
  deviceId: undefined,
  buildNum: undefined,
});

const dataArray = ref({});
const dataList = ref([
  { title: "设施类型", value: "" },
  { title: "设施编号", value: "" },
  { title: "设施位置", value: "" },
  { title: "创建时间", value: "" },
]);

const dataList1 = ref([]);
const dataList2 = ref([]);

/**
 * @页面初始化
 */
function init() {
  facilityInfo({ id: state.id }).then((requset) => {
    if (requset.status === "SUCCESS") {
      dataArray.value = requset.data[0];
      dataList.value[1].value = requset.data[0].facilityNum ? requset.data[0].facilityNum : "无";
      dataList.value[2].value = requset.data[0].address ? requset.data[0].address : "无";
      dataList.value[3].value = requset.data[0].createTime ? requset.data[0].createTime.replace("T", " ") : requset.data[0].createTime;
    }
  });

  deviceInfoApi();
  buildInfoApi();
}

/**
 * @设施详情关联设备接口请求
 * @api接口请求
 */
function deviceInfoApi() {
  deviceInfo({ id: state.id, deviceId: state.deviceId, current: 1, size: 1000 }).then((requset) => {
    if (requset.status === "SUCCESS") {
      dataList1.value = requset.data.records;
    }
  });
}

/**
 * @设施详情关联建筑接口请求
 * @api接口请求
 */
function buildInfoApi() {
  buildInfo({ id: state.id, buildNum: state.buildNum, current: 1, size: 1000 }).then((requset) => {
    if (requset.status === "SUCCESS") {
      dataList2.value = requset.data.records;
    }
  });
}

onReady(() => {});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

onLoad((options) => {
  if ("typeName" in options) {
    dataList.value[0].value = options.typeName;
  }
  if ("id" in options) {
    state.id = parseInt(options.id);
    init();
  }
});
</script>

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