<template>
  <div class="edit_page">
    <div class="apass_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/productType">分类管理</el-breadcrumb-item>
        <el-breadcrumb-item to="/productType/domainList">领域分类</el-breadcrumb-item>
        <el-breadcrumb-item>{{isAdd? '新增' : '编辑'}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container_box">
      <el-form
        ref="form"
        class="detai_form"
        :rules="rules"
        :model="form"
      >
        <el-form-item label="" prop="name">
          <div>分类名称：</div>
          <el-input
            v-model="form.name"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="describe" label="">
          <div>描述：</div>
          <el-input
            v-model="form.describe"
            type="textarea"
            placeholder="请输入分类描述"
            rows="5"
          />
        </el-form-item>
        <el-form-item label="" prop="state">
          <div>状态：</div>
          <el-select
            v-model="form.state"
            placeholder="请选择"
          >
            <el-option
              v-for="(e, idx) in stateTypes"
              :key="idx"
              :label="e.label"
              :value="e.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="apaas_button">
        <el-button type="primary" @click="onSubmit('form')" class="right"
          >保存</el-button
        >
        <el-button class="right" @click="backPage()">取消</el-button>
      </div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "", // 领域名称
        describe: "", // 描述
        state: 1 // 状态
      },
      rules: {
        name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
        describe: [
          
        ],
        state:[
          { required: true, message: "请选择状态", trigger: "change" },
        ]
      },
      stateTypes: [
        {
          label: "启用",
          value: 1
        },
        {
          label: "停用",
          value: 0
        },
      ]
    }
  },
  computed: {
    isAdd() {
      return this.$route.path.indexOf('add') > -1
    }
  },
  created() {
    if (!this.isAdd) {
      let id = this.$route.params.id
      this.getDetail(id)
    }
  },
  methods: {
    getDetail(id) {
      this.$api.productType.getDomainDetail(id).then(res => {
        if (res.data.success == 1) {
          let data = res.data.data
          this.form = {
            id: data.id,
            describe: data.describe,
            name: data.name,
            state: data.state,
          }
        }else {
          this.$message.error(res.data.errMsg)
        }
      }).catch(err => {
        console.log(err)
      })
    }, // 获取详情
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.isAdd) {
            this.add_domain();
          }else {
            this.edit_domain()
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }, // 保存按钮
    edit_domain() {
      this.$api.productType.editDomain(this.form).then(res => {
        if (res.data.success == 1) {
          this.$message.success("编辑成功")
          this.backPage()
        }else {
          this.$message.error(res.data.errMsg)
        }
      }).catch(err => {
        console.log(err)
      })
    }, // 编辑
    add_domain() {
      this.$api.productType.addNewDomain(this.form).then(res => {
        if (res.data.success == 1) {
          this.$message.success("新增成功")
          this.backPage()
        }else {
          this.$message.error(res.data.errMsg)
        }
      }).catch(err => {
        console.log(err)
      })
    }, // 新增
    backPage() {
      this.$router.back(-1);
    }, // 取消
  }
}
</script>
<style lang="less" scoped>
.edit_page {
  height: 100%;
  padding: 0 20px;
  .container_box {
    height: calc(100% - 70px);
    background-color: #fff;
    border-radius: 10px;
    padding: 15px 20px;
    .detai_form {
      width: 60%;
      .el-select {
        width: 100%;
      }
    }
      .right {
        float: right;
        margin-left: 20px;
      }
  }
}
</style>