<template>
  <div class="login-container">
    <video autoplay loop src="../../../../static/login_video.mp4" style="position:absolute;width: 100%;
    height: 100%;
    object-fit: cover;"></video>
    <div class="absolute zIndex99" style="right: 0">
      <el-button size="mini" :plain="true" class="el-icon-setting" @click="openServiceSet">
      </el-button>
    </div>
    <div class="content">
      <div class="titleBox">
        <div class="titleItem">
          <img src="../../assets/images/titleLeft.png" alt="" />
          <div>
            <!-- <div style="font-size: 4em;font-family: 'youshe';" class="title">
              北斗定位+
            </div>
            <div style="font-size: 3.5em;" class="title">
              便携式应急指挥电子沙盘系统
            </div> -->
            <div class="title">{{ $t("title.name") }}</div>
          </div>
          <img src="../../assets/images/titleRight.png" alt="" />
        </div>
      </div>
      <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm"
        label-position="left">
        <el-form-item prop="username">
          <span class="svg-container svg-container_login">
            <svg-icon :class-name="['login_icon']" icon-class="user" />
          </span>
          <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop="password">
          <span class="svg-container">
            <svg-icon :class-name="['password_icon']" icon-class="password">
            </svg-icon>
          </span>
          <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
            autoComplete="on" placeholder="请输入密码"></el-input>
          <span class="show-pwd" @click="showPwd">
            <svg-icon :class-name="['eye_icon']" icon-class="eye" />
          </span>
        </el-form-item>
        <!-- <div
          v-throttle="5000"
          class="signInBox"
          :loading="loading"
          @click="handleLogin"
        >
          {{ $t("login.signIn") }}
        </div> -->
        <el-form-item class="rememberForget">
          <!-- justify-content: space-around;align-items: center; -->
          <div style="display: flex;">
            <el-checkbox :disabled="loading" v-model="checkboxVModel" @change="rememberpwd"
              label="string">记住密码</el-checkbox>
            <!-- <div style="cursor: pointer;">忘记密码？</div> -->
          </div>
        </el-form-item>
        <el-button v-throttle="5000" class="signInBox" :loading="loading" @click="handleLogin">
          {{ $t("login.signIn") }}
        </el-button>

        <!--      <div class="tips">
                <span style="margin-right:20px;">username: admin</span>
                <span> password: admin</span>
              </div>-->
      </el-form>
    </div>
    <!--切换服务地址-->
    <el-dialog title="服务设置" :modal="false" :visible.sync="serviceDialogs" width="680px" @close="cancel" :center="true"
      :close-on-click-modal="false">
      <el-tabs type="border-card">
        <el-tab-pane label="接口服务">
          <div class="contentBox">
            <div class="checkBoxGroup">
              <div class="ipBox">
                <el-checkbox v-model="isLocal">单机</el-checkbox>
                <div>
                  <span style="visibility: hidden">是</span><span>IP：</span>
                  <el-input v-model="localip" :disabled="true"></el-input>
                </div>
                <div>
                  <span>端口：</span>
                  <!-- 65535 -->
                  <el-input v-model="localport" :disabled="isNet"></el-input>
                </div>
              </div>

              <div>
                <el-checkbox v-model="isNet">网络</el-checkbox>
                <div class="ipBox">
                  <div>
                    <span>协议：</span>
                    <el-input v-model="prototype" :disabled="isLocal"></el-input>
                  </div>
                  <div>
                    <span style="visibility: hidden">是</span><span>IP：</span>
                    <el-input v-model="ip" :disabled="isLocal"></el-input>
                  </div>
                  <div>
                    <span>端口：</span>
                    <el-input v-model="port" :disabled="isLocal"></el-input>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="btn">
            <el-button size="mini" type="primary" @click="submitIP">确定</el-button>
            <el-button size="mini" type="danger" @click="cancel">关闭</el-button>
          </div>
        </el-tab-pane>
        <!-- 便携式才需要gps -->
        <el-tab-pane label="gps串口">
          <div class="contentBox">
            <span>串口选择：</span>
            <el-select v-model="gpsVal">
              <el-option v-for="item in gpsOptions" :key="item.value" :label="item.Product" :value="item.Name">
              </el-option>
            </el-select>
          </div>
          <div class="btn">
            <el-button size="mini" type="primary" @click="submitGPS">确定</el-button>
            <el-button size="mini" type="danger" @click="cancel">关闭</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>

      <!--      :content="richTextDialog.content"-->
      <!--      <richTextEditor></richTextEditor>-->
      <!--      <div style="display: flex;justify-content: flex-end;padding: 6px 0;">

              <el-button size="mini" type="primary" @click="save">确定</el-button>
              <el-button size="mini" type="danger" @click="cancel">取消</el-button>
            </div>-->
    </el-dialog>
    <div class="service" v-if="serviceDialog">
      <div class="contentBox">
        <div class="titleBox">
          <span class="title">服务设置</span>
          <span class="closeBox">
            <span @click="cancel">✕</span>
          </span>
          <div class="hr"></div>
        </div>

        <div class="serviceContent">
          <div class="tab">
            <template v-for="item in serviceOptions">
              <span :class="[
        'tab-item',
        selectedService == item.name ? 'activeService' : '',
      ]" @click="selectedService = item.name">{{ item.name }}</span>
            </template>
          </div>
          <div class="tabPanel">
            <template v-if="selectedService == '接口服务'">
              <div class="item">
                <span class="itemLabel">服务选择：</span>
                <el-select class="select" v-model="servVal">
                  <el-option size="mini" v-for="item in servOptions" :key="item.value" :label="item.name"
                    :value="item.name">
                  </el-option>
                </el-select>
              </div>
              <div class="prototype" v-if="servVal == '网络'">
                <span class="itemLabel">协议：</span><el-input style="width: 200px" v-model="prototype"></el-input>
              </div>
              <div class="item ip">
                <template v-if="servVal == '单机'">
                  <span class="itemLabel">IP：</span>{{ localip }}
                </template>
                <template v-if="servVal == '网络'">
                  <span class="itemLabel">IP：</span>
                  <el-input style="width: 200px" v-model="ip"></el-input>
                </template>
              </div>
              <div class="item port">
                <template v-if="servVal == '单机'">
                  <span class="itemLabel">端口：</span>
                  <el-input style="width: 200px" v-model="localport"></el-input>
                </template>
                <template v-if="servVal == '网络'">
                  <span class="itemLabel">端口：</span>
                  <el-input style="width: 200px" v-model="port"></el-input>
                </template>
              </div>
            </template>
            <template v-if="selectedService == '北斗串口'">
              <div class="item">
                <span class="itemLabel">串口选择：</span>
                <el-select class="select" v-model="gpsVal">
                  <el-option size="mini" v-for="item in gpsOptions" :key="item.value" :label="item.Product"
                    :value="item.Name">
                  </el-option>
                </el-select>
              </div>
            </template>
          </div>
        </div>

        <div class="btn">
          <div class="hr"></div>
          <el-button style="margin: 5px 0" size="mini" @click="submit">确定</el-button>
          <el-button size="mini" @click="cancel">关闭</el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { ipcRenderer, remote } from "electron";
import { isvalidUsername } from "@/utils/validate";
import { getIP, setIP, setLocal, getLocal } from "../../utils";
import { validateURL } from "../../utils/validate";
import { checkAuth, service_progress, getHeaderList, selectHeader } from "@/api/gisAPI";
import { login } from "@/api/air.js";
import { getGpsList, updateGps } from "../../api/gisAPI";
import websocket from "../../utils/websocket";
import webrtc from "../../components/webrtc.vue";
let timer = null;
let loading = null;
// import setAgreement from "./setAgreementInfo/setAgreement.vue";
export default {
  name: "login",
  // components: {setAgreement},
  computed: {},
  components: {
    webrtc
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error("请输入正确的用户名"));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error("密码不能小于5位"));
      } else {
        callback();
      }
    };
    return {
      servOptions: [{ name: "单机" }, { name: "网络" }],
      selectedService: "接口服务",
      serviceOptions: [
        { name: "接口服务" },
        // { name: "北斗串口" }
      ],
      servVal: "单机",
      gpsVal: "",
      gpsOptions: [],
      prototype: "http",
      ip: "192.168.1.1",
      port: "8890",
      localip: "127.0.0.1",
      localport: "8891",
      // localport: "8891",
      isLocal: false,
      isNet: false,

      serviceDialog: false,
      serviceDialogs: false,
      select_id: 1, //选中服务接入
      disabled: true, //默认禁用状体
      loginForm: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername },
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePass },
        ],
      },
      loading: false,
      pwdType: "password",
      isRememberPassword: false,
      checkboxVModel: false,
      urls: ['http://121.37.237.116:28453/rtc/v1/whep/?app=live&stream=4SEDL9C001X8GE4SEDL9C001X8GE165-0-7normal-0',
        'http://121.37.237.116:28453/rtc/v1/whep/?app=live&stream=4SEDL9C001X8GE1581F5BMD238V00172JR39-0-7normal-0',
        'http://121.37.237.116:28453/rtc/v1/whep/?app=live&stream=4SEDL9C001X8GE1581F5BMD238V00172JR53-0-0normal-0'
      ]
    };
  },
  watch: {
    // isLocal(val) {
    //   this.isNet = !val;
    // },
    // isNet(val) {
    //   this.isLocal = !val;
    // },
    serviceDialog(val) {
      if (val) {
        getGpsList((res) => {
          // const isUsbs = res.list.filter((item) => item.IsUSB);
          // this.gpsOptions = isUsbs;
          // this.gpsVal = isUsbs.filter((item) => item.selected)[0].Name;
          this.gpsOptions = res.list;
          this.gpsVal = res.list.filter((item) => item.selected)[0].Name;
        });
      }
    },
  },
  mounted() {
    console.log("ssss", localStorage.getItem("serverMode"));
    window.isStandAlone = localStorage.getItem("serverMode")
      ? JSON.parse(localStorage.getItem("serverMode"))
      : true;

    let that = this;
    if (window.isStandAlone) {
      this.$sendElectronChanel("getIniConfig", {});
      this.$recvElectronChanel("IniConfig", (e, res) => {
        setIP("http://" + res.protocol.host + ":" + res.protocol.port);
        // timer = setInterval(() => {
        //   if ($root_home.$remote.getGlobal("sharedObject").hasService) {
        //     that.sProcess();
        //   }
        // }, 1000);
      });
    }
    // else {
    //   timer = setInterval(() => {
    //     that.sProcess();
    //   }, 1000);
    // }

    // console.log($root_home.$remote.getGlobal("sharedObject"));
    this.isRememberPassword = JSON.parse(getLocal("isRememberPassword"));
    this.checkboxVModel = JSON.parse(getLocal("isRememberPassword"));
    this.loginForm.username = JSON.parse(getLocal("username"));
    if (this.isRememberPassword) {
      this.loginForm.password = JSON.parse(getLocal("password"));
    }
  },
  methods: {
    startPlay(url, index) {
      // console.log(this.$refs[`webrtc-${index}`][0]);
      this.$refs[`webrtc-${index}`][0].startPlay(url);
    },
    // 是否记住密码变化设置
    rememberpwd(val) {
      this.isRememberPassword = val;
      setLocal("isRememberPassword", val);
    },
    rememberPassword() {
      if (this.isRememberPassword) {
        setLocal("password", JSON.stringify(this.loginForm.password));
      }
    },
    submit() {
      switch (this.selectedService) {
        case "接口服务":
          this.submitIP();
          break;
        case "北斗串口":
          this.submitGPS();
          break;
      }
    },
    // 连接web
    sProcess() {
      service_progress({}).then((res) => {
        let { code, data } = res;
        if (code == 0) {
          if (data.current == data.total) {
            clearInterval(timer);
            this.loading = false;
          } else {
            this.loading = true;
          }
        }
      });
    },
    submitIP() {
      if (this.servVal == "网络")
        if (this.ip && this.port && this.prototype) {
          let url = this.prototype + "://" + this.ip + ":" + this.port;
          console.log("网络", url);
          let isOk = validateURL(url);
          //验证url 合法性
          if (isOk) {
            //网络走这里
            window.isStandAlone = false;
            setIP(url);
            this.serviceDialog = false;
          } else {
            this.$message.error("url不合法");
          }
        } else {
          this.$message.error("请确保服务地址完整");
        }
      else {
        //单机走这里
        window.isStandAlone = true;
        setIP("http://127.0.0.1:" + this.localport);
        console.log({
          protocol: {
            port: this.localport,
          },
        });
        this.$sendElectronChanel("getIniConfig", {
          protocol: {
            port: this.localport,
          },
        });
        this.$recvElectronChanel("IniConfig", (e, res) => {
          this.$sendElectronChanel("restart");
        });
        this.serviceDialog = false;
      }
    },
    submitGPS() {
      console.log(this.gpsVal);
      if (this.gpsVal)
        updateGps({ com: this.gpsVal }, (res) => {
          // 设置一个值存到localStorage
          localStorage.setItem("gpsCom", this.gpsVal);
          this.cancel();
          // this.$sendElectronChanel("restart");
        });
      else this.$message.warning("串口无效，重新选择");
    },
    cancel() {
      this.serviceDialog = false;
    },
    //服务接入
    onService(index) {
      //点击切换服务
      this.select_id = index;
      this.disabled = true;
      if (index === 3) {
        //弹出自定义弹框
        this.disabled = false;
      }
    },
    openServiceSet() {
      this.servVal = window.isStandAlone ? "单机" : "网络";
      this.serviceDialog = true;
      if (this.servVal == "网络") {
        let { hostname, port, protocol } = new URL(getIP());
        this.ip = hostname;
        this.port = port;
        this.prototype = protocol.split(":")[0];
      } else {
        let { hostname, port, protocol } = new URL(getIP());
        console.log(new URL(getIP()));
        this.localip = hostname;
        this.localport = port;
        // this.prototype = protocol.split(":")[0]
      }
    },
    onServiceSubmit() { },
    showPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
      } else {
        this.pwdType = "password";
      }
    },
    flyToView() {
      let options = JSON.parse(localStorage.getItem("defaultView"));
      YJ.Global.setDefaultView(window.Earth1, options);
      setTimeout(() => {
        new YJ.Tools(window.Earth1).flyHome();
      }, 1000);
    },
    viewerflyToLonLat({ lng, lat, alt }, angle) {
      console.log(lng, lat, alt);
      console.log();
      if (window.Earth1.viewer.entities.getById("flyTmp")) {
        window.Earth1.viewer.entities.removeById("flyTmp");
      }
      let entity = new Cesium.Entity({
        id: "flyTmp",
        position: Cesium.Cartesian3.fromDegrees(Number(lng), Number(lat), Number(alt)),
        point: {
          pixelSize: 10,
          color: Cesium.Color.WHITE.withAlpha(0.9),
          outlineColor: Cesium.Color.WHITE.withAlpha(0.9),
          outlineWidth: 1,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      });
      console.log('entity', entity);
      window.Earth1.viewer.entities.add(entity);
      // return;
      window.Earth1.viewer.flyTo(entity, {
        offset: {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-angle),
          range: alt,
        },
      });
    },
    //监听服务数据
    getPort() {
      console.log("监听服务数据");

      ipcRenderer.on("sandTable_udp_server_port_str", (event, key, status) => {
        let sandTable_udp_client_status = localStorage.getItem('sandTable_udp_client_status')
        if (JSON.parse(sandTable_udp_client_status)) {
          // 如果status为“K”，那么双击的时候就发出关灯指令
          let val = udp_pointMap.get(key)
          val.command = (status == 'G' ? "B" : "A")
          if (val) {
            _entityMap.get(val.source_id).flyTo()
          }
          udp_pointMap.set(key, val)
          console.log("sandTable_udp_server_port_str", val)
        }
      })
      ipcRenderer.on("sandTable_udp_server_port", (event, positions, angle) => {
        console.log("监听服务数据", positions, angle);
        if (positions.length > 0) {
          /*   const flyToOptions = {
               duration: 2,
               orientation: {
                 heading: 0,
                 pitch: (-angle * Math.PI) / 180,//-85
                 roll: 0,
               },
             };

             if (positions.length === 1) {
               flyToOptions.position = positions[0];
               flyToOptions.position.alt = Number(flyToOptions.position.alt) - 500
               /!* flyToOptions.destination=Cesium.Cartesian3.fromDegrees(
                    Number(positions[0].lng),
                    Number(positions[0].lat),
                    Number(positions[0].alt)
                )*!/
               // flyToOptions.position.alt = 8000;
             } else {
               flyToOptions.positions = positions;
             }
   */
          // YJ.Global.flyTo(window.Earth1, flyToOptions);


          let status = localStorage.getItem('sandTable_udp_client_status')
          if (JSON.parse(status)) {
            this.viewerflyToLonLat(positions[0], angle)
          }
        }
      });
    },
    handleLogin() {
      // 需要登录就去掉“/dashboard”
      let isAllowLogin = $root_home.$remote.getGlobal("sharedObject")
        .hasService; //后端服务是否正常

      // 单机后端正常
      // 单机后端异常
      // 网络后端正常
      // 网络后端异常
      // 网络接口撤掉后端条件
      if (!window.isStandAlone || isAllowLogin) {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.loading = true;
            /*this.$router.push({path: '/'})
              this.loading = false*/
            console.log(
              this.loginForm.username + "_" + this.loginForm.password
            );
            let md5pass = this.$md5(
              this.loginForm.username + "_" + this.loginForm.password
            );
            console.log("md5pass md5pass md5pass ", md5pass);
            this.$store
              .dispatch("Login", {
                username: this.loginForm.username,
                password: md5pass,
              })
              .then(() => {
                this.$message.success("登录成功");
                setLocal("username", JSON.stringify(this.loginForm.username));
                this.getHeader()
                this.rememberPassword();
                // 无人机
                setTimeout(() => {
                  if (!window.isStandAlone) {
                    websocket();
                  }

                  YJ.on({
                    ws: true,
                    host: getIP(), //资源所在服务器地址
                    username: this.loginForm.username, //用户名 可以不登录（不填写用户名），不登录时无法加载服务端的数据
                    password: md5pass, //密码  生成方式：md5(用户名_密码)
                  }).then((res) => {
                    // return;
                    this.createEarth();
                    window.$createEarth = this.createEarth;
                    // YJMap.on({ host: getIP() })
                    // window.map2d = new YJMap.Map("map2d")
                  });
                  this.$router.push({ path: "/" });
                  this.loading = false;

                  /* YJ.on({
                       host: "http://localhost:8890",//资源所在服务器地址
                       username: this.loginForm.username,//用户名 可以不登录（不填写用户名），不登录时无法加载服务端的数据
                       password: md5pass//密码  生成方式：md5(用户名_密码)
                     }).then(res => {
                       window.Earth1 = new YJ.YJEarth('earth')
                       YJ.Global.openRightClick()
                       YJ.Global.openLeftClick()
                       this.$sendChanel("renderNode")
                       // new YJ.Layer.GDWXImagery()
                       // new YJ.Layer.ArcgisWXImagery()
                       // new YJ.Layer.GDLWImagery()
                       // new YJ.Terrain.Arcgis()
                       // YJ.Global.showDistanceLegend(true)
                       this.$store.dispatch("changeSystem", localStorage.getItem("systemSetting") + "#");
                       this.$store.dispatch("changeModelLibPath", localStorage.getItem("modelLibPath"));
                     })
                     this.$router.push({path: '/'})*/
                }, 2000);
              })
              .catch((err) => {
                console.log("catch", err);
                this.loading = false;
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else {
        this.$message.error("后端服务未正常启动，尝试更换地址或端口");
      }
    },

    //
    createEarth() {
      let earth = new YJ.YJEarth("earth");

      window.Earth1 = earth;



      window.$dth.setSdk(window.Earth1);
      this.getPort();

      this.flyToView();

      YJ.Global.openRightClick(window.Earth1);
      YJ.Global.openLeftClick(window.Earth1);
      // new YJ.Terrain.Arcgis()
      this.$store.dispatch(
        "changeSystem",
        localStorage.getItem("systemSetting") + "#"
      );
      this.$store.dispatch(
        "changeModelLibPath",
        localStorage.getItem("modelLibPath")
      );
      this.$store.dispatch(
        "changeGraphLabelLibPath",
        localStorage.getItem("graphLabelLibPath")
      );

      let concurrentcode = localStorage.getItem("concurrentcode");
      if (!concurrentcode) {
        concurrentcode = 30;
        localStorage.setItem("concurrentcode", concurrentcode);
      }
      YJ.Global.setMaximumRequestsPerServer(concurrentcode);
      this.systemSetting = JSON.parse(localStorage.getItem("systemSetting"));
      console.log("this.systemSetting", this.systemSetting);
      if (this.systemSetting.sheetIndexStatusSwitch) {
        setTimeout(() => {
          YJ.Global.SheetIndexStatusSwitch(
            window.Earth1,
            true,
          );
        }, 1000);
      }
      this.$sendElectronChanel("getIniConfig");
      this.$recvElectronChanel("IniConfig", (e, iniContent) => {
        let url = `http://${iniContent.protocol.host}:${iniContent.protocol.port}`;

        checkAuth(url, (res) => {
          // console.log("checkAuth1111111111111", res);
          window.checkAuthIsValid = res.is_valid
          if (res.message === "临时授权" || res.message === "永久授权") {
            this.$sendChanel("renderNode");
          } else {
            this.$message.error(res.message + "，请到设置中重新授权!");
          }
        });
      });
    },

    // 获取Header图片
    getHeader() {
      try {
        getHeaderList({
          page: 1,
          pageSize: 99999,
        }).then(res => {
          if (res.code == 0 || res.code == 200) {
            let headerList = res.data.list
            let flag = false
            for (let i = 0; i < headerList.length; i++) {
              if (headerList[i].selected) {
                flag = true
                localStorage.setItem("header", JSON.stringify(headerList[i]))
                this.$sendChanel("header", headerList[i])
                break
              }
            }
            if (!flag && headerList && headerList.length > 0) {
              localStorage.setItem("header", JSON.stringify(headerList[0]))
              this.$sendChanel("header")
              selectHeader({
                id: headerList[0].id
              }).then(res => {
                if (res.code == 0 || res.code == 200) {
                }
              })
            }
          }
          else {
            localStorage.setItem("header", JSON.stringify({}))
            this.$sendChanel("header")
          }
        })
      } catch (error) {
        localStorage.setItem("header", JSON.stringify({}))
        this.$sendChanel("header")
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
$bg: #2d3a4b;
$light_gray: #eee;

/* reset element-ui css */
.login-container {
  .content_h {
    >span {
      cursor: pointer;
    }
  }

  .serviceSet {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  .content {
    .el-input {
      display: inline-block;
      height: 40px;
      width: 85%;
      margin: 5px 0;

      input {
        background: transparent;
        border: 0px;
        // -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;

        &:-webkit-autofill {
          -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: #fff !important;
        }
      }
    }
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }

  /* .el-dialog__wrapper {
     .el-tabs__content {
       height: 150px;
       overflow: auto;
     }
   }*/
  .el-dialog__body {
    padding: 0 !important;
  }

  /*.contentBox {
    height: 320px;
    overflow: auto;
  }*/
  .serviceContent {
    input {
      background: transparent !important;
      color: #fff !important;
    }
  }

  .btn {
    button {
      border: 1px solid rgba(0, 255, 255, 0.5) !important;
      background: rgba(0, 255, 255, 0.2) !important;
      color: #fff !important;

      &:hover {
        border: 1px solid rgba(0, 255, 255, 1) !important;
        color: #00ffff !important;
      }
    }
  }
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  user-select: none;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: $bg;

  img {
    -webkit-user-drag: none;
  }

  .content {
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 99;

    // .el-form-item__content:last-child {
    //   border: none;
    // }

    .titleBox {
      display: flex;
      justify-content: center;

      .titleItem {
        display: flex;
        align-items: center;

        .title {
          font-size: 4em;
          font-weight: bold;
          color: $light_gray;
          text-align: center;
        }
      }
    }

    .login-form {
      //position: absolute;
      //left: 0;
      //right: 0;
      width: 80vw;
      height: 21.6vw;
      //padding: 35px 35px 15px 35px;
      //margin: 120px auto;
      background-repeat: no-repeat;
      background-image: url("../../assets/images/form_bg.png");
      background-size: 100% 100%;
      //z-index: 99;
      //min-height: 15vw;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;

      img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -2vw;
      }

      .el-form-item {
        width: 20vw;
        margin-bottom: 0.5vw;
      }

      .signInBox {
        background-repeat: no-repeat;
        background-image: url("../../assets/images/signIn.png");
        background-size: 100% 100%;
        width: 13vw;
        text-align: center;
        cursor: pointer;
        margin-bottom: 1.5vw;
        padding: 0.6vw 0;
        letter-spacing: 0.2vw;
        font-size: 18px;
        color: #fff;
        background-color: transparent;
        border: none;
        // background: transparent;
        // border: none;
      }

      .el-button.is-loading:before {
        background-color: rgb(116 230 249 / 8%);
      }
    }
  }

  .svg-container {
    //padding: 6px 5px 6px 15px;
    color: $dark_gray;
    color: $dark_gray;
    vertical-align: middle;
    width: 40px;
    display: inline-block;
    text-align: center;

    &_login {
      font-size: 20px;
    }
  }

  /*.title {
    font-size: 26px;
    font-weight: 400;
    color: $light_gray;
    margin: 0px auto 40px auto;
    text-align: center;
    font-weight: bold;
  }*/

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }

  .checkBoxGroup {
    color: #000;

    .spans {
      font-size: 28px;
      align-items: center;
    }

    .ipBox {
      //display: flex;
      //flex-direction: row;
      //border: 1px solid red;

      &>div {
        display: flex;
        align-self: center;
        align-items: center;

        .el-input {
          display: inline-block;
          height: 40px;
          width: 50%;
          margin: 5px 0;
          //input {
          //  background: transparent;
          //  border: 0px;
          //  -webkit-appearance: none;
          //  border-radius: 0px;
          //  padding: 12px 5px 12px 15px;
          //  color: $light_gray;
          //  height: 47px;
          //
          //  &:-webkit-autofill {
          //    -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
          //    -webkit-text-fill-color: #fff !important;
          //  }
          //}
        }
      }
    }

    .span {
      align-self: flex-end;
      color: red;
      font-size: 28px;
    }

    .btn {
      margin: 25px 0 10px;
      box-sizing: border-box;
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: center;

      .space {
        margin: 0 25px;
      }
    }
  }

  .btn {
    text-align: center;
  }

  .service {
    z-index: 999;
    width: 100vw;
    height: 100vh;
    position: absolute;

    .contentBox {
      border: 1.5px solid;
      backdrop-filter: blur(2px);
      background: linear-gradient(0deg, #00ffff33 0%, #00ffff00 100%),
        rgba(0, 0, 0, 0.6);
      width: 450px;
      height: 400px;
      position: absolute;
      color: #fff;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-image: linear-gradient(to bottom,
          rgb(0, 255, 255) 6.25%,
          rgb(0, 200, 255) 100%) 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .titleBox {
        height: 50px;

        .title {
          line-height: 50px;
          padding-left: 15px;
          font-size: 20px;
          text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
        }

        .closeBox {
          right: 0;
          position: absolute;
          display: inline-block;
          width: 35px;
          height: 33px;
          border-radius: 0 0 0 90%;
          background: #00ffff;

          &>span {
            font-size: 22px;
            position: absolute;
            right: 5px;
            cursor: pointer;
          }
        }
      }

      .hr {
        width: 89%;
        margin: 0 auto;
        border-bottom: 1px solid rgba(204, 204, 204, 0.2);
      }

      .serviceContent {
        flex: auto;
        //border: 1px solid red;
        padding: 5px 0;

        .tab {
          border-radius: 5px;
          //width: 50%;
          width: 300px;
          margin: 0 auto;
          overflow: hidden;
          background: rgba(0, 255, 255, 0.2);
          display: flex;

          .tab-item {
            display: inline-block;
            flex: 1;
            height: 32px;
            line-height: 32px;
            text-align: center;
            cursor: pointer;
          }

          .activeService {
            border: 1px solid #00ffff;
            border-radius: 5px;
          }
        }

        .itemLabel {
          width: 85px;
          text-align: right;
          display: inline-block;
        }

        .tabPanel {
          width: 80%;
          margin: 0 auto;

          .item {
            display: flex;
            align-items: center;
            margin: 15px 0;

            .select {
              //flex: auto;
              width: 200px;
            }
          }
        }
      }

      &:after {
        display: block;
        position: absolute;
        content: "";
        left: -1.5px;
        top: -6px;
        width: 70.5px;
        height: 6px;
        opacity: 1;
        background: rgba(0, 255, 255, 1);
        clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 6px, 0 6px);
      }
    }
  }
}
</style>
