<template>
  <div class="verification-container">
    <div class="verification-alert">
      <i class="el-icon-warning-fill"></i>
      <span>检测到异常操作，需要进行验证以确认您的身份</span>
    </div>

    <el-tabs>
      <el-tab-pane label="钉钉扫码">
        <div class="dingtalk-container">
          <iframe
            v-if="dingtalkUrl"
            :src="dingtalkUrl"
            width="210px"
            height="210px"
            class="iframe"
          ></iframe>
          <div class="dingtalk-text">使用<span> 钉钉APP </span>扫描二维码验证</div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="手机验证码">
        <div class="phone-container">
          <div class="phone-text">
            <p>手机号: {{ form.phone }}</p>
          </div>
          <div class="phone-code">
            <el-input
              v-model="form.sms_code"
              maxlength="6"
              placeholder="请输入验证码"
            />
            <el-button
              type="primary"
              :disabled="smsTimer > 0"
              style="margin-left: 8px;"
              @click="getSmsCode"
            >{{ smsTimer===0? '获取验证码':smsTimer+'s后重新获取' }}</el-button>
          </div>
          <div>
            <el-button
              :disabled="form.sms_code.length !== 6"
              type="primary"
              @click="confirm"
            >确认</el-button>
          </div>
        </div>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import request from '../utils/request/index.js'
// getComponentsKeys
import { getComponentsKeys } from '../utils/tools'

// 动态导入 Element UI 组件，确保兼容性
let ElTabs, ElTabPane, ElInput, ElButton

// 尝试从 bi-eleme 导入
try {
  const { Tabs, TabPane, Input, Button } = require('bi-eleme')
  ElTabs = Tabs
  ElTabPane = TabPane
  ElInput = Input
  ElButton = Button
} catch (error) {
  console.warn('bi-eleme 不可用，尝试从 element-ui 导入')
}

const getMaskPhone = (env) => {
  return request({
    env: env,
    system: 'zq',
    api: '/api/admin/getMaskPhone'
  })
}
const getSmsCode = (env) => {
  return request({
    env: env,
    system: 'zq',
    api: '/api/admin/sendSms'
  })
}
const checkSmsCode = (env, code) => {
  return request({
    env: env,
    system: 'zq',
    api: '/api/admin/verifySms',
    data: {
      sms_code: code
    }
  })
}
export default {
  name: 'BiVerification',
  components: {
    'el-tabs': ElTabs,
    'el-tab-pane': ElTabPane,
    'el-input': ElInput,
    'el-button': ElButton
  },
  data() {
    return {
      componentsKeys: getComponentsKeys(),
      form: {
        sms_code: '',
        phone: ''
      },
      currentOrganizationAppkey: '',
      currentOrganizationName: '',
      organizationList: [],
      smsTimer: 0,
      dingtalkUrl: '',
      env: ''
    }
  },
  mounted() {
    const $BI = this.$BI || window.$BI
    this.env = $BI.env || 'production'

    getMaskPhone(this.env).then((res) => {
      this.form.phone = res.data.phone
    })
    if (this.env !== 'production') {
      // this.dingtalkUrl = `http://frontend.zwwlkj03.top:3000/verification?componentsKeys=${this.componentsKeys}&origin=${window.location.origin}`
      this.dingtalkUrl = `https://zq.zwwlkj03.top/verification?componentsKeys=${this.componentsKeys}&origin=${window.location.origin}`
    } else {
      this.dingtalkUrl = `https://zq.wozhangwan.com/verification?componentsKeys=${this.componentsKeys}&origin=${window.location.origin}`
    }
  },

  methods: {
    handleMessage(event) {
      if (event?.data?.componentsKeys === this.componentsKeys) {
        if (event.data.type === 'verification') {
          this.$message.success('验证成功')
          this.$emit('close')
        }
      }
    },
    getSmsCode() {
      // 增加倒计时60s限制

      if (this.smsTimer === 0) {
        this.smsTimer = 60
        getSmsCode(this.env)
          .then((res) => {
            if (res.status_code === 1) {
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
          .finally(() => {
            this.smsTimerFn()
          })

        return
      }
    },
    smsTimerFn() {
      if (this.smsTimer > 0) {
        setTimeout(() => {
          this.smsTimer--
          this.smsTimerFn()
        }, 1000)
      }
    },
    confirm() {
      checkSmsCode(this.env, this.form.sms_code).then((res) => {
        if (res.status_code === 1) {
          window.postMessage({
            componentsKeys: this.componentsKeys,
            type: 'verification'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.verification-container {
  .verification-alert {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: 400;
    font-size: 14px;
    color: #323335;
    margin-bottom: 16px;
    .el-icon-warning-fill {
      color: #ff7d00;
      margin-right: 8px;
    }
  }
  ::v-deep .el-alert__content {
    padding-left: 24px;
  }
  ::v-deep .el-tabs__nav {
    width: 100%;
  }
  ::v-deep .el-tabs__content {
    padding: 16px 0 0 0;
  }
  ::v-deep .el-tabs__item {
    width: 50%;
    text-align: center;
    padding: 0 calc(25% - 36px);
  }

  .dingtalk-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .iframe {
      border: none;
      width: 100%;
      height: 244px;
    }
    .dingtalk-text {
      font-weight: 400;
      line-height: 20px;
      font-size: 12px;
      color: #86909c;
      margin-top: 12px;
      span {
        color: #00bf8a;
      }
    }
  }
  .phone-container {
    .phone-text {
      font-weight: 400;
      font-size: 14px;
      color: #323335;
    }
  }
  .phone-code {
    margin-bottom: 12px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-input {
      width: 100%;
    }
  }
}
</style>