<template>
  <div class="login">
    <div class="logoTitle" style="margin-left: 50px;margin-top: 50px;">
      <img src="../../assets/loginImg/yxt-logo.png" style="width: 250px;height:50px; margin-right: 10px;" />
    </div>

    <div class="main">

      <img src="../../assets/loginImg/login_left.png" style="width:50%;height:100%; " />

      <div class="main-right" v-show="register==0">

        <span class="main-right-title">欢迎登录商享通管理后台</span>


        <div class="main-right-table">

          <div style="cursor:pointer;" :class="tableIndex == 1 ? 'main-right-table-text1' : 'main-right-table-text3'"
            @click="tableClick(1)">
            密码登录</div>
          <div style="cursor:pointer;" :class="tableIndex == 2 ? 'main-right-table-text2' : 'main-right-table-text4'"
            @click="tableClick(2)">
            验证码登录</div>

        </div>

        <div class="main-right-table-password" v-show="tableIndex==1">

          <el-input class="input" placeholder="请输入手机号/邮箱" clearable v-model="loginForm.userName" />
          <el-input class="input" placeholder="请输入密码" type="password" show-password v-model="loginForm.password" />

        </div>

        <div class="main-right-table-code" v-show="tableIndex==2">
          <el-input class="input" placeholder="请输入手机号/邮箱" clearable v-model="loginForm.userName" />
          <div style="display: flex;flex-direction: row;align-items: center;width: 100%;">
            <el-input class="input" style="flex: 1; margin-right: 10px;" maxlength="6" placeholder="请输入验证码"
              v-model="loginForm.verifyCode" />
            <span :class="sendCodeType ? 'sendCode1' : 'sendCode2'" style="cursor:pointer;"
              @click="sendCode">{{sendCodeText}}</span>
          </div>

        </div>


        <el-button type="primary" size="small" style="width: 65%;margin-top: 30px; font-size: 25px;line-height: 40px;"
          @click="login">登录</el-button>

        <div class="main-right-bom">

          <el-checkbox class="main-right-bom-left" v-model="checkbox">7天内免登录</el-checkbox>

          <!-- <div class="main-right-bom-right">

            <span @click="forgetClick" style="cursor:pointer;">忘记密码</span>
            <div style="margin-left: 8px;margin-right: 8px;width: 1px; height: 18px;background: #999;"></div>
            <span @click="registerClick" style="cursor:pointer;">去注册</span>

          </div> -->

        </div>

      </div>


      <!-- <div class="main-right" v-show="register==1">

        <div v-show="registerStep==1" class="registerStep1">
          <span class="main-right-title2">欢迎注册商享通WMS</span>


          <span style="width: 100%; margin-top: 15px;">手机号码</span>

          <el-input class="input" style="flex: 1; margin-right: 10px;margin-top: 5px;" maxlength="11"
            placeholder="请输入手机号码" v-model="registerInfo.mobile" />

          <span style="width: 100%;margin-top: 15px;">密码</span>

          <el-input class="input" style="flex: 1; margin-right: 10px;margin-top: 5px;" maxlength="6" placeholder="请输入密码"
            v-model="registerInfo.password" show-password />

          <span style="width: 100%;margin-top: 15px;">验证码</span>
          <div
            style="display: flex;flex-direction: row;align-items: center;width: 100%; margin-top: 5px;margin-left: -10px;">
            <el-input class="input" style="flex: 1; margin-right: 10px;" maxlength="6" placeholder="请输入验证码"
              v-model="registerInfo.code" />
            <span :class="sendCodeType2 ? 'sendCode1' : 'sendCode2'" @click="sendCode2"
              style="cursor:pointer;">{{sendCodeText2}}</span>
          </div>

          <div style="display: flex;flex-direction: row;align-items: center;width: 100%; margin-top: 5px;"
            @click="goLogin">
            <span>已有账号？</span>
            <span style="color: #5084D2;cursor:pointer;">登录</span>
          </div>


          <el-button type="primary" size="small"
            style="width: 100%;margin-top: 30px; font-size: 25px;line-height: 40px;"
            @click="registerStep1()">注册</el-button>

          <div style="display: flex;flex-direction: row;align-items: center;width: 100%; margin-top: 10px;">
            <el-checkbox style="margin-right: 5px;" v-model="check"></el-checkbox>
            <span style="font-size: 12px;">我已阅读并同意</span>
            <span style="font-size: 12px;cursor:pointer;">《宇信通服务协议》</span>
            <span style="font-size: 12px;">与</span>
            <span style="font-size: 12px;cursor:pointer;">《隐私协议》</span>
          </div>
        </div> -->

      <!-- <div v-show="registerStep==2" class="registerStep2">

          <span class="main-right-title">请选择公司进入WMS</span>

          <div style="height: 300px;width: 100%; margin-top: 15px;overflow: auto;
          display: flex;flex-direction: column;">

            <div v-for="(item,index) in companyList" :key="index" @click="itemClick(item)"
              style="display: flex;flex-direction: column;width: 100%;">
              <div style="display: flex;flex-direction: row;align-items: center;
              background: #EDF1F7; border-radius: 8px;width: 100%;margin-bottom: 20px;
              height: 50px;cursor:pointer;">
                <img src="../../assets/images/company_icon.png" style="width: 25px; height: 25px;
                margin-left: 10px;margin-right: 10px;" />
                <span style="flex: 1;margin-right: 10px;">{{item.orgName}}</span>
                <img v-show="item.type=='1'" src="../../assets/images/overdue.png" style=" height: 100%;" />
                <img v-show="item.type=='2'" src="../../assets/images/experience.png" style=" height: 100%;" />
                <img v-show="item.type=='3'" src="../../assets/images/formal.png" style=" height: 100%;" />

              </div>

            </div>

          </div>

          <el-button type="primary" size="small"
            style="width: 100%;margin-top: 30px; font-size: 25px;line-height: 40px;"
            @click="registerStep2()">新建企业信息</el-button>

        </div> -->

      <!-- <div v-show="registerStep==3" class="registerStep3">

          <span class="main-right-title2">欢迎注册商享通WMS</span>

          <span style="width: 100%; font-size: 16px;color: #000; margin-top: 40px;">请填写您的企业信息</span>

          <div style="display: flex;flex-direction: row;align-items: center; margin-top: 15px;width: 100%; ">
            <span>企业名称：</span>
            <el-input class="input" style="flex: 1; " placeholder="请输入公司名称" v-model="registerInfo.companyName" />
          </div>

          <div style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;width: 100%; ">
            <span>联系人员：</span>
            <el-input class="input" style="flex: 1;" placeholder="请输入联系人" v-model="registerInfo.contacts" />
          </div>

          <div style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;width: 100%; ">
            <span>所在区域：</span>
            <el-cascader v-model="selectedOptions" :options="options" filterable clearable class="input"
              style="flex: 1;" @change="handleChange" />

          </div>
          <el-button type="primary" size="small"
            style="width: 100%;margin-top: 30px; font-size: 25px;line-height: 40px;"
            @click="registerStep3()">创建并进入</el-button>


        </div> -->

    </div>

  </div>


  </div>
</template>

<script>
  import {
    doLogin,
  } from '@/api/User/login.js'
  // 导入省市区数据组件
  import {
    regionData,
    codeToText,
    TextToCode
  } from 'element-china-area-data'
  import {
    setCookie,
    getCookie,
    removeCookie,
  } from '@/utils/functions.js.js'
  export default {
    data() {
      return {
        checkbox: false,
        register: 0,
        registerStep: 1,
        tableIndex: 1,

        sendCodeText: "发送验证码",
        sendCodeType: false,
        totalTime: 10, //一般是60
        timer: '', //定时器

        sendCodeText2: "发送验证码",
        sendCodeType2: false,
        totalTime2: 10, //一般是60
        timer2: '', //定时器

        check: false,
        registerInfo: {
          mobile: '',
          userSid: "",
          sourceSid: 'd936f1ba-03c3-11ec-bf08-48452053aa45', //  wms 资源sid
        },
        loginForm: {
          userName: '',
          password: '',
          verifyCode: "",
          type: "1"
        },
        loading: false,
        loginCode: false,
        showMsg: false,
        forgetPwd: false,
        nopassword: {
          userPhone: '',
          userName: '',
        },
        // 将省市区数据赋给级联选择器
        options: regionData,
        // 存放用户选择后省市区的信息
        selectedOptions: [],
        companyList: [
          //   {
          //   sid: "1",
          //   name: "撒打算打算1阿斯顿撒大撒打算打算大萨达",
          //   type: "1"
          // }, {
          //   sid: "2",
          //   name: "撒打算打算2",
          //   type: "2"
          // }, {
          //   sid: "3",
          //   name: "撒打算打算3",
          //   type: "3"
          // }, {
          //   sid: "4",
          //   name: "撒打算打算4",
          //   type: "1"
          // }, {
          //   sid: "5",
          //   name: "撒打算打算5",
          //   type: "1"
          // }, {
          //   sid: "6",
          //   name: "撒打算打算6",
          //   type: "1"
          // }, {
          //   sid: "7",
          //   name: "撒打算打算7",
          //   type: "1"
          // }, {
          //   sid: "1",
          //   name: "撒打算打算1",
          //   type: "1"
          // }, {
          //   sid: "1",
          //   name: "撒打算打算1",
          //   type: "1"
          // }, {
          //   sid: "1",
          //   name: "撒打算打算1",
          //   type: "1"
          // },
        ]
      }
    },
    created() {

      if (getCookie("pas") && getCookie("name")) { //判断页面是否有对应Cookie
        this.loginForm.userName = getCookie("name"); //有则写入
        this.loginForm.password = getCookie("pas");

        console.log(" created", this.loginForm)

        this.checkbox = true



      } else {
        this.loginForm.userName = ""; //无则写空
        this.loginForm.password = "";
      }

    },

    methods: {
      // 省市区级联选择器选择后更新用户前端
      handleChange(value) {
        console.log(" handleChange", value)

        var province = ''
        var city = ''
        var country = ''
        for (let i = 0; i < this.selectedOptions.length; i++) {
          if (i === 0) {
            var province = codeToText[this.selectedOptions[i]]
          }
          if (i === 1) {
            var city = codeToText[this.selectedOptions[i]]
          }
          if (i === 2) {
            var country = codeToText[this.selectedOptions[i]]
          }
        }

        console.log(" handleChange", province + "/" + city + "/" + country)

        this.registerInfo.region = province + "/" + city + "/" + country

      },
      tableClick(index) {
        this.tableIndex = index

        this.loginForm.type = index + ""

      },

      // 验证码倒计时
      sendCode() {
        if (this.sendCodeType) return
        // this.getCode() // 获取验证码的接口
        this.sendCodeType = true
        this.sendCodeText = this.totalTime + 's'
        this.timer = setInterval(() => {
          this.totalTime--
          this.sendCodeText = this.totalTime + 's'
          if (this.totalTime < 0) {
            clearInterval(this.timer)
            this.sendCodeText = '发送验证码'
            this.totalTime = 10
            this.sendCodeType = false
          }
        }, 1000)
      },
      // 验证码倒计时
      sendCode2() {

        if (this.registerInfo.mobile == '') {
          this.$message({
            message: '请输入手机号码',
            type: 'warning'
          })
          return
        }
        var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/

        console.log(" reg", reg.test(this.registerInfo.mobile))

        if (!reg.test(this.registerInfo.mobile)) {
          this.$message({
            message: '手机号码格式错误',
            type: 'warning'
          })
          return
        }

        if (this.sendCodeType2) return
        // this.getCode() // 获取验证码的接口
        this.sendCodeType2 = true
        this.sendCodeText2 = this.totalTime2 + 's'
        this.timer2 = setInterval(() => {
          this.totalTime2--
          this.sendCodeText2 = this.totalTime2 + 's'
          if (this.totalTime2 < 0) {
            clearInterval(this.timer2)
            this.sendCodeText2 = '发送验证码'
            this.totalTime2 = 10
            this.sendCodeType2 = false
          }
        }, 1000)

        registerSendMessageCode(this.registerInfo.mobile).then((response) => {}).catch(() => {})

      },

      login() {

        if (this.checkbox) { //判断多选框是否选中
          setCookie("name", this.loginForm.userName, 7); //如选中则添加Cookie，添加内容为用户输入的密码和用户名
          setCookie("pas", this.loginForm.password, 7);
        } else {
          removeCookie("name"); //如没选中，则删除掉对应的Cookie
          removeCookie("pas");
        }

        // this.register = 1
        // this.registerStep = 2

        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        doLogin(this.loginForm).then((response) => {
          if (response.code == 200) {

            // loading.close()
            // this.register = 1

            // this.companyList = response.data.sysOrganizationVos
            // this.registerInfo.userSid = response.data.sid

            if (response.code == 200) {

              if (response.data.userName != "yxt_admin") {
                this.$message({
                  message: '此账号不能登录.',
                  type: 'warning'
                })
                loading.close()
                return
              }

              this.$router.push({
                path: '/index'
              })

              loading.close()

              window.sessionStorage.setItem('token', response.data.token)
              window.sessionStorage.setItem('staffSid', response.data.staffSid)
              window.sessionStorage.setItem('userSid', response.data.sid)
              window.sessionStorage.setItem('name', response.data.name)
              window.sessionStorage.setItem('userName', response.data.userName)
              window.sessionStorage.setItem('mobile', response.data.mobile)
              window.sessionStorage.setItem('orgName', response.data.organizationName)
              window.sessionStorage.setItem('orgSid', response.data.organizationSid)
              window.sessionStorage.setItem('orgSidPath', response.data.orgSidPath)
            } else {
              loading.close()
            }


            // if (this.companyList.length == 0) {
            //   // 1. 新用户 无关联企业
            //   this.registerStep = 3
            // } else {
            //   // 2. 注册过 选择企业登录
            //   this.registerStep = 2
            // }
          } else {
            loading.close()
          }

        }).catch(() => {
          loading.close()
        })

      },
      forgetClick() {

      },
      registerClick() {
        this.register = 1
        this.registerStep = 1
      },
      goLogin() {
        this.register = 0
        this.registerStep = 0
      },
      registerStep1() {

        if (!this.check) {
          this.$message({
            message: '请阅读并同意《宇信通服务协议》与《隐私协议》',
            type: 'warning'
          })
          return
        }

        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        registUser(this.registerInfo).then((response) => {
          if (response.code == 200) {
            loading.close()

            this.companyList = response.data.sysOrganizationVos
            this.registerInfo.userSid = response.data.sid

            if (this.companyList.length == 0) {
              // 1. 新用户 无关联企业
              this.registerStep = 3
            } else {
              // 2. 注册过 选择企业登录
              this.registerStep = 2
            }

          } else {
            loading.close()
          }

        }).catch(() => {
          loading.close()
        })

      },
      registerStep2() {

        this.registerStep = 3

      },
      registerStep3() {

        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        bindOrganization(this.registerInfo).then((response) => {

          if (response.code == 200) {

            this.$router.push({
              path: '/index'
            })

            loading.close()

            window.sessionStorage.setItem('token', response.data.token)
            window.sessionStorage.setItem('staffSid', response.data.staffSid)
            window.sessionStorage.setItem('userSid', response.data.sid)
            window.sessionStorage.setItem('name', response.data.name)
            window.sessionStorage.setItem('userName', response.data.userName)
            window.sessionStorage.setItem('mobile', response.data.mobile)
            window.sessionStorage.setItem('orgName', response.data.orgName)
            window.sessionStorage.setItem('orgSid', response.data.orgSid)
            window.sessionStorage.setItem('defaultDeptName', response.data.defaultDeptName)
            window.sessionStorage.setItem('defaultDeptSid', response.data.defaultDeptSid)
            window.sessionStorage.setItem('defaultRoleName', response.data.defaultRoleName)
            window.sessionStorage.setItem('defaultRoleSid', response.data.defaultRoleSid)
            window.sessionStorage.setItem('orgSidPath', response.data.orgSidPath)
            window.sessionStorage.setItem('defaultOrgPath', response.data.defaultOrgPath)
            window.sessionStorage.setItem('defaultOrgPathName', response.data.defaultOrgPathName)
            window.sessionStorage.setItem('pNameAndDepartmentNameAndPostName', response.data
              .pNameAndDepartmentNameAndPostName)
          } else {
            loading.close()
          }

        }).catch(() => {
          loading.close()
        })

      },
      itemClick(item) {
        console.log(" itemClick", item)

        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        var params = {
          userSid: this.registerInfo.userSid,
          orgSid: item.orgSid
        }

        selOrganization(params).then((response) => {

          if (response.code == 200) {

            this.$router.push({
              path: '/index'
            })

            loading.close()

            window.sessionStorage.setItem('token', response.data.token)
            window.sessionStorage.setItem('staffSid', response.data.staffSid)
            window.sessionStorage.setItem('userSid', response.data.sid)
            window.sessionStorage.setItem('name', response.data.name)
            window.sessionStorage.setItem('userName', response.data.userName)
            window.sessionStorage.setItem('mobile', response.data.mobile)
            window.sessionStorage.setItem('orgName', response.data.orgName)
            window.sessionStorage.setItem('orgSid', response.data.orgSid)
            window.sessionStorage.setItem('defaultDeptName', response.data.defaultDeptName)
            window.sessionStorage.setItem('defaultDeptSid', response.data.defaultDeptSid)
            window.sessionStorage.setItem('defaultRoleName', response.data.defaultRoleName)
            window.sessionStorage.setItem('defaultRoleSid', response.data.defaultRoleSid)
            window.sessionStorage.setItem('orgSidPath', response.data.orgSidPath)
            window.sessionStorage.setItem('defaultOrgPath', response.data.defaultOrgPath)
            window.sessionStorage.setItem('defaultOrgPathName', response.data.defaultOrgPathName)
            window.sessionStorage.setItem('pNameAndDepartmentNameAndPostName', response.data
              .pNameAndDepartmentNameAndPostName)

          } else {
            loading.close()
          }


        }).catch(() => {
          loading.close()
        })

      },

      getUserInfo(id) {
        getUserById(id).then((response) => {
          if (response.code == 200) {
            console.log(" response", response)
            let user = response.data
            // 结果存入缓存
            window.sessionStorage.setItem('staffSid', user.staffSid)
            window.sessionStorage.setItem('sid', user.sid)
            window.sessionStorage.setItem('userName', user.userName)
          }

        }).catch(() => {})

      },
      codeShow() {
        if (this.loginForm.password == '' || this.loginForm.userName == '') {
          this.loginCode = false
          this.showMsg = true
          return
        }
        this.$refs.imgCodeRole.getCodeImage()
      },
      reGetPwd() {
        user.reGetPwd(this.nopassword).then((res) => {})
      },
    },
  }
</script>


<style lang="scss">
  // .el-input__inner {
  //   border: none;
  //   color: #000;
  //   font-size: 16px;
  // }

  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    -webkit-text-fill-color: #000;
  }


  .login {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-image: url(../../assets/home/bj.png);
    background-position: center;
    overflow: hidden;

    .logoTitle {
      margin: 30px;

    }

    .main {
      width: 60%;
      height: 500px;
      background: #ffffff;
      box-shadow: 0px 13px 12px 0px rgba(0, 0, 0, 0.15);
      opacity: 0.8;
      border-radius: 5px;
      position: absolute;
      right: 20%;
      top: 25%;
      display: flex;
      flex-direction: row;

      .main-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        height: 100%;

        .main-right-title {
          margin-top: 40px;
          font-size: 24px;
          font-weight: 600;
        }

        .main-right-title2 {
          margin-top: 40px;
          font-size: 24px;
          font-weight: 600;
          color: #467CCF;
        }

        .main-right-table {
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-top: 30px;
          width: 70%;

          .main-right-table-text1 {
            flex: 1;
            font-size: 22px;
            text-align: center;
            color: #3E77CD;
          }

          .main-right-table-text1:after {
            content: '';
            display: block;
            width: 60px;
            border-bottom: 2px solid #3E77CD;
            margin: 0 auto;
            padding-bottom: 8px;
          }


          .main-right-table-text3 {
            flex: 1;
            font-size: 22px;
            text-align: center;
            color: #333;
            border-bottom: none;
            padding-bottom: 8px;
          }

          .main-right-table-text2 {
            flex: 1;
            font-size: 22px;
            text-align: center;
            color: #3E77CD;
          }

          .main-right-table-text2:after {
            content: '';
            display: block;
            width: 80px;
            border-bottom: 2px solid #3E77CD;
            margin: 0 auto;
            padding-bottom: 8px;
          }

          .main-right-table-text4 {
            flex: 1;
            font-size: 22px;
            text-align: center;
            color: #333;
            border-bottom: none;
            padding-bottom: 8px;
          }
        }

        .main-right-table-password {
          display: flex;
          width: 65%;
          margin-top: 10px;
          flex-direction: column;
          align-items: center;

          .input {
            margin-top: 10px;
            width: 100%;
            height: 50px;
          }
        }

        .main-right-table-code {

          display: flex;
          width: 65%;
          margin-top: 10px;
          flex-direction: column;
          align-items: center;

          .input {
            margin-top: 10px;
            width: 100%;
            height: 50px;
          }

          .sendCode1 {
            font-size: 16px;
            color: #c9c9c9;
          }

          .sendCode2 {
            font-size: 16px;
            color: #3E77CD;
          }

        }

        .main-right-bom {
          padding-left: 10px;
          padding-right: 10px;
          display: flex;
          width: 65%;
          margin-top: 10px;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;

          .main-right-bom-left {
            color: #000;
            align-items: center;
          }

          .main-right-bom-right {
            display: flex;
            flex-direction: row;
            align-items: center;

            span {
              color: #666;

            }
          }
        }

        .registerStep1 {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 65%;

          .input {
            width: 100%;
            height: 50px;
          }

          .main-right-title2 {
            font-size: 24px;
            font-weight: 600;
            color: #467CCF;
          }

          .sendCode1 {
            font-size: 16px;
            color: #c9c9c9;
          }

          .sendCode2 {
            font-size: 16px;
            color: #3E77CD;
          }

        }

        .registerStep2 {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 70%;

          .input {
            width: 100%;
            height: 50px;
          }

          .main-right-title {
            font-size: 24px;
            font-weight: 600;
          }

        }

        .registerStep3 {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 70%;

          .input {
            width: 100%;
            height: 50px;
          }
        }

      }



    }
  }
</style>
