<template>
  <div>
    <el-button size="small" style="width:120px" type="primary" @click="queryFileLink">设 置</el-button>
    <el-dialog title="设置" :visible.sync="dialogEditVisible">
      <el-row :gutter="16">
        <el-col :span="12">
          <p>企业水印图片：</p>
          <uploadFile v-if="!image.url" style="margin-top:10px" :folderid="folderid" accept=".JPG,.PNG" btntype="image" :bindData="{ownertable:'sys_site',ownerid:siteinfo.siteuid,usetype:'watermark'}" @onSuccess="queryFileLink"></uploadFile>
          <div v-else>
            <!-- <img  style="width:100%" :src="image.url" alt=""> -->
            <viewImage :image="image" :deletebtn="true" @onSuccess="queryFileLink"></viewImage>
          </div>
          <small style="display:block;margin-top:20px" class="info">注：建议上传图片大小1024x1024，大小不超过2M，格式为JPG/PNG</small>
        </el-col>
      </el-row>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogEditVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" @click="dialogEditVisible = false" class="normal-btn-width btn-warning">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'

import uploadFile from '../../../../components/upload/hw_obs_upload.vue'
import viewImage from '../../../../components/previewImage/index.vue'

export default {
  props:['basicInfo'],
  components:{
    uploadFile,
    viewImage
  },
  computed:{
    ...mapGetters({
      siteinfo:'siteinfo'
    })
  },
  data () {
    return {
      dialogEditVisible:false,
      image:{url:''},
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid
    }
  },
  methods:{
    // 获取附件信息
    async queryFileLink () {
      this.dialogEditVisible = true
      const res = await this.$api.requested({
        "classname": "system.attachment.Attachment",
        "method": "queryFileLink",
        "content": {
          "ownertable": 'sys_site',
          "ownerid": this.siteinfo.siteuid,
          "usetype":'watermark'//传空返回有所
        }
      })
      res.data[0]?this.image = res.data[0]:this.image = {url:''}
    },
  }
}

</script>
<style scoped>
.dialog-footer{
  margin-top: 50px;
  text-align: center;
}
</style>