<template>
  <div>
    <el-form ref="editPram" :model="editPram" label-width="140px">
      <el-form-item
        label="小食名称"
        :rules="[{ required: true, message: '请输入分类名称' }]"
      >
        <el-input v-model="editPram.categoryName" placeholder="小食名称" />
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="editPram.sort" :min="0" />
      </el-form-item>
      <el-form-item
        label="分类图标(180*180)"
        :rules="[
          { required: true, message: '请上传图标', trigger: ['blur', 'change'] }
        ]"
      >
        <div class="upLoadPicBox" @click="modalPicTap('1')">
          <div v-if="editPram.icon" class="pictrue">
            <img :src="editPram.icon" />
          </div>
          <div v-else class="upLoad">
            <i class="el-icon-camera cameraIconfont" />
          </div>
        </div>
      </el-form-item>

      <el-form-item label="状态">
        <el-switch
          v-model="editPram.isShow"
          active-text="显示"
          inactive-text="隐藏"
          :active-value="true"
          :inactive-value="false"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :loading="loadingBtn"
          @click="handlerSubmit('editPram')"
          >确定</el-button
        >
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { storeSnackCategoryPut, storeSnackCategoryPost } from "@/api/snack.js";
export default {
  // name: "edit"
  props: {
    prent: {
      type: Object,
      required: true
    },
    isCreate: {
      type: Number,
      default: 0
    },
    editData: {
      type: Object
    },

    allTreeList: {
      type: Array
    }
  },
  data() {
    return {
      loadingBtn: false,
      constants: this.$constants,
      editPram: {
        categoryName: null,
        sort: null,
        isShow: 0,
        icon: true,
        id: undefined
      },
    };
  },
  mounted() {
    this.initEditData();
  },
  methods: {
    // 点击图标
    addIcon() {
      const _this = this;
      _this.$modalIcon(function(icon) {
        _this.editPram.icon = icon;
      });
    },
    // 点击商品图
    modalPicTap(tit, num, i) {
      const _this = this;
      const attr = [];
      this.$modalUpload(
        function(img) {
          if (tit === "1" && !num) {
            _this.editPram.icon = img[0].sattDir;
          }
          if (tit === "2" && !num) {
            img.map(item => {
              attr.push(item.attachment_src);
              _this.formValidate.slider_image.push(item);
            });
          }
        },
        tit,
        "store"
      );
    },
    close() {
      this.$emit("hideEditDialog");
    },
    initEditData() {
      const { categoryName, isShow, sort, icon, id } = this.editData;
      console.log(this.editData);
      if (this.isCreate === 1) {
        this.editPram.categoryName = categoryName;
        this.editPram.sort = sort;
        this.editPram.isShow = isShow;
        this.editPram.icon = icon;
        this.editPram.id = id;
      } else {
        //   this.editPram.pid = this.prent.id
      }
    },

    handlerSubmit(formName) {
      console.log(this.isCreate);
      this.$refs[formName].validate(valid => {
        if (!valid) return;
        this.loadingBtn = true
        if (this.isCreate) {
            storeSnackCategoryPut(this.editPram).then(res => {
            this.$message.success("编辑成功");
            this.$emit("hideEditDialog");
            this.$emit("getList");
          }).finally(() =>{
            this.loadingBtn = false
          });
        } else {
            storeSnackCategoryPost(this.editPram).then(res => {
            this.$message.success("添加成功");
            this.$emit("hideEditDialog");
          }).finally(() =>{
            this.loadingBtn = false
          });
        }

        console.log(this.editPram);
      });
    }
  }
};
</script>

<style scoped></style>
