<template>
  <div>
    <div class="obpm-title">
      <div class="d-inline-block">
        <i class="el-icon-folder title-icon"></i>
        <div class="title-name d-inline-block ml-2">
          {{ $t("stateLabel.title") }}
        </div>
      </div>
      <div class="bar d-inline-block float-right">
        <el-button
          type="primary"
          size="small"
          @click="btnSaveAndNew('params')"
          :loading="btnLoading"
          >{{ $t("btns.save_new") }}</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="btnSave('params')"
          :loading="btnLoading"
          >{{ $t("btns.save") }}</el-button
        >
        <el-button size="small" @click="goback">{{
          $t("btns.exit")
        }}</el-button>
      </div>
    </div>
    <div class="mt-3">
      <el-form
        :model="params"
        ref="params"
        :rules="rules"
        label-position="top"
        label-width="160px"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              :label="$t('stateLabel.name')"
              prop="name"
              class="padding0Label"
            >
              <el-input
                v-model="params.name"
                size="small"
                :placeholder="$t('placeholder.name')"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="4">
            <el-form-item
              :label="$t('stateLabel.value')"
              prop="value"
              class="padding0Label"
            >
              <el-input
                v-model="params.value"
                size="small"
                :placeholder="$t('placeholder.name')"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              :label="$t('stateLabel.ordernumber')"
              class="padding0Label"
            >
              <el-input-number
                v-model="params.orderNo"
                :min="0"
                :max="10000000"
                size="small"
                :precision="0"
                :step-strictly="true"
                :step="1"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="4">
            <el-form-item
              :label="$t('stateLabel.description')"
              prop="defaultRole"
              class="padding0Label"
            >
              <el-input
                type="textarea"
                :rows="2"
                :placeholder="$t('placeholder.description')"
                v-model="params.description"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  createStatuslabel,
  updateStatuslabel,
  getStateLabelDetail,
} from "@/service/CommontoolsAPI.js";
import { nameCheck, validateSpecial } from "@/utils/utils.js";

export default {
  name: "statuslabel",
  data() {
    return {
      params: {
        appId: "",
        id: "",
        name: "",
        description: "",
        value: "",
        orderNo: 0,
        parentId: "",
        applicationid: "",
      },
      btnLoading: false, // 按钮加载状态
      rules: {
        name: [
          { required: true, message: this.$t('placeholder.name'), trigger: "blur" },
          { validator: nameCheck, trigger: "blur" },
        ],
        value: [
          { required: true, message: this.$t('placeholder.enter_data'), trigger: "blur" },
          { validator: validateSpecial, trigger: "blur" },
        ],
      },
    };
  },

  mounted() {
    if (this.$route.query.edit && this.$route.query.edit != "false") {
      this.getStateLabelDetail();
    } else {
      let params = {
        ...this.params,
        appId: sessionStorage.getItem("appId")
      };
      this.params = params;
    }
  },

  methods: {
    /**
     * 退出
     */
    goback() {
      this.$router.push({
        path: "/home/softwaresdetails/commontool/statuslabellist",
        query: { edit: true },
      });
    },

    /**
     * 保存操作
     */
    btnSave(params, type) {
      let statusParams = {
        ...this.params,
        orderNo: this.params.orderNo + "",
        applicationid:sessionStorage.getItem("appId"),
        parentId:sessionStorage.getItem("appId")
      };
      this.$refs[params].validate(async (valid) => {
        if (valid) {
          if (this.params.id) {
            //更新
            this.btnLoading = true;
            let response = await updateStatuslabel(statusParams);
            this.btnLoading = false;
            if (response.data.errcode == 0) {
              this.$message.success(this.$t("msg.update_ss"));
              if (type == "save_new") {
                this.resetFields();
              }
            }
          } else {
            //新建
            this.btnLoading = true;
            let response = await createStatuslabel(statusParams);
            this.btnLoading = false;
            if (response.data.errcode == 0) {
              let params = {
                ...this.params,
                id: response.data.data.id,
              };
              this.params = params;
              this.$message.success(this.$t("msg.created_ss"));
              if (type == "save_new") {
                /**
                 * 重置字段
                 */
                this.resetFields();
              }
            }
          }
        } else {
          return false;
        }
      });
    },

    /**
     * 保存并新建
     */
    btnSaveAndNew(params) {
      this.btnSave(params, "save_new");
    },

    /**
     * 重置字段
     */
    resetFields() {
      this.params = {
        appId: sessionStorage.getItem("appId"),
        id: "",
        name: "",
        description: "",
        value: "",
        orderNo: 0,
      };
    },

    async getStateLabelDetail() {
      let response = await getStateLabelDetail(this.$route.query.id);
      if (response.data.errcode == 0) {
        this.params = response.data.data;
        this.params.orderNo = parseInt(this.params.orderNo);
      }
    },
  },
};
</script>