<template>
  <scroll-view class="scroll-height" :scroll-y="true" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
    <view class="alarmDetails-container">
      <view class="flex bg-white p15 mb15">
        <image style="width: 40px; height: 40px; margin: auto 15px auto 0" :src="dataArray.typeImg ? dataArray.typeImg : '/static/images/404.png'" mode="aspectFill"></image>

        <view style="margin: auto auto auto 0">
          <view style="font-size: 15px"> {{ dataArray.timestamp ? dataArray.timestamp.replace("T", " ") : "" }} </view>
        </view>

        <view style="margin: auto 0 auto 0">
          <view style="font-size: 15px" :style="`color:${dataArray.handleStatus == 1 ? '#16bf00' : 'red'}`">
            {{ dataArray.handleStatus == 1 ? "已处理" : dataArray.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 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" v-if="dataArray.handleStatus == 1">
        <uni-section class="block mb10" title="处理信息" type="line"></uni-section>
        <view class="tableType3 p0">
          <u-row v-for="da in dataList2" :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="handleRange" placement="row" v-if="dataArray.handleStatus != 1">
            <u-radio
              v-for="han in 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="dataArray.handleContent"
            placeholder="备注信息，最多可输入50个字"
            :count="true"
            maxlength="50"
            style="margin: 0 0 15px 0"
            :disabled="dataArray.handleStatus == 1"
          ></u--textarea>
        </view>

        <view class="flex" v-if="dataArray.handleStatus != 1">
          <u-button
            type="primary"
            text="提交"
            shape="circle"
            :customStyle="{
              width: '80px',
              height: '30px',
              marginRight: '15px',
            }"
            @click="handleSubmit(1)"
          ></u-button>
        </view>
      </view>
    </view>
  </scroll-view>
</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 { eleInspectList, dealPutEle, persInspectList, dealPutPer } from "@/api/business/zhxf/fireInspect/index.js";

const { proxy } = getCurrentInstance();

const dataArray = ref({});
const dataList = ref([
  { title: "督察单编号", value: "" },
  { title: "督察单内容", value: "" },
]);
const dataList2 = ref([
  { title: "处理账号/电话", value: "" },
  { title: "处理时间", value: "" },
  // {
  //   title: "处理内容",
  //   value: "",
  // },
]);

const deviceName = ref("");
const alarmTime = ref("");
const id = ref("");
const productName = ref("");
const pageSize = ref(20);
const current = ref(1);
const total = ref(0);
const handleRange = ref(1);
const handleRangeList = ref([
  { label: "单个处理", value: 1 },
  { label: "批量处理", value: 0 },
]);

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

/**
 * @列表查询
 * @api接口查询
 */
function selectListApi() {
  if (productName.value == "电子督察单") {
    getDetail(eleInspectList, "电子");
    // eleInspectList({
    //   id: id.value,
    //   pageNum: current.value,
    //   pageSize: pageSize.value,
    // }).then((requset) => {
    //   if (requset.status === "SUCCESS") {
    //     dataArray.value = requset.data.records[0];
    //     dataList.value[0].value = requset.data.records[0].superviseCode;
    //     dataList.value[1].value = requset.data.records[0].content;
    //     dataList2.value[0].value = requset.data.records[0].handlePhone;
    //     dataList2.value[1].value = requset.data.records[0].handleTime;
    //     total.value = requset.data.total;
    //   }
    // });
  } else {
    getDetail(persInspectList, "人工");
    // persInspectList({
    //   id: id.value,
    //   pageNum: current.value,
    //   pageSize: pageSize.value,
    // }).then((requset) => {
    //   if (requset.status === "SUCCESS") {
    //     dataArray.value = requset.data.records[0];
    //     dataList.value[0].value = requset.data.records[0].artificialCode;
    //     dataList.value[1].value = requset.data.records[0].content;
    //     dataList2.value[0].value = requset.data.records[0].handlePhone;
    //     dataList2.value[1].value = requset.data.records[0].handleTime;
    //     total.value = requset.data.total;
    //   }
    // });
  }

  function getDetail(param, param2) {
    param({
      id: id.value,
      pageNum: current.value,
      pageSize: pageSize.value,
    }).then((requset) => {
      if (requset.status === "SUCCESS") {
        dataArray.value = requset.data.records[0];
        dataList.value[0].value = param2 == "电子" ? requset.data.records[0].superviseCode : requset.data.records[0].artificialCode;
        dataList.value[1].value = requset.data.records[0].content;
        dataList2.value[0].value = requset.data.records[0].handlePhone;
        dataList2.value[1].value = requset.data.records[0].handleTime;
        total.value = requset.data.total;
      }
    });
  }
}

/**
 * @提交
 */
function handleSubmit() {
  if (productName.value == "电子督察单") {
    dealPutEle({
      id: dataArray.value.id,
      handleContent: dataArray.value.handleContent,
      handleRange: handleRange.value,
    }).then((requset) => {
      if (requset.status === "SUCCESS") {
        proxy.$tab.navigateTo(`/pages/common/success/index?codeName=提交成功`);
      }
    });
  } else {
    dealPutPer({
      id: dataArray.value.id,
      handleContent: dataArray.value.handleContent,
      handleRange: handleRange.value,
    }).then((requset) => {
      if (requset.status === "SUCCESS") {
        proxy.$tab.navigateTo(`/pages/common/success/index?codeName=提交成功`);
      }
    });
  }
}

onReady(() => {});

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

onLoad((options) => {
  if ("deviceName" in options) {
    deviceName.value = options.deviceName;
  }

  if ("alarmTime" in options) {
    alarmTime.value = options.alarmTime;
  }
  if ("id" in options) {
    id.value = options.id;
  }
  if ("productName" in options) {
    productName.value = options.productName;
  }
  init();
});
</script>

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