<template>
  <el-dialog
    :title="!dataForm.templateId ? this.$i18n.t('crud.addTitle') : this.$i18n.t('temp.modify')"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
      <el-form-item label="小程序模板" prop="templateUrl">
        <img-upload v-model="dataForm.templateUrl" :limit="20"></img-upload>
      </el-form-item>
      <el-form-item label="生成用模板" prop="templateUseUrl" v-if="dataForm.templateId">
        <img-upload v-model="dataForm.templateUseUrl" :limit="20"></img-upload>
      </el-form-item>
      <el-form-item label="着色值" prop="startX">
        <el-input size="small" v-model="dataForm.colorHex" placeholder="例如：#000000"></el-input>
      </el-form-item>
      <el-form-item label="起始X轴(PX)" prop="startX">
        <el-input type="number" size="small" v-model="dataForm.startX"></el-input>
      </el-form-item>
      <el-form-item label="起始Y轴(PX)" prop="startY">
        <el-input type="number" size="small" v-model="dataForm.startY"></el-input>
      </el-form-item>
      <el-form-item label="二维码宽度" prop="startX">
        <el-input type="number" size="small" v-model="dataForm.width"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="seq">
        <el-input v-model="dataForm.seq" type="number"/>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button class="default-btn" @click="visible = false">{{$t("crud.filter.cancelBtn")}}</el-button>
      <el-button class="default-btn primary-btn" type="primary" @click="dataFormSubmit()">{{$t("crud.filter.submitBtn")}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import ImgUpload from '@/components/imgs-upload'
  // import uploadPic from './upload-pic.vue'
export default {
  components: {
    ImgUpload
  },
  data () {
    return {
      visible: false,
      dataForm: {
        templateId: null,
        colorHex: null,
        seq: 1,
        templateUrl: null,
        templateUseUrl: null,
        startX: null,
        startY: null,
        shopId: this.$store.state.user.shopId,
      },
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      dataRule: {
      }
    }
  },
  created () {

  },
  methods: {
    init (templateId) {
      this.dataForm.templateId = templateId || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.templateId) {
          this.$http({
            url: this.$http.adornUrl('/prod/qrCodeTemplate/info/' + this.dataForm.templateId),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            this.dataForm = data;
          })
        }
      })
    },
    //验证图片尺寸
    checkImageSize(imageStr, index) {
      return new Promise((resolve, reject) => {
        let image = new Image();
        image.onload = function() {
          let imageFormat = imageStr.split('.').pop();
          if(imageFormat !== 'png'){
            reject(index);
          }else{
            resolve();
          }
        };
        image.src = this.resourcesUrl + imageStr;
      });
    },
    // 表单提交
    async dataFormSubmit () {
      try{
        let imgUrlArr = this.dataForm.templateUrl.split(",");
        if(this.dataForm.templateUseUrl){
          let imgUrlArr2 = this.dataForm.templateUseUrl.split(",");
          await Promise.all(imgUrlArr2.map(this.checkImageSize));
        }
        await Promise.all(imgUrlArr.map(this.checkImageSize));
        this.$http({
          url: this.$http.adornUrl('/prod/qrCodeTemplate'),
          method: this.dataForm.templateId ? 'put' : 'post',
          data: this.$http.adornData(this.dataForm)
        }).then(({data}) => {
          this.$message({
            message: this.$i18n.t('publics.operation'),
            type: 'success',
            duration: 100,
            onClose: () => {
              this.visible = false;
              this.$emit('refreshDataList')
            }
          })
        })
      }catch (error) {
        this.$message.error(error);
      }
    },
  }
}
</script>
