<template>
    <div class="app-container">
        <Form ref="formRef" :formList="formList" :ruleFormData="ruleForm" :config="{labelWidth: '140px'}" @fnClick="callback"></Form>
    </div>
</template>

<script setup>
  import Form from '@/components/form/index.vue';
  import {listAllSwitchName, resNameBtType, addTopology, getTopology, updateTopology, postInterFaceName,getRegistList} from "@/api/disRevenue/resource"
  export default {
    name: 'TopologyDetails',
    components: {Form},
    dicts: ['rm_topology_type'],
    data() {
      return {
        loading: false,
        ruleForm: {},
        formList: [],
        paramsData: {},
        switchNameList: [],
        serverNameList: [],
        serverPortList: [],
        interfaceNameList: [],
        formModel: {},
      }
    },
    created() {
      this.paramsData = this.$route && this.$route.query;
      if (this.paramsData && this.paramsData.id) {
        this.getFormDataList(this.paramsData.id);
      } else {
        this.switchList();
        // this.fnServerNameList();
        this.fnFormList();
      }

    },
    methods: {
      // formList集合
      fnFormList(objVal) {
        this.formList = [{
          config: {title: '基本信息',labelWidth: '140px'},
          controls: {
            id: {label: 'ID',hidden: true},
            clientId: {label: '交换机名称', span: 12, type: 'select', eventName: 'change', options:[], required: true},
            interfaceName: {label: '接口名称', span: 12, type: 'select', options:[],required: true},
            connectedDeviceType: {label: '接口连接设备类型', span: 12, type: 'radio', eventName: 'change', options:this.dict.type.rm_topology_type, required: true},
            serverClientId: {label: '服务器ClientID', span: 12, eventName: 'change', options:[], type: 'select', hidden: this.ruleForm.connectedDeviceType === '1' ? false : true},
            serverPort: {label: '服务器网口', span: 12, options:[], type: 'select', hidden: this.ruleForm.connectedDeviceType === '1' ? false : true},
            peerSwitchName: {label: '对端交换机名称', span: 12, options:[], type: 'select', eventName: 'change', hidden: this.ruleForm.connectedDeviceType === '3' || this.ruleForm.connectedDeviceType === '4' ? false : true},
            peerSwitchInterface: {label: '对端交换机端口', span: 12, options:[], type: 'select', hidden: this.ruleForm.connectedDeviceType === '3' || this.ruleForm.connectedDeviceType === '4' ? false : true},
          }
        }];
      },
      // 获取交换机下拉
      switchList() {
        listAllSwitchName({}).then(val => {
          if(val && val.data) {
            this.switchNameList = val && val.data;
            let newDataList = val && val.data.map(item => {
              if (this.paramsData && this.paramsData.id) {
                if (item.clientId === this.ruleForm.clientId) {
                  this.fnInterFaceNameList({clientId: item.clientId});
                }
                if (item.clientId === this.ruleForm.peerSwitchName) {
                  this.fnInterFaceNameList({clientId: item.clientId}, '1');
                }
              }
              return Object.assign({label: item.switchName, value: item.clientId});
            });
            this.formList[0].controls.clientId['options'] = newDataList;
            this.formList[0].controls.peerSwitchName['options'] = newDataList;
          }
        });
      },
      // 接口名称
      fnInterFaceNameList(val, num) {
        postInterFaceName(Object.assign({},{resourceType: 2}, val)).then(res => {
          this.interfaceNameList = res;
          let newDataList = res && res.map(item => {
            return Object.assign({label: item.interfaceName, value: item.interfaceName});
          });
          this.formList[0].controls.interfaceName['options'] = newDataList;
          if (num === '1') {
            this.formList[0].controls.peerSwitchInterface['options'] = newDataList;
          }
        });
      },
      // 获取服务器下拉
      fnServerNameList(){
        getRegistList({resourceType: 1}).then(val => {
          this.serverNameList = val && val.data;
          this.formList[0].controls.serverClientId['options'] = val && val.data.map(item => {
            if (this.paramsData && this.paramsData.id) {
              if (item.clientId === this.ruleForm.serverClientId) {
                this.fnServerPortList({clientId: item.clientId});
              }
            }
            return Object.assign({label: item.clientId, value: item.clientId});
          });
        });
      },
      // 服务器网口
      fnServerPortList(val) {
        postInterFaceName(Object.assign({},{resourceType: 1}, val)).then(res => {
          this.serverPortList = res;
          this.formList[0].controls.serverPort['options'] = res && res.map(item => {
            return Object.assign({label: item.interfaceName, value: item.interfaceName});
          });
        });
      },
      // 获取详情
      getFormDataList(id) {
        getTopology(id).then(val => {
          this.ruleForm = val && val.data;
          this.formModel = JSON.parse(JSON.stringify(val && val.data));
          this.switchList();
          if (this.ruleForm.connectedDeviceType && this.ruleForm.connectedDeviceType === '1') {
            this.fnServerNameList();
          }
          this.fnFormList();
        }).catch(() => {
          this.$modal.msgError("操作失败")
        });
      },
      // 监听事件
      callback(result, dataVal, formVal) {
        if (result && result.fnCode) {
          switch (result.fnCode) {
            case 'connectedDeviceType':
              if (dataVal && dataVal === '1') {
                this.formList[0].controls.serverClientId['hidden'] = false;
                this.formList[0].controls.serverPort['hidden'] = false;
                this.formList[0].controls.peerSwitchName['hidden'] = true;
                this.formList[0].controls.peerSwitchInterface['hidden'] = true;
                this.fnServerNameList();
              } else if (dataVal && (dataVal === '3' || dataVal === '4')) {
                this.formList[0].controls.peerSwitchInterface['options'] = [];
                if (this.formModel.connectedDeviceType != dataVal) {
                  this.ruleForm.peerSwitchName = '';
                  this.ruleForm.peerSwitchInterface = '';
                } else {
                  this.ruleForm.peerSwitchName = this.formModel.peerSwitchName;
                  this.ruleForm.peerSwitchInterface = this.formModel.peerSwitchInterface;
                }
                this.ruleForm.connectedDeviceType = dataVal;
                this.formList[0].controls.serverClientId['hidden'] = true;
                this.formList[0].controls.serverPort['hidden'] = true;
                this.formList[0].controls.peerSwitchName['hidden'] = false;
                this.formList[0].controls.peerSwitchInterface['hidden'] = false;
              } else {
                this.formList[0].controls.serverClientId['hidden'] = true;
                this.formList[0].controls.serverPort['hidden'] = true;
                this.formList[0].controls.peerSwitchName['hidden'] = true;
                this.formList[0].controls.peerSwitchInterface['hidden'] = true;
              }
              break;
            case 'clientId':
              this.ruleForm = Object.assign({}, this.ruleForm, this.$refs.formRef.$refs.ruleForm.model);
              let clientId = '';
              this.switchNameList.find(item => {
                if (item.clientId === dataVal) {
                  clientId = item.clientId;
                }
              });
              this.ruleForm['interfaceName'] = '';
              this.fnInterFaceNameList({clientId: clientId});
              break;
            case 'peerSwitchName':
              this.ruleForm = Object.assign({}, this.ruleForm, this.$refs.formRef.$refs.ruleForm.model);
              let peerVal = '';
              this.switchNameList.find(item => {
                if (item.clientId === dataVal) {
                  peerVal = item.clientId;
                }
              });
              this.ruleForm['peerSwitchInterface'] = '';
              this.fnInterFaceNameList({clientId: peerVal}, '1');
              break;
            case 'serverClientId':
              if (dataVal) {
                // let serverIp = '';
                // this.serverNameList.find(item => {
                //   if (item.clientId === dataVal) {
                //     serverIp = item.ipAddress;
                //   }
                // });
                this.fnServerPortList({clientId: dataVal});
              }
              break;
            case 'submit':
              this.switchNameList.find(item => {
                if (item.clientId === dataVal['clientId']) {
                  dataVal['switchName'] = item.switchName;
                }
              });
              this.serverNameList.find(item => {
                if (item.clientId === dataVal['serverClientId']) {
                  dataVal['serverClientId'] = item.clientId;
                  dataVal['serverSn'] = item.hardwareSn;
                }
              });
              this.serverPortList.find(item => {
                if (item.id === dataVal['serverPort'] || item.interfaceName === dataVal['serverPort']) {
                  dataVal['serverPort'] = item.interfaceName;
                }
              });
              this.interfaceNameList.find(item => {
                if (item.id === dataVal['interfaceName'] || item.interfaceName === dataVal['interfaceName']) {
                  dataVal['interfaceName'] = item.interfaceName;
                }
              });
              let fnType = addTopology;
              if (dataVal && dataVal.id) {
                fnType = updateTopology;
              }
              if(this.loading) return;
              this.loading = true;
              fnType(dataVal).then(response => {
                this.$modal.msgSuccess(response.msg);
                this.$router.push("/resource/topology");
                this.loading = false;
              }).catch(() => {
                this.$modal.msgError("操作失败")
              });
              break;
            case 'cancel':
              this.$router.push("/resource/topology");
              break;
            default:
          }
        }
      }
    }
  }
</script>
<style scoped>
  ::v-deep .el-radio {
    margin-right: 15px!important;
  }
</style>
