<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('module.title')}}</div>
      </div>
      <div class="bar d-inline-block float-right">
        <el-button type="primary" size="small" @click="btnSave('params')" :loading="btnLoading">{{$t("btns.save")}}</el-button>
      </div>
    </div>
    <div class="mt-3">
      <el-form :model="params" ref="params" :rules="rules" label-position="top" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :label="$t('module.name')" prop="name" class="padding0Label">
              <el-input v-model="params.name" :placeholder="$t('placeholder.module_name')" size="small" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="4">
            <el-form-item :label="$t('module.superior_module')" class="padding0Label">
              <el-select v-model="params.superior" size="small" :placeholder="$t('placeholder.select')">
                <el-option
                  v-for="item in data"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id">
                </el-option>
              </el-select>
              <!-- <el-input v-model="params.superior" :placeholder="$t('placeholder.name')" size="small" clearable></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :label="$t('module.module_description')" class="padding0Label">
              <el-input v-model="params.description" type="textarea" :rows="2" :placeholder="$t('placeholder.description')" size="small" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="4">
            <el-form-item :label="$t('module.module_ordernumber')" class="padding0Label">
              <el-input-number v-model="params.orderNo" :min="0" :max="10000000"  size="small" :precision="0" :step="1"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        
      </el-form>
    </div>
  </div>
</template>

<script>
import { getBasiInfor, getAllmodules, updateModules } from "@/service/CommonApi.js";
import { nameCheck } from "@/utils/utils.js";

export default {
  name: "basicinfor",
  data(){
    return{
      params: {
        appId: "",
        id: "",
        name: "",
        description: "",
        superior: "",
        superiorName: "",
        orderNo: 0
      },
      rules: {
        name: [
          { required: true, message:this.$t('placeholder.module_name'), trigger: 'blur' },
          { validator: nameCheck, trigger: 'blur' }
        ]
      },
      data: [],
      btnLoading: false, // 按钮的加载
    }
  },

  watch: {
    // 如果路由有变化，会再次执行该方法
    $route(){
      let appId = sessionStorage.getItem("appId");
      let params = {
        ...this.params,
        appId: appId,
        id: this.$route.query.moduleId
      }
      this.params = params;
      this.init();
    }
  },

  mounted(){
    //判断是否是新建，edit:true为编辑
    let appId = sessionStorage.getItem("appId");

    let params = {
      ...this.params,
      appId: appId,
      id: this.$route.query.moduleId
    }
    if(params.superior == null){
      params.superior = appId
    }
    this.params = params;
    this.init();
  },

  methods:{
    /**
     * 初始化
     */
    init(){
      this.getBasiInfor();
      this.getAllmodules();
    },

    /**
     * 模块详情
     */
    async getBasiInfor(){
      let moduleId = this.params.id;
      let response = await getBasiInfor(moduleId)
      if (response.data.errcode == 0) {
        let params = {
          ...response.data.data
        }
        this.params = params;
      }
    },

    /**
     * **获取树形结构所有模块列表**
     */
    async getAllmodules(){
      let appId = this.params.appId;
      let currentModuleId = this.$route.query.moduleId
      let response = await getAllmodules(appId, currentModuleId)
      if (response.data.errcode == 0) {
        this.data = response.data.data;
      }
    },

    /**
     * 保存模块
     */
    btnSave(params){
      this.$refs[params].validate(async (valid) => {
        if (valid) {
          let params = {
            ...this.params,
            appId: sessionStorage.getItem('appId'),
            superior: this.params.superior ? this.params.superior : "",
            description: this.params.description ? this.params.description : "",
          }
          this.btnLoading = true
          let response = await updateModules(params)
          this.btnLoading = false
          if (response.data.errcode == 0) {
            this.$store.commit('changeIsReloadTree',true);
            this.$message({
              message: this.$t('msg.ss'),
              type: 'success'
            })
            this.getAllmodules();
          }
        } else {
          return false
        }
      });
    },
  }
}
</script>