<template>
  <div class="contradiction-div">
<!--    <div class="title-style">APP通知信息</div>-->
    <Form :model="formInline" ref="form" label-position="left" :label-width="80">
      <Row>
        <Col span="12" offset="6">
          <FormItem label="标题：" prop="title" :rules="[{required: true, message: '必填', trigger: 'blur' }]">
            <Input v-model="formInline.title" :disabled="isReadOnly" type="text" placeholder="请输入标题"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12" offset="6">
          <FormItem label="内容：" prop="context" :rules="[{required: true, message: '必填', trigger: 'blur' }]">
            <div class="ql-editor" v-if="isReadOnly" v-html="formInline.context"></div>
            <wl-vue2-editor v-else v-model="formInline.context" :noImage="true"></wl-vue2-editor>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12" offset="6">
          <FormItem label="部门：" prop="department" :rules="[{required: true, message: '必填', trigger: 'change' }]">
            <Input v-model="formInline.department" :disabled="isReadOnly" type="text" placeholder="请输入部门"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="4" offset="6" >
          <FormItem label="上传附件" required>
            <Upload
              action="#"
              :before-upload="beforeUpload"
              :show-upload-list="false"
            >
              <Button v-if="!isReadOnly" icon="ios-cloud-upload-outline">上传附件</Button>
            </Upload>
          </FormItem>
        </Col>
        <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>
          <span style="margin-left: 10px;cursor: pointer;" @click="delFile(item,index)" v-if="!isReadOnly">
            <Icon type="md-close" />
          </span>
        </Col>
      </Row>

      <Row>
        <Col span="12" offset="6">
          <FormItem label="排序：" prop="sort" :rules="[{required: true, message: '必填', trigger: 'change'}]">
            <Input v-model="formInline.sort" :disabled="isReadOnly" type="number" placeholder="请输入排序"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12" offset="6">
          <div  v-if="!isReadOnly">
            <Button type="primary" class="mr10" @click="save('form')">保存</Button>
          </div>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
import {
  addNotice,
  getNotice,
  selectNoticeIdByAttachList,
  updateNotice,
  uploadFile
} from '@/api/contradiction.js'
import axios from 'axios'
export default {
  name: 'noticeEdit',
  data () {
    return {
      formInline: {
      },
      isReadOnly: this.$route.query.isReadOnly,
      imgArr: [],
      urlList: []
    }
  },
  computed: {
    serverUserInfo () {
      return this.$store.state.user.severUserInfo
    }
  },
  watch: {},
  mounted () {
    console.log(this.$route.query, 'this.$route.query')
    if (this.$route.query.id) {
      this.getImg()
      this.getInfo()
    }
  },
  methods: {
    getImg () {
      selectNoticeIdByAttachList({ id: this.$route.query.id }).then((res) => {
        if (res.data.errcode === 0) {
          let imgList = res.data.data
          this.urlList = 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)
    },
    delFile (item, index) {
      this.urlList.splice(index, 1)
      console.log(item, index)
    },
    // 上传图片前转base64
    beforeUpload (file) {
      // const allowedTypes = ['image/jpeg', 'image/png']
      // const isImage = allowedTypes.includes(file.type)
      // if (!isImage) {
      //   this.$Message.error('请上传图片格式')
      //   return
      // }
      // console.log(isImage, 'isImage')
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (e) => {
        this.imgArr.push({ url: e.target.result })
      }
      let formdata = new FormData()
      formdata.append('file', file)
      formdata.append('fileName', file.name)
      formdata.append('json', JSON.stringify({ business_type: 'jlEvent' }))
      console.log(formdata, 'dada adasdasdsad')
      uploadFile(formdata).then((res) => {
        let len = this.imgArr.length
        this.imgArr[len - 1]['uuid'] = res.data.data.uuid
        this.urlList.push(res.data.data)
      })
      console.log(this.imgArr, 'this.imgArr')
    },
    save () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let url = this.$route.query.id ? updateNotice : addNotice
          this.formInline.urlList = this.urlList
          url(this.formInline).then(res => {
            if (res.data.errcode === 0) {
              this.$Message.success('成功')
              this.$router.go(-1)
              return
            }
            this.$Message.error(res.data.errmsg)
          })
        }
      })
    },
    getInfo () {
      getNotice({ id: this.$route.query.id }).then(res => {
        if (res.data.errcode === 0) {
          this.formInline = res.data.data
          this.formInline.sort = res.data.data.sort + ''
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    }
  }
}
</script>

<style scoped lang="less">
.contradiction-div {
  // padding: 10px;
  background: #fff;
  padding:10px;
   font-size: 14px;
  .title-style {
    padding: 8px 12px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
    margin: 15px 0;
    font-size: 16px;
    width: 100%;
  }
  .more-style {
    background-color: #ecf8ff;
    width: 70px;
    padding: 8px 12px;
    border-radius: 4px;
  }
}
.ql-editor{
  width: 100%;
  max-height: 500px;
  min-height: 50px;
  overflow-y: auto;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  background-color: #f3f3f3;
  padding: 4px 7px;
}
.hover-effect {
  cursor: pointer; /* 小手效果 */
  transition: all 0.3s ease; /* 添加过渡效果使变化更平滑 */
}

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