<template>
  <view class="page">
    <BackBar title="扫码绑定" />
    <view class="content">
      <view class="robotCont">
        <image :src="`${OSS_URL}/urm/bindDevice/jqr.png`" class="robot" mode="scaleToFill" />
        <image :src="`${OSS_URL}/urm/bindDevice/jqrMsg.png`" class="robotMsg" mode="scaleToFill" />
      </view>
      <!-- 流程 -->
      <view class="process">
        <view class="title">
          <image
            class="UnionLeft"
            :src="`${OSS_URL}/urm/bindDevice/Union.png`"
            mode="scaleToFill"
          />
          <text>扫码绑定流程</text>
          <image
            class="UnionRight"
            :src="`${OSS_URL}/urm/bindDevice/Union.png`"
            mode="scaleToFill"
          />
        </view>
        <!-- list -->
        <view v-for="(item, index) in stepList" :key="index" class="list">
          <view class="num">{{ item.num }}</view>
          <view class="cont">
            <view class="contentRight">
              <text class="lest">{{ item.title }}</text>
              <text class="lestCont">{{ item.content }}</text>
            </view>
          </view>
        </view>

        <!--扫码 -->
        <view class="QRbutton" @click="queryBinding">
          <wd-icon name="scan1" size="22px"></wd-icon>
          <text class="QRbuttonText">扫描二维码</text>
        </view>
      </view>

      <wd-popup v-model="show" custom-style="border-radius: 10px;">
        <view
          class="popuCont"
          :style="{
            height:
              bindProject[0].bindFlag === 0 && bindProject[1].bindFlag === 0 ? '592rpx' : '648rpx',
          }"
        >
          <text class="title">请确定您要绑定的项目</text>
          <view class="option">
            <view v-for="(item2, index2) in bindProject" :key="index2" class="bind_info">
              <view :class="{ Select: item2.show, item: true }" @click="SelectProject(item2)">
                <text>{{ item2.name }}</text>
                <image :src="item2.icon" class="icons" mode="scaleToFill" />
                <image
                  class="SelectIcon"
                  :src="
                    item2.show
                      ? `${OSS_URL}/urm/bindDevice/SelectIcon.png`
                      : `${OSS_URL}/urm/bindDevice/NoSelectIcon.png`
                  "
                  mode="scaleToFill"
                />
              </view>
              <text v-if="item2.bindFlag === 1" class="bind_text">{{ item2.bindText }}</text>
            </view>
          </view>
          <view v-for="(itCont, itIndex) in contList" :key="itIndex" class="contList">
            <text>·</text>
            <view>{{ itCont }}</view>
          </view>
          <!-- 确认 -->
          <view class="confirm" @click="determine">确定</view>
        </view>
      </wd-popup>
      <!-- 设备、孩子账号已绑定 -->
      <wd-popup v-model="showAllBindPopup" custom-style="border-radius: 10px;">
        <view class="all_bind">
          <text class="title">您已绑定当前设备和账号，无需重复操作</text>
          <!-- 确认 -->
          <view class="confirm" @click="showAllBindPopup = false">确定</view>
        </view>
      </wd-popup>
      <TipPopup
        v-model="showSuccessPopup"
        showBtn
        :text="bindType === 'success' ? '绑定成功' : '绑定失败'"
        :type="bindType"
        :messageTip="successPopupText"
        :btnText="bindType === 'success' ? '确定' : '好的'"
        @backBtn="successPopupBtn"
      />
    </view>

    <!-- 扫码 -->
    <!-- #ifdef H5 -->
    <cshaptx4869-scancode
      v-if="h5ScanCode"
      @success="handleSuccess"
      @fail="handleFail"
      @close="handleClose"
    ></cshaptx4869-scancode>
    <!-- #endif -->
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getCurInfo, parentBindAdmin } from '@/api'
import { user, shareConfigStore } from '@/store'
import { storeToRefs } from 'pinia'
import TipPopup from '@/components/TipPopup/index.vue'
import router from '@/router/router'
import jWeixin from 'weixin-js-sdk'
const { initWeixinShareConfig } = shareConfigStore()

const { userInfo } = storeToRefs(user())
const OSS_URL = import.meta.env.VITE_OSS_HOST
const show = ref(false)

const showAllBindPopup = ref(false)
const QRCode = ref() // 扫码结果
const childUserIds = ref()
const h5ScanCode = ref(false)
const resData = ref()

const showSuccessPopup = ref(false)
const bindType = ref('success')
const successPopupText = ref('')

const stepList = ref([
  {
    num: '01',
    title: '第一步',
    content: '打开学习机，来到「设置」界面；',
  },
  {
    num: '02',
    title: '第二步',
    content: '点击「设备」，获取二维码，先扫码关注公众号；',
  },
  {
    num: '03',
    title: '第三步',
    content: '进入公众号，点击「家长助手」扫码绑定，扫描二维码选择绑定设备/账号。',
  },
])

// 绑定项目
const bindProject = ref([
  {
    name: '当前设备',
    show: true,
    icon: `${OSS_URL}/urm/bindDevice/bindIcon1.png`,
    bindFlag: 0, // 0-未绑定 1-已绑定
    adminFlag: false, // 是否已有管理员
    bindText: '已绑定当前设备',
  },
  {
    name: '孩子账号',
    show: true,
    icon: `${OSS_URL}/urm/bindDevice/bindIcon2.png`,
    bindFlag: 0, // 0-未绑定 1-已绑定
    adminFlag: false, // 是否已有管理员
    bindText: '已绑定当前孩子账号',
  },
])

const contList = ref([
  '第一个绑定设备/帐号的用户自动成为管理员',
  '绑定账号可以查看孩子的学情报告；',
  '绑定设备可以对设备进行管控。',
])

async function queryBinding() {
  const ua = navigator?.userAgent?.toLowerCase()
  const isWechatBrowser = ua?.indexOf('micromessenger') !== -1
  if (!isWechatBrowser) {
    // 非微信环境
    h5ScanCode.value = true
    return
  }
  jWeixin.scanQRCode({
    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
    scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
    success: async function (res) {
      let result = res.resultStr
      resData.value = JSON.parse(result)
      QRCode.value = resData.value.simSerialNumber
      childUserIds.value = resData.value.userId
      await fetchCurBindInfo()
    },
    fail: function (response) {
      uni.showToast({
        title: '扫码失败',
        icon: 'none',
      })
    },
  })
}

function SelectProject(e: any) {
  // 无管理员必选
  if (!e.adminFlag) return
  // 已绑定
  if (e.bindFlag === 1) return
  e.show = !e.show
}
// 只绑定设备-弹窗
function successPopupBtn() {
  showSuccessPopup.value = false
  router.navigateTo('/pages/home/index')
}
async function determine() {
  //  暂时
  // QRCode.value = 'AADXM1010061';
  // childUserIds.value = '1753596310747975684';
  // fetchCurBindInfo();
  // ------
  if (!bindProject.value[0].show && !bindProject.value[1].show) return
  let obj = {
    childDto: {},
    deviceDto: {},
    simSerialNumber: '',
    childUserId: '',
  }
  if (bindProject.value[0].show) {
    obj.deviceDto = bindProject.value[0]
    obj.simSerialNumber = QRCode.value
  }
  if (bindProject.value[1].show) {
    obj.childDto = bindProject.value[1]
    obj.childUserId = childUserIds.value
  }
  show.value = false
  if (obj.simSerialNumber && !obj.childUserId) {
    let _obj: any
    if (bindProject.value[0].adminFlag) {
      // 设备已有管理员
      _obj = {
        simSerialNumber: obj.simSerialNumber,
        type: 1,
      }
      router.navigateTo({
        path: '/pages/home/bindDevice/applyForBinding',
        query: { parameter: JSON.stringify(_obj) },
      })
    } else {
      _obj = {
        deviceDto: {
          simSerialNumber: obj.simSerialNumber,
        },
      }
      const res = await parentBindAdmin(_obj)
      showSuccessPopup.value = true
      successPopupText.value = res.data === 6 ? '您已成为设备管理员' : '请稍后再进行尝试～'
      bindType.value = res.data === 6 ? 'success' : 'fail'
    }
  } else {
    router.navigateTo({ 
      path: './familyRelationships',
      query: { parameter: JSON.stringify(obj) }
    })
  }
}

//   扫码部分
async function handleSuccess(res: string) {
  h5ScanCode.value = false
  resData.value = JSON.parse(res)
  QRCode.value = resData.value.simSerialNumber
  childUserIds.value = resData.value.userId
  await fetchCurBindInfo()
}
function handleFail(err: any) {
  uni.showModal({
    title: err.errName,
    content: err.errMsg,
    complete: () => {
      h5ScanCode.value = false
    },
  })
}

function handleClose() {
  h5ScanCode.value = false
}
// 绑定前获取当前绑定情况
async function fetchCurBindInfo() {
  try {
    uni.showLoading({
      title: '加载中...',
      mask: true,
    })
    const { data } = await getCurInfo({
      parentUerId: userInfo.value.id,
      simSerialNumber: QRCode.value, // 设备序列号
      childUserId: childUserIds.value, // 孩子账号
    })
    bindProject.value[0].bindFlag = data.device.bindFlag
    bindProject.value[0].adminFlag = data.deviceAdminFlag
    bindProject.value[0].show = data.device.bindFlag === 0
    bindProject.value[1].bindFlag = data.child.bindFlag
    bindProject.value[1].adminFlag = data.childAdminFlag
    bindProject.value[1].show = data.child.bindFlag === 0
    if (Number(data.device.bindFlag) === 1 && Number(data.child.bindFlag) === 1) {
      // 两者都绑定了
      showAllBindPopup.value = true
      show.value = false
    } else {
      showAllBindPopup.value = false
      show.value = true
    }
  } finally {
    uni.hideLoading()
  }
}
onMounted(async () => {
  uni.showLoading({
    title: '加载中...',
    icon: 'none',
    mask: true,
  })
  await initWeixinShareConfig()
  uni.hideLoading()
})
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  box-sizing: border-box;
}
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 44rpx);
  background-image: url('https://xuexiaole-1313840333.cos.ap-guangzhou.myqcloud.com/xuexiaoleClient/urm/bindDevice/bindDeviceBgImg.png');
  background-size: cover;
  box-sizing: border-box;

  .robotCont {
    width: 100%;
    // margin-top: 40upx;
    display: flex;
    z-index: 1;

    .robot {
      width: 250upx;
      height: 312upx;
    }
    .robotMsg {
      width: 486upx;
      height: 220upx;
      margin-top: 30upx;
      margin-left: -30upx;
    }
  }
  .process {
    width: 690upx;
    height: 1016upx;
    margin-left: 30upx;
    display: flex;
    z-index: 0;
    flex-direction: column;
    align-items: center;
    border-radius: 20upx;
    border: 1upx rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2.9000000953674316upx);
    margin-top: -77upx;
    padding: 40upx 30upx;
    box-sizing: border-box;

    .title {
      display: flex;
      align-items: center;
      gap: 20upx;
      .UnionLeft {
        width: 35upx;
        height: 8upx;
      }

      text {
        font-size: 36upx;
        color: #333;
        font-weight: 500;
      }

      .UnionRight {
        width: 35upx;
        height: 8upx;
        transform: rotate(180deg);
      }
    }

    .list {
      width: 630upx;
      // height: 157upx;
      display: flex;
      align-items: center;
      position: relative;
      margin-top: 40upx;

      .num {
        width: 125upx;
        height: 60upx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48upx;
        color: #fff;
        background: #615dff;
        border-radius: 0 50upx 50upx 0;
        position: absolute;
        left: 0upx;
        top: 20upx;
      }
      .cont {
        width: 610upx;
        // height: 157upx;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 20upx;
        background: rgba(255, 255, 255, 0.8);
        margin-left: 20upx;
        padding: 30upx;
        box-sizing: border-box;

        .contentRight {
          width: 450upx;
          display: flex;
          flex-direction: column;
          margin-left: 90upx;
          .lest {
            font-size: 32upx;
            height: 48upx;
          }
          .lestCont {
            color: #666;
            font-size: 30upx;
          }
        }
      }
    }

    .QRbutton {
      width: 610upx;
      height: 90upx;
      background: #615dff;
      border-radius: 20upx;
      margin-top: 60upx;
      color: #fff;
      font-size: 30upx;
      display: flex;
      align-items: center;
      justify-content: center;

      .QRbuttonText {
        margin-left: 10upx;
        font-size: 30upx;
      }
    }
  }
}
.all_bind {
  display: flex;
  justify-content: center;
  height: 330rpx;
  width: 594upx;
  background: #fff;
  border-radius: 20upx;
  .title {
    margin-top: 66rpx;
    display: inline-block;
    width: 448rpx;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 44rpx;
  }
  .confirm {
    position: absolute;
    bottom: 0upx;
    width: 100%;
    height: 108upx;
    border-top: solid 1upx rgba(238, 238, 238, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34upx;
    color: rgba(51, 51, 51, 1);
  }
}
.popuCont {
  width: 594upx;
  height: 592upx;
  background: #fff;
  border-radius: 20upx;
  padding: 50upx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;

  .title {
    font-size: 34upx;
    color: #333;
  }

  .option {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 30upx;
    margin-top: 50upx;
    margin-bottom: 20upx;
    .bind_info {
      flex: 1;
      border-radius: 20rpx;
      border: 2rpx solid transparent;
      .item {
        height: 120upx;
        background-image: url('https://xuexiaole-1313840333.cos.ap-guangzhou.myqcloud.com/xuexiaoleClient/urm/bindDevice/bindPorjectBgimg.png');
        background-size: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(65, 78, 145, 1);
        font-size: 26upx;
        border-radius: 20upx;
        position: relative;

        .icons {
          width: 54upx;
          height: 54upx;
          margin-left: 20upx;
        }

        .SelectIcon {
          width: 40upx;
          height: 40upx;
          position: absolute;
          bottom: 0;
          right: 0;
        }
      }
      .bind_text {
        margin-top: 20rpx;
        display: inline-block;
        width: 100%;
        color: #a9aab5;
        font-size: 24rpx;
        line-height: 36rpx;
        text-align: center;
      }
    }

    .Select {
      border: 2rpx solid #615dff;
    }
  }
  .contList {
    width: 100%;
    display: flex;
    font-size: 26upx;
    color: rgba(51, 51, 51, 1);
    line-height: 39upx;
  }

  .confirm {
    position: absolute;
    bottom: 0upx;
    width: 100%;
    height: 108upx;
    border-top: solid 1upx rgba(238, 238, 238, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34upx;
    color: rgba(51, 51, 51, 1);
  }
}
</style>
