<template>
  <Dialog
    :is-dialog-exist="isDialog"
    :title="dialogTitle"
    :dialog-style="dialogStyle"
    @close-dialog="handleClose"
  >
    <el-container>
      <el-main>
        <el-form ref="formData" :model="formData" label-width="auto">
          <el-form-item label="书源">
            <el-select
              v-model="formData.source_platform"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                :label="item.name"
                :value="item.value"
                v-for="(item, index) in dropdownData"
                :key="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="分类">
            <el-input v-model="formData.name" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer>
        <el-button type="primary" @click="onSubmit"> 确认</el-button>
        <el-button @click="handleClose"> 取消 </el-button>
      </el-footer>
    </el-container>
  </Dialog>
</template>

<script>
import Dialog from "@/components/Dialog/index";
import { getCategoryAdd, getCategoryUpdate } from "@/api/sort-management";

export default {
  components: { Dialog },
  props: {
    isDialog: {
      type: Boolean,
      default: false,
    },
    // 弹窗标题
    dialogTitle: {
      type: String,
      default: "",
    },
    dropdownData: {
      type: Array,
      default: () => {},
    },
    selectItem: {
      type: Object,
      default: () => {
        return {
          source_platform: "",
          name: "",
        };
      },
    },
  },

  watch: {
    isDialog(val) {
      if (val) {
        this.init();
      }
    },
  },

  data() {
    return {
      // dialog样式
      dialogStyle: {
        "--dialog-width": "1000px",
        "--dialog-height": "450px",
        "--title-height": "51px",
      },
      formData: {
        source_platform: "",
        name: "",
      },
    };
  },
  methods: {
    init() {
      console.log("初始化");
      if (this.dialogTitle === "新增分类") {
        this.formData = {
          source_platform: "",
          name: "",
        };
      } else {
        this.formData = this.selectItem;
      }
    },
    handleClose() {
      this.$emit("handle-close");
    },

    onSubmit() {
    
      if (this.formData.name === "") return this.$message.error("请输入分类名称");
      if (this.formData.source_platform === "") return this.$message.error("请选择书源");

      if (this.dialogTitle === "新增分类") {
        getCategoryAdd({
          name: this.formData.name,
          source_platform: this.formData.source_platform,
        })
          .then((res) => {
            this.$emit("handle-success");
            this.$message.success("新增成功");
          })
          .catch((err) => {
            this.$emit("handle-close");
          });
      } else {
        getCategoryUpdate(
          {
            name: this.formData.name,
          },
          this.formData.source_platform
        )
          .then((res) => {
            this.$emit("handle-success");
            this.$message.success("修改成功");
          })
          .catch((err) => {
            this.$emit("handle-close");
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: 100%;
  .el-main {
    width: 100%;
    height: 90%;
    padding: 5% 15% 0;
  }
  .el-footer {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 10px #000000;
  }
}
</style>
