<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"
          >
            <div class="dyxl">
              <el-form-item label="电压等级" class="dybox">
                <el-select
                  filterable
                  allow-create
                  v-model="formdata.dyId"
                  @change="handleDyChange"
                >
                  <el-option
                    v-for="item in dyOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="线路名称" class="xlbox">
                <el-select
                  v-model="formdata.lineId"
                  filterable
                  allow-create
                  @change="handleLineChange"
                >
                  <el-option
                    v-for="item in xlOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="gytd">
              <el-form-item label="规约" class="gyClass">
                <el-select v-model="formdata.protocol" filterable>
                  <el-option
                    v-for="item in protocolOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                    {{ item.name }}（{{ item.id }}）
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="通道" class="tdClass">
                <el-select v-model="formdata.channel" filterable>
                  <el-option
                    v-for="item in channelOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="dyxl">
              <el-form-item label="云台选择" class="dybox">
                <el-select v-model="formdata.hasPan" placeholder="请选择">
                  <el-option
                    v-for="item in hasPanOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="云台通道" class="dybox">
                <el-select v-model="formdata.panChannel" placeholder="请选择">
                  <el-option
                    v-for="item in panChannelOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>

            <el-form-item label="装置编号(一行一个)" class="termClass">
              <el-input
                type="textarea"
                :rows="10"
                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 {
  getSearchInfo,
  getProtocolList,
  importTermsApi,
  addDyJoggle,
  addLineJoggle,
} from "@/utils/api/index";
export default {
  name: "globalTools",
  components: {},
  data() {
    return {
      formdata: {
        dyId: "",
        lineId: "",
        protocol: "",
        channel: 2,
        cmdidArr: "",
      },
      hasPanOptions: [
        {
          id: 0,
          name: "否",
        },
        {
          id: 1,
          name: "是",
        },
      ], //是否云台
      panChannelOptions: [
        {
          id: 1,
          name: "通道1",
        },
        {
          id: 2,
          name: "通道2",
        },
        {
          id: 3,
          name: "通道3",
        },
        {
          id: 4,
          name: "通道4",
        },
        {
          id: 5,
          name: "通道5",
        },
        {
          id: 6,
          name: "通道6",
        },
        {
          id: 7,
          name: "通道7",
        },
      ], //云台通道
      dyOptions: [], //电压数据
      xlOptions: [], //线路数据
      protocolOptions: [], //规约数据
      channelOptions: [
        {
          id: 1,
          name: "单目",
        },
        {
          id: 2,
          name: "双目",
        },
        {
          id: 3,
          name: "三目",
        },
        {
          id: 4,
          name: "四目",
        },
        {
          id: 5,
          name: "五目",
        },
        {
          id: 6,
          name: "六目",
        },
        {
          id: 7,
          name: "七目",
        },
      ],
    };
  },
  computed: {
    // 计算属性，将 cmdidArr 字符串转换为数组
    cmdidArrList() {
      // 使用 split 方法按换行符分割字符串，并返回数组
      return this.formdata.cmdidArr.split(/\r\n|\n|\r/).filter(Boolean);
    },
  },
  created() {
    this.getProtocol();
    this.getSearchdy();
    console.log(window.location.port);
    if (window.location.port == 9911) {
      const queryParams = this.$route.query;
      // 检查是否有 'cmds' 参数
      if (queryParams.cmds) {
        // 将逗号分隔的字符串分割成数组
        const cmdArray = queryParams.cmds.split(",");
        // 存储数组到 formdata.cmdidArr
        this.formdata.cmdidArr = cmdArray.join("\n");
        // 打印数组
        console.log(this.formdata.cmdidArr);
      }
    }
  },
  watch: {},
  methods: {
    // 处理用户创建新选项的函数 电压
    handleDyChange(value) {
      console.log(value);
      this.formdata.lineId = "";
      // 检查是否输入了新的值
      const newOption = this.dyOptions.find((option) => option.id === value);
      if (!newOption) {
        // 如果是新的值，则调用接口添加
        addDyJoggle({ name: value, dyValue: "220" })
          .then((res) => {
            console.log(res);
            this.dyOptions.push({
              name: res.data.name,
              id: res.data.id,
            });
            this.getSearchdy();
            console.log(this.dyOptions);
            console.log(this.formdata);
          })
          .catch((err) => {
            this.$message({
              duration: 1500,
              showClose: true,
              message: "添加失败",
              type: "error",
            });
          });
      } else {
        console.log(this.formdata);
        this.getSearchxl();
      }
    },
    //处理用户创建新选项的函数 线路
    handleLineChange(value) {
      console.log(value);
      // 检查是否输入了新的值
      const newOption = this.xlOptions.find((option) => option.id === value);
      if (!newOption) {
        // 如果是新的值，则调用接口添加
        console.log([{ dyLevelId: this.formdata.dyId, name: value }]);
        addLineJoggle({
          list: [{ dyLevelId: this.formdata.dyId, name: value }],
        })
          .then((res) => {
            console.log(res);
            getSearchInfo({ type: 2, id: this.formdata.dyId })
              .then((res) => {
                this.xlOptions = res.data.list;
              })
              .catch((err) => {});
          })
          .catch((err) => {
            this.$message({
              duration: 1500,
              showClose: true,
              message: "添加失败",
              type: "error",
            });
          });
      } else {
        console.log(this.formdata);
      }
    },
    getProtocol() {
      //获取规约版本
      getProtocolList()
        .then((res) => {
          console.log(res);
          this.protocolOptions = res.data.list;
          console.log(this.protocolOptions);
        })
        .catch((err) => {});
    },
    //获取电压信息
    getSearchdy() {
      getSearchInfo({ type: 1 })
        .then((res) => {
          this.dyOptions = res.data.list;
          this.getSearchxl();
        })
        .catch((err) => {});
    },
    //获取线路数据
    getSearchxl() {
      console.log(this.formdata);
      const newDyid = this.dyOptions.find(
        (option) => option.name === this.formdata.dyId
      );
      if (newDyid) {
        this.formdata.dyId = this.dyOptions.find(
          (option) => option.name === this.formdata.dyId
        ).id;
      }
      console.log(this.formdata.dyId);
      getSearchInfo({ type: 2, id: this.formdata.dyId })
        .then((res) => {
          this.xlOptions = res.data.list;
        })
        .catch((err) => {});
    },
    submitForm() {
      console.log(this.formdata);
      console.log(this.xlOptions);
      const newLineid = this.xlOptions.find(
        (option) => option.name === this.formdata.lineId
      );
      console.log(newLineid);
      if (newLineid) {
        this.formdata.lineId = this.xlOptions.find(
          (option) => option.name === this.formdata.lineId
        ).id;
      }
      console.log(this.formdata.lineId);
      console.log(window.location.port);
      console.log(window.location.port != 9911);

      if (
        !this.formdata.dyId ||
        !this.formdata.lineId ||
        !this.formdata.protocol
      ) {
        this.$message({
          duration: 1500,
          showClose: true,
          message: "请先选择电压、线路、和规约",
          type: "error",
        });
        return;
      }
      if (this.formdata.cmdidArr.length == 0) {
        this.$message({
          duration: 1500,
          showClose: true,
          message: "请输入装置编号",
          type: "error",
        });
        return;
      }
      console.log(this.cmdidArrList);
      console.log(
        this.formdata.dyId,
        this.formdata.lineId,
        this.formdata.protocol,
        this.formdata.channel
      );
      let params = {
        channelCount: this.formdata.channel,
        cmdidList: this.cmdidArrList,
        lineId: this.formdata.lineId,
        protocol: this.formdata.protocol,
        hasPan: this.formdata.hasPan,
        panChannel: this.formdata.panChannel,
      };
      console.log(params);
      importTermsApi(params)
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message({
              duration: 1500,
              showClose: true,
              message: "批量添加装置成功",
              type: "success",
            });
            if (window.location.port != 9911) {
              const cmdList = params.cmdidList; // 确保这是数组，例如：["xyigq202411120000", "xyigq202411120002", "xyigq202411120003"]
              // 将数组转换为逗号分隔的字符串
              const queryString = `${cmdList.join(",")}`;
              console.log(queryString);
              const url = `http://61.169.135.146:9911/#/globalTools?cmds=${queryString}`;
              window.open(url, "_blank");
            }
          } else {
            this.$message({
              duration: 1500,
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch((err) => {});
    },
  },
};
</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>
