<!--
<create-classify
  :classifyName="classifyName"
  :classifyId="classifyId"
  :showDialog="showDialog"
  @hideDialog="hideDialog">
</create-classify>
 -->
<template>
  <div v-show="customDialog">
    <el-dialog class="app-dialog" :title="classifyName == '' ? '新增分类' : '编辑分类'" :visible.sync="customDialog" width="600px" :before-close="handleClose">
      <div class="app-dialog-body">
        <div role="alert" class="el-alert el-alert--info">
          <i class="el-alert__icon el-icon-info"></i>
          <div class="el-alert__content">
            <span class="el-alert__title">新建分类默认排序最后，可在分类列表中调整显示排序</span>
          </div>
        </div>
        <el-form :model="formData" label-width="94px" :rules="rules" ref="classifyForm">
          <el-form-item label="分类名称：" prop="classifyName">
            <limitInput :inputWidth="440" :inputValue.sync="formData.classifyName" :holder="'请输入分类名称'" :getByType="'word'" :maxLength="8"> </limitInput>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="padding-bottom: 10px;">
        <el-button @click="customCancel">取 消</el-button>
        <el-button type="primary" @click="customConfirm('classifyForm')">{{ classifyName == '' ? '新 建' : '保 存' }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
export default {
  name: 'create-classify',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    classifyName: {
      type: String,
      default: ''
    },
    classifyId: {
      type: String,
      default: ''
    },
    appName: {
      type: String,
      default: ''
    }
  },
  components: {
    limitInput
  },
  data() {
    return {
      repProjectName: 'haoban-manage-web', // 项目名
      customDialog: false, // 弹框显示
      formData: {
        classifyName: '',
        classifyId: this.classifyId
      },
      rules: {
        classifyName: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
      }
    };
  },
  methods: {
    /**
     *   关闭
     */
    handleClose(done) {
      const that = this;
      done();
      that.hideDialog();
    },

    /**
     *  取消
     */
    customCancel() {
      const that = this;
      that.hideDialog();
    },

    hideDialog() {
      const that = this;
      that.customDialog = false;
      that.$emit('hideDialog', '', '');
      /* that.$nextTick(() => {
        that.formData.classifyName = '';
      }); */
    },

    /**
     *  确定
     */
    customConfirm(formName) {
      const that = this;
      that.formData.classifyName = that.formData.classifyName.replace(/\s+/g, '');
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.setData();
        } else {
          return false;
        }
      });
    },

    /**
     *  提交数据
     */
    setData(list) {
      const that = this;
      that.$emit('hideDialog', that.formData.classifyName.replace(/\s+/g, ''), that.formData.classifyId);
      /* that.$nextTick(() => {
        that.formData.classifyName = '';
      }); */
    }
  },
  watch: {
    showDialog: function(newData, oldData) {
      const that = this;
      that.customDialog = newData;
    },
    classifyName: function(newData, oldData) {
      const that = this;
      that.formData.classifyName = newData;
    },
    classifyId: function(newData, oldData) {
      const that = this;
      that.formData.classifyId = newData;
    }
  },

  /* 接收数据 */
  mounted() {
    const that = this;
    that.customDialog = that.showDialog;
    that.formData.classifyName = that.classifyName;
    that.formData.classifyId = that.classifyId;
  }
};
</script>

<style lang="scss" scoped>
.app-dialog {
  /deep/ .el-dialog__body {
    padding: 7px 20px 0 20px;
  }
  &-wrap {
  }

  &__title {
    width: 100%;
    height: 38px;
    padding: 12px 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(235, 238, 245, 1);
  }

  .el-alert--info {
    width: 400px;
    font-size: 14px;
    color: #606266;
    background: #e6f7ff;
    border: 1px solid rgba(145, 213, 255, 1);
  }
  .el-icon-info {
    width: 12px;
    font-size: 12px;
    color: #1890ff;
  }
  .el-form {
    margin-top: 40px;
  }
}
</style>
