<template>
  <div>
    <el-dialog :visible.sync="showAddMallMenuDialog" width="640px" @close="cancel">
      <div slot="title">
        <div v-if="ruleForm.level===1&&!ruleForm.id" class="dialog-title">新增一级菜单</div>
        <div v-if="ruleForm.level===2&&!ruleForm.id" class="dialog-title">新增二级菜单</div>
        <div v-if="ruleForm.level===3&&!ruleForm.id" class="dialog-title">新增三级菜单</div>
        <div v-if="ruleForm.id" class="dialog-title">编辑</div>
      </div>
      <el-form class="demo-ruleForm" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item v-if="ruleForm.level===2" label="关联一级菜单" prop="pname">
          <el-input v-model="ruleForm.pname" disabled />
        </el-form-item>
        <el-form-item v-if="ruleForm.level===3" label="关联二级菜单" prop="pname">
          <el-input v-model="ruleForm.pname" disabled />
        </el-form-item>
        <el-form-item v-if="ruleForm.isHaveChildren" label="关联商品分类" prop="categoryId">
          <span v-if="ruleForm.categoryId" @click="openGoodsCategoryDialog(ruleForm.categoryId,ruleForm.categoryName)" style="cursor: pointer;">{{ruleForm.categoryName}}</span>
          <el-button v-else type="primary" size="small" @click="openGoodsCategoryDialog">添加商品分类</el-button>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="ruleForm.sort" size="small" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-hasPermi="['platform:menu:update']" type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <div v-if="showGoodsCategoryDialog">
      <goodsCategoryDialog ref="gcdRef" @cancel="showGoodsCategoryDialog=false" @confirm="getCategoryId"></goodsCategoryDialog>
    </div>
  </div>
</template>

<script>
  import { addMallMenuApi } from '@/api/product';
  import goodsCategoryDialog from './goodsCategoryDialog.vue';

  export default {
    components: { goodsCategoryDialog },

    data() {
      return {
        showAddMallMenuDialog: true,
        ruleForm: {
          id: '',
          categoryId: '',
          categoryName: '',
          level: 1,
          name: '',
          pid: 0,
          pname: '',
          sort: 0,
          type: 0,
          isHaveChildren: true
        },
        // 表单校验
        rules: {
          name: [
            { required: true, message: '请输入菜单名称', trigger: 'blur' }
          ],
          pname: [
            { required: true, message: '请输入菜单名称', trigger: 'blur' }
          ],
          categoryId: [
            { required: true, message: '请添加商品分类', trigger: 'blur' }
          ],
          sort: [
            { required: true, message: '请选择排序', trigger: 'blur' }
          ],
        },
        showGoodsCategoryDialog: false
      }
    },

    methods: {
      openDialog(row) {
        console.log(row)
        if (row) {
          this.ruleForm = row
        }
      },
      // 弹出框取消事件
      cancel() {
        this.$emit('cancel')
      },
      openGoodsCategoryDialog(categoryId, categoryName) {
        this.showGoodsCategoryDialog = true;
        this.$nextTick(() => {
          this.$refs.gcdRef.openDialog(categoryId, categoryName);
        });
      },
      getCategoryId(row) {
        this.ruleForm.categoryId = row.id
        this.ruleForm.categoryName = row.name
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let type = this.ruleForm.id ? 'edit' : 'add'
            addMallMenuApi(this.ruleForm, type).then(res => {
              let message = this.ruleForm.id ? '修改菜单成功' : '新建菜单成功'
              this.$message.success(message)
              this.cancel()
              this.$emit('refreshList');
            }).catch(() => {});
          }
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .dialog-title {
    font-size: 18px;
    color: #303133;
  }
</style>
