<template>
  <div class="edit-add-detail detail">
    <div class="form-content" v-if="!previewFile">
      <el-form ref="formInfo" :model="detailForm" class="detail-form" label-position="right" label-suffix="：">
        <div class="rows">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">外包公司信息</div>
          </div>
        </div>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="6">
            <el-form-item label="公司全称">
              <span :title="detailForm.name" class="text">
                {{ detailForm.name || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="6">
            <el-form-item label="公司简称">
              <span :title="detailForm.shortName" class="text">
                {{ detailForm.shortName || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="6">
            <el-form-item label="公司法人">
              <span :title="detailForm.man" class="text">
                {{ detailForm.man || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="6">
            <el-form-item label="所属组织">
              <span :title="detailForm.orgName" class="text">
                {{ detailForm.orgName || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="6">
            <el-form-item label="公司营业执照编码">
              <span :title="detailForm.code" class="text">
                {{ detailForm.code || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="6">
            <el-form-item label="公司联系电话">
              <span :title="detailForm.tel" class="text">
                {{ detailForm.tel || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="6">
            <el-form-item label="公司地址">
              <span :title="detailForm.address" class="text">
                {{ detailForm.address || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24"  style="margin-left: 80px">
          <el-col :span="24">
            <el-form-item label="附件">
                <div
                  class="file-list"
                >
                  <div class="file-list-item" 
                      v-for="file in detailForm.filesArr"
                      :key="file.id">
                    <div class="name" :title="file.fileName">{{ file.fileName }}</div>
                    <div>
                      <el-button
                        type="text"
                        icon="el-icon-view"
                        @click="handlePreview(file)"
                        >预览</el-button
                      >
                      <el-button
                        type="text"
                        icon="el-icon-download"
                        @click="handleDownLoad(file)"
                        >下载</el-button
                      >
                    </div>
                  </div>
                </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <previewPDF v-else @back="back" :fileData="currentFile"></previewPDF>
    <el-backtop :visibility-height="10" target=".detail-form">
      <div class="top-box">UP</div>
    </el-backtop>
  </div>
</template>

<script>
import {tableDetail} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/outsourcingCompanyMgmt'
import PubSub from 'pubsub-js'
import previewPDF from '@/components/previewPDF'
export default {
  name: 'DetailPage',
  props: {
    componentName: {
      default: 'TablePage',
      type: String
    }
  },
  components: {previewPDF},
  data() {
    return {
      detailForm: {},
      pubSub: null,
      currentFile: null,
      previewFile: false,
    }
  },
  computed: {
    actionUrl: (_) => window.context.portal,
    downloadUrl: (_) => window.context.portal + '/file/v1/downloadFile?fileId=',
    previewUrl: (_) =>
      window.context.portal + '/file/onlinePreviewController/v1/getFileById_',
  },
  watch: {
    componentName: {
      handler(newVal) {
        if (newVal === this.$options.name) {
          this.openPage()
        } else {
          this.closePage()
        }
      }
    }
  },
  mounted() {
    this.pubSub = PubSub.subscribe('DetailPage', (_, data) => {
      if (data.id) {
        this.getDetail(data.id)
      }
    })
  },
  methods: {
    // 打开页面执行
    openPage() {
    },

    // 关闭页面执行
    closePage() {
      // 重置组件数据
      Object.assign(this.$data, this.$options.data.call(this), {pubSub: this.pubSub})
      this.$nextTick(_ => {
        this.$refs.formInfo.$el.scrollTop = 0
      })
    },
    back() {
      this.previewFile = false
    },

    // 获取详情
    async getDetail(id) {
      const {files = [],...detailForm} = await tableDetail(id)
      this.detailForm = {
        ...detailForm,
        files,
        filesArr: files.map((i) => ({
            ...i,
            fileId: i.id,
            name: i.fileName,
        })),
      }
    },
    // 已上传文件点击预览
    async handlePreview(file) {
      this.previewFile = true
      this.currentFile = file
    },

    // 已上传文件点击下载
    async handleDownLoad(file) {
      const fileId = file.fileId || file.response.fileId || '' // 文件ID
      const fileName = file.name || file.fileName || '' // 文件名
      if (!(fileId && fileName))
        return this.$message.warning('文件错误，请删除后重新上传')
      window.open(this.downloadUrl + fileId, '_blank')
    },
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

<style lang="scss" scoped>
.file-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  
}
.file-list-item {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  line-height: 160%;
  background-color: rgb(32, 52, 90);
  padding: 0 10px;
  box-sizing: border-box;
  .name{
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>

