<template>
  <div class="bigScrenn">
    <!-- 头部 -->
    <Head title="兴蜀人力数据概览"></Head>
    <div
      class="asidemodel transition modelImgleft"
      :style="{ left: isOpen_L ? '1vw' : '-22.369vw' }"
    >
      <!-- 左1 -->
      <enterprise-employment-card
        :title="cardOneInfo.title"
        :description="cardOneInfo.description"
        :type1="cardOneInfo.type1"
        :type2="cardOneInfo.type2"
      >
        <el-carousel
          :interval="8000"
          type="card"
          height="17vw"
          indicator-position="none"
          :autoplay="true"
        >
          <el-carousel-item><EnterpriseEmploymentOne /></el-carousel-item>
          <el-carousel-item><EnterpriseEmploymentTwo /></el-carousel-item>
          <el-carousel-item><EnterpriseEmploymentThree /></el-carousel-item>
        </el-carousel>
      </enterprise-employment-card>
      <!-- 左2 -->
      <enterprise-employment-card
        :title="cardTwoInfo.title"
        :description="cardTwoInfo.description"
        :type1="cardTwoInfo.type1"
        :type2="cardTwoInfo.type2"
        style="margin-top: 0.625vw"
      >
        <costom-caed />
      </enterprise-employment-card>
    </div>

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

    <div
      class="asidemodel asidemodelR transition modelImgright"
      :style="{ right: isOpen_R ? '1vw' : '-22.369vw' }"
    >
      <!-- 右1 -->
      <enterprise-employment-card
        :title="cardThreeInfo.title"
        :description="cardThreeInfo.description"
        :type1="cardThreeInfo.type1"
        :type2="cardThreeInfo.type2"
      >
        <el-carousel
          :interval="8000"
          type="card"
          height="17vw"
          indicator-position="none"
          :autoplay="true"
        >
          <el-carousel-item><CollegeTalentsOne /></el-carousel-item>
          <el-carousel-item><CollegeTalentsTwo /></el-carousel-item>
          <!-- <el-carousel-item><CollegeTalentsThree /></el-carousel-item> -->
        </el-carousel>
      </enterprise-employment-card>
      <!-- 右2 -->
      <enterprise-employment-card
        :title="cardFourInfo.title"
        :description="cardFourInfo.description"
        :type1="cardFourInfo.type1"
        :type2="cardFourInfo.type2"
        style="margin-top: 0.625vw"
      >
        <el-carousel
          :interval="8000"
          type="card"
          height="17vw"
          indicator-position="none"
          :autoplay="true"
        >
          <el-carousel-item><LaborSystemOne /></el-carousel-item>
          <el-carousel-item><LaborSystemTwo /></el-carousel-item>
          <el-carousel-item><LaborSystemThree /></el-carousel-item>
          <el-carousel-item><LaborSystemFour /></el-carousel-item>
        </el-carousel>
      </enterprise-employment-card>
    </div>
    <div class="last_icon"></div>
    <!-- 弹窗 -->
    <HomeDialogInfo v-model="dialogShow" />
  </div>
</template>
<script>
export default {
  components: {
    EnterpriseEmploymentCard
  }
};
</script>
<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";
import EnterpriseEmploymentOne from "./card/EnterpriseEmploymentOne.vue";
import EnterpriseEmploymentTwo from "./card/EnterpriseEmploymentTwo.vue";
import EnterpriseEmploymentThree from "./card/EnterpriseEmploymentThree.vue";
import CollegeTalentsOne from "./card/CollegeTalentsOne.vue";
import CollegeTalentsTwo from "./card/CollegeTalentsTwo.vue";
import CollegeTalentsThree from "./card/CollegeTalentsThree.vue";
import LaborSystemOne from "./card/LaborSystemOne.vue";
import LaborSystemTwo from "./card/LaborSystemTwo.vue";
import LaborSystemThree from "./card/LaborSystemThree.vue";
import LaborSystemFour from "./card/LaborSystemFour.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" }
  ]
});
const cardOneInfo = {
  title: "企业用工结构分布",
  description: "7万家企业(含个体工商户)",
  type1: {
    title: "岗位种类数",
    count: "57",
    class: "modelItem1"
  },
  type2: {
    title: "岗位人数",
    count: "24637",
    class: "modelItem2"
  }
};
const cardTwoInfo = {
  title: "服务网络覆盖情况",
  description: "17家人力资源费机构",
  type1: {
    title: "公共服务站点",
    count: "40",
    class: "modelItem1"
  }
  // type2: {
  //   title: "其他服务机构",
  //   count: "200",
  //   class: "modelItem1"
  // }
};
const cardThreeInfo = {
  title: "高校人才供给能力",
  description: "4000+毕业生",
  type1: {
    title: "学校数",
    count: "7",
    class: "modelItem2"
  },
  type2: {
    title: "促就业人数",
    count: "2980",
    class: "modelItem2"
  }
};
const cardFourInfo = {
  title: "三级劳务体系建设",
  description: "198名平台劳务经纪人",
  type1: {
    title: "合作社",
    count: "5",
    class: "modelItem2"
  },
  type2: {
    title: "劳务经纪人",
    count: "198",
    class: "modelItem2"
  }
};
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";

.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;
}
.el-carousel {
  margin-top: 0.5vw;
}
.el-carousel__item {
  height: 100%;
  background: url("~@/assets/images/recruitment/card-bg.png") no-repeat #000;
  background-size: 100% 100%;
}
.el-carousel__item.is-active {
  width: 17vw;
  margin-left: -3.85vw;
}
:deep(.el-carousel__mask) {
  display: none;
}
</style>
