<template>
  <div class="app-container mt20">
    <Form :formList="formList" :ruleFormData="ruleForm" :config="paramsData && paramsData.readonly === 'true' ? {buttonGroup: []} : {}" @fnClick="callback"></Form>
    <div v-if="paramsData && paramsData.readonly === 'true'" class="w100 mt50">
<!--      <p style="font-size: 1.2rem;font-weight: 500;border-bottom: 1px solid #e7e7e7;">{{netWorkCard.title}}</p>-->
<!--      <div v-for="item of netWorkCard.list" class="mt50">-->
<!--        <div v-for="(val,index) of item.data" style="width: 80%;margin: auto;" :class="index + 1 === item.data.length ? 'border' : 'borderType'">-->
<!--          <div style="width: 20%;border-right: 1px solid #e7e7e7;" class="ml10 disInlineBlock"><p>{{val.name}}</p></div>-->
<!--          <p style="width: 75%" class="ml10 disInlineBlock">{{val.content}}</p>-->
<!--        </div>-->
<!--      </div>-->
      <p style="font-size: 1.2rem;font-weight: 500;border-bottom: 1px solid #e7e7e7;">命令执行结果</p>
      <el-timeline reverse="true">
        <el-timeline-item v-for="item of timelineList" :timestamp="item.createTime" placement="top">
          <pre>{{item.content}}</pre>
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-button v-if="paramsData && paramsData.readonly === 'true'" type="primary" class="mb20 mt20" style="float: right;" @click="callback({fnCode: 'cancle'})">返回</el-button>
  </div>
</template>

<script setup name="Handle">
  import Form from '@/components/form/index.vue';
  import {addGroup, getScriptResultBySn, updateGroup, resNameList} from "@/api/disRevenue/resource"
  export default {
    name: 'RemoteManageView',
    components: {Form},
    dicts: ['rm_register_online_state', 'rm_register_resource_type'],
    data() {
      return {
        ruleForm: {},
        formList: [],
        paramsData: {},
        netWorkCard: {
          title: '网卡信息',
          list: [
            {
              data: [
                {name: '接口名称', content: 'eno1(Intel Corporation Ethernet Connection X722 for 10GbE SFP+)'},
                {name: 'MAC地址', content: '7c:c3:85:b6:61:bf'},
                {name: '接口类型', content: 'Ethernet'},
                {name: 'IPv4地址', content: '172.16.15.103'}
              ]
            },
            {
              data: [
                {name: '接口名称', content: 'eno1(Intel Corporation Ethernet Connection X722 for 10GbE SFP+)'},
                {name: 'MAC地址', content: '7c:c3:85:b6:61:bf'},
                {name: '接口类型', content: 'Ethernet'},
                {name: 'IPv4地址', content: '172.16.15.103'}
              ]
            },
          ]
        },
        timelineList: [
          {content: '【服务器节点名称1】执行脚本命令', time: '2025-12-12 12:12:12'},
          {content: '【服务器节点名称1】执行脚本命令', time: '2025-12-11 12:12:12'},
          {content: '【服务器节点名称1】执行脚本命令', time: '2025-12-10 12:12:12'}
        ],
      }
    },
    created() {
      this.paramsData = this.$route && this.$route.query;
      if (this.paramsData && this.paramsData.hardwareSn) {
        this.getFormDataList(this.paramsData.hardwareSn);
      }
      this.fnFormList();
    },
    methods: {
      // formList集合
      fnFormList(objVal) {
        this.formList = [{
          config: {title: '', colSpan: 'disBlock', readonly: this.paramsData.readonly},
          controls: {
            id: {label: 'ID',hidden: true},
            hardwareSn: {label: '硬件SN', span: 12, type: 'input', disabled: true},
            resourceType: {label: '资源类型', span: 12, type: 'select', options: this.dict.type.rm_register_resource_type, disabled: false},
            resourceName: {label: '资源名称', span: 12, type: 'input', disabled: true},
            description: {label: '描述', span: 12, type: 'textarea'},
            inIp: {label: '内网IP', span: 12, type: 'input'},
            ipAddress: {label: '外网IP', span: 12, type: 'input'},
            resourcePort: {label: '管理端口', span: 12, type: 'input'},
            onlineStatus: {label: '在线状态', span: 12, type: 'select', options: this.dict.type.rm_register_online_state, disabled: true},
            md5: {label: '连接方式', span: 12, type: 'select'},
          }
        }];
      },
      // 获取详情
      getFormDataList(id) {
        getScriptResultBySn({hardwareSn: id}).then(val => {
          if (val && val.data && val.data.resourceMsg) {
            // val.data.resourceMsg.resourceType = Number(val.data.resourceMsg.resourceType);
            this.ruleForm = val.data.resourceMsg;
          }
          this.timelineList = val && val.data && val.data.scriptResult || [];
        }).catch(() => {
          this.$modal.msgError("操作失败")
        });
      },
      // 监听事件
      callback(result, dataVal, formVal) {
        if (result && result.fnCode) {
          switch (result.fnCode) {
            // case 'submit':
            //   let fnType = addGroup;
            //   if (dataVal && dataVal.id) {
            //     fnType = updateGroup;
            //   }
            //   fnType(dataVal).then(response => {
            //     this.$modal.msgSuccess(response.msg);
            //     this.$router.push("/resource/fileManage")
            //   }).catch(() => {
            //     this.$modal.msgError("操作失败")
            //   });
            //   break;
            case 'cancle':
              this.$router.push("/resource/remoteManage");
              break;
            default:
          }
        }
      }
    }
  }
</script>
<style scoped>
  .borderType {
    border-top: 1px solid #e7e7e7;
    border-left: 1px solid #e7e7e7;
    border-right: 1px solid #e7e7e7;
  }
  .border {
    border: 1px solid #e7e7e7;
  }
  ::v-deep .el-timeline .el-timeline-item:last-child .el-timeline-item__tail {
    display: block!important;
  }
</style>
