<template>
  <div class="editPage">
    <el-form
      :model="editForm"
      :loading="loading"
      ref="editForm"
      label-position="right"
      label-width="auto"
      style="padding-right:50px;"
      v-loading="loading"
      element-loading-text="操作中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.9)"
    >
      <el-form-item
        label="名称"
        prop="classifyName"
        :rules="{ required: true, message: '名称不能为空', trigger: 'blur' }"
      >
        <el-input v-model="editForm.classifyName" placeholder="请输入名称"></el-input>
      </el-form-item>

      <el-form-item label="排序值">
        <el-input-number v-model="editForm.orderId" :min="0"></el-input-number>
      </el-form-item>

      <el-form-item
        label="是否在线"
        prop="onlineStatus"
        :rules="{ required: true, message: '请选择状态', trigger: 'blur' }"
      >
        <el-switch
          v-model="editForm.onlineStatus"
          inactive-color="rgb(234,236,240)"
        ></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="padding-right:30px">
      <el-button @click="componentClose">取 消</el-button>
      <el-button type="primary" @click="componentSubmit" :disabled="loading" :loading="loading">确定</el-button>
    </div>
  </div>
</template>


<script>
import UploadImg from "@/components/UploadImg/index.vue";

export default {
  props: [],
  components: { UploadImg },
  data() {
    return {
      isLinkDialog: false,
      searchLoading: false,
      title: "轮播图",
      submitUrl: "",
      loading: false,
      dialogVisiable: false,
      editForm: {
        classifyCode: "",
        classifyIcon: "",
        classifyHomePic: "",
        classifyName: "",
        onlineStatus: true,
        onShow: false,
        orderId: 0
      },
      // 连接值的候选项
      valueCandidates: [],
      getForm: {
        query: null,
        page: 0,
        size: 10
      },
      candidatesEnd: false,
      fetchUrl: "",
      labelKey: "",
      valueKey: ""
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      this.submitUrl = app.api.setArticleClassify;
      if (this.$route.query.pojo != "null") {
        this.editForm = JSON.parse(this.$route.query.pojo);
        this.editForm.onlineStatus = this.editForm.onlineStatus ? true : false;
        this.editForm.onShow = this.editForm.onShow ? true : false;
      }
      this.dialogVisiable = true;
    },
    componentClose() {
      this.$router.go(-1);
    },
    componentClosed() {
      this.$emit("closed");
    },
    componentSubmit() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          if (this.loading) {
            return;
          }
          this.loading = true;

          let editForm = JSON.parse(JSON.stringify(this.editForm));
          editForm.onlineStatus = this.editForm.onlineStatus ? 1 : 0;
          editForm.onShow = this.editForm.onShow ? 1 : 0;

          app
            .post({
              url: this.submitUrl,
              data: editForm
            })
            .then(res => {
              this.loading = false;
              this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success"
              });
              this.$router.go(-1);
            })
            .catch(e => {
              this.loading = false;
            });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.commoditySelect {
  width: 100%;
  max-width: auto;
}
.tablePage {
  margin: 0 auto;
}
</style>