<template>
  <u-popup class="porup-container" :show="scanBool" @close="close" @open="open" mode="bottom">
    <template #default>
      <view class="header-area mb15 mt15">
        <h4 class="header-area-title">请选择计划</h4>
        <view class="header-area-content"> 当前地点存在于多个计划,请选择目标计划 </view>
      </view>
      <scroll-view class="operate-area pl15 pr15" scroll-y>
        <view v-for="(scan, index) in scanArray" :key="index">
          <view class="operate-area-content">
            <view class="operate-area-content-icon">
              <img src="@/static/images/xunjian/plan-scan-drawer.png" alt="" />
            </view>
            <view class="operate-area-content-title">{{ scan.planName }} </view>
            <view class="operate-area-content-btn">
              <u-button type="primary" shape="circle" style="height: 25px; font-size: 13px" @click="reportClick(scan.siteId, scan.id)"> 上报 </u-button>
            </view>
          </view>

          <view class="operate-area-divider"></view>
        </view>
      </scroll-view>
    </template>
  </u-popup>
</template>

<script setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, watchEffect } from "vue";
import { useStores, commonStores, xunJianStores } from "@/store/modules/index";

const xunJianStore = xunJianStores(); //全局变量值Store

const props = defineProps({
  scanArray: {
    type: Object,
    default: null,
  },
  scanBool: {
    type: Boolean,
    default: null,
  },
});
const emit = defineEmits(["scanClose"]);

const scanArray = ref(props.scanArray);
const scanBool = ref(false);

/**
 * @巡检上报
 * @按钮点击事件
 */
function reportClick(siteId, planSonId) {
  xunJianStore.contentArray = {};
  xunJianStore.siteNubmber = undefined;
  xunJianStore.siteId = siteId;
  xunJianStore.planSonId = planSonId;

  uni.navigateTo({
    url: "/pages/business/zhaf/xunJian/plan/components/siteDetails",
  });
}

/**
 * @开启抽屉时执行
 */
function open() {}

/**
 * @关闭抽屉时执行
 */
function close() {
  scanBool.value = false;
  emit("scanClose", false);
}

/**
 * @监听器
 */
watchEffect((fn, options) => {
  scanBool.value = props.scanBool;
});

onLoad((options) => {});

onMounted(() => {});
</script>
<style lang="scss" scoped>
.porup-container {
  .header-area {
    &-title {
      font-size: 16px;
      color: #149eff;
      text-align: center;
      margin-bottom: 10px;
    }

    &-content {
      font-size: 12px;
      color: #b7b7b7;
      text-align: center;
    }
  }
  .operate-area {
    height: calc(100vh - 30rem);
    &-content {
      display: flex;
      font-size: 15px;
      height: 50px;
      line-height: 50px;

      &-icon {
        margin-right: 15px;
      }

      &-title {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &-btn {
        margin: auto 0 auto auto;
      }
    }

    &-divider {
      border-bottom: 1px #dad7d7 solid;
    }
  }
}
</style>
