<template>
  <div class="scene-layer">
    <iframe :src="url" ></iframe>
    <div class="deteil-layer" :class="{hide: !showInfo}">
      <div class="ctrl" @click="showInfo = !showInfo">
        <img src="@/assets/image/decoration_collect@2x.png" alt="">
      </div>
      
      <div class="deteil">


        <h2>火调详情</h2>

        <div class="block">
          <h3>基本信息</h3>

          <div class="base-info">
            <div>
              <span>项目编号:</span>
              <p>{{detail.projectSn}}</p>
            </div>
            <div>
              <span>起火地址:</span>
              <p>{{detail.projectAddress}}</p>
            </div>
            <div>
              <span>起火场所:</span>
              <p>{{detail.projectSite}}</p>
            </div>
            <div>
              <span>承办单位:</span>
              <p>{{detail.organizerDeptName}}</p>
            </div>
            <div>
              <span>起火对象:</span>
              <p>{{detail.projectName}}</p>
            </div>
            <div>
              <span>承办人员:</span>
              <p>{{detail.organizerUsers}}</p>
            </div>
            <div>
              <span>事故日期:</span>
              <p>{{detail.accidentDate}}</p>
            </div>
            <div>
              <span>火灾原因:</span>
              <p>{{detail.fireReason}}</p>
            </div>
            <div>
              <span>项目状态:</span>
              <p>{{detail.status === 0 ? '未认定' : '已认定'}}</p>
            </div>
            <div>
              <span>是否教学项目:</span>
              <p>{{detail.isTeached ? '是' : '否'}}</p>
            </div>
            <div>
              <span>创建人:</span>
              <p>{{detail.creatorName}}</p>
            </div>
            <div>
              <span>编辑人:</span>
              <p>{{detail.editorName}}</p>
            </div>
            <div>
              <span>创建时间:</span>
              <p>{{detail.createTime}}</p>
            </div>
            <div>
              <span>最新编辑时间:</span>
              <p>{{detail.editTime}}</p>
            </div>
          </div>
        </div>

        <div class="block">
          <h3>火灾档案</h3>

          <div class="attach">
            <div
              v-for="item in tableData"
              :key="item._title"
              class="type-item">
              <h4>{{ item.title }}</h4>
              <div class="addpend">
                <span v-for="item in item.children" :key="item.id" @click="goto(item)" >
                  {{ item.fileName }}
                  <img src="@/assets/image/goto.png" alt="">
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <com-dialog title="访问密码" enterText="确 定" v-model:show="confirm.show" @submit="loadData()" width="480" :showClose="false">
    <el-input v-model="confirm.psw" placeholder="请输入访问密码" @keydown.enter="loadData"></el-input>
  </com-dialog>

  <div v-if="showImg" class="img-layer">
    <i class="el-icon-close" @click="showImg = ''"></i>
    <img :src="showImg" alt="">
  </div>
</template>

<script>
import { fireDetailByPsw, getAttachListByPsw } from '@/request/config'
import axios from 'axios';
import comDialog from "@/components/dialog";
import { types } from '@/constant'

export default {
  data() {
    return { 
      detail: {},
      showImg: '',
      confirm: {show: true, psw: ''},
      list: [],
      showInfo: false,
      loadSuccess: false,
    }
  },
  watch: {
    'confirm.show'() {
      console.log(this.confirm.show, !this.showInfo)
      if (this.confirm.show || !this.showInfo) {
        this.$router.back()
      }
    },
  },
  computed: {
    url() {
      if (!this.detail.sceneNum) {
        return 'javascript:void(0)'
      } else {
        return process.env.VUE_APP_DOMAIN + '/spc.html?m=' + this.detail.sceneNum
      }
    },
    tableData() {
      let dataList = this.list || [];
      let cache = [];
      let data = types.reduce((t, c) => {
        let children = dataList.filter(
          (item) => c.name === item.attachmentType
        );
        t.push({ title: c.name, children });
        cache.push(...children);
        return t;
      }, []);

      data[data.length - 1].children.push(
        ...dataList.filter((item) => !cache.includes(item))
      );
      return data;
    },
  },
  methods: {
    async loadData() {
      // if (!this.confirm.psw || this.confirm.psw.length === 0) return this.$message.error('请输入访问密码', '提示')
      let {data: detail} = await axios.get(fireDetailByPsw, {params: {projectId: this.$route.params.projectId, randCode: this.confirm.psw,type:1}})
      this.detail = detail

      let {data: list} = await axios.get(getAttachListByPsw, {params: {projectId: this.$route.params.projectId, randCode: this.confirm.psw,type:1}})
      this.list = list

      this.loadSuccess = true
      this.confirm.show = false
      this.showInfo = true  //不默认开启
    },
    goto(item) {
      if (item.type !== 1) {
        window.open(item.fileOssUrl)
      } else {
        this.showImg = item.fileOssUrl
      }
    }
  },
  mounted() {
    // this.loadData()
  },
  components: {
    "com-dialog": comDialog,
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>