<template>
  <div class="bigScrenn">
    <!-- 头部 -->
    <Head title="兴蜀人力数据概览"></Head>
    <div class="asidemodel transition modelImgleft " :style="{ left: isOpen_L ? '1vw' : '-22.369vw' }">
      <enterprise-employment-card title="企业用工结构分布" description="200.000 家企业注册">
        <template #card>
          <carousel>
            <!-- 自定义slide内容 -->
            <template #slide="{ slide, index }">
              <div class="custom-slide">
                <div class="custom-slide-inner">
                  <div class="custom-slide-content tc">
                    <div>第一产业需求</div>
                    <div class="flex just-between align-center col">
                      <div class="">
                        <div class="title">岗位种类数</div>
                        <div>480人</div>
                      </div>
                      <div class="">
                        <div class="title">岗位人员数</div>
                        <div>480人</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="custom-slide-inner">
                  <div class="custom-slide-content tc">
                    <div>第二产业需求</div>
                    <div class="flex just-between align-center col">
                      <div class="">
                        <div class="title">岗位种类数</div>
                        <div>480人</div>
                      </div>
                      <div class="">
                        <div class="title">岗位人员数</div>
                        <div>480人</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="custom-slide-inner">
                  <div class="custom-slide-content tc">
                    <div>第三产业需求</div>
                    <div class="flex just-between align-center col">
                      <div class="">
                        <div class="title">岗位种类数</div>
                        <div>480人</div>
                      </div>
                      <div class="">
                        <div class="title">岗位人员数</div>
                        <div>480人</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </carousel>
        </template>
      </enterprise-employment-card>
      <div style="margin-top: 0.625vw">
        <enterprise-employment-card title="服务网络覆盖情况" description="5000 家人力资源行业机构">
          <template #card>
            <costom-caed />
          </template>
        </enterprise-employment-card>
      </div>
    </div>

    <!-- 中间 -->
    <CenterModel></CenterModel>

    <div class="asidemodel asidemodelR transition modelImgright" :style="{ right: isOpen_R ? '1vw' : '-22.369vw' }">
      <enterprise-employment-card title="高校人才供给能力" description="10,000 毕业生" />
      <div style="margin-top: 0.625vw">
        <enterprise-employment-card title="三级劳务体系建设" description="10,000 名平台劳务经纪人" />
      </div>
    </div>

    <div class="last_icon"></div>
    <!-- 弹窗 -->
    <HomeDialogInfo v-model="dialogShow" />
  </div>
</template>

<script setup>
import Head from './layout/headHome.vue'
import CenterModel from './layout/centerModel.vue'
import HomeDialogInfo from "@/components/homeDialogInfo/index.vue";
import openWebSocket from "@/utils/webSocket.js";
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import EnterpriseEmploymentCard from "@/views/recruitment/components/enterpriseEmploymentCard.vue";
import CostomCaed from "@/views/recruitment/components/costomCaed.vue";
import Carousel from "@/views/recruitment/components/carousel.vue";

const { proxy } = getCurrentInstance();
const isOpen_L = ref(true); //展开菜单-左边
const isOpen_R = ref(true); //展开菜单 - 右边
const dialogShow = ref(false);
const asideMeun = reactive({
  leftMeun: [
    { mkMc: "产业产值、岗位缺口趋势", mkLydz: "cycz_gwqk_card" },
    { mkMc: "重点保供企业分布", mkLydz: "zdbgqy_card" },
    { mkMc: "缺口岗位TOP10", mkLydz: "zdqyqkxq_card" },
  ],
  rightMeun: [
    { mkMc: "用工供需风险预警", mkLydz: "yggxfxyj_card" },
    { mkMc: "劳务市场异常预警", mkLydz: "lwscycyj_card" },
    { mkMc: "合规监管预警", mkLydz: "hgjgyj_card" },
    { mkMc: "服务质量预警", mkLydz: "fwzlyj_card" }
  ],
})
onMounted(() => {
  getWebSocketData()
})
// 获取WebSocket数据
function getWebSocketData() {
  let dws = openWebSocket.getInstance();
  dws.connect((res) => {
    // 接收发送消息
    dws.ws.onmessage = (e) => {
      let dataInfo = JSON.parse(e.data).data;
      console.log(dataInfo, 'dataInfo');
      if (dataInfo == 1) {
        dialogShow.value = true;
      } else {
        dialogShow.value = false;
      }
    };
  });
}
</script>

<style lang="scss" scoped>
@import "components/recruitment.scss";

.custom-slide {
  padding: 0.521vw;

  .custom-slide-inner {
    width: 15.99vw;
    height: 4.323vw;
    background: url("~@/assets/recruitment/card_item_bg.svg") no-repeat center center;
    background-size: cover;
    margin-bottom: 1.042vw;

    .custom-slide-content {
      color: #CBF2FA;
      font-size: 0.625vw;
      height: 4.323vw;
      padding: 0.417vw 1.25vw 0 5.677vw;

      .title {
        margin-bottom: 0.26vw;
      }

      .col {
        margin-top: 0.78125vw;
      }
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.last_icon {
  position: fixed;
  left: 0;
  right: 0;
  height: 4.667vw;
  bottom: 0;
  background: url("~@/assets/recruitment/botton_bg.svg") no-repeat center center;
  background-size: cover;
}

.transition {
  transition: all 0.5s;
}
</style>
