<template>
  <div class="w100 h100">
      <Form v-if="formList && formList.length > 0" :key="activeName" :formList="formList" :ruleFormData="dataModelList[0]" :config=" {labelWidth: '140px', buttonGroup: []}" @fnClick="callback"></Form>
  </div>
</template>

<script>
  import Form from '@/components/form/index.vue';
  import TableList from '@/components/table/index.vue';
  export default {
    name: "serRegisFormOther",
    components: {Form, TableList},
    dicts: ['frpc_connection_status','frpc_status'],
    props: {
      activeName: {
        type: String,
        default: ''
      },
      modelVal: {
        type: Array,
        default: () => []
      }
    },
    watch: {
      activeName: {
        handler(newVal) {
          // 只有值真正变化且非特定tab时才执行
          if (newVal) {
            this.$nextTick(() => {
              this.formListData(newVal);
            });
          }
        },
        deep: true,
        immediate: true
      },
      modelVal: {
        handler(newVal) {
          // 只有值真正变化且非特定tab时才执行
          if (newVal && newVal.length > 0) {
            newVal[0]['frpcConnectionStatus'] = newVal[0] && (newVal[0]['frpcConnectionStatus'] || newVal[0]['frpcConnectionStatus'] === 0) ? newVal[0]['frpcConnectionStatus'].toString() : newVal[0]['frpcConnectionStatus'];
            newVal[0]['frpcStatus'] = newVal[0] && (newVal[0]['frpcStatus'] || newVal[0]['frpcStatus'] === 0) ? newVal[0]['frpcStatus'].toString() : newVal[0]['frpcStatus'];
            let newModel = JSON.parse(JSON.stringify(newVal[0]));
            this.$set(this.dataModelList, 0, newModel);
          }
        },
        deep: true,
        immediate: true
      },
    },
    data() {
      return {
        activeShowList: [0,1,2,3,4,5,6,7,8,9],
        dataModelList: [],
        formList: [],
      }
    },
    created() {
    },
    methods: {
      // 网卡信息
      formListData(val){
        this.formList = [];
        if (val === '网卡信息') {
          this.formList = [{
            config: {title: '', readonly: true},
            controls: {
              id: {label: 'ID',hidden: true},
              ip1Isp: {label: 'IP1-运营商', span: 8, type: 'input'},
              ip1Province: {label: 'IP1-省', span: 8, type: 'input'},
              ip1City: {label: 'IP1-市', span: 8, type: 'input'},
              ip1PublicIp: {label: 'IP1-业务公网', span: 8, type: 'input'},
              ip1InterfaceName: {label: 'IP1-接口名称', span: 8, type: 'input'},
              ip1MacAddress: {label: 'IP1-mac地址', span: 8, type: 'input'},
              ip1InterfaceType: {label: 'IP1-接口类型', span: 8, type: 'input'},
              ip1Ipv4Address: {label: 'IP1-IPv4地址', span: 8, type: 'input'},
              ip1Gateway: {label: 'IP1-网关', span: 8, type: 'input'},
              ip2Isp: {label: 'IP2-运营商', span: 8, type: 'input'},
              ip2Province: {label: 'IP2-省', span: 8, type: 'input'},
              ip2City: {label: 'IP2-市', span: 8, type: 'input'},
              ip2PublicIp: {label: 'IP2-业务公网', span: 8, type: 'input'},
              ip2InterfaceName: {label: 'IP2-接口名称', span: 8, type: 'input'},
              ip2MacAddress: {label: 'IP2-mac地址', span: 8, type: 'input'},
              ip2InterfaceType: {label: 'IP2-接口类型', span: 8, type: 'input'},
              ip2Ipv4Address: {label: 'IP2-IPv4地址', span: 8, type: 'input'},
              ip2Gateway: {label: 'IP2-网关', span: 8, type: 'input'},
              ip3Isp: {label: 'IP3-运营商', span: 8, type: 'input'},
              ip3Province: {label: 'IP3-省', span: 8, type: 'input'},
              ip3City: {label: 'IP3-市', span: 8, type: 'input'},
              ip3PublicIp: {label: 'IP3-业务公网', span: 8, type: 'input'},
              ip3InterfaceName: {label: 'IP3-接口名称', span: 8, type: 'input'},
              ip3MacAddress: {label: 'IP3-mac地址', span: 8, type: 'input'},
              ip3InterfaceType: {label: 'IP3-接口类型', span: 8, type: 'input'},
              ip3Ipv4Address: {label: 'IP3-IPv4地址', span: 8, type: 'input'},
              ip3Gateway: {label: 'IP3-网关', span: 8, type: 'input'},
              mgmtIsp: {label: '管理网-运营商', span: 8, type: 'input'},
              mgmtProvince: {label: '管理网-省', span: 8, type: 'input'},
              mgmtCity: {label: '管理网-市', span: 8, type: 'input'},
              mgmtPublicIp: {label: '管理网-业务公网', span: 8, type: 'input'},
              mgmtInterfaceName: {label: '管理网-接口名称', span: 8, type: 'input'},
              mgmtMacAddress: {label: '管理网-mac地址', span: 8, type: 'input'},
              mgmtInterfaceType: {label: '管理网-接口类型', span: 8, type: 'input'},
              mgmtIpv4Address: {label: '管理网-IPv4地址', span: 8, type: 'input'},
              mgmtGateway: {label: '管理网-网关', span: 8, type: 'input'},
            }
          }];
        } else if (val === 'FRP信息') {
          this.formList = [{
            config: {title: '', readonly: true},
            controls: {
              id: {label: 'ID',hidden: true},
              frpcConnectionStatus: { label: `FRP连接地址生成状态`,span: 8, type: 'select', options: this.dict.type.frpc_connection_status},
              frpcCreateTime: { label: `链接生成时间`,span: 8, type: 'datetime'},
              frpcStatus: { label: `FRPC服务状态`,span: 8, type: 'select', options: this.dict.type.frpc_status},
              frpcServerAddr: { label: `FRPC_serverAddr`, span: 8, type: 'input'},
              frpcServerPort: { label: `FRPC_serverPort`,span: 8, type: 'input'},
              frpcName: { label: `FRPC_name`,span: 8, type: 'input'},
              frpcType: { label: `FRPC_tcp`,span: 8, type: 'input'},
              frpcLocalIp: { label: `FRPC_localIP`,span: 8, type: 'input'},
              frpcLocalPort: { label: `FRPC_localPort`,span: 8, type: 'input'},
            }
          }];
        }
      },
      callback(result, rowData, selectChange, selectList) {
        if (result && result.fnCode) {
          switch (result.fnCode) {
            // case 'calculate':
            //   let fnType = recalBandWidth;
            //   if (rowData && rowData.bandwidthType === '4') {
            //     fnType = avgDetailMsg;
            //   }
            //   fnType(rowData.id).then(res => {
            //     this.getList();
            //     this.$modal.msgSuccess("操作成功！");
            //   }).catch(() => {});
            //   break;
            default:
          }
        }
      },
    }
  }
</script>

<style scoped>
  ::v-deep .el-collapse-item__header {
    background-color: #d4e3fc!important;
    /*color: #fff!important;*/
    padding-left: 20px;
    font-size: 1rem;
  }
</style>
