<template>
  <div class="app-container">
    <Form :formList="formList" :ruleFormData="ruleForm" :config="paramsData && paramsData.readonly ? config : {}" @fnClick="callback"></Form>
  </div>
</template>

<script setup name="Handle">
  import Form from '@/components/form/index.vue';
  import {getMFrpcConfig, updateFrpcPortMapping, frpcPortMappingList} from "@/api/disRevenue/resource"
  export default {
    name: 'frpServerDetails',
    dicts: ['frpc_connection_status', 'frpc_status'],
    components: {Form},
    data() {
      return {
        ruleForm: {},
        formList: [],
        config: {
          buttonGroup: [{title: '返回', fnCode: 'goBack'}]
        },
        paramsData: {}
      }
    },
    created() {
      this.paramsData = this.$route && this.$route.query;
      if (this.paramsData && this.paramsData.id) {
        this.getFormDataList(this.paramsData.id);
      } else {
        this.getFrpcMapping();
      }
      this.fnFormList();
    },
    methods: {
      // formList集合
      fnFormList(objVal) {
        if (this.paramsData && this.paramsData.readonly) {
          this.formList = [{
            config: {title: '基本信息', readonly: true},
            controls: {
              id: {label: 'ID',hidden: true},
              mgmtPublicIp:{ label: `管理网-公网IP`,span: 12, type: 'input'},
              mgmtInterfaceName: { label: `管理网-接口名称`, span: 12, type: 'input'},
              mgmtMacAddress: { label: `管理网-mac地址`, span: 12, type: 'input'},
              mgmtInterfaceType: { label: `管理网-接口类型`, span: 12, type: 'input'},
              mgmtIpv4Address: { label: `管理网-IPv4地址`, span: 12, type: 'input'},
              mgmtGateway: { label: `管理网-网关`, span: 12, type: 'input'},
              frpcCreateTime: { label: `链接生成时间`,span: 12, type: 'datetime'},
              frpcRemotePort: { label: `FRPC_remotePort`,span: 12, type: 'input'},
              frpcServerPort: { label: `FRPC_serverPort`,span: 12, type: 'input'},
              frpcServerAddr: { label: `FRPC_serverAddr`, span: 12, type: 'input'},
              frpcType: { label: `FRPC_tcp`,span: 12, type: 'input'},
              frpcName: { label: `FRPC_name`,span: 12, type: 'input'},
              frpcLocalIp: { label: `FRPC_localIP`,span: 12, type: 'input'},
              frpcLocalPort: { label: `FRPC_localPort`,span: 12, type: 'input'},
              frpcConnectionStatus: { label: `FRP连接地址生成状态`,span: 12, type: 'select', options: this.dict.type.frpc_connection_status},
              createTime: {label: '创建时间', span: 12, type: 'datetime'},
              frpcStatus: {label: 'FRPC服务状态', span: 12, type: 'select', options: this.dict.type.frpc_status},
            }
          }];
        } else {
          this.formList = [{
            config: {title: '基本信息', colSpan: 'disBlock'},
            controls: {
              id: {label: 'ID',hidden: true},
              startRemotePort: {label: '服务器端口范围', span: 12, type: 'number',controls: false, min: 1, max: 65535, placeholder:'请输入数字', controlsList: [{value: 'endRemotePort', connect: '～', min: 1, max: 65535}]},
              serverAddr: {label: '服务器地址', span: 12, type: 'input'},
              serverPort: {label: '服务器端口', span: 12, type: 'number', controls: false},
            }
          }];
        }
      },
      // 获取详情
      getFormDataList(id) {
        getMFrpcConfig(id).then(res => {
          if (res && res.data) {
            res.data['frpcConnectionStatus'] = res.data['frpcConnectionStatus'].toString();
            this.ruleForm = res && res.data;
          }
        });
      },
      getFrpcMapping() {
        frpcPortMappingList({}).then(res => {
          this.ruleForm = res && res.data[0];
        });
      },
      // 监听事件
      callback(result, dataVal, formVal) {
        if (result && result.fnCode) {
          switch (result.fnCode) {
            case 'submit':
              updateFrpcPortMapping(dataVal).then(res => {
                this.$modal.msgSuccess(res.msg);
                this.$router.push("/resource/frpServerManage");
              });
              break;
            case 'cancel':
              this.$router.push("/resource/frpServerManage");
              break;
            default:
          }
        }
      }
    }
  }
</script>
<style>
</style>
