<!--
 * @Descripttion: 完善索引
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-11-10 13:46:15
 * @LastEditors: 无尘
 * @LastEditTime: 2020-11-26 17:00:47
-->
<!--
<index-dialog :sql-check-sql-id="sqlCheckSqlId"></index-dialog>
import indexDialog from '@/components/sql/index-dialog.vue';
 -->
<template>
  <el-dialog :title="sqlCheckSqlId ? '查看索引' : '完善索引'" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
    <div class="">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm" @submit.native.prevent>
        <el-form-item label="内容" prop="sqlIndex">
          <el-input class="w-440" type="textarea" rows="6" v-model="ruleForm.sqlIndex" maxlength="500" show-word-limit></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="toCancel">取消</el-button>
      <el-button type="primary" :loading="loadBtn" @click="submitForm('ruleForm')">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { _debounce, emojiToStr } from '@/common/js/public';
import fetch from '@/api/sql';

const { addSqlIndex } = fetch;
export default {
  name: 'IndexDialog',
  components: {},
  props: {
    sqlCheckSqlId: {
      type: String,
      default: ''
    },
    sqlCheckIndex: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      userInfo: localStorage.getItem('haobanOperate') ? JSON.parse(localStorage.getItem('haobanOperate')) : { id: '', userMobile: '', realName: '', },
      dialogVisible: true,
      loadBtn: false,
      ruleForm: {
        sqlCheckSqlId: '',
        sqlIndex: ''
      },
      rules: {
        sqlIndex: [ { required: true, message: '请输入内容', trigger: 'blur' } ]
      },
    };
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    const that = this;
    that.ruleForm.sqlCheckSqlId = that.sqlCheckSqlId ? that.sqlCheckSqlId : '';
    that.ruleForm.sqlIndex = that.sqlCheckIndex ? that.sqlCheckIndex : '';
  },
  // methods
  methods: {
    /**
     * @description: 关闭弹窗
     * @author: 无尘
     */
    toCancel() {
      const that = this;
      that.$emit('closeText');
      that.$refs['ruleForm'].resetFields();
    },
    handleClose(done) {
      const that = this;
      that.$emit('closeText');
      that.$refs['ruleForm'].resetFields();
    },
    /**
     * @description: 保存
     * @param {String} formName
     * @author: 无尘
     */
    submitForm: _debounce(function(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.postSave();
        }
      });
    }, 300),
    postSave() {
      const that = this;
      that.loadBtn = true;
      const data = {
        sqlCheckSqlId: that.ruleForm.sqlCheckSqlId,
        sqlIndex: emojiToStr(that.ruleForm.sqlIndex),
        commitId: that.userInfo.id,
        commitName: that.userInfo.realName
      };
      addSqlIndex(data)
        .then(res => {
          that.loadBtn = false;
          if (res.code == '0000') {
            that.$message.success('操作成功');
            that.$refs['ruleForm'].resetFields();
            that.$emit('submitText');
          }else {
            that.$message.warning(res.message);
          }
        })
        .catch(error => {
          that.loadBtn = false;
        });
    }
  },
  watch: {}
};
</script>
<style lang='less' scoped>
  .w-440 {
    width: 440px;
  }
</style>
