<template>
  <div class="contradiction-div">
    <Table stripe :columns="columns" :data="dataList">
      <template slot-scope="{ row, index }" slot="action">
        <div class="flex-div">
          <Button
            @click="acceptance(row)"
            type="primary"
            class="mr5"
            >查看内容</Button
          >
        </div>
      </template>
    </Table>
    <!-- <Page
      class="page_style"
      :total="params.totalRecord"
      :current="params.pageNo"
      :page-size="params.pageSize"
      @on-change="changePageNo"
      show-total
      show-sizer
      @on-page-size-change="size"
    /> -->
    <Modal v-model="modal1" title="通知内容">
      <div v-html="detail"></div>
      <!-- <Input
        v-if="logResult_show"
        v-model="dataParam.logResult"
        style="margin-top: 10px"
        type="textarea"
        placeholder="请输入退回原因"
      /> -->
      <Row>
        <Col span="4" v-if="imgArr.length !== 0"   :key="index"   v-for="(item, index) in imgArr">
          <span class="hover-effect" @click="checkFile(item,index)">
           附件{{index+1}}-{{item.originalFilename}}
          </span>
        </Col>
      </Row>

      <div slot="footer">
        <Button type="default" @click="cancel">取消</Button>
      </div>
    </Modal>
    <CImage ref="cImageRef" />
  </div>
</template>
<script>
import {
  selectListPage, selectNoticeIdByAttachList
} from '@/api/contradiction.js'
import axios from 'axios'
import CImage from '_c/c-image/index.vue'
// import { datetime2str, date2str } from '@/api/eventlist.js'
export default {
  name: 'register',
  components: { CImage },
  data () {
    return {
      modal1: false,
      detail: '',
      imgArr: [],
      columns: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        {
          title: '标题',
          key: 'title',
          align: 'center',
          width: '260px'
        },
        { title: '信息类型', key: 'label', align: 'center', minWidth: 150 },
        {
          title: '发布者',
          key: 'department',
          align: 'center'
          // width: '260px'
        },
        {
          title: '发布时间',
          key: 'create_time',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          align: 'center',
          width: '350'
        }
      ],
      dataList: [],
      params: {
        'publish_status': 1,
        'company_grade': this.$store.state.user.severUserInfo.company_grade,
        'company_id': this.$store.state.user.severUserInfo.company_id,
        'parent_ids': this.$store.state.user.severUserInfo.parent_ids,
        id: this.$store.state.user.severUserInfo.id,
        flag: 1
      },
      suffixList: ['jpg', 'jpeg', 'png']
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getImg (row) {
      selectNoticeIdByAttachList({ id: row.id }).then((res) => {
        if (res.data.errcode === 0) {
          let imgList = res.data.data
          imgList.forEach((element) => {
            // 把后台返回的uuid传给接口，同时传递完整的附件信息
            this.getImgUrl(element.uuid, element.suffix, element)
          })
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    getImgUrl (uuid, suffix, fileInfo) {
      let that = this
      axios({
        method: 'get',
        responseType: 'arraybuffer',
        url:
          '/api/ac/jilinsscgsdp/uploadService/getObsObject?uuid=' +
          uuid +
          '&&suffix=' +
          suffix
      }).then(function (res) {
        // 构建完整的附件对象，包含所有必要信息
        let fileObj = {
          uuid: fileInfo.uuid,
          suffix: suffix,
          originalFilename: fileInfo.original_name
        }
        if (that.suffixList.includes(suffix)) {
          const base64String = btoa(
            new Uint8Array(res.data).reduce(
              (data, byte) => data + String.fromCharCode(byte),
              ''
            )
          )
          fileObj.url = 'data:image/png;base64,' + base64String
        } else {
          fileObj.url = res.data
        }
        that.imgArr.push(fileObj)
        // 调用下载方法，把后端传过来的流传给fileDownload方法
        // this.fileDownload(res.data, fileName)
      })
    },
    checkFile (item, index) {
      if (this.suffixList.includes(item.suffix)) {
        this.$refs.cImageRef.init({ src: item.url })
      } else if (item.suffix === 'pdf') {
        // 关键步骤：ArrayBuffer 转 Blob（指定 MIME 类型为 PDF）
        const pdfBlob = new Blob([item.url], { type: 'application/pdf' })
        // 生成 Blob URL（无长度限制，浏览器原生支持）
        const blobUrl = URL.createObjectURL(pdfBlob)
        // 打开预览（window.open 直接用 Blob URL，不会被截断）
        window.open(blobUrl, '_blank') // _blank 新建标签页

        // 可选：页面卸载时释放 Blob URL（避免内存泄漏）
        window.addEventListener('unload', () => {
          URL.revokeObjectURL(blobUrl)
        })
      } else {
        window.open(item.url, '_blank')
      }
      console.log(item, index)
    },
    acceptance (row) {
      this.imgArr = []
      this.getImg(row)
      this.modal1 = true

      this.detail = row.context
    },
    getList (item) {
      // if (item) {
      //   this.params = Object.assign(this.params, item)
      //   if (this.params.occurrenceTimeStart) {
      //     this.params.occurrenceTimeStart = datetime2str(
      //       this.params.occurrenceTimeStart
      //     )
      //   }
      //   if (this.params.occurrenceTimeEnd) {
      //     this.params.occurrenceTimeEnd = datetime2str(
      //       this.params.occurrenceTimeEnd
      //     )
      //   }
      //   if (this.params.resolveTimeStart) {
      //     this.params.resolveTimeStart = datetime2str(
      //       this.params.resolveTimeStart
      //     )
      //   }
      //   if (this.params.resolveTimeEnd) {
      //     this.params.resolveTimeEnd = datetime2str(this.params.resolveTimeEnd)
      //   }
      // }
      selectListPage(this.params).then((res) => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
        }
      })
    },
    cancel () {
      this.modal1 = false
      this.imgArr = []
    }
  },
  computed: {
    serverUserInfo () {
      return this.$store.state.user.severUserInfo
    }
  }
}
</script>
<style scoped lang="less">
.contradiction-div {
  padding: 10px;
  .search-div {
    float: left;
    width: 100%;
    padding: 15px 30px 15px 15px;
    // min-height: 200px;
    border: 1px solid skyblue;
    border-radius: 5px;
    background-color: #f6fdfd;
    margin-bottom: 15px;
  }
}
.mb10 {
  margin-bottom: 10px;
}
.mt8 {
  margin-top: 8px;
}
.mr15 {
  margin-right: 15px;
}
.mr5 {
  margin-right: 5px;
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
.flex-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.circle-div1 {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: red;
}
.circle-div2 {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: orange;
}
.circle-div3 {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: green;
}
.show-more {
  margin-top: 5px;
  cursor: pointer;
}
.level-option-img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-bottom: 3px;
}
.hover-effect {
  cursor: pointer; /* 小手效果 */
  transition: all 0.3s ease; /* 添加过渡效果使变化更平滑 */
}

.hover-effect:hover {
  color: #1890ff; /* 文字变蓝色 */
  background-color: #e6f7ff; /* 背景变浅蓝色 */
  border-color: #1890ff; /* 边框变蓝色 */
}
</style>
