<template>
  <u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
    <u-tabs
      :list="tabsList"
      :current="tabsCurrent"
      @click="tabsClick"
      :scrollable="tabsList.length >= 5 ? true : false"
      lineColor="#333"
      :activeStyle="{ color: '#333' }"
      :inactiveStyle="{ color: '#909399' }"
    ></u-tabs>
  </u-sticky>

  <oa-scroll
    customClass="bg-white scroll-height"
    :isSticky="true"
    :refresherLoad="false"
    :refresherLoadTitle="false"
    :refresherEnabled="false"
    :refresherEnabledTitle="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <oa-touch class="deviceManage" @change="touchChange">
        <template #content>
          <uni-swipe-action>
            <uni-swipe-action-item class="bg-white">
              <view class="content">
                <view class="block p10">
                  <u-input v-model="deviceCode" placeholder="请输入设备编号" @blur="blur" shape="circle" prefixIcon="search" prefixIconStyle="color: #0c7bf9"> </u-input>
                </view>

                <u-empty v-if="dataList.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>

                <u-collapse @change="change" @close="close" @open="open" accordion v-else>
                  <u-collapse-item class="uCollapseItem" v-for="da in dataList" :key="da">
                    <template #title>
                      <view class="flex">
                        <view class="cu-avatar lg" style="margin: 0 10px auto 0; background-color: rgba(0, 0, 0, 0)">
                          <image class="image-bg" style="width: 80rpx; height: 80rpx" src="@/static/images/deviceManage/1.png"></image>
                        </view>
                        <view style="width: 100%">
                          <view class="flex" style="color: #000000">
                            <view>设备编号：{{ da.deviceCode }}</view>
                            <view class="deviceStatus" v-if="da.deviceStatus == 0" style="background-color: #aeaeae"> 离线 </view>
                            <view class="deviceStatus" v-else-if="da.deviceStatus == 1" style="background-color: #12c100"> 正常 </view>
                            <view class="deviceStatus" v-else-if="da.deviceStatus == 2" style="background-color: #ff1313"> 故障 </view>
                            <view class="deviceStatus" v-else style="background-color: #0d88f0"> 告警 </view>
                          </view>
                          <view style="display: flex; font-size: 14px; color: #666666; margin: 10px 0">
                            <view style="width: 50%; word-break: break-all">监测对象：{{ da.installAddress }}</view>
                            <view style="width: 50%; word-break: break-all; padding-left: 10px">所属单位：{{ da.companyName }}</view>
                          </view>
                          <view style="display: flex; font-size: 14px; color: #666666">
                            <view style="width: 50%; word-break: break-all">负责人：{{ da.linkPerson }}</view>
                            <view style="width: 50%; word-break: break-all; padding-left: 10px">联系电话：{{ da.linkPhone }}</view>
                          </view>
                        </view>
                      </view>
                    </template>

                    <view class="u-collapse-content">
                      <!-- <view style="display: flex; flex-wrap: wrap; margin-left: 5%">
                    <view style="width: 50%; height: 30px; line-height: 30px" v-for="ch in da.dataList" :key="ch">
                      <span>{{ ch.label }}：</span>
                      <span :style="ch.value === '正常' ? 'color:#12C100' : 'color:#FF0101'">{{ ch.value }}</span>
                    </view>
                  </view> -->
                      <view style="display: flex; flex-wrap: wrap; margin-left: 5%">
                        <view style="width: 50%; height: 30px; line-height: 30px" v-for="ch in da.dataList" :key="ch">
                          <span>{{ ch.portName }}：</span>
                          <span>{{ ch.portData }}</span>
                        </view>
                      </view>
                    </view>
                  </u-collapse-item>
                </u-collapse>
              </view>
            </uni-swipe-action-item>
          </uni-swipe-action>
        </template>
      </oa-touch>
    </template>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, watchEffect, getCurrentInstance, toRefs } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { dataRtList } from "@/api/business/mhxf/deviceManage";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const commonStore = commonStores(); //全局公共Store
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  deviceCode: "",
  systemTypeNo: 5,
  dataList: [],
  tabsCurrent: 0,
  tabsList: [
    { id: 5, name: "电气火灾" },
    { id: 4, name: "烟感" },
    { id: 3, name: "水系统" },
  ], //设备管理数据存储
});

const { deviceCode, systemTypeNo, dataList, tabsCurrent, tabsList } = toRefs(state);

/**
 * @tabs点击事件
 */
function tabsClick(e) {
  state.tabsCurrent = e.index;
  state.deviceCode = "";
}

/**
 * @滑动change事件
 */
function touchChange(e) {
  if (e == "右滑") {
    if (state.tabsCurrent >= 1) {
      state.tabsCurrent--;
    } else {
      state.tabsCurrent = state.tabsList.length - 1;
    }
  } else if (e == "左滑") {
    if (state.tabsCurrent < state.tabsList.length - 1) {
      state.tabsCurrent++;
    } else {
      state.tabsCurrent = 0;
    }
  }
}

function blur(e) {
  if (state.deviceCode) {
    classifySearch({ systemType: 5, deviceCode: state.deviceCode });
  }
}

//分类信息查询 start
function classifySearch(params) {
  dataRtList(params).then((res) => {
    state.dataList = res.data.records;
  });
}
// end
function goSearch() {
  if (state.tabsCurrent == 0) {
    systemTypeNo.value = 5;
  } else if (state.tabsCurrent == 1) {
    systemTypeNo.value = 1;
  } else if (state.tabsCurrent == 2) {
    systemTypeNo.value = 2;
  }
  classifySearch({ systemType: systemTypeNo.value, deviceCode: state.deviceCode, pageNum: "", pageSize: "" });
}

watchEffect(() => {
  goSearch();
});

function open(e) {
  // console.log('open', e)
}
function close(e) {
  // console.log('close', e)
}
function change(e) {
  // console.log('change', e)
}

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
    proxy.$tab.navigateTo("/pages/business/zhaf/xunJian/collect/components/collectRecord");
  } else {
  }
});

onLoad((options) => {
  // classifySearch({systemType:5,deviceCode:state.deviceCode})
});

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

onReady(() => {});

onMounted(() => {});
</script>

<style lang="scss">
.is-selected {
  color: #1989fa;
}

.deviceManage {
  height: 100%;
  background-color: #ffffff;

  .content {
    .u-row {
      .u-col {
        border: 1px #e4e3e3 solid;
        border-right: 0px;
        border-bottom: 0px;
      }

      .u-col:last-child {
        border-right: 1px #e4e3e3 solid;
      }
    }

    .u-row:last-child {
      .u-col {
        border-bottom: 1px #e4e3e3 solid;
      }
    }
  }

  .uCollapseItem {
    .deviceStatus {
      margin-left: 20px;
      font-size: 12px;
      color: #ffffff;
      padding: 0 5px;
      border-radius: 20px;
      line-height: 20px;
    }
  }
}
</style>
