<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: 4vh;right: 58px;height: 28px">
        <el-date-picker
          v-model="nowDate"
          type="month"
          placeholder="历史回溯"
          :size="size"
          style="width: 100%;height: 100%"
          value-format="YYYY-MM"
        ></el-date-picker>
    </div>
    <el-row class="w100">
      <el-col v-if="!isLoad&&obj.IFBASE" :span="8">
        <left-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase" :myTheme="props.myTheme" />
      </el-col>
      <el-col v-if="!isLoad&&obj.IFBASE" :span="8">
        <center-page :myTheme="props.myTheme" :obj="obj" :isLeader="isLeader" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/>
      </el-col>
      <el-col v-if="!isLoad&&obj.IFBASE" :span="8">
        <right-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase" :myTheme="props.myTheme"/>
      </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=99afabdd-240a-4486-9b65-a9af641d6b51#/'
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());
}

const props = defineProps({
  myTheme: {
    type: String,
  }
})

onMounted(() => {
  if (result.value) {
    handelGetYS000()
    isLeader.value = validateEmail(result.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: 4vh;
  right: 220px;
  height: 28px;
  width: 155px;
  //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;

  .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;
      //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; /* 文字颜色 */
    }
  }
}

.datePick_bg {
  width: 155px;
  border-radius: 5px;

  ::v-deep .el-date-editor .el-input__inner {
    background-color: transparent !important;
    border-color: #80ffff;
    box-shadow: none;
    height: 30px;
    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 {
    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;
  }
}

.dark {
  .basePick_bg {
    background: #0B2239;
    border: 1px solid #12BFFF;

    /* placeholder */
    :deep(.el-select__placeholder) {
      color: #fff;
    }

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

  .datePick_bg {
    background: url("@/assets/image/datePicker.png") no-repeat center;
    background-size: 100% 100%;

    ::v-deep .el-date-editor .el-input__inner {
      color: #fff;
    }

    /* 隐藏默认图标 */
    ::v-deep .el-date-editor .el-input__prefix {
      background: url("@/assets/image/rili.png") no-repeat center;
      background-size: 100% 100%;
    }
  }
}

.light {
  .basePick_bg {
    background: #FFFFFF;
    border: 1px solid #97D3FF;

    /* placeholder */
    :deep(.el-select__placeholder) {
      color: #005D8D;
    }

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

  .datePick_bg {
    background: #FFFFFF;
    border: 1px solid #97D3FF;

    :deep(.el-date-editor .el-input__inner) {
      color: #0060AA;
    }

    ::v-deep .el-date-editor .el-input__prefix {
      background: url("@/assets/image/rili-light.png") no-repeat center;
      background-size: 100% 100%;
    }
  }
}
</style>