<template>
  <div class="reportBox">
    <div class="commandBox">
      <div class="commandRunLeft commandClass">
        <h3>待下发终端</h3>
        <div
          class="commandList"
          v-loading="leftComLoading"
          v-if="runCommand.length != 0"
        >
          <p
            class="comLi"
            v-for="(item, index) in runCommand"
            :key="index"
            @dblclick="handleShowCommand(item)"
          >
            <span class="indexClass">{{ index + 1 }}</span>
            <span class="comMsg"
              ><b>时间：{{ item.createTime }}</b>
              <b>设备ID：{{ item.cmdid }}</b>
              <b>命令：{{ cmdCn[item.cmdName] }}</b></span
            >
          </p>
        </div>
        <div class="commandList">
          <p>暂无下发命令</p>
        </div>
      </div>
      <div class="commandRunRight commandClass">
        <h3>已下发终端</h3>
        <div class="commandList">
          <p class="comLi" v-for="(item, index) in endCommand" :key="index">
            <el-tooltip
              class="item"
              effect="dark"
              :open-delay="600"
              :content="item.status == '1' ? '已下发' : '已取消'"
              placement="top"
            >
              <span
                class="indexClass"
                :class="item.status == '1' ? 'normalClass' : 'cancelClass'"
                >{{ index + 1 }}</span
              >
            </el-tooltip>

            <span class="comMsg"
              ><b>下发时间：{{ item.publishTime }}</b>
              <b>设备ID：{{ item.cmdid }}</b>
              <b>命令：{{ cmdCn[item.cmdName] }}</b>
              <b>cmd：{{ item.cmd }}</b></span
            >
          </p>
        </div>
      </div>
    </div>
    <el-dialog
      class="MsgDialog"
      title="命令信息"
      :visible.sync="commandShow"
      :close-on-click-modal="false"
      width="680px"
    >
      <div class="cmdMain">
        <!-- {{ deveceMsg }} -->
        <p>设备ID:{{ deveceMsg.cmdid }}</p>
        <p>操作时间：{{ deveceMsg.createTime }}</p>
        <p>待执行操作：{{ deveceMsg.cmdName }}</p>
        <p>cmd：{{ deveceMsg.cmd }}</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel(deveceMsg.id)">取消操作</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getdoActionApi, getqueryCmdsApi } from "@/utils/api/index";
export default {
  name: "report",
  components: {},
  data() {
    return {
      leftComLoading: false, //左侧loading
      runCommand: [],
      endCommand: [],
      commandShow: false,
      deveceMsg: "",
      cmdCn: {
        yw_cmd_android_reboot: "重启",
        yw_cmd_mcu_reboot: "重启装置",
        i1_cmd_set_i1_server_ip_port: "设置I1服务器",
        i1_cmd_set_xy_yw_ip_port: "设置运维服务器",
        i1_cmd_set_i1_heart_beat_time: "设置心跳周期",
        yw_cmd_upload_i1_zip_log: "上传日志",
        upgrade: "升级",
        yw_cmd_start_frpc: "开启frpc",
        yw_cmd_stop_frpc: "停止frpc",
        i1_cmd_stop_aging_test: "停止老化测试",
      },
      cmdtimer: null,
      endtimer: null,
    };
  },
  computed: {},
  created() {
    this.cmdtimer = setInterval(this.getCmdList, 60000); // 每10秒刷新数据
    this.endtimer = setInterval(this.getEndList, 60000); // 每10秒刷新数据
  },
  mounted() {
    this.getCmdList();
    this.getEndList();
  },

  methods: {
    getCmdList() {
      //this.leftComLoading = true;
      getqueryCmdsApi({ p: 1, ps: 200 })
        .then((res) => {
          console.log(res);
          this.runCommand = res.data;
          this.leftComLoading = false;
        })
        .catch((err) => {});
    },
    handleShowCommand(val) {
      console.log(val);
      this.commandShow = true;
      console.log(this.commandShow);
      this.deveceMsg = val;
    },
    //取消操作
    handleCancel(val) {
      getdoActionApi({
        act: "cancel",
        id: val,
      })
        .then((res) => {
          console.log(res);

          this.$confirm("确定取消该命令？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$message({
                duration: 1500,
                showClose: true,
                message: "命令已取消",
                type: "success",
              });
              this.commandShow = false;
              this.getCmdList();
              this.getEndList();
            })
            .catch(() => {
              this.commandShow = false;
            });
        })
        .catch((err) => {});
    },

    //获取已取走列表
    getEndList() {
      getqueryCmdsApi({ qt: "his", p: 1, ps: 200 })
        .then((res) => {
          console.log(res);
          this.endCommand = res.data;
          // this.leftComLoading = false;
        })
        .catch((err) => {});
    },
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.cmdtimer);
    clearInterval(this.endtimer);
    this.cmdtimer = null;
    this.endtimer = null;
  },
};
</script>
<style lang="less">
.reportBox {
  height: calc(100% - 24px);
  width: calc(100% - 24px);
  padding: 12px;
  .commandBox {
    display: flex;
    height: 100%;
    .commandClass {
      width: 50%;
      padding: 12px;
      height: calc(100% - 24px);
      border: 1px solid #dcdfe6;
      margin-right: 12px;
      border-radius: 4px;
      h3 {
        font-size: 16px;
        font-weight: normal;
        height: 32px;
        line-height: 32px;
      }
      .commandList {
        width: 100%;
        height: calc(100% - 32px);
        //background: #fcc;
        overflow: auto;
        p {
          background: #fdf6ec;
          margin-bottom: 8px;
          line-height: 24px;
          color: #333;
          font-size: 14px;
          padding: 6px;
          cursor: pointer;
          display: flex;
          align-items: center;
          &:hover {
            background: #faecd8;
          }
          .indexClass {
            padding: 4px;
            font-size: 14px;
            color: #000;
            background: #d3d3d3;
            min-width: 18px;
            text-align: center;
            margin-right: 8px;
          }
          .normalClass {
            background: #d3d3d3;
          }
          .cancelClass {
            background: #fde2e2;
          }
          .comMsg {
            display: flex;
            flex-wrap: wrap;
            b {
              font-weight: normal;
              margin-right: 12px;
            }
          }
        }
      }
    }
    .commandRunLeft {
    }
    .commandRunRight {
      .commandList {
        p {
          cursor: default;
          background: #e1f3d8;
          &:hover {
            background: #e1f3d8;
          }
        }
      }
    }
  }
  .MsgDialog {
    .cmdMain {
      p {
        font-size: 16px;
        line-height: 32px;
      }
    }
    .dialog-footer {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
