<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 #tempHandle="{ row, column }">
            <div>
              <!-- 非编辑状态：显示文本 -->
              <template v-if="!row.editStatus">
                <span>{{ row.resourceName }}</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.resourceName" 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 name="Handle">
  import Form from '@/components/form/index.vue';
  import TableList from '@/components/table/index.vue';
  import {addHandle, getHandle, updateHandle,listHandle, delTopology} from "@/api/disRevenue/resource"
  export default {
    name: 'RegisterHandle',
    components: {Form, TableList},
    dicts: ['rm_register_resource_type', 'rm_register_online_state','rm_register_version', 'rm_register_security_level', 'rm_register_permission', 'rm_register_encryption'],
    data() {
      return {
        ruleForm: {
          resourceVersion: '1',
          securityLevel: '2',
          rwPermission: '2',
          encryption: '2',
          switchNum: '3次',
          switchWeek: '5秒',
          switchOID: '1.3.6.1.2.1.1.5',
          // agentWeek: '5秒',
          // agentNum: '3次',
          // agentOID: '1.3.6.1.2.1.1.5'
        },
        formList: [],
        paramsData: {},
        tableList: [],
        // 列显隐信息
        columns: {
          id: { label: `ID`,width: '80'},
          resourceName: { label: `接口名称`, slotName: 'tempHandle', visible: true, minWidth: '200'},
          hardwareSn: { label: `接口备注`, 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);
      }
      if(this.paramsData && this.paramsData.readonly) {
        this.getList();
      }
    },
    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'},
            switchNum: {label: '交换机心跳检测次数', span: 12, type: 'input', disabled: true},
            switchWeek: {label: '交换机心跳检测周期', span: 12, type: 'input', disabled: true},
            switchOID: {label: '交换机心跳检测OID', span: 12, type: 'input', disabled: true},
            resourceVersion: {label: 'SNMP版本', span: 12, type: 'radio', eventName: 'change', required: true, options: this.dict.type.rm_register_version},
            rwPermission: {label: '读写权限', span: 12, type: 'radio', options: this.dict.type.rm_register_permission},
            securityLevel: {label: '安全级别', span: 12, type: 'radio', options: this.dict.type.rm_register_security_level, hidden: objVal && objVal.resourceVersion === '1' ? true : false},
            encryption: {label: '加密方式', span: 12, type: 'radio', options: this.dict.type.rm_register_encryption, hidden: objVal && objVal.resourceVersion === '1' ? true : false},
            teamName: {label: '团体名称', span: 12, type: 'input'},
            snmpCollectAddr: {label: 'SNMP采集地址', span: 12, type: 'input',required: true},
            snmpCollectPort: {label: 'SNMP采集端口', span: 12, type: 'input',required: true},
            resourceUserName: {label: '用户名', span: 12, type: 'input', hidden: objVal && objVal.resourceVersion === '1' ? true : false},
            resourcePwd: {label: '密码', span: 12, type: 'input', hidden: objVal && objVal.resourceVersion === '1' ? true : false},
            updateTime: {label: '修改时间', span: 12, type: 'date', hidden: this.paramsData && this.paramsData.readonly ? false : true},
            createTime: {label: '创建时间', span: 12, type: 'date', 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},
            resourceType: {label: '交换机类型', span: 12, type: 'select', required: true, options: this.dict.type.rm_register_resource_type},
            showTime: {label: '上机时间', span: 12, type: 'date', hidden: this.paramsData && this.paramsData.readonly ? false : true},
          }
        }];
      },
      // 获取详情
      getFormDataList(id) {
        getHandle(id).then(val => {
          this.ruleForm = val && val.data;
          this.fnFormList(this.ruleForm);
        }).catch(() => {
          this.fnFormList(this.ruleForm);
          this.$modal.msgError("操作失败")
        });
      },
      submit(rowData) {
        this.$set(rowData, 'editStatus', false);
        // updateHandle(rowData).then(response => {
        //   this.$set(rowData, 'editStatus', false);
        //   this.getList();
        //   this.$modal.msgSuccess(response.msg);
        // }).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 'resourceVersion':
              if (dataVal === '2') {
                this.formList[0].controls.securityLevel['hidden'] = false;
                this.formList[0].controls.encryption['hidden'] = false;
                this.formList[0].controls.resourceUserName['hidden'] = false;
                this.formList[0].controls.resourcePwd['hidden'] = false;
              } else {
                this.formList[0].controls.securityLevel['hidden'] = true;
                this.formList[0].controls.encryption['hidden'] = true;
                this.formList[0].controls.resourceUserName['hidden'] = true;
                this.formList[0].controls.resourcePwd['hidden'] = true;
              }
              break;
            case 'submit':
              let fnType = addHandle;
              if (dataVal && dataVal.id) {
                fnType = updateHandle;
              }
              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 delTopology(selectChange)
              }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功")
              }).catch(() => {});
              break;
            default:

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