<!--
 * @Descripttion: 导购标签分类编辑
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-09-01 13:53:59
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-21 10:31:37
-->

<!--
  <tag-classify-dialog :brand-id="brandId" :edit-row="editRow" @closeClassify="closeClassify"></tag-classify-dialog>
  import tagClassifyDialog from '@/components/app/my-customer/tag-classify-dialog.vue';
-->
<template>
  <el-dialog :title="form.categoryId ? '编辑分类' : '新建分类'" width="600px" :visible.sync="editVisible" :before-close="handleClose">
    <el-form :model="form" :rules="rules" ref="tagForm" label-width="110px">
      <el-form-item label="分类名称" prop="categoryName">
        <limit-input
          :input-width="440"
          :input-value.sync="form.categoryName"
          :holder="'请输入分类名称'"
          :get-by-type="'normal'"
          :max-length="10">
        </limit-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" :loading="loadingBtn" @click="submit('tagForm')">{{form.categoryId ? '保存' : '新建'}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import limitInput from '@/components/limit-input.vue';
import { _debounce, emojiToStr } from '@/common/js/public.js';
import showMsg from '@/common/js/showmsg.js';
import api from '@/api/my-customer-app.js';
const { addClassify } = api;
export default {
  name: 'TagClassifyDialog',
  components: {
    limitInput
  },
  props: {
    brandId: {
      type: String,
      default: ''
    },
    editRow: {
      type: Object,
      default() {
        return {
          categoryId: '',
          categoryName: ''
        };
      }
    }
  },
  data() {
    return {
      wxEnterpriseId: localStorage.getItem('haoBanUser') ? JSON.parse(localStorage.getItem('haoBanUser')).wxEnterpriseId : '',
      form: {
        categoryId: '',
        categoryName: ''
      },
      rules: {
        categoryName: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
        ]
      },
      editVisible: true,
      loadingBtn: false
    };
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    const that = this;
    if (Object.keys(that.editRow).length) {
      that.form = JSON.parse(JSON.stringify(that.editRow));
    }
  },
  // methods
  methods: {
    /**
     * @description: 关闭
     * @author: 无尘
     */
    cancel() {
      const that = this;
      that.$emit('closeClassify', 'close');
    },
    handleClose() {
      const that = this;
      that.tableData = [];
      that.$emit('closeClassify', 'close');
    },
    /**
     * @description: 确定保存
     * @param {String} formName
     * @returns {Boolean}
     * @author: 无尘
     */
    submit: _debounce(function(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.postSave();
        }
      });
    }, 300),
    postSave() {
      const that = this;
      that.loadBtn = true;
      const param = {
        wxEnterpriseId: that.wxEnterpriseId,
        enterpriseId: that.brandId,
        categoryId: that.form.categoryId,
        categoryName: emojiToStr(that.form.categoryName)
      };
      addClassify(param, { headers: { sign: that.brandId } })
        .then(res => {
          that.loadBtn = false;
          if (res.code == '0000') {
            showMsg.showmsg('操作成功', 'success');
            that.$refs['tagForm'].resetFields();
            that.$emit('closeClassify', that.form.categoryName);
          }else {
            showMsg.showmsg(res.message || '未知错误', 'warning');
          }
        })
        .catch(error => {
          that.loadBtn = false;
        });
    }
  },
  watch: {
    editRow(val) {
      const that = this;
      if (Object.keys(val).length) {
        that.form = JSON.parse(JSON.stringify(val));
      }
    }
  }
};
</script>
<style lang='less' scoped>


</style>
