<template>
  <div class="appsetBox">
    <!-- cmdid -->
    <div class="cmdMsg">
      <div class="cmdLeft">
        <h4>CMDID</h4>
        <el-input v-model="appForm.CMDID" size="mini"></el-input>
      </div>
      <div class="cmdRight">
        <h4>通道数</h4>
        <el-input v-model="appForm.channels" size="mini"></el-input>
      </div>
    </div>
    <el-divider></el-divider>
    <!-- serve -->
    <div class="cmdMsg">
      <div class="cmdLeft">
        <h4>Server</h4>
        <el-input v-model="appForm.server" size="mini"></el-input>
      </div>
      <div class="cmdRight portRight">
        <h4>Port</h4>
        <el-input v-model="appForm.port" size="mini"></el-input>
      </div>
      <div class="gropBtn">
        <el-button type="primary" size="mini" @click="dellClick"
          >DELL主站</el-button
        >
        <el-button type="primary" size="mini" @click="safeClick"
          >安全平台</el-button
        >
      </div>
    </div>
    <el-divider></el-divider>
    <!-- 网络协议 -->
    <div class="cmdMsg">
      <div class="cmdLeft">
        <h4>网络协议</h4>
        <el-select
          size="mini"
          v-model="appForm.networkProtocol"
          placeholder="请选择"
        >
          <el-option
            v-for="item in netWorkoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="cmdRight protocolRight">
        <h4>通信规约</h4>
        <el-select
          size="mini"
          class="proClass"
          v-model="appForm.protocol"
          placeholder="请选择"
        >
          <el-option
            v-for="item in protocoloptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            {{ item.id }} - {{ item.name }}
          </el-option>
        </el-select>
        <el-select size="mini" class="mmClass" v-model="appForm.encryption">
          <el-option
            v-for="item in IsMMoptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            {{ item.id }} - {{ item.name }}
          </el-option>
        </el-select>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="cmdMsg">
      <div class="cmdLeft heartClass">
        <h4>心跳周期</h4>
        <el-input v-model="appForm.heartbeat" size="mini"></el-input>
        <b>分钟（默认10分钟）</b>
      </div>
      <div class="cmdRight qualityClass">
        <h4>图片质量</h4>
        <el-input v-model="appForm.quality" size="mini"></el-input>
        <b>（可在通道配置中定义各自不同的照片压缩率）</b>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="cmdMsg">
      <div class="cmdLeft">
        <h4>工作状态报周期</h4>
        <el-select
          size="mini"
          v-model="appForm.workStatusTimes"
          placeholder="请选择"
        >
          <el-option
            v-for="item in workStausoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="cmdRight">
        <h4>分包大小</h4>
        <el-input v-model="appForm.packetSize" size="mini"></el-input>
        <b>字节（默认2K）（1KB=1024B）</b>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="cmdMsg">
      <div class="cmdLeft packaClass">
        <h4>起始包号 照片</h4>
        <el-input v-model="appForm.packetBase" size="mini"></el-input>
        <b>（0/1，默认为1）</b>
      </div>
      <div class="cmdRight">
        <h4>升级</h4>
        <el-input v-model="appForm.upgradePacketBase" size="mini"></el-input>
        <b>（0/1，默认为1）</b>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="cmdMsg">
      <div class="cmdLeft logClass">
        <h4>日志保留</h4>
        <el-input v-model="appForm.timeForKeepingLogs" size="mini"></el-input>
        <b>天（默认15天）</b>
      </div>
      <div class="cmdRight">
        <h4>照片保留</h4>
        <el-input v-model="appForm.timeForKeepingPhotos" size="mini"></el-input>
        <b>天（默认15天）</b>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="cmdMsg">
      <div class="cmdLeft">
        <h4>被监测装置</h4>
        <el-input v-model="appForm.componentId" size="mini"></el-input>
      </div>
      <div class="cmdRight">
        <el-checkbox v-model="appForm.postDataPaused">停止传送数据</el-checkbox>
        <el-checkbox v-model="appForm.reportFault">启用故障上报</el-checkbox>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="cmdMsg">
      <div class="cmdLeft">
        <h4>原始编号</h4>
        <el-input v-model="appForm.originalId" size="mini"></el-input>
      </div>
      <div class="cmdRight pwdClass">
        <h4>装置密码</h4>
        <el-input v-model="appForm.password" size="mini"></el-input>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="cmdMsg">
      <div class="cmdLeft">
        <h4>装置型号</h4>
        <el-input v-model="appForm.model" size="mini"></el-input>
      </div>
      <div class="cmdRight dateClass">
        <h4>生产日期</h4>
        <el-date-picker
          v-model="appForm.productionDate"
          type="date"
          value-format="timestamp"
          placeholder="选择日期"
        >
        </el-date-picker>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="cmdMsg">
      <div class="cmdLeft">
        <h4>生产厂家</h4>
        <el-input v-model="appForm.bsManufacturer" size="mini"></el-input>
      </div>
      <div class="cmdRight deviceClass">
        <h4>装置名称</h4>
        <el-input v-model="appForm.equipName" size="mini"></el-input>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["terimMsgid"],
  data() {
    return {
      appForm: {
        CMDID: "", //cmdid
        channels: "", //通道数
        server: "", //服务器地址
        port: "", //端口号
        networkProtocol: "", //网络协议
        protocol: "", //通信规约
        encryption: "", //加密
        heartbeat: "", //心跳周期
        quality: "", //图片质量
        workStatusTimes: "", //工作状态报周期
        packetSize: "", //分包大小
        packetBase: "", //起始包号 照片（0/1，默认1）
        upgradePacketBase: "", //升级（0/1，默认1）
        timeForKeepingLogs: "", //日志保留（默认15天）
        timeForKeepingPhotos: "", //照片保留（默认15天）
        componentId: "", //被监测装置
        postDataPaused: false, //停止传送数据
        reportFault: false, //启用故障上报
        originalId: "", //原始编号
        password: "", //装置密码
        model: "", //装置型号
        productionDate: "", //生产日期
        bsManufacturer: "", //生产厂家
        equipName: "", //装置名称
      },
      originalAppForm: {}, // 用于存储 appForm 的初始值
      //通讯协议
      netWorkoptions: [
        {
          value: 0,
          label: "tcp",
        },
        {
          value: 1,
          label: "udp",
        },
      ],
      //规约
      protocoloptions: [
        {
          id: 2,
          name: "南网",
        },
        {
          id: 65280,
          name: "国网I1",
        },

        {
          id: 65281,
          name: "安徽",
        },
        {
          id: 65282,
          name: "江苏",
        },
        {
          id: 65283,
          name: "湖南",
        },
        {
          id: 65284,
          name: "浙江",
        },
        {
          id: 65285,
          name: "河南全景",
        },
        {
          id: 65286,
          name: "河南郑州",
        },

        {
          id: 65298,
          name: "宁夏",
        },

        {
          id: 65290,
          name: "河南统一视频v2020",
        },
        {
          id: 65296,
          name: "陕西",
        },
      ],
      //是否加密
      IsMMoptions: [
        {
          id: 0,
          name: "安全平台-无",
        },
        {
          id: 1,
          name: "安全平台-明文",
        },
        {
          id: 2,
          name: "安全平台-加密",
        },
      ],
      //
      workStausoptions: [
        {
          value: 1,
          label: "每1次心跳",
        },
        {
          value: 2,
          label: "每2次心跳",
        },
        {
          value: 3,
          label: "每3次心跳",
        },
        {
          value: 4,
          label: "每4次心跳",
        },
        {
          value: 5,
          label: "每5次心跳",
        },
        {
          value: 6,
          label: "每6次心跳",
        },
        {
          value: 7,
          label: "每7次心跳",
        },
        {
          value: 8,
          label: "每8次心跳",
        },
        {
          value: 9,
          label: "每9次心跳",
        },
        {
          value: 10,
          label: "每10次心跳",
        },
        {
          value: 11,
          label: "每11次心跳",
        },
        {
          value: 12,
          label: "每12次心跳",
        },
        {
          value: 13,
          label: "每13次心跳",
        },
        {
          value: 14,
          label: "每14次心跳",
        },
        {
          value: 15,
          label: "每15次心跳",
        },
        {
          value: 16,
          label: "每16次心跳",
        },
        {
          value: 17,
          label: "每17次心跳",
        },
        {
          value: 18,
          label: "每18次心跳",
        },
        {
          value: 19,
          label: "每19次心跳",
        },
      ],
    };
  },
  created() {
    // 组件创建时，将 channelForm 的值深拷贝到 originalChannelForm
    this.originalAppForm = JSON.parse(JSON.stringify(this.appForm));
  },
  computed: {
    // 计算属性，返回已更改的字段对象
    changedChannelFields() {
      const changes = {};
      for (const key in this.appForm) {
        if (
          this.appForm.hasOwnProperty(key) &&
          this.appForm[key] !== this.originalAppForm[key]
        ) {
          changes[key] = this.appForm[key];
        }
      }
      return changes;
    },
  },
  mounted() {},
  methods: {
    //DELL主站
    dellClick() {
      this.appForm.server = "61.169.135.146";
      this.appForm.port = "6891";
    },
    //安全平台
    safeClick() {
      this.appForm.server = "61.169.135.146";
      this.appForm.port = "6892";
    },

    //点击确定
    handleConfim() {
      console.log(this.appForm);
      console.log(this.changedChannelFields); // 查看哪些字段被更改了
      const result = [];
      for (const [key, value] of Object.entries(this.changedChannelFields)) {
        console.log(value);
        let type, valueToStore;
        if (typeof value === "string") {
          // 尝试将字符串转换为整数（如果可能），但这里我们保持为字符串
          // 注意：这里不转换，以保持原始指示
          type = 1; // 字符串
          valueToStore = value;
        } else if (typeof value === "number") {
          if (Number.isInteger(value)) {
          } else {
            type = 2; // 浮点数
          }
          valueToStore = value;
        } else if (typeof value === "boolean") {
          type = 0; // 布尔值转换为整数
          valueToStore = value ? 1 : 0;
        }
        if (key == "productionDate") {
          type = 0; // 布尔值转换为整数
          valueToStore = value / 1000;
        }
        if (key == "timeForKeepingLogs") {
          type = 0; // 布尔值转换为整数
          valueToStore = value * 86400;
        }
        if (key == "timeForKeepingPhotos") {
          type = 0; // 布尔值转换为整数
          valueToStore = value * 86400;
        }

        result.push({ name: key, value: valueToStore, type: type });
      }
      console.log(result);
      var params = {
        action: "upd_cfg",
        termIds: [this.terimMsgid.id],
        path: " /sdcard/com.xypower.mpapp/data/",
        fn: "App.json",
        packageName: "com.xypower.mpapp",
        configs: result,
      };
      console.log(params);
      console.log(this.$parent.$parent.$parent);
      this.$parent.$parent.handleclose();
      this.$parent.$parent.$parent.changeIssue(params);
    },
  },
};
</script>
<style lang="less">
.appsetBox {
  max-height: 442px;
  overflow: auto;
  padding-right: 12px;
  .el-divider--horizontal {
    margin: 6px 0px;
    background-color: #edeaea;
  }
  h4 {
    font-weight: normal;
    margin-right: 12px;
    width: 100px;
  }
  b {
    font-size: 12px;
    margin-left: 4px;
    font-weight: normal;
  }
  .cmdMsg {
    display: flex;
    align-items: center;
    .cmdLeft {
      display: flex;
      align-items: center;
      margin-right: 40px;
      .el-input {
        width: 220px;
      }
    }
    .cmdRight {
      display: flex;
      align-items: center;
      .el-input {
        width: 100px;
      }
    }
    .portRight {
      margin-right: 40px;
    }
    .protocolRight {
      .proClass {
        margin-right: 12px;
        .el-input {
          width: 200px;
        }
      }
      .mmClass {
        .el-input {
          width: 160px;
        }
      }
    }
    .heartClass {
      .el-input {
        width: 108px;
      }
    }
    .qualityClass {
      .el-input {
        width: 100px;
      }
    }
    .packaClass {
      .el-input {
        width: 122px;
      }
    }
    .logClass {
      .el-input {
        width: 132px;
      }
    }
    .pwdClass,
    .dateClass,
    .deviceClass {
      .el-input {
        width: 200px;
      }
    }
  }
}
</style>
