<template>
  <oa-scroll
    customClass="invoicing-container scroll-height"
    :customStyle="{}"
    :refresherLoad="false"
    :refresherEnabled="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :scrollIntoView="scrollIntoView"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <view>
      <view class="menu-list mt0 mlr0" style="padding: 0.625rem">
        <view class="list-cell">
          <view class="menu-item">
            <view style="width: 90px">事件名称</view>
            <view style="color: #666666">{{ dataList.eventName }}</view>
          </view>
        </view>
        <view class="list-cell">
          <view class="menu-item">
            <view style="width: 90px">事件上传图片</view>
            <view v-if="dataList.eventImage && dataList.eventImage != '[]'" @click="proxy.$common.imgEnlarge(2, JSON.parse(dataList.eventImage))">
              <image
                style="width: 20px; height: 20px; margin: auto 15px auto 0"
                v-for="(item, index) in JSON.parse(dataList.eventImage)"
                :key="index"
                :src="item.url ? item.url : 'http://192.168.123.165:9300/statics/images/404.png'"
                mode="aspectFill"
              ></image>
            </view>
          </view>
        </view>
        <view class="list-cell">
          <view class="menu-item">
            <view style="width: 90px">事件备注</view>
            <view style="color: #666666">{{ dataList.remark }}</view>
          </view>
        </view>
        <view class="list-cell">
          <view class="menu-item">
            <view style="width: 90px">上报人</view>
            <view style="color: #666666">{{ dataList.personnelName }}</view>
          </view>
        </view>
        <view class="list-cell">
          <view class="menu-item">
            <view style="width: 90px">事件类型</view>
            <view style="color: #666666">{{ proxy.$common.mapping("label", "value", dataList.eventType, patrol_event_type) }}</view>
          </view>
        </view>
        <view class="list-cell">
          <view class="menu-item">
            <view style="width: 90px">事件等级</view>
            <view style="color: #666666">{{ proxy.$common.mapping("label", "value", dataList.eventLevel, patrol_event_grade) }}</view>
          </view>
        </view>
        <view class="list-cell">
          <view class="menu-item">
            <view style="width: 90px">事件分类</view>
            <view style="color: #666666">{{ proxy.$common.mapping("label", "value", dataList.eventCategory, patrol_event_classify) }}</view>
          </view>
        </view>
        <view class="list-cell">
          <view class="menu-item">
            <view style="width: 90px">事件类型</view>
            <view style="color: #666666">{{ proxy.$common.mapping("label", "value", dataList.eventType, patrol_event_type) }}</view>
          </view>
        </view>
        <view class="list-cell">
          <view class="menu-item">
            <view style="width: 90px">创建人</view>
            <view style="color: #666666">{{ dataList.createBy }}</view>
          </view>
        </view>
        <view class="list-cell">
          <view class="menu-item">
            <view style="width: 90px">创建时间</view>
            <view style="color: #666666">{{ dataList.createTime }}</view>
          </view>
        </view>
        <view class="list-cell">
          <view class="menu-item">
            <view style="width: 90px">处置状态</view>
            <view :style="{ color: dataList.handleStatus == 0 ? 'red' : '#666666' }">{{ dataList.handleStatus == 0 ? "未处置" : dataList.handleStatus == 1 ? "已处置" : "" }}</view>
          </view>
        </view>
        <view class="list-cell">
          <view class="menu-item">
            <view style="width: 90px">处置图片</view>
            <view v-if="dataList.handleImage && dataList.handleImage != '[]'" @click="proxy.$common.imgEnlarge(2, JSON.parse(dataList.handleImage))">
              <image
                style="width: 20px; height: 20px; margin: auto 15px auto 0"
                v-for="(item, index) in JSON.parse(dataList.handleImage)"
                :key="index"
                :src="item.url ? item.url : 'http://192.168.123.165:9300/statics/images/404.png'"
                mode="aspectFill"
              ></image>
            </view>
          </view>
        </view>
        <view class="list-cell">
          <view class="menu-item">
            <view style="width: 90px">处置备注</view>
            <view style="color: #666666">{{ dataList.handleContent }}</view>
          </view>
        </view>
        <view class="list-cell">
          <view class="menu-item">
            <view style="width: 90px">处置人</view>
            <view style="color: #666666">{{ dataList.handleName }}</view>
          </view>
        </view>
        <view class="list-cell">
          <view class="menu-item">
            <view style="width: 90px">处置时间</view>
            <view style="color: #666666"> {{ dataList.handleTime ? dataList.handleTime.replace("T", " ") : "" }}</view>
          </view>
        </view>
      </view>
      <view class="app-button" v-if="dataList.handleStatus == 0">
        <view class="app-button-padding"></view>
        <view class="app-button-fixed">
          <u-button class="app-buttom" type="primary" @click="handleSubmit(dataList)" shape="circle"> 处置填报 </u-button>
        </view>
      </view>
    </view>
  </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 { errorApi } from "@/api/business/zhaf/xunJian";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const { patrol_event_classify, patrol_event_grade, patrol_event_type } = proxy.useDict("patrol_event_classify", "patrol_event_grade", "patrol_event_type");
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  dataList: {},
  id: undefined,
  scrollIntoView: "",
});

const { dataList, id, scrollIntoView } = toRefs(state);

function pageQueryApi() {
  errorApi()
    .Select({
      pageNum: 1,
      pageSize: 1,
      id: id.value,
    })
    .then((res) => {
      dataList.value = res.data.records[0];
    });
}

function handleSubmit(row) {
  proxy.$tab.navigateTo(`/pages/business/zhaf/xunJian/error/errorDisposition?id=${row.id}&eventName=${row.eventName}`);
}

onLoad((options) => {
  id.value = options.id;
  pageQueryApi();
});

onReady(() => {});

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

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
  }
});
</script>

<style lang="scss" scoped>
:deep(.uni-page-head__title) {
  opacity: 1 !important;
}
</style>
