<template>
    <div class="app-container">
      <Form :formList="formList" :config="this.paramsData && this.paramsData.readonly ? {labelWidth: '140px', buttonGroup: []} : {labelWidth: '140px'}" :ruleFormData="ruleForm" @fnClick="callback"></Form>
      <div v-if="this.paramsData && this.paramsData.readonly">
        <p style="font-size: 1rem;font-weight: 500;border-bottom: 1px solid #ddd;">接口备注信息</p>
        <TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="tableList" @fnClick="callback">
          <template #tempChange="{ row, column }">
            <div>
              <!-- 非编辑状态：显示文本 -->
              <template v-if="!row.editStatus">
                <span>{{ row.interfaceRemark }}</span>
                <el-button icon="el-icon-edit" type="text" @click="rowDataChange(row)"></el-button>
              </template>
              <template v-else>
                <!-- 编辑状态：显示输入框 -->
                <el-col :span="16">
                  <el-input v-model="row.interfaceRemark" size="mini"></el-input>
                </el-col>
                <el-col :span="8">
                  <el-button size="mini" type="primary" @click="submit(row)">确定</el-button>
                  <el-button size="mini" @click="cancel(row)">取消</el-button>
                </el-col>
              </template>
            </div>
          </template>
        </TableList>
      </div>
      <el-button v-if="this.paramsData && this.paramsData.readonly" style="float: right;margin-top: 12px;margin-left: 10px;" @click="callback({fnCode: 'cancel'})">返回</el-button>
    </div>
</template>

<script setup>
  import Form from '@/components/form/index.vue';
  import TableList from '@/components/table/index.vue';
  import {addSwitchManage, getSwitchManage, updateSwitchManage,updateSwitchInterface, delSwitchInterface} from "@/api/disRevenue/resource"
  export default {
    name: 'RegisterHandle',
    components: {Form, TableList},
    dicts: ['switch_type', 'rm_register_online_state','rm_register_version', 'rm_register_security_level', 'rm_register_permission', 'rm_register_encryption'],
    data() {
      return {
        ruleForm: {
          switchType: '1',
          snmpVersion: '1',
          securityLevel: '2',
          readWritePermission: '2',
          encryptionMethod: '2',
          heartbeatCount: '3次',
          heartbeatInterval: '30s',
          heartbeatOid: '1.3.6.1.2.1.1.5',
        },
        formList: [],
        paramsData: {},
        tableList: [],
        // 列显隐信息
        columns: {
          id: { label: `ID`,width: '80'},
          interfaceName: { label: `接口名称`, visible: true, minWidth: '200'},
          interfaceRemark: { label: `接口备注`, slotName: 'tempChange', visible: true, minWidth: '250'},
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          total: 0
        },
        editStatus: false,
        config: {
          colTopHiddenIcon: true, colHiddenCheck: true,
          tableButton: {
            line: [
              {content: '删除', fnCode: 'delete', type: 'text', icon: 'el-icon-delete'},
            ]
          }
        },
      }
    },
    created() {
      this.paramsData = this.$route && this.$route.query;
      if (this.paramsData && this.paramsData.id) {
        this.getFormDataList(this.paramsData.id);
      } else {
        this.fnFormList(this.ruleForm);
      }
    },
    methods: {
      rowDataChange(row) {
        this.$set(row, 'editStatus', true);
      },
      // getList(){
      //   listHandle(this.addDateRange(this.queryParams)).then(response => {
      //     this.tableList = response.rows;
      //     this.queryParams.total = response.total;
      //   })
      // },
      // formList集合
      fnFormList(objVal) {
        this.formList = [{
          config: {title: '基本信息', readonly: this.paramsData && this.paramsData.readonly},
          controls: {
            id: {label: 'ID',hidden: true},
            switchName: {label: '交换机名称', span: 12, type: 'input', required: true},
            hardwareSn: {label: '硬件SN', span: 12, type: 'input'},
            heartbeatCount: {label: '交换机心跳检测次数', span: 12, type: 'input', disabled: true},
            heartbeatInterval: {label: '交换机心跳检测周期', span: 12, type: 'input', disabled: true},
            heartbeatOid: {label: '交换机心跳检测OID', span: 12, type: 'input', disabled: true},
            switchType: {label: '交换机类型', span: 12, type: 'select', eventName: 'change', required: true, options: this.dict.type.switch_type},
            snmpVersion: {label: 'SNMP版本', span: 12, type: 'radio', eventName: 'change', required: true, options: this.dict.type.rm_register_version, hidden: objVal && objVal.switchType === '1' ? false : true},
            readWritePermission: {label: '读写权限', span: 12, type: 'radio', options: this.dict.type.rm_register_permission, hidden: objVal && objVal.switchType === '1' ? false : true},
            securityLevel: {label: '安全级别', span: 12, type: 'radio', options: this.dict.type.rm_register_security_level, hidden: objVal && objVal.snmpVersion === '1' ? true : false},
            encryptionMethod: {label: '加密方式', span: 12, type: 'radio', options: this.dict.type.rm_register_encryption, hidden: objVal && objVal.snmpVersion === '1' ? true : false},
            communityName: {label: '团体名称', span: 12, type: 'input',hidden: objVal && objVal.switchType === '1' ? false : true},
            snmpAddress: {label: 'SNMP采集地址', span: 12, type: 'input',required: true, hidden: objVal && objVal.switchType === '1' ? false : true},
            snmpPort: {label: 'SNMP采集端口', span: 12, type: 'input',required: true, hidden: objVal && objVal.switchType === '1' ? false : true},
            switchUser: {label: '用户名', span: 12, type: 'input', hidden: objVal && objVal.snmpVersion === '1' ? true : false},
            switchPassword: {label: '密码', span: 12, type: 'input', hidden: objVal && objVal.snmpVersion === '1' ? true : false},
            updateTime: {label: '修改时间', span: 12, type: 'datetime', hidden: this.paramsData && this.paramsData.readonly ? false : true},
            createTime: {label: '创建时间', span: 12, type: 'datetime', hidden: this.paramsData && this.paramsData.readonly ? false : true},
            onlineStatus: {label: '在线状态', span: 12, type: 'select', options: this.dict.type.rm_register_online_state, hidden: this.paramsData && this.paramsData.readonly ? false : true},
            upTime: {label: '上机时间', span: 12, type: 'datetime', hidden: this.paramsData && this.paramsData.readonly ? false : true},
          }
        }];
      },
      // 获取详情
      getFormDataList(id) {
        getSwitchManage(id).then(val => {
          if (val && val.data) {
            // val.data['switchType'] = val.data['switchType'] && val.data['switchType'].toString();
            this.ruleForm = val && val.data;
            this.fnFormList(this.ruleForm);
            if(this.paramsData && this.paramsData.readonly) {
              this.tableList = val.data['switchInterfaceInfoList'];
            }
          }
        }).catch(() => {
          this.fnFormList(this.ruleForm);
          this.$modal.msgError("操作失败")
        });
      },
      // 列表上修改名称
      submit(rowData) {
        this.$set(rowData, 'editStatus', false);
        updateSwitchInterface(rowData).then(response => {
          this.$modal.msgSuccess(response.msg);
          this.$set(rowData, 'editStatus', false);
          this.getFormDataList(this.paramsData.id);
        }).catch(() => {
          // this.$modal.msgError("操作失败");
        });
      },
      // 取消列表修改
      cancel(rowData) {
        this.$set(rowData, 'editStatus', false);
      },
      // 监听事件
      callback(result, dataVal, selectChange) {
        // console.log('result===',result);
        if (result && result.fnCode) {
          switch (result.fnCode) {
            case 'switchType':
              if (dataVal === '1') {
                this.formList[0].controls.snmpVersion['hidden'] = false;
                this.formList[0].controls.readWritePermission['hidden'] = false;
                this.formList[0].controls.communityName['hidden'] = false;
                this.formList[0].controls.snmpAddress['hidden'] = false;
                this.formList[0].controls.snmpPort['hidden'] = false;
              } else {
                this.formList[0].controls.snmpVersion['hidden'] = true;
                this.formList[0].controls.readWritePermission['hidden'] = true;
                this.formList[0].controls.communityName['hidden'] = true;
                this.formList[0].controls.snmpAddress['hidden'] = true;
                this.formList[0].controls.snmpPort['hidden'] = true;
              }
              break;
            case 'snmpVersion':
              if (dataVal === '3') {
                this.formList[0].controls.securityLevel['hidden'] = false;
                this.formList[0].controls.encryptionMethod['hidden'] = false;
                this.formList[0].controls.switchUser['hidden'] = false;
                this.formList[0].controls.switchPassword['hidden'] = false;
              } else {
                this.formList[0].controls.securityLevel['hidden'] = true;
                this.formList[0].controls.encryptionMethod['hidden'] = true;
                this.formList[0].controls.switchUser['hidden'] = true;
                this.formList[0].controls.switchPassword['hidden'] = true;
              }
              break;
            case 'submit':
              let fnType = addSwitchManage;
              if (dataVal && dataVal.id) {
                fnType = updateSwitchManage;
              }
              fnType(dataVal).then(response => {
                this.$modal.msgSuccess(response.msg);
                this.$router.push("/resource/switchRegister");
              }).catch(() => {
                this.$modal.msgError("操作失败")
              });
              break;
            case 'cancel':
              this.$router.push("/resource/switchRegister");
              break;
            case 'delete':
              this.$modal.confirm('是否确认删除数据项？').then(function() {
                return delSwitchInterface(dataVal.id)
              }).then(() => {
                this.getFormDataList(this.paramsData.id);
                this.$modal.msgSuccess("删除成功")
              }).catch(() => {});
              break;
            default:

          }
        }
      }
    }
  }
</script>
<style>
</style>
