<template>
  <dialogBox :title="editFlag ? '编辑接口信息' : '新增接口信息'" @submitForm="submitForm" saveButton="保存" width="50%" :isFullscreen="false"
    @closeDialog="closeDialog" v-model="value">
    <div>
      <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="接口代码:" prop="interfaceCode">
              <el-input v-model="ruleForm.interfaceCode" :disabled="editFlag"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接口名称:" prop="interfaceService">
              <el-input v-model="ruleForm.interfaceService"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="接口地址:" prop="interfaceApi">
              <el-input v-model="ruleForm.interfaceApi"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="接口方式:" prop="interfaceMethod">
              <el-select v-model="ruleForm.interfaceMethod" class="width100" placeholder="请选择">
                <el-option v-for="item in interfaceMethods" :key="item" :label="item" :value="item" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接口类型:" prop="interfaceType">
              <el-select v-model="ruleForm.interfaceType" class="width100" placeholder="请选择">
                <el-option v-for="item in interfaceTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="接口密钥:" prop="interfaceKey">
              <el-input v-model="ruleForm.interfaceKey"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="接口描述:" prop="interfaceDescription">
              <el-input v-model="ruleForm.interfaceDescription" type="textarea" :rows="4"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </dialogBox>
</template>

<script>
import { addSysInterface, editSysInterface} from "@/api/jkfw.js"
export default {
  components: {
  },
  computed: {
  },
  props: {
    value: { type: Boolean, default: false },
    editFlag: {type: Boolean,default:false}
  },
  data () {
    return {
      //表单提交数据
      interfaceMethods: ['webapi','webservice'],
      interfaceTypes: [
          {'label': '工作流服务平台','value':'1'},
          {'label': '权限平台','value':'2'},
          {'label': '定时器服务','value':'3'},
          {'label': '其他第三方平台','value':'4'},
      ],
      ruleForm: {
        interfaceCode: '',
        interfaceService: '',
        interfaceDescription: '',
        interfaceApi: '',
        interfaceMethod: '',
        interfaceType: '',
        interfaceKey: '',
      },
      rules: {
        interfaceCode: [
          { required: true, message: '接口代码不能为空', trigger: 'blur' }
        ],
        interfaceService: [
          { required: true, message: '接口服务名称不能为空', trigger: 'blur' }
        ],
        interfaceApi: [
          { required: true, message: '接口api地址不能为空', trigger: 'blur' }
        ],
        interfaceMethod: [
          { required: true, message: '接口方式不能为空', trigger: 'change' }
        ],
        interfaceType: [
          { required: true, message: '入库编号不能为空', trigger: 'change' }
        ],
      },
    }
  },
  methods: {
    //表单提交
    submitForm () {
      let that = this;
      that.$refs.ruleForm.validate(valid => {
        if (valid) {
            if(this.editFlag){
                this.editInterface();
            }else{
                this.addInterface();
            }
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    //新增接口
    addInterface(){
        addSysInterface(this.ruleForm).then(res => {
            if(res.code == 200){
                this.$message.success("保存成功");
                this.closeDialog();
                this.$parent.queryClick();
            }else{
                this.$message.error(res.message)
            }
        })
    },
    //编辑接口
    editInterface(){
        editSysInterface(this.ruleForm).then(res => {
            if(res.code == 200){
                this.$message.success("编辑成功");
                this.closeDialog();
                this.$parent.queryClick();
            }else{
                this.$message.error(res.message)
            }
        })
    },
    //获取详情
    getDetailInfo(item){
      this.ruleForm = item
    },
    //关闭弹窗
    closeDialog () {
      this.$emit("input", false);
      this.ruleForm = {
        interfaceCode: '',
        interfaceService: '',
        interfaceDescription: '',
        interfaceApi: '',
        interfaceMethod: '',
        interfaceType: '',
        interfaceKey: '',
      }
    }
  }
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
</style>