<template>
  <oa-scroll
    customClass="alarmDetails-container scroll-height"
    :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="array.typeImg ? array.typeImg : '/static/images/404.png'" mode="aspectFill"></image>

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

        <view style="margin: auto 0 auto 0">
          <view style="font-size: 15px" :style="`color:${array.handleStatus == 1 ? '#16bf00' : 'red'}`">
            {{ array.handleStatus == 1 ? "已处理" : array.handleStatus == 0 ? "未处理" : "" }}
          </view>
        </view>
      </view>

      <view class="bg-white p15 mb15">
        <uni-section class="block mb10" title="基本信息" type="line"></uni-section>
        <view class="tableType3 p0">
          <u-row v-for="da in state.dataList" :key="da">
            <u-col span="4">
              <view style="text-align: right; padding: 0px 5px 0px 5px">{{ da.title }}</view>
            </u-col>
            <u-col span="8">
              <view style="text-align: left; padding: 0px 5px 0px 5px">{{ da.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>
          <u-radio-group v-model="state.handleRange" placement="row" v-if="array.handleStatus != 1">
            <u-radio
              v-for="han in state.handleRangeList"
              :key="han"
              :activeColor="proxy.$settingStore.themeColor.color"
              :label="han.label"
              :name="han.value"
              style="margin: 0 15px 15px 0"
              :labelSize="13"
              :iconSize="10"
            ></u-radio>
          </u-radio-group>

          <u--textarea v-model="state.handleContent" placeholder="备注信息，最多可输入50个字" :count="true" maxlength="50" style="margin: 0 0 15px 0" :disabled="array.handleStatus == 1"></u--textarea>
        </view>

        <view class="flex" v-if="array.handleStatus != 1">
          <u-button
            type="primary"
            text="误报"
            shape="circle"
            :customStyle="{
              width: '80px',
              height: '30px',
              marginRight: '15px',
            }"
            @click="handleSubmit(1)"
          ></u-button>
          <u-button
            type="primary"
            text="非误报"
            shape="circle"
            :customStyle="{
              width: '80px',
              height: '30px',
              marginLeft: '15px',
            }"
            @click="handleSubmit(0)"
          ></u-button>
        </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 { baseAlarmList, baseAlarm } from "@/api/business/fireIot/alarmManage.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  array: {},
  dataList: [
    { title: "设备名称", value: "", unit: "", key: "deviceName" },
    { title: "设备地址", value: "", unit: "", key: "alarmAddress" },
    { title: "告警等级", value: "", unit: "级", key: "alarmGrade" },
    { title: "告警信息", value: "", unit: "", key: "alarmContent" },
    { title: "告警时间", value: "", unit: "", key: "alarmTime" },
  ],

  deviceId: "",
  alarmTime: "",
  pageSize: 20,
  current: 1,
  total: 0,

  handleContent: "",
  handleRange: 1,
  handleRangeList: [
    { label: "单个处理", value: 1 },
    { label: "批量处理", value: 0 },
  ],
});

const { array } = toRefs(state);

/**
 * @页面初始化
 */
function init() {
  selectListApi();
}

/**
 * @列表查询
 * @api接口查询
 */
function selectListApi() {
  baseAlarmList({
    deviceId: state.deviceId,
    startTime: state.alarmTime,
    endTime: state.alarmTime,
    current: state.current,
    size: state.pageSize,
  }).then((requset) => {
    if (requset.status === "SUCCESS") {
      state.array = requset.data.records[0];
      state.dataList.forEach((e) => {
        e.value = requset.data.records[0][e.key] + e.unit;
      });
      state.total = requset.data.total;
    }
  });
}

/**
 * @提交
 */
function handleSubmit(alarmFalse) {
  baseAlarm({
    id: state.array.id,
    deviceId: state.array.deviceId,
    alarmType: state.array.alarmType,
    handleContent: state.handleContent,
    alarmFalse: alarmFalse,
    handleRange: state.handleRange,
  }).then((requset) => {
    if (requset.status === "SUCCESS") {
      proxy.$tab.navigateTo(`/pages/common/success/index?codeName=提交成功`);
    }
  });
}

onReady(() => {});

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

onLoad((options) => {
  if ("deviceId" in options) {
    state.deviceId = options.deviceId;
  }

  if ("alarmTime" in options) {
    state.alarmTime = options.alarmTime;
  }

  init();
});
</script>

<style lang="scss" scoped>
:deep(.u-textarea__field) {
  font-size: 13px;
}
</style>
