
<!--
<create-event-base></create-event-base>

import createBase from '@/components/api/create-event-base.vue';
-->
<template>
  <div class="base-info-show border-box">
    <el-form
      ref="baseForm"
      label-width="104px"
      :model="apiInfoData"
      :rules="rules">
      <el-form-item
        label="API名称:"
        prop="interfaceName">
        <limit-input
          :input-width="329"
          :disflag="$route.query.interfaceId ? true : false"
          :input-value.sync="apiInfoData.interfaceName"
          :holder="'请输入API名称'"
          :get-by-type="'word'"
          :max-length="20" />
      </el-form-item>
      <el-form-item
        label="配置code:"
        prop="code">
        <limit-input
          :input-width="329"
          :disflag="$route.query.interfaceId ? true : false"
          :input-value.sync="apiInfoData.code"
          :holder="'请输入配置code'"
          :get-by-type="'char'"
          :max-length="50" />
      </el-form-item>
      <el-form-item label="描述:">
        <limit-textarea
          :input-width="500"
          :dis-input="$route.query.interfaceId ? true : false"
          :input-value.sync="apiInfoData.interfaceDescribe"
          :holder="''"
          :get-by-type="'word'"
          :max-length="100" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('baseForm')">
          下一步
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import limitTextarea from '@/components/limit-textarea.vue';
import limitInput from '@/components/limit-input.vue';
import { getRequest } from '@/api/api';
// import showMsg from '@/assets/js/showmsg';
import errMsg from '@/assets/js/error';
export default {
  name: 'CreateEventBase',
  components: {
    limitTextarea,
    limitInput
  },

  data() {
    return {
      apiInfoData: {
        interfaceId: '',
        interfaceVersionId: '',
        interfaceName: '',
        interfaceDescribe: '',
        code: ''
      },
      rules: {
        interfaceName: [ { required: true, message: '请输入API名称', trigger: 'blur' } ],
        code: [ { required: true, message: '请输入配置code', trigger: 'blur' } ]
      }
    };
  },
  mounted() {
    const that = this;
    /* eslint-disable */
    console.log(that.$route.query.interfaceId);
    console.log(that.$store.state.baseEventInfo);
    let baseEventInfo = that.$store.state.baseEventInfo || {}
    if (that.$route.query.interfaceId && !Object.keys(baseEventInfo).length) {
      that.getData();
    }
    if (Object.keys(baseEventInfo).length) {
      that.apiInfoData = that.$store.state.baseEventInfo;
    }
  },
  methods: {
    submitForm(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
            // if (formName == 'baseForm') {
            that.$emit('submitNext', that.apiInfoData);
            that.$store.dispatch('saveBaseEventInfo', that.apiInfoData);
            // }
        } else {
          return false;
        }
      });
    },
    /**
     *  获取数据
     */
    getData() {
      const that = this;
      let para = {
        interfaceId: that.$route.query.interfaceId,
        interfaceVersionId: that.$route.query.interfaceVersionId
      };
      getRequest('/gateway-manage/get-api', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            resData.result.resultParams = JSON.parse(resData.result.resultParams);
            that.apiInfoData.interfaceId = resData.result.interfaceId;
            that.apiInfoData.interfaceVersionId = resData.result.interfaceVersionId;
            that.apiInfoData.interfaceName = resData.result.interfaceName;
            that.apiInfoData.code = resData.result.code;
            that.apiInfoData.interfaceDescribe = resData.result.interfaceDescribe;
            that.$store.dispatch('saveFieldEventInfo', resData.result);
            that.$nextTick(() => {
              that.submitForm('baseForm');
            });
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  }
};
</script>
<style lang="less" scoped>
.w-320 {
  width: 320px;
}
.m-t-14 {
  margin-top: 14px;
}
.w-329 {
  width: 329px;
}
.base-info-show {
  width: 100%;
  margin-top: 56px;
  .el-form {
    /deep/ .el-form-item__label {
      color: #606266;
    }
    /deep/ .el-form-item__content {
      color: #303133;
    }
  }
}
</style>
