<template>
  <div>
    <MOSTY.FromPage :title="pageTitle" @closeDialog="black">
      <template #content>
        <MOSTY.Assort :title="'上交图片'" />
        <ul>
          <li v-for="item in sjpicList" :key="item">
            <el-image style="width: 200px; height: 150px" :src="item" :preview-src-list="sjpicList" :fit="contain">
              <template #error>
                <div class="image-slot">
                  <el-icon><icon-picture /></el-icon>
                </div>
              </template>
            </el-image>
          </li>
        </ul>
        <MOSTY.Assort :title="'封存图片'" />
        <ul>
          <li v-for="it in fcpicList" :key="it">
            <el-image style="width: 200px; height: 150px" :src="it" :preview-src-list="fcpicList" :fit="contain">
              <template #error>
                <div class="image-slot">
                  <el-icon><icon-picture /></el-icon>
                </div>
              </template>
            </el-image>
          </li>
        </ul>
      </template>
      <template #footer>
        <el-button @click="black()"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>
      </template>
    </MOSTY.FromPage>
    <!-- <div class="Box">
 
    </div> -->

  </div>
</template>

<script setup>
import {
  ref,
  onMounted
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi } from "@/api/tobAcco_api.js";
import { getFileUrl } from "@/utils/getFile.js";
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  }
});
const sjpicList = ref([])
const fcpicList = ref([])
const emit = defineEmits("changePage");
let pageTitle = ref("车辆三交一封详情");
onMounted(() => {
  if (props.editObj) {
    pageTitle.value = props.editObj.title;
    if (props.editObj.id) {
      getxqData(props.editObj.id)
    }
  }
});
//获取详情
function getxqData(id) {
  getApi({ id }, '/mosty-jcgl/sanJiaoYIFengl/queryThreesealRecordById').then(async (res) => {
    if (res.handinpic) {
      let arr = res.handinpic.split(",");
      sjpicList.value = [];
      for (let i = 0; i < arr.length; i++) {
        sjpicList.value.push(await getFileUrl(arr[i]));
      }
      console.log(sjpicList.value, ' sjpicList.value')
    }
    if (res.sequestrationcarpic) {
      let arr = res.sequestrationcarpic.split(",");
      fcpicList.value = [];
      for (let i = 0; i < arr.length; i++) {
        fcpicList.value.push(await getFileUrl(arr[i]));
      }
    }


  })
}

const black = () => {
  emit("changePage", "Main");
};


</script>

<style lang="scss" scoped>
::v-deep .el-cascader,
::v-deep .el-select {
  width: 100%;
}

ul {
  padding: 10px 20px;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;

  >li {
    width: 200px;
    height: 150px;
    margin: 10px;
  }
}
</style>