<template>
  <el-dialog
    :visible.sync="visible"
    :append-to-body="false"
    :modal="false"
    title="工艺文件预览"
    top="5vh"
    width="90%"
    @close="closeDialog"
    v-if="visible">
    <div>
      <el-radio v-model="mode" label="view">预览模式</el-radio>
      <el-radio v-model="mode" label="edit">编辑模式</el-radio>
    </div>
    <el-form
      :model="dataForm"
      align="center"
      size="small">
      <div v-for="(dataForm, index) in canvasParamList">
        <el-divider content-position="left">卡项{{index + 1}}</el-divider>
        <el-row>
          <el-col :span="5">
            <el-form-item>
              <h2>正面四色层</h2>
              <div v-if="mode === 'view'">
                <el-image
                  style="width: 295px; height: 452px"
                  :src="dataForm.frontCanvasParamObj.printed.indexOf('https://') !== -1? dataForm.frontCanvasParamObj.printed : resourcesUrl + dataForm.frontCanvasParamObj.printed"
                  v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.printed"/>
              </div>
              <el-upload v-else
                         class="avatar-uploader"
                         accept="image/jpg"
                         :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,dataForm)"
                         :action="$http.adornUrl('/admin/file/simpleUpload')"
                         :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
                         :on-success="(res,file)=>{onUploadSuccess(dataForm.frontCanvasParamObj, 'printed',res,file)}"
                         :show-file-list="false">
                <el-image v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.printed" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.frontCanvasParamObj.printed" class="avatar"/>
              </el-upload>
            </el-form-item>
            <el-button v-if="mode==='edit' && dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.printed" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(dataForm)">保存</el-button>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <h2>正面白墨层</h2>
              <div v-if="mode === 'view'">
                <el-image
                  style="width: 295px; height: 452px"
                  :src="dataForm.frontCanvasParamObj.whiteBoard.indexOf('https://') !== -1? dataForm.frontCanvasParamObj.whiteBoard : resourcesUrl + dataForm.frontCanvasParamObj.whiteBoard"
                  v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.whiteBoard"/>
              </div>
              <el-upload v-else
                         class="avatar-uploader"
                         accept="image/jpg"
                         :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,dataForm)"
                         :action="$http.adornUrl('/admin/file/simpleUpload')"
                         :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
                         :on-success="(res,file)=>{onUploadSuccess(dataForm.frontCanvasParamObj, 'whiteBoard',res,file)}"
                         :show-file-list="false">
                <el-image v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.whiteBoard" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.frontCanvasParamObj.whiteBoard" class="avatar"/>
              </el-upload>
            </el-form-item>
            <el-button v-if="mode==='edit' && dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.whiteBoard" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(dataForm)">保存</el-button>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <h2>正面烫色层</h2>
              <div v-if="mode === 'view'">
                <el-image
                  style="width: 295px; height: 452px"
                  :src="dataForm.frontCanvasParamObj.foilstamping.indexOf('https://') !== -1? dataForm.frontCanvasParamObj.foilstamping : resourcesUrl + dataForm.frontCanvasParamObj.foilstamping"
                  v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.foilstamping"/>
              </div>
              <el-upload v-else
                         class="avatar-uploader"
                         accept="image/jpg"
                         :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,dataForm)"
                         :action="$http.adornUrl('/admin/file/simpleUpload')"
                         :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
                         :on-success="(res,file)=>{onUploadSuccess(dataForm.frontCanvasParamObj, 'foilstamping',res,file)}"
                         :show-file-list="false">
                <el-image v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.foilstamping" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.frontCanvasParamObj.foilstamping" class="avatar"/>
              </el-upload>
            </el-form-item>
            <el-button v-if="mode==='edit' && dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.foilstamping" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(dataForm)">保存</el-button>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <h2>正面逆向层</h2>
              <div v-if="mode === 'view'">
                <el-image
                  style="width: 295px; height: 452px"
                  :src="dataForm.frontCanvasParamObj.unWhiteBoard.indexOf('https://') !== -1? dataForm.frontCanvasParamObj.unWhiteBoard : resourcesUrl + dataForm.frontCanvasParamObj.unWhiteBoard"
                  v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.unWhiteBoard"/>
              </div>
              <el-upload v-else
                         class="avatar-uploader"
                         accept="image/jpg"
                         :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,dataForm)"
                         :action="$http.adornUrl('/admin/file/simpleUpload')"
                         :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
                         :on-success="(res,file)=>{onUploadSuccess(dataForm.frontCanvasParamObj, 'unWhiteBoard',res,file)}"
                         :show-file-list="false">
                <el-image v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.unWhiteBoard" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.frontCanvasParamObj.unWhiteBoard" class="avatar"/>
              </el-upload>
            </el-form-item>
            <el-button v-if="mode==='edit' && dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.unWhiteBoard" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(dataForm)">保存</el-button>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <h2>正面光油层</h2>
              <div v-if="mode === 'view'">
                <el-image
                  style="width: 295px; height: 452px"
                  :src="dataForm.frontCanvasParamObj.varnish.indexOf('https://') !== -1? dataForm.frontCanvasParamObj.varnish : resourcesUrl + dataForm.frontCanvasParamObj.varnish"
                  v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.varnish"/>
              </div>
              <el-upload v-else
                         class="avatar-uploader"
                         accept="image/jpg"
                         :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,dataForm)"
                         :action="$http.adornUrl('/admin/file/simpleUpload')"
                         :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
                         :on-success="(res,file)=>{onUploadSuccess(dataForm.frontCanvasParamObj, 'varnish',res,file)}"
                         :show-file-list="false">
                <el-image v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.varnish" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.frontCanvasParamObj.varnish" class="avatar"/>
              </el-upload>
            </el-form-item>
            <el-button v-if="mode==='edit' && dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.varnish" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(dataForm)">保存</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item>
              <h2>背面四色层</h2>
              <div v-if="mode === 'view'">
                <el-image
                  style="width: 295px; height: 452px"
                  :src="dataForm.backCanvasParamObj.printed.indexOf('https://') !== -1? dataForm.backCanvasParamObj.printed : resourcesUrl + dataForm.backCanvasParamObj.printed"
                  v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.printed"/>
              </div>
              <el-upload v-else
                         class="avatar-uploader"
                         accept="image/jpg"
                         :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,dataForm)"
                         :action="$http.adornUrl('/admin/file/simpleUpload')"
                         :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
                         :on-success="(res,file)=>{onUploadSuccess(dataForm.backCanvasParamObj, 'printed',res,file)}"
                         :show-file-list="false">
                <el-image v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.printed" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.backCanvasParamObj.printed" class="avatar"/>
                <!--              <i v-if="mode==='edit'  && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.printed" class="el-icon-plus avatar-uploader-icon"></i>-->
              </el-upload>
            </el-form-item>
            <el-button v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.printed" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(dataForm)">保存</el-button>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <h2>背面白墨层</h2>
              <div v-if="mode === 'view'">
                <el-image
                  style="width: 295px; height: 452px"
                  :src="dataForm.backCanvasParamObj.whiteBoard.indexOf('https://') !== -1? dataForm.backCanvasParamObj.whiteBoard : resourcesUrl + dataForm.backCanvasParamObj.whiteBoard"
                  v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.whiteBoard"/>
              </div>
              <el-upload v-else
                         class="avatar-uploader"
                         accept="image/jpg"
                         :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,dataForm)"
                         :action="$http.adornUrl('/admin/file/simpleUpload')"
                         :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
                         :on-success="(res,file)=>{onUploadSuccess(dataForm.backCanvasParamObj, 'whiteBoard',res,file)}"
                         :show-file-list="false">
                <el-image v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.whiteBoard" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.backCanvasParamObj.whiteBoard" class="avatar"/>
                <!--              <i v-if="mode==='edit'  && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.whiteBoard" class="el-icon-plus avatar-uploader-icon"></i>-->
              </el-upload>
            </el-form-item>
            <el-button v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.whiteBoard" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(dataForm)">保存</el-button>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <h2>背面烫色层</h2>
              <div v-if="mode === 'view'">
                <el-image
                  style="width: 295px; height: 452px"
                  :src="dataForm.backCanvasParamObj.foilstamping.indexOf('https://') !== -1? dataForm.backCanvasParamObj.foilstamping : resourcesUrl + dataForm.backCanvasParamObj.foilstamping"
                  v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.foilstamping"/>
              </div>
              <el-upload v-else
                         class="avatar-uploader"
                         accept="image/jpg"
                         :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,dataForm)"
                         :action="$http.adornUrl('/admin/file/simpleUpload')"
                         :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
                         :on-success="(res,file)=>{onUploadSuccess(dataForm.backCanvasParamObj, 'foilstamping',res,file)}"
                         :show-file-list="false">
                <el-image v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.foilstamping" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.backCanvasParamObj.foilstamping" class="avatar"/>
                <!--              <i v-if="mode==='edit'  && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.foilstamping" class="el-icon-plus avatar-uploader-icon"></i>-->
              </el-upload>
            </el-form-item>
            <el-button v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.foilstamping" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(dataForm)">保存</el-button>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <h2>背面逆向层</h2>
              <div v-if="mode === 'view'">
                <el-image
                  style="width: 295px; height: 452px"
                  :src="dataForm.backCanvasParamObj.unWhiteBoard.indexOf('https://') !== -1? dataForm.backCanvasParamObj.unWhiteBoard : resourcesUrl + dataForm.backCanvasParamObj.unWhiteBoard"
                  v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.unWhiteBoard"/>
              </div>
              <el-upload v-else
                         class="avatar-uploader"
                         accept="image/jpg"
                         :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,dataForm)"
                         :action="$http.adornUrl('/admin/file/simpleUpload')"
                         :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
                         :on-success="(res,file)=>{onUploadSuccess(dataForm.backCanvasParamObj, 'unWhiteBoard',res,file)}"
                         :show-file-list="false">
                <el-image v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.unWhiteBoard" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.backCanvasParamObj.unWhiteBoard" class="avatar"/>
                <!--              <i v-if="mode==='edit'  && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.unWhiteBoard" class="el-icon-plus avatar-uploader-icon"></i>-->
              </el-upload>
            </el-form-item>
            <el-button v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.unWhiteBoard" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(dataForm)">保存</el-button>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <h2>背面光油层</h2>
              <div v-if="mode === 'view'">
                <el-image
                  style="width: 295px; height: 452px"
                  :src="dataForm.backCanvasParamObj.varnish.indexOf('https://') !== -1? dataForm.backCanvasParamObj.varnish : resourcesUrl + dataForm.backCanvasParamObj.varnish"
                  v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.varnish"/>
              </div>
              <el-upload v-else
                         class="avatar-uploader"
                         accept="image/jpg"
                         :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,dataForm)"
                         :action="$http.adornUrl('/admin/file/simpleUpload')"
                         :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
                         :on-success="(res,file)=>{onUploadSuccess(dataForm.backCanvasParamObj, 'varnish',res,file)}"
                         :show-file-list="false">
                <el-image v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.varnish" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.backCanvasParamObj.varnish" class="avatar"/>
                <!--              <i v-if="mode==='edit'  && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.varnish" class="el-icon-plus avatar-uploader-icon"></i>-->
              </el-upload>
            </el-form-item>
            <el-button v-if="mode==='edit'  && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.varnish" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(dataForm)">保存</el-button>
          </el-col>
        </el-row>
      </div>

    </el-form>
  </el-dialog>

</template>

<script>
  export default {
    name: "YuyinPreview",
    data() {
      return {
        lang: localStorage.getItem('lang') || 'zh_CN',
        mode: 'view',
        visible: false,
        // dataForm:{},
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
        canvasParamList: [],
      };
    },
    mounted() {
    },
    methods: {
      initByOrderNumber(orderItem){
        this.getCardItemByOrderNumber(orderItem)
        this.visible = true;
      },
      initByItem(cardItem){
        this.getCardItemById(cardItem)
        this.visible = true;
      },
      closeDialog(){
        this.visible = false
        this.canvasParamList = []
      },
      getCardItemById(cardItem){
        this.$http({
          url: this.$http.adornUrl('/prod/orderCardItem/info/' + cardItem.cardItemId),
          method: 'get',
        }).then(({data}) => {
          this.canvasParamList.push(data)
          // this.dataForm = data[0];
        })
      },
      getCardItemByOrderNumber(cardItem){
        this.$http({
          url: this.$http.adornUrl('/prod/orderCardItem/list'),
          method: 'get',
          params: this.$http.adornParams({orderNumber: cardItem.orderNumber})
        }).then(({data}) => {
          this.canvasParamList = data;
        })
      },
      handleBeforeUpload(file, fileList, item){
        let isSize = true
        //如果当前是编辑的小卡，就需要判断是否符合尺寸
        let width = 709
        let height = 1087
        let prodName = item.prodName;
        isSize = new Promise(function(resolve, reject) {
          if(prodName.indexOf("大3寸") !== -1){
            width = 803
            height = 1098
          }else if(prodName.indexOf("闪卡") !== -1){
            width = 709;
            height = 1087;
          }else if(prodName.indexOf("明信片") !== -1){
            width = 1252;
            height = 1819;
          }else if(prodName.indexOf("方卡") !== -1){
            width = 1252;
            height = 1252;
          }else if(prodName.indexOf("180") !== -1){
            width = 780;
            height = 2197;
          }else if(prodName.indexOf("210") !== -1){
            width = 898;
            height = 2551;
          }
          let _URL = window.URL || window.webkitURL
          let img = new Image()
          img.onload = function() {
            let valid = img.width == width && img.height == height
            valid ? resolve() : reject()
          }
          img.src = _URL.createObjectURL(file)
        }).then(
          () => {
            return file;
          },
          () => {
            this.$message.error("上传的图片宽高必须是" + width + "*" + height)
            return Promise.reject()
          }
        )
        return isSize
      },
      onUploadSuccess (item, field, response, file) {
        this.$set(item, field,response.filePath);
        this.$forceUpdate()
      },
      saveOrUpdateCanvasParam(dataForm){
        this.$confirm('确定要更新吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(dataForm.frontCanvasParamObj){
            dataForm.frontCanvasParam = JSON.stringify(dataForm.frontCanvasParamObj)
          }
          if(dataForm.backCanvasParamObj){
            dataForm.backCanvasParam = JSON.stringify(dataForm.backCanvasParamObj)
          }
          this.$http({
            url: this.$http.adornUrl('/prod/orderCardItem/saveOrUpdateCanvasParam'),
            method: 'post',
            data: this.$http.adornData(dataForm)
          }).then(({ data }) =>{
            if(data){
              // this.$set(this.dataForm, 'cardItemId', data.cardItemId);
              this.$message.success("保存成功");
            }else{
              this.$message.error("保存失败");
            }
          })
        });
      },
    },
  }
</script>

<style scoped>
  .el-divider__text.is-left {
    color: red;
    left: 0;
    font-weight: bold;
    margin: 0 10px;
    padding: 0 5px;
    font-size: 20px;
  }
  .el-divider {
    background-color: red;
  }

</style>
