<template>
  <div style="position: relative;">
    <h2 style="text-align: center">{{ institutionData.f_title }}</h2>
    <p>简述: {{ institutionData.f_sketch }}</p>
    <p>时间: {{ format(institutionData.f_effective_date) }}</p>
    <div v-if="showDocument" class="content">
      <iframe :src="institutionDocUrl" frameborder="0" height="100%" width="100%"></iframe>
    </div>
    <!-- 其他附件 -->
    <div class="other-file">
      <div class="title">其他信息：</div>
      <div v-for="file in otherFiles" :key="file.id">
        <a class="file-item">
          <span class="file-action" @click="handlePreviewDoc(file.url)">
            <a-icon type="link" />{{ file.name }}
          </span>
          <span class="file-action" @click="handlePreviewDoc(file.url)">
            <a-icon type="eye" />预览
          </span>
          <a class="file-action" target="_blank" @click="handlePreDowDoc(file)"><a-icon type="download" />下载</a>
        </a>
      </div>
    </div>
    <!-- 其他附件预览 -->
    <a-modal v-model="previewDocVisible" :dialog-style="{ top: '20px' }" :footer="null" :z-index="1001" width="97%">
      <div class="preview-doc-container">
        <a-spin :spinning="previewDocLoading" size="large" />
        <iframe
          v-show="!previewDocLoading"
          :src="previewDocUrl"
          frameborder="0"
          height="100%"
          width="100%"
          @load="previewDocLoading = false" />
      </div>
    </a-modal>
    <a-button class="submit_btn" type="primary" @click="confirm_institution">确认</a-button>
  </div>
</template>

<script>
import { Base64 } from 'js-base64'
import { post } from '@vue2-client/services/api/restTools'
import { formatDate } from '@vue2-client/utils/util'
import { getConfigByNameAsync } from '@vue2-client/services/api/common'

export default {
  name: 'InstitutionDetail',
  props: {
    institutionId: {
      type: Number,
      default: undefined
    },
    affirmInstitution: {
      type: Number,
      default: undefined
    }
  },
  data () {
    return {
      institutionDocUrl: undefined,
      showDocument: false,
      otherFiles: [],
      institutionData: {},
      previewDocVisible: false,
      previewDocUrl: undefined,
      previewDocLoading: false,
      previewDocService: 'http://aote-office.8866.org:32510/onlinePreview?url=',
      fileServer: 'http://aote-office.8866.org:8406'
    }
  },
  watch: {
    institutionId () {
      this.getDetailData()
    }
  },
  mounted () {
    this.getDetailData()
  },
  methods: {
    async getPreviewDocService () {
      if (this.compatible === 'OA') {
        this.fileServer = 'http://aote-office.8866.org:8406'
        this.previewDocService = 'http://aote-office.8866.org:32510/onlinePreview?url='
        return
      }
      await getConfigByNameAsync('previewDocServiceConfig').then(res => {
        if (!res.fileServer) {
          this.$message.error('文件预览服务配置错误')
        } else {
          this.previewDocService = res.previewDocService
          this.fileServer = res.fileServer
        }
      })
    },
    // 获取详情数据
    getDetailData () {
      if (!this.institutionId) {
        return
      }
      const otherFiles = []
      this.getPreviewDocService().then(() => {
        post('/api/af-system/logic/getInstitutionDetail', {
          id: this.institutionId
        }).then(res => {
          res.files.forEach(item => {
            if (item.use_type === '制度文件') {
              this.institutionDocUrl = this.previewDocService + encodeURIComponent(Base64.encode(this.fileServer + item.url))
              this.showDocument = true
            } else {
              otherFiles.push(item)
            }
          })
          this.institutionData = res.institution
          this.otherFiles = otherFiles
        })
      })
    },
    format (dateStr) {
      return formatDate(dateStr, 'yyyy-MM-dd')
    },
    // 其他附件预览
    handlePreviewDoc (url) {
      this.getPreviewDocService().then(() => {
        const previewDocUrl = this.previewDocService + encodeURIComponent(Base64.encode(this.fileServer + url))
        if (this.previewDocUrl !== previewDocUrl) {
          this.previewDocLoading = true
          this.previewDocUrl = previewDocUrl
        }
        this.previewDocVisible = true
      })
    },
    // 下载文档
    handlePreDowDoc (file) {
      const a = document.createElement('a')
      a.href = file.url
      a.download = file.name
      a.click()
    },
    confirm_institution () {
      let serviceName = 'af-oa'
      if (this.compatible === 'OA') {
        serviceName = 'af-system'
      }
      post(`/api/${serviceName}/logic/affirmInstitution`, {
        data: {
          tobe: [
            {
              id: this.affirmInstitution,
              f_affirm_type: '系统确认'
            }
          ]
        }
      }).then(res => {
        this.$message.success('确认成功')
        this.$emit('get_to_be_confirmed')
      })
    },
  }
}
</script>

<style lang="less" scoped>
.submit_btn{
  position: absolute;
  right:0;
  top: 0;
}
.content {
  height: 80vh;
  img {
    max-width: 100%;
  }
}
.other-file {
  margin: 16px 0;
  .title {
    margin-bottom: 6px;
  }
}
.file-item {
  .file-action {
    padding: 3px 4px;
    color: #1890ff;
    &:hover {
      background: #e6f7ff;
    }
  }
  .anticon {
    margin-right: 3px;
  }
}
.file-list-title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
}
.preview-doc-container {
  height: calc(100vh - 92px);
  padding-top: 20px;
}
</style>
