<!--
  @description: 分类管理管理-新增菜单/菜单编辑弹框
  @author: dijia
  @routerPath:
  @date:  2021/06/29
-->
<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialog"
      :close-on-click-modal="false"
      width="600px"
      :before-close="closeDialog"
      custom-class="shop_mall_dialog"
      @close="handleCloseAdd"
    >
      <el-form
        ref="fromData"
        :rules="rules"
        :model="fromData"
        :inline-message="true"
      >
        <table class="from_table mb10">
          <!-- 新增时展示 -->
          <tr>
            <td><el-form-item label="分类类别" /></td>
            <td>
              <el-radio-group v-model="fromData.classifyCategory">
                <el-radio v-if="fromData.classifyCategory==='1'" label="1">
                  一级分类
                </el-radio>
                <el-radio v-else-if="fromData.classifyCategory==='2'" label="2">
                  二级分类
                </el-radio>
                <el-radio v-else label="3">
                  三级分类
                </el-radio>
              </el-radio-group>
            </td>
          </tr>
          <!-- 分类级别为一级时 && type为添加二级分类时展示 -->
          <tr v-if="level==='1'&&type==='rowAdd'">
            <td><el-form-item label="上级分类" /></td>
            <td>
              <!-- 弹框类型为新增子级时 不可编辑 -->
              <el-select v-model="fromData.classifyParentId" :disabled="type==='rowAdd'" placeholder="请选择" filterable>
                <el-option
                  v-for="item in menuList"
                  :key="item.id"
                  :label="item.classifyName"
                  :value="item.id"
                />
              </el-select>
            </td>
          </tr>
          <!-- 分类级别为二级时 && type为添加三级分类时展示 -->
          <tr v-if="level==='2'&&type==='rowAdd'">
            <td><el-form-item label="上级分类" /></td>
            <td>
              <!-- 弹框类型为新增子级时 不可编辑 -->
              <el-select v-model="fromData.classifyParentId" :disabled="type==='rowAdd'" placeholder="请选择" filterable>
                <el-option
                  v-for="item in secondMenuList"
                  :key="item.id"
                  :label="item.classifyName"
                  :value="item.id"
                />
              </el-select>
            </td>
          </tr>
          <tr>
            <td><el-form-item label="分类名称" prop="classifyName" /></td>
            <td>
              <gx-input
                v-model.trim="fromData.classifyName"
                gx-maxlength="varchar20"
                type="text"
              />
            </td>
          </tr>
          <tr>
            <td><el-form-item label="分类编码" prop="classifyNo" /></td>
            <td>
              <gx-input
                v-model.trim="fromData.classifyNo"
                gx-maxlength="varchar20"
                type="text"
              />
            </td>
          </tr>
          <tr>
            <td><el-form-item label="是否启用" prop="useStatus" /></td>
            <td>
              <el-radio-group v-model="fromData.useStatus">
                <el-radio label="01">
                  启用
                </el-radio>
                <el-radio label="02">
                  禁用
                </el-radio>
              </el-radio-group>
            </td>
          </tr>
          <!-- <tr>
            <td><el-form-item label="排序" prop="sort" /></td>
            <td>
              <gx-input
                v-model.trim="fromData.sort"
                gx-maxlength="varchar6"
                type="text"
                @input="proving"
              />
            </td>
          </tr> -->
        </table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="purple" @click="submit">
          确定
        </el-button>
        <el-button style="margin-left:30px;" @click="dialog = false">
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/* api*/
import {
  saveGoodClass,
  updateGoodClass,
  getGoodsClassDetails
} from '@/api/shoppingmall/products'
/* 常用方法 */
import { En_Ch_NumTest, characters1_auto } from '@/assets/js/validate'
/* 组件*/
import money from '@comp/common/money/money' // 数字组件
export default {
  name: 'GoodsClassAddDialog',
  components: {
    money
  },
  props: {
    // 菜单列表
    menuList: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 添加成功回调
    callBack: {
      type: Function,
      default: function() {}
    },
    // 二级分类列表
    secondMenuList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      level: '', // 添加分类的等级
      dialog: false, // 弹框打开状态
      title: '', // 标题
      type: '', // add新增 edit 编辑
      fromData: {
        id: '', // 编辑id
        useStatus: '01', // 01 启用  02 禁用
        classifyCategory: '1', // 分类类别 1 2 3
        classifyName: '', // 分类名称
        classifyNo: '', // 分类编码
        classifyParentId: '', // 分类父节点id
        sort: '' // 排序
      },
      rules: {
        // 校验
        classifyName: [{ required: true, validator: En_Ch_NumTest, trigger: 'blur' }], // 分类名称
        classifyNo: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 分类编码
        sort: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 分类编码
        useStatus: [{ required: true, message: '请选择状态' }] // 启用禁用
      }
    }
  },
  created() {
  },
  methods: {
    // 打开弹框
    open(data) {
      this.dialog = true // 打开弹框
      this.type = data.type
      this.title = data.type === 'add' || data.type === 'rowAdd' ? '新增分类' : data.type === 'edit' ? '编辑分类' : '分类' // 标题
      if (this.type === 'edit') {
        // 根据id查询分类详细信息
        getGoodsClassDetails(data.row.id).then(res => {
          this.fromData = res.data
        })
      } else {
        this.fromData = {
          id: '', // 编辑id
          classifyCategory: '1',
          classifyName: '', // 分类名称
          classifyNo: '', // 分类编码
          useStatus: '01', // 01 启用  02 禁用
          classifyParentId: '0', // 分类父节点id 添加根节点时为0
          category: '', // 根节点分类编码
          categoryId: '', // 根节点id
          categoryName: '', // 根节点name
          sort: '' // 排序
        }
        if (data.type === 'rowAdd') {
          // 添加分类的级别
          const optionLe = data.row.classifyCategory
          this.level = optionLe
          // 设置新增加的分类的ParentId
          this.fromData.classifyParentId = data.row.id
          // 新增加分类的类别+1
          if (optionLe === '1') {
            // 添加二级分类
            this.fromData.classifyCategory = '2'
            this.fromData.category = data.row.classifyNo
            this.fromData.categoryId = data.row.id
            this.fromData.categoryName = data.row.classifyName
          } else {
            // 添加三级分类
            this.fromData.classifyCategory = '3'
            // 根据id查询根节点分类详细信息
            getGoodsClassDetails(data.row.classifyParentId).then(res => {
              this.fromData.category = res.data.classifyNo
              this.fromData.categoryId = res.data.id
              this.fromData.categoryName = res.data.classifyName
            })
          }
        }
      }
    },
    /**
     * 添加/编辑分类
     * 添加时必须有根节点的id,name,编码(后端要求)
     */
    submit() {
      this.$refs['fromData'].validate(valid => {
        if (valid) {
          if (this.type === 'add') {
            // 新增
            this.createMenu()
          }
          if (this.type === 'rowAdd') {
            // 新增
            this.createMenu()
          }
          if (this.type === 'edit') {
            // 编辑
            this.updateMenu()
          }
        }
      })
    },
    // 新增/编辑分类
    createMenu() {
      saveGoodClass(this.fromData).then(() => {
        this.dialog = false
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        // 回调
        this.callBack()
      })
    },
    // 编辑接口
    updateMenu() {
      updateGoodClass(this.fromData).then(() => {
        this.dialog = false
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        // 回调
        this.callBack()
      })
    },
    closeDialog(done) {
      this.$refs.fromData.resetFields()
      this.$refs.fromData.clearValidate()
      done()
    },
    // 关闭新增dialog时的回调
    handleCloseAdd() {
      this.$refs.fromData.resetFields()
      this.$refs.fromData.clearValidate()
    },
    // input过滤只能输入自然数
    proving() {
      // 先把非数字的都替换掉，除了数字
      this.fromData.sort = this.fromData.sort.replace(/[^\d]/g, '')
      // 前两位不能是0加数字
      this.fromData.sort = this.fromData.sort.replace(/^(0)*(\d[0-9]*)/g, '$2')
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/style/common/public.less';
.functionIconStyle_icon{
  color: @hyacinthine;
  margin-right: 10px;
}
.scrollbar {
  height: 80vh;
  margin-top: 10px;
}

.filter-container {
  margin: 30px 20px !important;
}

</style>
