<template>
  <div>
    <h3 style="color: #1482f0">接口详情:{{api.productName}}</h3>
    <el-divider></el-divider>
    {{api}}
    <center>
      <el-form :model="api" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="序号" prop="productId" style="width: 70%">
          <el-input type="text" v-model="api.productId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="接口名称" prop="productName" style="width: 70%">
          <el-input type="text" v-model="api.productName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="接口类型" prop="productType" style="width: 70%">
          <el-input type="text" v-model="api.productType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="接口描述" prop="productContent" style="width: 70%">
          <el-input type="text" v-model="api.productContent" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="接口销量" prop="productSales" style="width: 70%">
          <el-input type="text" v-model="api.productSales" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="接口价格" prop="productPrice" style="width: 70%">
          <el-input type="text" v-model="api.productPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="接口来源" prop="productFrom" style="width: 70%">
          <el-input type="text" v-model="api.productFrom" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="重要路由" prop="apiRouter" style="width: 70%">
          <el-input type="text" v-model="api.apiRouter" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="接口地址" prop="apiAddress" style="width: 70%">
          <el-input type="text" v-model="api.apiAddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="返回格式" prop="returnFormat" style="width: 70%">
          <el-input type="text" v-model="api.returnFormat" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="请求方式" prop="requestMethod" style="width: 70%">
          <el-input type="text" v-model="api.requestMethod" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(api)">修改</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </center>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
  import {resetForm} from "@/utils/muyu";
import {apiupdmessage} from "@/api/background/apimanage";

export default {
    name: "Apiupdmessage",
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"
      return {
        api:{}
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      resetForm,
      submitForm(api){
        apiupdmessage(api).then(response=>{
          alert(response.msg)
          if (response.code==200){
            this.$router.push("/apimanage/index")
          }
        })
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
      this.api = this.$route.query.api
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
