<template>
  <div class="termsBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>批量下发重启</span>
      </div>
      <div class="deviceList">
        <div class="searchBox">
          <el-form
            :inline="true"
            :model="formdata"
            label-position="right"
            label-width="62px"
            class="demo-form-inline"
          >
            <el-form-item label="装置编号(一行一个)" class="termClass">
              <el-input
                type="textarea"
                :rows="20"
                placeholder="请输入装置列表"
                v-model="formdata.cmdidArr"
              >
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm()">下发</el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { resetTerminalApi } from "@/utils/api/index";
export default {
  name: "globalTools",
  components: {},
  data() {
    return {
      formdata: {
        cmdidArr: "",
      },
    };
  },
  computed: {
    // 计算属性，将 cmdidArr 字符串转换为数组
    cmdidArrList() {
      // 使用 split 方法按换行符分割字符串，并返回数组
      return this.formdata.cmdidArr.split(/\r\n|\n|\r/).filter(Boolean);
    },
  },
  created() {},
  watch: {},
  methods: {
    submitForm() {
      if (this.formdata.cmdidArr.length == 0) {
        this.$message({
          duration: 1500,
          showClose: true,
          message: "请输入装置编号",
          type: "error",
        });
        return;
      }
      console.log(this.cmdidArrList);
      this.resetAllTerminals();

      // resetTerminalApi({ cmId: this.rowData.cmdId || this.rowData.cmdid })
      //   .then((res) => {
      //     if (res.code == 200) {
      //       this.$message({
      //         duration: 1500,
      //         showClose: true,
      //         message: "装置已复位",
      //         type: "success",
      //       });
      //     } else {
      //       this.$message({
      //         duration: 1500,
      //         showClose: true,
      //         message: res.msg,
      //         type: "error",
      //       });
      //     }
      //   })
      //   .catch((err) => {});
    },
    resetAllTerminals() {
      const requests = this.cmdidArrList.map((cmId) =>
        this.resetTerminalApi(cmId)
      );
      Promise.all(requests)
        .then((results) => {
          // 所有请求都成功
          this.$message({
            message: "所有装置已复位",
            type: "success",
          });
        })
        .catch((error) => {
          // 至少有一个请求失败
          this.$message({
            message: "部分装置复位失败：" + error.message,
            type: "error",
          });
        });
    },
    resetTerminalApi(cmId) {
      // 这里应该是你的 API 调用逻辑
      // 假设它返回一个 Promise
      return resetTerminalApi({ cmId: cmId })
        .then((response) => {
          if (response.code === 200) {
            return Promise.resolve(response.data); // 成功，返回解析的 Promise
          } else {
            return Promise.reject(new Error(response.msg)); // 失败，返回拒绝的 Promise
          }
        })
        .catch((error) => {
          return Promise.reject(error); // 网络错误或其他错误，返回拒绝的 Promise
        });
    },
  },
};
</script>
<style lang="less">
.termsBox {
  width: 500px;
  margin-right: 24px;
  height: 100%;
  .el-card {
    height: 100%;
    .el-card__body {
      padding: 12px 8px;
      .deviceList {
        .searchBox {
          .dyxl {
            display: flex;
            .dybox,
            .xlbox {
              .el-select {
                width: 160px;
              }
            }
          }
          .gytd {
            display: flex;
            .gyClass,
            .tdClass {
              .el-select {
                width: 160px;
              }
            }
          }
          .termClass {
            display: flex;
            flex-direction: column;
            .el-form-item__label {
              width: 140px !important;
            }
          }
        }
        .dialog-footer {
          display: flex;
          margin-left: auto;
          justify-content: end;
        }
      }
    }
  }
}
</style>
