<template>
  <div class="main">
    <div class="basePick_bg" v-if="obj.CHANGEBASE=='是'">
      <el-select
          v-model="selectBase"
          class="select"
          collapse-tags
          placeholder="全部基地"
          size="small"
          @change="setType"
      >
        <el-option
            v-for="(val,i) in baseList" :key="i" :label="val" :value="val"/>
      </el-select>
    </div>
    <div class="datePick_bg" style="position: absolute;top: 32px;right: 18px;height: 28px">
        <el-date-picker
          v-model="nowDate"
          type="month"
          placeholder="历史回溯"
          :size="size"
          style="width: 100%"
          value-format="YYYY-MM"
        ></el-date-picker>
    </div>
    <el-row class="w100">
      <el-col v-if="!isLoad" :span="8">
        <left-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/>
      </el-col>
      <el-col v-if="!isLoad" :span="8">
        <center-page :obj="obj" :isLeader="isLeader" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/>
      </el-col>
      <el-col v-if="!isLoad" :span="8">
        <right-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/>
      </el-col>
    </el-row>
  </div>

</template>

<script setup>
import LeftPage from "@/viewsPc/vip/leftPage"
import CenterPage from "@/viewsPc/vip/centerPage"
import RightPage from "@/viewsPc/vip/rightPage"
import {getYS000} from '@/api/server.js'
import {ref, onMounted, getCurrentInstance, nextTick} from 'vue'
import {useRouter} from 'vue-router'

const type = ref(true)
let isLoad = ref(false)
const url = ref()
const obj = ref({})
const result = ref()
const router = useRouter()
const now = new Date()
const year = now.getFullYear()  // 获取年份（4位数）
const month = now.getMonth() + 1 // 获取月份（0-11，需要+1）
const formatMonth = (month) => (month < 10 ? `0${month}` : month)
const nowDate = ref(`${year}-${formatMonth(month)}`)
let selectBase = ref("总部")
let baseList = ref()
let isLeader = ref(false)
// url.value = 'http://192.168.1.152:8899/login/sid=36c62778-f35a-4285-a279-08aa2b8a1fa8#/'
url.value = window.location.href
result.value = url.value?.split('=')[1]?.split('#')[0];

function validateEmail(email) {
  const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
}

onMounted(() => {
  if (result.value) {
    handelGetYS000()
    isLeader.value = validateEmail(result.value)
    console.log(isLeader.value)
  } else {
    // result.value = 'a3afc265-1e60-4376-bcfb-6ca124db8704'
    // handelGetYS000()
    router.push('/401')
  }
})


async function handelGetYS000() {
  const res = await getYS000(result.value)
  let typeStr = res.data?.IFBASE || '是'
  type.value = typeStr == '否'
  obj.value = res.data || {}
  selectBase.value = res.data.BASE
  baseList.value = res.data.list
}

function setType(){
  isLoad.value = true
  nextTick(() => {
    if (selectBase.value !== '总部') {
      type.value = false
    } else {
      type.value = true
    }
    isLoad.value = false
  })
}


</script>

<style lang="scss" scoped>
.basePick_bg {
  position: absolute;
  top: 32px;
  right: 180px;
  height: 28px;
  width: 155px;
  background: #0B2239;
  //box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
  border-radius: 5px;
  border: 1px solid #12BFFF;

  .select {
    background-color: transparent;

    :deep(.el-select__wrapper) {
      background-color: transparent;
      box-shadow: 0 0 0 0;
      border: none;
    }

    /* 选项样式 */
    :deep(.el-select-dropdown__item) {
      color: white !important;
      background-color: transparent !important;
    }

    /* 鼠标悬停效果 */
    :deep(.el-select-dropdown__item.hover) {
      background-color: rgba(255, 255, 255, 0.1) !important;
    }

    /* placeholder */
    :deep(.el-select__placeholder) {
      font-family: PingFang SC, serif;
      font-weight: 500;
      color: #fff;
      //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
      //background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
      background-color: rgb(33, 123, 188, .1); /* 背景色 */
      -webkit-background-clip: text;
      //-webkit-text-fill-color: transparent
    }

    :deep(.el-tag--info) {
      background-color: rgb(33, 123, 188, .1); /* 背景色 */
      border-color: #1c81a6; /* 边框色 */
      color: #fff; /* 文字颜色 */
    }

    :deep(.el-icon ) {
      color: #fff;
    }
  }
}

.datePick_bg {
  background: url("@/assets/image/datePicker.png") no-repeat center;
  background-size: 100% 100%;
  width: 155px;
}
::v-deep .el-date-editor .el-input__inner {
  background-color: transparent !important;
  border-color: #80ffff;
  box-shadow: none;
  height: 30px;
  color: #fff;
  padding: 0 0 2px 10px;
}
::v-deep .el-input__wrapper {
  background: transparent;
  border: none;
  box-shadow: none;
}
/* 隐藏默认图标 */
::v-deep .el-date-editor .el-input__prefix {
  background: url("@/assets/image/rili.png") no-repeat center;
  background-size: 100% 100%;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 10px;
}

/* 强制右侧显示图标 */
::v-deep .el-date-editor .el-input__suffix .clear-icon{
  display: inline-block !important;
  padding: 0 40px 0 0;
}
</style>