<template>
  <div class="g-app">
    <div class="g-bd" v-if="isShowLogin || true">
      <div class="m-snow-box" id="snow_box"></div>

      <div class="m-fm animate__animated animate__backInDown">
        <div class="wrap">
          <h2 class="title">{{ $t("brand.work") }}</h2>
          <div class="fm">
            <el-form
              :model="dataForm"
              :rules="dataRule"
              ref="dataForm"
              @keyup.enter.native="dataFormSubmitHandle()"
              status-icon
            >
              <div class="fm-item">
                <div class="ico">
                  <img src="@/assets/img/login/zhanghao.png" alt="" />
                </div>
                <div class="input">
                  <input
                    type="text"
                    v-model="dataForm.phone"
                    placeholder="账号"
                  />
                </div>
              </div>
              <div class="fm-item">
                <div class="ico">
                  <img src="@/assets/img/login/mima.png" alt="" />
                </div>
                <div class="input">
                  <input
                    type="password"
                    v-model="dataForm.password"
                    :placeholder="$t('login.password')"
                  />
                </div>
              </div>
              <div class="fm-captcha">
                <div class="fm-item">
                  <div class="input">
                    <input
                      type="text"
                      v-model="dataForm.captcha"
                      placeholder="验证码"
                    />
                  </div>
                </div>
                <div class="captcha">
                  <img :src="captchaPath" @click="getCaptcha()" />
                </div>
              </div>

              <div class="fm-btn" @click="dataFormSubmitHandle()">
                {{ $t("login.title") }}
              </div>
              <div class="hint">请使用小程序端的账号密码登录</div>
            </el-form>
          </div>
        </div>
      </div>

      <div class="m-footer">
        <div class="login-footer">
          <p>
            <a href="" target="_blank">{{ $t("login.copyright") }}</a>
          </p>
        </div>
      </div>
    </div>

    <c-dialog
      :showFooter="false"
      :title="'选择客户'"
      :isNest="false"
      :visible="diaVisible"
      :dialogHeight="0.8"
      :width="30"
      :top="'120px'"
      @cancel="diaCancel"
    >
      <div class="m-pop">
        <div v-for="(item, index) in tableData" :key="index" class="div_row">
          <span @click="selectCustomer(item)" class="span_name">{{
            item.customerName
          }}</span>
        </div>
      </div>
    </c-dialog>
  </div>
</template>

<script>
import CDialog from "@c/CDialog";
import particles_js from "particles.js/particles.js";
import { messages } from "@/i18n";
import { getUUID } from "@/utils";
import { Loading } from "element-ui"; // 引入Loading服务
import JSEncrypt from "jsencrypt"; //引入加密

let loading; // 加载动画
export default {
  data() {
    return {
      pubKey: null, // 获取到公钥
      isShowLogin: true,
      i18nMessages: messages,
      captchaPath: "",
      dataForm: {
        customerId: "",
        app: "gov",
        client: "web",
        username: "",
        phone: "",
        password: "",
        uuid: "",
        captcha: "",
      },
      // 客户列表相关
      diaVisible: false,
      tableLoading: false,
      tableData: [],
    };
  },
  components: {
    CDialog,
  },
  computed: {
    dataRule() {
      return {
        phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        captcha: [
          { required: true, message: "验证码不能为空", trigger: "blur" },
        ],
      };
    },
  },
  created() {
    //平阴联动平台 登陆
    if (this.$route.query.platformToken) {
      this.isShowLogin = false;
      this.getAutoLogin(this.$route.query.platformToken);
    } else {
      this.getCaptcha();
      //获取公钥
      this.getPubKey();
    }
  },
  mounted() {
    localStorage.removeItem("showHeader");

    particlesJS(
      "snow_box",
      {
        particles: {
          number: {
            value: 380,
            density: {
              enable: true,
              value_area: 800,
            },
          },
          color: {
            value: "#ffffff",
          },
          shape: {
            type: "circle",
            stroke: {
              width: 0,
              color: "#000000",
            },
            polygon: {
              nb_sides: 5,
            },
            image: {
              src: "img/github.svg",
              width: 100,
              height: 100,
            },
          },
          opacity: {
            value: 0.5,
            random: false,
            anim: {
              enable: false,
              speed: 1,
              opacity_min: 0.1,
              sync: false,
            },
          },
          size: {
            value: 3,
            random: true,
            anim: {
              enable: false,
              speed: 40,
              size_min: 0.1,
              sync: false,
            },
          },
          line_linked: {
            enable: true,
            distance: 150,
            color: "#ffffff",
            opacity: 0,
            width: 1,
          },
          move: {
            enable: true,
            speed: 6,
            direction: "none",
            random: false,
            straight: false,
            out_mode: "out",
            bounce: false,
            attract: {
              enable: false,
              rotateX: 600,
              rotateY: 1200,
            },
          },
        },
        interactivity: {
          detect_on: "canvas",
          events: {
            onhover: {
              enable: true,
              mode: "grab",
            },
            onclick: {
              enable: true,
              mode: "push",
            },
            resize: true,
          },
          modes: {
            grab: {
              distance: 140,
              line_linked: {
                opacity: 1,
              },
            },
            bubble: {
              distance: 400,
              size: 40,
              duration: 2,
              opacity: 8,
              speed: 3,
            },
            repulse: {
              distance: 200,
              duration: 0.4,
            },
            push: {
              particles_nb: 4,
            },
            remove: {
              particles_nb: 2,
            },
          },
        },
        retina_detect: true,
      },
      function () {
        console.log("callback - particles.js config loaded");
      }
    );
  },

  methods: {
    // 获取公钥
    getPubKey() {
      this.$http
        .post("/auth/govweb/getKey")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }

          this.pubKey = res.data; // 获取到公钥;
        })
        .catch(() => {});
    },
    // 获取验证码
    getCaptcha() {
      this.dataForm.uuid = getUUID();
      this.captchaPath = `${window.SITE_CONFIG["apiURL"]}/auth/login/captcha?uuid=${this.dataForm.uuid}`;
    },
    // 表单提交
    dataFormSubmitHandle() {
      this.$refs["dataForm"].validate((valid, messageObj) => {
        if (!valid) {
          app.util.validateRule(messageObj);
        }
        this.startLoading();
        // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/epmetuser/customerstaff/customerlist'
        const url = "/epmetuser/customerstaff/customerlist";
        const params = {
          phone: this.dataForm.phone,
        };
        // this.$http
        // .post(url, params).then(({ data })=> {
        //   console.log('res--comll', data)
        //   if (data.data.length === 0) {
        //     //没有客户，提示无法登录
        //     this.$message.error('账号不存在')
        //     this.endLoading()
        //   } else if (data.data.length === 1) {
        //     this.selectCustomer(data.data[0])
        //   } else {
        //     this.endLoading()
        //     this.diaVisible = true
        //     this.$nextTick(() => {
        //       this.tableData = data.data
        //     })
        //   }
        // }).catch((err) => {
        //   this.endLoading()
        //   this.$message.error(err)
        // })
        window.app.ajax.post(
          url,
          params,
          (data, rspMsg) => {
            if (data.length === 0) {
              //没有客户，提示无法登录
              this.$message.error("账号不存在");
              this.endLoading();
            } else if (data.length === 1) {
              this.selectCustomer(data[0]);
            } else {
              this.endLoading();
              this.diaVisible = true;
              this.$nextTick(() => {
                this.tableData = data;
              });
            }
          },
          (rspMsg, data) => {
            this.endLoading();
            this.$message.error(rspMsg);
          }
        );
      });
    },
    // 平阴联动 自动登录接口
    getAutoLogin(platformToken) {
      this.dataForm.thirdToken = platformToken;
      this.dataForm.platform = "pyld";
      this.$http
        .post(`/auth/sso/oper/third/login`, this.dataForm)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            if (res.code == 8302) {
              return this.$message.error(res.msg);
            }
            return this.$message.error(res.msg);
          }
          localStorage.setItem("customerId", res.data.customerId);
          localStorage.setItem("userType", "work");
          localStorage.setItem("showHeader", "0");
          localStorage.setItem("token", res.data.token);
          this.$router.replace({ name: "home" });
        })
        .catch(() => {});
      // epmet-ext9.elinkservice.cn/platform-admin
    },
    //选择客户
    selectCustomer(row) {
      localStorage.setItem("customerId", row.customerId);
      localStorage.setItem("customerName", row.customerName);
      this.startLoading();
      // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/auth/govweb/login'
      const url = "/auth/govweb/login";
      this.dataForm.customerId = row.customerId;
      let param = {};
      Object.assign(param, this.dataForm);
      param.password = this.encryptedData(this.pubKey, this.dataForm.password);
      this.$http
        .post(url, param)
        .then(({ data: res }) => {
          this.endLoading();
          if (res.code !== 0) {
            this.getCaptcha();
            return this.$message.error(res.msg);
          }
          this.diaVisible = false;

          localStorage.setItem("userType", "work");

          localStorage.setItem("token", res.data.token);
          this.$router.replace({ name: "index" });
        })
        .catch(() => {
          this.endLoading();
        });
    },
    // 取消
    diaCancel() {
      this.diaVisible = false;
    },
    // 开启加载动画
    startLoading() {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: "正在加载……", // 加载中需要显示的文字
        background: "rgba(0,0,0,.7)", // 背景颜色
      });
    },
    // 结束加载动画
    endLoading() {
      // clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
    // 加密
    encryptedData(key, data) {
      // 新建JSEncrypt对象
      let encryptor = new JSEncrypt();
      // 设置公钥
      encryptor.setPublicKey(key);
      // 加密数据
      return encryptor.encrypt(data);
    },
  },
};
</script>

<style lang="scss" src="@/assets/scss/pages/yantai-login.scss" scoped></style>
