<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="600px"
    append-to-body
  >
    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
      <el-form-item label="图标" class="form-item">
        <Upload @imageUrl="setImageUrl" :url="form.icon"  />
      </el-form-item>
      <el-form-item label="名称" class="form-item" prop="categoryName">
        <el-row>
          <el-col :span="18">
            <el-input v-model="form.categoryName" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item
        label="评价维度名称"
        class="form-item"
        v-show="form.parentId == null"
      >
        <el-row>
          <el-col :span="4">
            <el-input v-model="form.dimensionNameList[0].dimensionName" />
          </el-col>
          <el-col :span="1">&nbsp;</el-col>
          <el-col :span="4">
            <el-input v-model="form.dimensionNameList[1].dimensionName" />
          </el-col>
          <el-col :span="1">&nbsp;</el-col>
          <el-col :span="4">
            <el-input v-model="form.dimensionNameList[2].dimensionName" />
          </el-col>
          <el-col :span="10">&nbsp;</el-col>
          <span>注：输入评价的三个维度，如：服务、环境、口味</span>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addMainCategory, addCategory } from "@/api/adminApi";
import Upload from "@/components/Upload/index.vue";
export default {
  name: "editCategory",
  components: { Upload },
  props: {
    category: Object,
    type: Number, // 商家1，商品2
  },
  watch: {},
  data() {
    return {
      dialogTitle: "添加类型",
      dialogVisible: false,
      form: {
        icon: "",
        categoryName: "",
        dimensionNameList: [
          {
            dimensionName: "",
          },
          {
            dimensionName: "",
          },
          {
            dimensionName: "",
          },
        ],
      },
      rules: {
        categoryName: [
          { required: true, message: "分类名称不能为空", trigger: "change" },
        ],
        dimensionNameList: [
          { required: true, message: "评价维度不能为空", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    /**上传图片成功**/
    handleImageSuccess(res, file) {
      console.log(res);
      this.form.icon = res.result;
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.parentId) {
            addCategory({
              type: this.type, //商家1，商品2
              categoryId: this.form.categoryId,
              parentId: this.form.parentId,
              categoryName: this.form.categoryName,
              icon: this.form.icon
            }).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("添加成功");
              }
              this.form = {
                icon: "",
                categoryName: "",
                dimensionNameList: [
                  {
                    dimensionName: "",
                  },
                  {
                    dimensionName: "",
                  },
                  {
                    dimensionName: "",
                  },
                ],
              };
              this.dismiss();
              this.$parent.getList();
            });
          } else {
            // 添加主类型
            addMainCategory({
              type: this.type, //商家1，商品2
              categoryId: this.form.categoryId,
              categoryName: this.form.categoryName,
              dimensionNameList: this.form.dimensionNameList,
              icon: this.form.icon
            }).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("添加成功");
              }
              this.form = {
                icon: "",
                categoryName: "",
                dimensionNameList: [
                  {
                    dimensionName: "",
                  },
                  {
                    dimensionName: "",
                  },
                  {
                    dimensionName: "",
                  },
                ],
              };
              this.dismiss();
              this.$parent.getList();
            });
          }
        }
      });
    },
    cancel() {
      this.dialogVisible = false;
    },
    show(form) {
      console.log("show", form);
      if (form) {
        var dimensionNameList = [
          { dimensionName: "" },
          { dimensionName: "" },
          { dimensionName: "" },
        ];
        this.form = {
          icon: "",
          parentId: form.categoryId,
          categoryName: "",
          dimensionNameList: dimensionNameList,
        };
      }
      this.dialogVisible = true;
      console.log("form", form);
    },
    clearData() {
      console.log("清空数组")
      this.form = [];
    },
    dismiss() {
      this.dialogVisible = false;
    },
    setImageUrl(val) {
      this.form.icon = val
      console.log('类型图标上传成功', val)
    }
  },
};
</script>
<style scoped>
img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.dialog-footer {
  display: flex;
  padding-bottom: 20px;
  justify-content: flex-end;
}
.icon-container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.icon {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}
</style>