<template>
  <div class="referenceInfo">
    <Form ref="optClassifyFormRef" :model="optClassifyForm" :label-width="100">
      <Form-item label="上传图片" prop="filePath">
        <Upload
          ref="upload"
          type="drag"
          :action="uploadUrl"
          :headers="{'X-AIYANGNIU-SIGNATURE':token}"
          :show-upload-list="false"
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
          :format="['jpg','jpeg','png']"
          :max-size="2048"
          :on-format-error="handleFormatError"
          class="upload_outer_img">
          <div v-if="optClassifyForm.filePath != ''"> <img :src="optClassifyForm.filePath" width="100%" alt=""></div>
          <div v-else class="upload_border">
            <p><Icon type="md-cloud-upload" size="35" color="#2db7f5" /></p>
            <p>点击上传图片</p>
          </div>
        </Upload>
        <div v-show="optClassifyForm.filePath" style="color:#2db7f5; cursor: pointer;" @click="gotoCheckImg(optClassifyForm.filePath)">
          <i class="iconfont icon-htmal5icon09"></i> 查看大图
        </div>
        <div style="color:#aaa;font-size:12px;">图片格式为 jpg、jpeg、png</div>
      </Form-item>
      <Form-item label="">
        <Button type="primary" @click="submitOptClassify">确定提交</Button>
      </Form-item>
    </Form>
  </div>
</template>

<script>
import { defineComponent,ref,reactive,onMounted } from 'vue'
import {item} from '@/request/api'
import { ElMessage } from 'element-plus'
import api from '@/request/apiConfig' //真实接口配置
import {compressFileM} from '@/utils/system/uploadCompress.js'
export default defineComponent({
  components:{
    
  },
  setup() {
    let optClassifyForm = reactive({filePath:''})
    const token = localStorage.aynUserToken
    const uploadUrl = api.apiManager + '/manager/images/upload'
    function beforeUpload(file){
      // 进行2.5倍系数压缩
      return (compressFileM(file,2.5))
    }

    function handleFormatError (file) {
      ElNotification.warning({
        title: '温馨提示',
        message: '文件格式不正确',
        showClose: false,
      })
    }

    function handleSuccess(res, file, fileList){
      if(res.code == '101'){
        optClassifyForm.filePath = res.data
      }
    }

    // 打开新页面查看照片
    function gotoCheckImg(pic){
      window.open(pic,'blank')
    }

    //获取列表内容
    async function getData(){
      await item.getCattleFatness().then(res =>{
        if (res.code == 101) {
          optClassifyForm.filePath = res.data?res.data:''
        }
      })
    }
    // 提交操作分类
    function submitOptClassify(){
      item.insertUrl({imgUrl:optClassifyForm.filePath}).then(res=>{
        if(res.code === 101){
          ElMessage({
            message: res.message || '操作成功!',
            type: 'success',
          })
          getData()
        }else{
          ElMessage({
            message: res.message || '操作失败!',
            type: 'warning',
          })
        }
      })
    }

    onMounted(()=>{
      getData() 
    })

    return {
      optClassifyForm,uploadUrl,token,
      getData,handleFormatError,handleSuccess,beforeUpload,gotoCheckImg,submitOptClassify
    }
  },
  methods:{
    
  }

})
</script>

<style lang="scss" scoped>
.referenceInfo{
  padding: 1em;
  .page_style{
    text-align: right; margin-top: 1em;
    background-color: var(--system-container-background);
  }
  .upload_outer_img{
    max-width: 10%;
    img{
      width: 100%; padding: 0;
    }
    .upload_border{
      width: 100%; padding: 3em;
    }
  }
}
</style>