<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}}
          </span>
        </Col>
      </Row>

      <div slot="footer">
        <Button type="default" @click="modal1 = false">取消</Button>
        <Button type="primary" @click="modal1 = false">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  selectEventIdByAttachList,
  selectListPage
} from '@/api/contradiction.js'
import axios from 'axios'
// import { datetime2str, date2str } from '@/api/eventlist.js'
export default {
  name: 'register',
  data () {
    return {
      modal1: false,
      detail: '',
      imgArr: [],
      columns: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        {
          title: '标题',
          key: 'title',
          align: 'center',
          width: '260px'
        },
        {
          title: '发布者',
          key: 'department',
          align: 'center'
          // width: '260px'
        },
        {
          title: '发布时间',
          key: 'create_time',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          align: 'center',
          width: '350'
        }
      ],
      dataList: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        eventType: '2'
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getImg (row) {
      selectEventIdByAttachList({ id: row.id }).then((res) => {
        if (res.data.errcode === 0) {
          let imgList = res.data.data
          imgList.forEach((element) => {
            // 把后台返回的uuid传给接口
            let url = this.getImgUrl(element.uuid, element.suffix)
            console.log(url, 'memeiemiei')
          })
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    getImgUrl (uuid, suffix) {
      let that = this
      axios({
        method: 'get',
        responseType: 'arraybuffer',
        url:
          '/api/ac/jilinsscgsdp/uploadService/getObsObject?uuid=' +
          uuid +
          '&&suffix=' +
          suffix
      }).then(function (res) {
        const base64String = btoa(
          new Uint8Array(res.data).reduce(
            (data, byte) => data + String.fromCharCode(byte),
            ''
          )
        )
        let url = 'data:image/png;base64,' + base64String
        that.imgArr.push({ url: url })
        // 调用下载方法，把后端传过来的流传给fileDownload方法
        // this.fileDownload(res.data, fileName)
      })
    },
    checkFile (item, index) {
      window.open(item.url, '_blank')
      console.log(item, index)
    },
    acceptance (row) {
      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({ 'publish_status': 1 }).then((res) => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
        }
      })
    }
  },
  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;
}
</style>
