<!--化学品终端配置-->
<template>
  <div class="public-config-page">
    <el-form class="public-form-box scrollbar-box" :model="form" ref="form" :inline="true" :rules="rules" label-width="160px">
      <div class="form-max-box">
        <el-form-item label="自动返回时间" prop="backTime">
          <div class="form-flex-box">
            <el-input-number v-model="form.backTime" style="width:150px;"
                             :controls="false" :min="5" :max="600">
            </el-input-number>
            <p class="form-flex-right-p">秒</p>
          </div>
        </el-form-item>
      </div>
      <div class="form-max-box">
        <el-form-item label="自动注销时间" prop="signOutTime">
          <div class="form-flex-box">
            <el-input-number v-model="form.signOutTime" style="width:150px;"
                             :controls="false" :min="5" :max="600">
            </el-input-number>
            <p class="form-flex-right-p">秒</p>
          </div>
        </el-form-item>
      </div>
      <div class="form-max-box">
        <el-form-item label="弹窗关闭时间" prop="offTime">
          <div class="form-flex-box">
            <el-input-number v-model="form.offTime" style="width:150px;"
                             :controls="false" :min="5" :max="600">
            </el-input-number>
            <p class="form-flex-right-p">秒</p>
          </div>
        </el-form-item>
      </div>
      <div class="form-max-box">
        <el-form-item label="称重示意图" prop="weighHintPicture">
          <el-upload
            class="certificate-avatar-uploader"
            :action="uploadImgUrl"
            :show-file-list="false"
            accept="image/jpeg,image/jpg,image/gif,image/png"
            :on-success="(res)=>handleAvatarSuccess(res,'weighHintPicture')"
            :headers="headers"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.weighHintPicture" :src="form.weighHintPicture" class="avatar" >
            <i v-if="!form.weighHintPicture" class="el-icon-plus avatar-uploader-icon">上传</i>
          </el-upload>
          <i v-if="form.weighHintPicture" class="el-icon-view" @click="fullScreenViewClick(form.weighHintPicture)"
             style="position: absolute;top:0;right:0;z-index:999;border-radius:3px;cursor:pointer;width:20px;
            height:20px;line-height:20px;text-align: center;background: rgba(0,0,0,0.2);color:#fff;"></i>
        </el-form-item>
      </div>
    </el-form>
    <!--全屏图片预览-->
    <fullScreenView :fullScreenViewProps="fullScreenViewProps" ref="fullScreenView"></fullScreenView>
  </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import { getConfigByType } from "@/api/commonality/permission";
  import { addOrUpdate } from "@/api/systemManagement/index";
  import fullScreenView from "@/components/fullScreenView/fullScreenView.vue";
  export default {
    name: "publicConfig",
    components: {
      fullScreenView,
    },
    data() {
      const timeCheckOne = (rule, value, callback) => {
        if (value > this.form.backTime) {
          callback();
        } else {
          callback(new Error("注销时间必须大于自动返回时间"));
        }
      };
      const timeCheck = (rule, value, callback) => {
        if (value < this.form.signOutTime && value < this.form.backTime) {
          callback();
        } else {
          callback(new Error("弹窗关闭时间需小于自动返回及自动注销时间"));
        }
      };
      return {
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization:getToken(),
        },
        configId:null,
        form:{
          backTime:60,
          signOutTime:120,
          offTime:30,
          weighHintPicture:"",
        },
        rules: {
          backTime: [
            { required: true, message: "请输入自动返回时间", trigger: "blur" }
          ],
          signOutTime: [
            { required: true, message: "请输入自动注销时间", trigger: "blur" },
            { required: true, message: "注销时间必须大于自动返回时间", validator: timeCheckOne, trigger: "blur" }
          ],
          offTime: [
            { required: true, message: "请输入弹窗关闭时间", trigger: "blur" },
            { required: true, message: "弹窗关闭时间需小于自动返回及自动注销时间", validator: timeCheck, trigger: "blur" }
          ],
          weighHintPicture: [
            { required: true, message: "请上传称重示意图", trigger: "blur" }
          ],
        },
        imgUrl:"",
        imgOpen:false,
        fullScreenViewProps:[],
      };
    },
    created() {

    },
    mounted(){
      this.getConfigByType();
    },
    methods: {
      /** 提交按钮 */
      addOrUpdate() {
        let self = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            if(self.form.backTime == self.form.signOutTime){
              self.msgError('自动返回时间与自动注销时间不能重复');
              return
            }
            this.$confirm('是否确认提交?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
            }).then(() => {
              let obj = {
                id:self.configId,
                configName: "化学品终端配置",
                category:2,
                configKey:3,
                configValue : JSON.stringify(self.form),
              }
              addOrUpdate(obj).then(response => {
                self.msgSuccess(response.message);
                self.getConfigByType();
              });
            }).catch(() => {});
          }
        });
      },
      //查看图片
      lookImg(url){
        this.imgUrl = url;
        this.imgOpen = true;
      },
      //获取数据
      getConfigByType(){
        getConfigByType({ category: 2, configType: 3 }).then(response => {this.$set(
          this,'configId',response.data.id);
          let obj = JSON.parse(response.data.configValue)

          this.$set(this,'form',obj)
        });
      },
      fullScreenViewClick(url){
        this.$set(this,'fullScreenViewProps',[url]);
        this.$refs['fullScreenView'].initialize();
      },
      //上传
      handleAvatarSuccess(res,type) {
        this.$set(this.form,'weighHintPicture',res.data.url);
        this.$forceUpdate()
      },
      beforeAvatarUpload(file) {
        let type = false;
        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/jpg' || file.type == 'image/gif') {
          type = true;
        }else{
          this.msgError('只能上传png/jpeg/jpg/gif格式图片');
          type = false;
        }
        return type;
      },
    },
  };
</script>

<style scoped lang="scss">
  .public-config-page{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .public-form-box{
      flex:1;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    /*底部按钮弹框*/
    .sub_btn{
      display: flex;
      background: #fff;
      height: 112px;
      .null-p{
        flex:1;
      }
      .inquire-button-one{
        cursor:pointer;
        display: inline-block;
        text-align: center;
        width: 70px;
        height: 40px;
        border-radius: 6px;
        border: 1px solid #0045af;
        color:#ffffff;
        background:#0045af;
        margin:36px 10px 0 0;
      }
    }
    .title-box{
      border-bottom:1px solid #dedede;
      p{
        margin-left:40px;
        color:#0045af;
        line-height:60px;
      }
    }
    .form-max-box{
      margin-top:20px;
      .form-flex-box{
        display: flex;
        ::v-deep input{
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
        .form-flex-right-p{
          width:50px;
          line-height:40px;
          background-color: #E0E0E0;
          text-align: center;
          font-size:16px;
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
        }
      }
    }
    .avatar-uploader-icon{
      width: 200px;
      height: 120px;
      line-height: 120px;
      font-size: 16px;
      font-weight: 400;
      color: #CCCCCC;
      border:1px dashed #CCCCCC;
      border-radius:10px;
    }
    .avatar{
      width: 200px;
      height: 120px;
    }
  }
</style>
