<template>
  <div class="wrapper editwrap">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="title"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
        <el-form-item label="名称" prop="resourceName">
          <el-input v-model="editForm.resourceName"></el-input>
        </el-form-item>
        <el-form-item label="代码" prop="code">
          <el-input v-model="editForm.code"></el-input>
        </el-form-item>
        <el-form-item label="接口路径" prop="url">
          <el-input v-model="editForm.url"></el-input>
        </el-form-item>
        <el-form-item label="访问方式" prop="method">
          <el-radio-group v-model="editForm.method">
            <el-radio label="GET"></el-radio>
            <el-radio label="POST"></el-radio>
            <el-radio label="PUT"></el-radio>
            <el-radio label="DELETE"></el-radio>
            <el-radio label="PATCH"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="editForm.description" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="editForm.sort" type="number"></el-input>
        </el-form-item>
        
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="confirmFun('editForm')">确定</el-button>
        <el-button @click="$emit('dialogFun')" size="small">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style lang="scss">
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
// import { State, Getter, Mutation, Action } from "vuex-class";

@Component({
  components: { }
})
export default class APIMgEdit extends Vue {
  //属性或参数中使用!:表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  @Prop(Boolean) dialogVisible!: Boolean;

  @Prop(Object) editForm!: {
    resourceName:string;
    code:string;
    icon:string;
  };
  @Prop(String) title!: String;

  @Provide() dialogTableVisible: Boolean = false;

  @Provide() rules: any = {
    resourceName: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    url: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    method: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
  };

  //取消事件要在父级取消是所以用到 $emit
  confirmFun(formName: string) {
    let that = this,params = Object.assign({resourceType:'REST-API'}, that.editForm);
    // console.log(params)
    // return
    (that as any).$refs[formName].validate((valid: boolean) => {
      if (valid) {
        (that as any).$axios
          .post(`/resource/addOrEditResourcesInfo`,params )
          .then((res: any) => {
            if( res.code == 0 ){
              (that as any).$emit("dialogFun");
              (that as any).$message({
                message: "操作成功！",
                type: "success"
              });
              that.$emit("refreshTableData"); //刷新表格
            }
          });
      } else {
        return false;
      }
    });
  }
  created() {
    
  }
}
</script>
