<template>
  <oa-scroll
    customClass="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="xunjian-plan-siteDetails">
        <view class="flex bg-white p15 mb15">
          <u-image style="margin: auto 15px auto 0" width="40" height="40" src="http://192.168.123.165:9300/statics/images/xunjian/scan.png" v-if="siteList.siteType == 1" shape="circle"></u-image>
          <u-image style="margin: auto 15px auto 0" width="40" height="40" src="http://192.168.123.165:9300/statics/images/xunjian/NFC.png" v-if="siteList.siteType == 2" shape="circle"></u-image>

          <view style="margin: auto auto auto 0">
            <view style="font-size: 15px; margin-bottom: 2px"> {{ siteList.siteName }} </view>
            <view style="font-size: 13px; color: #a1a1a1"> {{ siteList.contentCount }}项内容 </view>
          </view>

          <view style="margin: auto 0 auto 0">
            <!-- {{ siteList.siteStatus == null }} -->
            <view style="font-size: 15px; color: #30bb00">已定位</view>
            <!-- #f07d28 -->
          </view>
        </view>

        <view class="bg-white p15 mb15">
          <uni-section class="block mb10" title="上报现场" type="line"></uni-section>

          <oaUpload
            :uploadCount="5"
            :uploadList="siteList.recordPictureList"
            :uploadListSrc="'pictureUrl'"
            :uploadStyle="{
              width: 'calc(33% - 10px)',
              height: '110px',
            }"
            :uploadCloseStatus="xunJianStore.inspectionStatus == 2"
            @uploadSuccessChange="uploadSuccessChange"
            @uploadDeleteChange="uploadDeleteChange"
          ></oaUpload>
        </view>

        <view class="bg-white p15 mb15" style="height: 170px; max-height: 170px">
          <uni-section class="block mb10" title="备注" type="line"></uni-section>

          <view style="height: calc(100% - 25px)">
            <span v-if="xunJianStore.inspectionStatus == 2">
              {{ siteList.remarks }}
            </span>

            <u-textarea v-if="xunJianStore.inspectionStatus == 1" style="height: 100%" v-model="siteList.remarks" placeholder="请输入备注" maxlength="50"></u-textarea>
          </view>
        </view>

        <view class="bg-white p15 mb15">
          <uni-section class="block mb10" title="点位分布" type="line"></uni-section>

          <u-image width="100%" :src="siteList.pictureUrl"></u-image>
        </view>
      </view>
      <view class="app-button-fixed">
        <u-button v-if="xunJianStore.inspectionStatus == 1" class="app-buttom" type="primary" @click="buttonClick()" shape="circle"> 下一步 </u-button>
        <u-button v-if="xunJianStore.inspectionStatus == 2" class="app-buttom" type="primary" @click="buttonClick()" shape="circle"> 查看巡检项 </u-button>
      </view>
    </template>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, onMounted, reactive, computed, getCurrentInstance, toRefs, inject, shallowRef } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { recordList, recordOption, siteDetails } from "@/api/business/zhaf/xunJian/plan.js";
/*----------------------------------组件引入-----------------------------------*/
import oaUpload from "@/components/oa-upload/index"
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores, xunJianStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const xunJianStore = xunJianStores(); //全局变量值Store
/*----------------------------------变量声明-----------------------------------*/

/**
 * @站点详情
 * @api接口查询
 * @siteList站点详情信息存储
 * @contentList内容详情信息存储
 */
const siteList = ref([]);
const contentList = ref([]);
function selectAPI() {
  if (!proxy.$common.isNetwork()) {
    return false;
  }

  siteDetails({
    siteId: xunJianStore.siteId,
    siteNubmber: xunJianStore.siteNubmber,
    planSonId: xunJianStore.planSonId,
  })
    .then((res) => {
      if (res.status == "SUCCESS") {
        contentList.value = res.data.contentList;
        siteList.value = res.data.siteList[0];
        siteList.value.recordPictureList = [];

        contentList.value.forEach((el) => {
          el.remarksBool = false;
          el.contentOptionListValue = "";
          el.contentOptionListValue1 = [];
        });
      }
    })
    .catch((err) => {
      proxy.$modal.msg(err);
    });
}

/**
 * @巡检记录 recordList
 * @查看巡检项 recordOption
 * @api接口查询
 */
function recordAPI() {
  if (!proxy.$common.isNetwork()) {
    return false;
  }

  recordList({
    siteId: xunJianStore.siteId,
    planSonId: xunJianStore.planSonId,
  })
    .then((res) => {
      if (res.status == "SUCCESS") {
        if (res.data.length > 0) {
          recordOption({
            siteId: res.data[0].siteId,
            recordId: res.data[0].id,
          }).then((res1) => {
            contentList.value = res1.data.contentList;
            siteList.value = res.data[0];
          });
        }
      } else {
      }
    })
    .catch((err) => {
      proxy.$modal.msg(err);
    });
}

/**
 * @按钮点击事件
 * @下一步
 * @查看巡检项
 */
function buttonClick() {
  xunJianStore.contentArray = {
    contentList: contentList.value,
    siteList: siteList.value,
  };
  uni.navigateTo({
    url: "/pages/business/zhaf/xunJian/plan/components/content",
  });
}

/**
 * @图片上传成功回调
 */
function uploadSuccessChange(e) {
  siteList.value.recordPictureList.push({
    name: e.name,
    url: e.url,
    pictureUrl: e.url,
  });
}

/**
 * @图片删除回调
 */
function uploadDeleteChange(e) {
  siteList.value.recordPictureList = e;
}

onLoad((options) => {
  if (xunJianStore.inspectionStatus == 1) {
    selectAPI();
  } else if (xunJianStore.inspectionStatus == 2) {
    recordAPI();
  }
});

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

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

<style lang="scss" scoped>
.xunjian-plan-siteDetails {
  padding-bottom: 65px;
}
</style>
