<template>
  <el-dialog v-dialogDrag width="40%" :close-on-click-modal="false" title="TIF转JPG" :visible.sync="bathFlag"
    :before-close="cancel" top="10%">
    <el-form :model="ruleForm" size="mini" :rules="rules" ref="ruleForm" label-width="120px" class="diaForm">
      <el-form-item label="文件夹路径：" prop="path">
        <el-input clearable placeholder="请输入内容" v-model="ruleForm.path" class="input-with-select">
        </el-input>
      </el-form-item>
       <el-form-item style="color: red">
                  <template slot="label">           
          <div style="color: red">提示:</div>
                    </template>
        <div style="text-align: left">请输入文件夹路径</div>
                
      </el-form-item>
       <el-form-item class="btnClass">
        <el-button @click="submit('ruleForm')" icon="el-icon-tickets" type="primary" size="mini">确定</el-button>
        <el-button @click="cancel" icon="el-icon-close" type="info" size="mini">取消</el-button>
      </el-form-item>
    </el-form>
    <load v-if="loads" titleLoad="转换"></load>
  </el-dialog>
</template>
<script>
  import {
    message,
    loading,
    loadingClose
  } from "@/utils/common";
  import {
    tif2jpge
  } from "@/api/tool";
  export default {
    props: {
      bathFlag: {
        type: Boolean,
        default: () => false,
      },
    },
    data() {
      return {
        loads: false,
        ruleForm: {
          path: "",
        },
        rules: {
          path: [{
            required: true,
            message: "请输入文件路径",
            trigger: "change"
          }, ],
        },
      };
    },
    methods: {
      submit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // this.$emit("loadingStart", "批量修改中");
            this.loads = true
            let data = this.ruleForm;
            tif2jpge(data)
              .then((res) => {
                if (res.code === "100") {
                  message("success", res.msg, 4000);
                  // this.$emit("loadingEnd");
                  this.$emit("cancel");
                }
              }).finally(res => {
                this.loads = false
              })

          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      cancel() {
        this.$refs.ruleForm.resetFields()
        this.$emit("cancel");
      },
    },
  };

</script>
<style lang='scss' scoped>
  .btnClass {
    text-align: center;
  }

</style>
