<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/classList">产品分类管理</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="typeCode">
          <div>分类类别：</div>
          <el-select
            v-model="form.typeCode"
            placeholder="请选择"
            :disabled="disabledFlag"
          >
            <el-option
              v-for="(e, idx) in classTypes"
              :key="idx"
              :label="e.label"
              :value="e.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="name">
          <div>分类名称：</div>
          <el-input
            v-model="form.name"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="servTemplate">
          <div>服务模版：</div>
          <el-select
            v-model="form.servTemplate"
            placeholder="请选择"
            :disabled="disabledFlag"
          >
            <el-option
              v-for="(e, idx) in serviceTemplates"
              :key="idx"
              :label="e.label"
              :value="e.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="pId" v-if="form.typeCode == 'service_type_2'">
          <div>上级分类名称：</div>
          <el-select
            v-model="form.pId"
            placeholder="请选择"
            :disabled="disabledFlag"
          >
            <el-option
              v-for="(e, idx) in pClassNames"
              :key="idx"
              :label="e.label"
              :value="e.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="describe" label="">
          <div>描述：</div>
          <el-input
            v-model="form.describe"
            type="textarea"
            placeholder="请输入分类描述"
            rows="5"
            :disabled="disabledFlag"
          />
        </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: {
        typeCode: "", // 分类类别 0-服务分类 1-服务类型
        name: "", // 分类名称
        servTemplate: "", // 服务模版
        pId: "", // 上级分类名称
        describe: "", // 描述
        state: 1 // 状态 0-停用 1-启用
      },
      rules: {
        typeCode: [
          { required: true, message: "请选择分类类别", trigger: "change" },
        ],
        name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          { max: 8, message: "最大长度为8个字", trigger: "blur"}
        ],
        servTemplate: [
          { required: true, message: "请选择服务模版", trigger: "change" },
        ],
        pId: [
          { required: true, message: "请选择上级分类名称", trigger: "change" },
        ],
        describe: [
          
        ],
        state:[
          { required: true, message: "请选择状态", trigger: "change" },
        ]
      }, // 表单校验
      classTypes: [
        {
          label: "服务分类",
          value: 'service_type_1'
        },
        {
          label: "服务类型",
          value: 'service_type_2'
        },
      ], // 分类类别
      serviceTemplates:[
        {
          label: "数据服务",
          value: 1
        },
        {
          label: "时空服务-地图服务",
          value: 2
        },
        {
          label: "时空服务-要素服务",
          value: 3
        },
        {
          label: "时空服务-WFS",
          value: 4
        },
        {
          label: "时空服务-WMS",
          value: 5
        },
        {
          label: "视频服务",
          value: 6
        },
        {
          label: "融合服务",
          value: 7
        },
        {
          label: "综合服务-模型算法类",
          value: 8
        },
        {
          label: "综合服务-查询验证类",
          value: 9
        },
        {
          label: "综合服务-流程类",
          value: 10
        },
        {
          label: "综合服务-应用类",
          value: 11
        },
      ], // 模版
      pClassNames: [], // 上级分类
      stateTypes: [
        {
          label: "启用",
          value: 1
        },
        {
          label: "禁用",
          value: 0
        },
      ], // 状态
      disabledFlag: false
    }
  },
  computed: {
    isAdd() {
      return this.$route.path.indexOf('add') > -1
    } // true为新增false为编辑
  },
  created() {
    if (!this.isAdd) {
      let id = this.$route.params.id
      this.getDetail(id) // 获取详情
    }
    this.getClassTypes() // 获取全部服务分类
  },
  methods: {
    getDetail(id) {
      this.$api.productType.getClassDetail(id).then(res => {
        if (res.data.success == 1) {
          let data = res.data.data
          this.form = {
            id: data.id,
            describe: data.describe,
            name: data.name,
            servTemplate: data.serv_template,
            pId:  data.type_code == 'service_type_1' ? '' : data.p_id,
            state: data.state,
            typeCode: data.type_code
          }
          this.disabledFlag = data.can_delete == 0 ? true : false
        }else {
          this.$message.error(res.data.errMsg)
        }
      }).catch(err => {
        console.log(err)
      })
    }, // 获取详情
    getClassTypes() {
      this.$api.productType.getClassTypes().then(res => {
        if (res.data.success == 1) {
          let data = res.data.data || []
          data.forEach(e => {
            this.pClassNames.push({
              label: e.className,
              value: e.id
            })
          })
        }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_class();
          }else {
            this.edit_class()
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }, // 保存按钮
    edit_class() {
      if (this.form.typeCode == 'service_type_1') {
        this.form.pId = 0
      }
      this.$api.productType.editClass(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_class() {
      if (this.form.typeCode == 'service_type_1') {
        this.form.pId = 0
      }
      this.$api.productType.addNewClass(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>