<template>
  <div class="contentWrapper">
    <div class="rowContent">
      <div class="modelWrapper">
        <div
          class="modelContent"
          v-for="(item, index) in modelContentList"
          :key="index"
          :class="isactive == index ? 'active' : ''"
          @click="onacitve(index, item.label)"
        >
          <div class="num">{{ item.num }}</div>
          <div class="label">{{ item.label }}</div>
        </div>
      </div>
    </div>
    <div class="content" v-show="isactive != 0 && isactive != 5">
      <div class="num">81.1万</div>
      <div class="label">人口总数</div>
    </div>
    <!-- <transition name="fade"> -->
    <div class="hjrkDialogBox" v-show="isactive == 0">
      <div class="titleBox">
        <div class="title">户籍人口</div>
        <div class="close" @click="isactive = -1"></div>
      </div>
      <ul class="tabsBox">
        <!-- <li
            v-for="(item, index) in tabsDate.tabs"
            :key="index"
            :class="tabsActive == index ? 'active' : ''"
            @click="tabsActive = index"
          >
            {{ item }}
          </li> -->
        <li
          v-for="(item, index) in tabsDate.tabs"
          :key="index"
          :class="tabsActive == index ? 'active' : ''"
          @click="tabsActive = 0"
        >
          {{ item }}
        </li>
      </ul>

      <div class="barBox" ref="enterpriseTwoRef"></div>
    </div>
    <!-- </transition> -->
    <div class="hjrkDialogBox" v-show="isactive == 5">
      <div class="titleBox">
        <div class="title">高终端人才</div>
        <div class="close" @click="isactive = -1"></div>
      </div>
      <ul class="statisticOne">
        <li v-for="(item, index) in statisticData" :key="index">
          <img :src="item.imgURL" :alt="item.title" />
          <div class="infoBox">
            <div class="title">
              <span>{{ item.title }}</span>
            </div>
            <div class="count">
              <span class="numb">{{ item.count }}</span
              >（{{ item.unit }}）
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import tongjiPxrs from "@/assets/images/largeScreen/tongji-pxrs.png";
import tongjiPxkc from "@/assets/images/largeScreen/tongji-pxkc.png";
import tongjiPxjg from "@/assets/images/largeScreen/tongji-pxjg.png";
const isactive = ref(-1);
const tabsActive = ref(0);
const dialogTitle = ref("户籍人口");
const onacitve = (index, label) => {
  console.log(index, "index");
  //将点击的元素的索引赋值给isactive变量 , 每次点击都更改变量的值
  isactive.value = index;
  dialogTitle.value = label;
  console.log(isactive.value, "isactive");
};

const modelContentList = ref([
  {
    num: "65.33万",
    label: "户籍人口"
  },
  {
    num: "8.91万",
    label: "流动人口"
  },
  {
    num: "约27万",
    label: "就业人群"
  },
  // {
  //   num: "13000",
  //   label: "待就业人群"
  // },
  {
    num: "10.06万",
    label: "灵活就业群体"
  },
  {
    num: "0.54万",
    label: "新增就业群体"
  },
  {
    num: "2.2万",
    label: "高中端人才"
  },
  {
    num: "0.76万",
    label: "领金人员"
  }
]);
const statisticData = ref([
  {
    imgURL: tongjiPxjg,
    title: "国家级领军人才",
    count: "18",
    unit: "人"
  },
  {
    imgURL: tongjiPxjg,
    title: "地方级领军型人才",
    count: "45",
    unit: "人"
  },
  {
    imgURL: tongjiPxjg,
    title: "博士",
    count: "133",
    unit: "人"
  },
  {
    imgURL: tongjiPxjg,
    title: "硕士",
    count: "1012",
    unit: "人"
  },
  {
    imgURL: tongjiPxjg,
    title: "本科",
    count: "20792",
    unit: "人"
  }
]);
const tabsDate = reactive({
  tabs: [
    "学历",
    "工种",
    "性别",
    "年龄段",
    "原户籍地",
    "所在产业",
    "所在行业",
    "公司规模"
  ],
  activeIndex: 0
});

import * as echarts from "echarts";
const enterpriseTwoRef = ref(null);
const option = {
  // 设置图形位置
  grid: {
    top: "10%",
    left: "8%",
    right: "5%",
    bottom: "11%"
  },
  // 设置图例
  // legend: {
  //   itemWidth: 10, // 方块宽度
  //   itemHeight: 10, // 方块高度
  //   textStyle: {
  //     color: "#B2D9DF" // 文字颜色
  //   },
  //   x: "center", // 图例在左（left）、右（right）、居中（center）、100px
  //   y: "top", // 图例在上（top）、下（bottom）、居中（center、100px）、100px
  //   padding: [15, 50, 0, 0] // 图例[距上右下左方距离
  // },
  xAxis: {
    axisLine: {
      lineStyle: {
        color: "#CBF2FA" // 文字颜色
      }
    },

    type: "category",
    data: ["大专及以上", "高中(含中专)", "初中", "小学"]
  },
  yAxis: {
    //网格线
    splitLine: {
      show: true,
      lineStyle: {
        color: ["#A1C7CD"], // 线颜色
        opacity: 0.2 // 透明度
      }
    },
    axisLine: {
      lineStyle: {
        color: "#CBF2FA" // 文字颜色
      }
    },
    type: "value"
  },
  series: [
    {
      name: "岗位种类数",
      type: "bar",
      showBackground: true,
      barWidth: 20,
      data: [71013, 105716, 266225, 210356],
      // 设置柱状图的数值
      label: {
        show: true,
        position: "top",
        color: "#30DCFF"
      },
      itemStyle: {
        //渐变色
        color: {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "rgba(48, 220, 255, 1)" },
            { offset: 1, color: "rgba(48, 220, 255, 0.06)" }
          ]
        }
      }
    }
  ]
};

// 生命周期钩子
onMounted(() => {
  if (enterpriseTwoRef.value) {
    const chart = echarts.init(enterpriseTwoRef.value);
    // 设置option
    chart.setOption(option);
  }
});
</script>

<style lang="scss" scoped>
.contentWrapper {
  position: absolute;
  top: 9.53125vw;
  left: 23.58vw;
  width: 52.46vw;

  .rowContent {
    position: absolute;
    width: 100%;
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 9.46875vw;

    margin-top: 12.90625vw;
    background: url("~@/assets/recruitment/content_bg.svg") no-repeat;
    background-size: 100% 100%;
    width: 52.46vw;
    height: 31.667vw;

    .num {
      font-family: PingFang SC, PingFang SC;
      font-size: 2.667vw;
      color: #30dcff;
    }

    .label {
      margin-top: 0.521vw;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 0.833vw;
      color: #cbf2fa;
    }
  }
  .modelWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .modelContent {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      background: url("~@/assets/recruitment/model_bg.svg") no-repeat;
      background-size: 100% 100%;
      width: 10.729vw;
      height: 6.667vw;
      padding: 0.625vw 0;
      margin: 0 1.1vw 1.2vw;
      cursor: pointer;
      .num {
        font-family: PingFang SC, PingFang SC;
        font-size: 1.667vw;
        color: #30dcff;
      }

      .label {
        margin-top: 0.521vw;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 0.833vw;
        color: #cbf2fa;
      }

      // &:nth-last-child(1) {
      //   margin-right: 8vw;
      // }

      // &:nth-last-child(3) {
      //   margin-left: 8vw;
      // }
      &.active {
        background: url("~@/assets/images/recruitment/model-active-bg.png")
          no-repeat;
        background-size: 100% 100%;
        .num {
          background: -webkit-linear-gradient(#fff4b3, #ffd901);
          -webkit-background-clip: text;
          color: transparent;
        }
      }
    }
  }
  .hjrkDialogBox {
    top: 17vw;
    left: 50%;
    position: absolute;
    width: 52.604vw;
    height: 27.135vw;
    background: url("~@/assets/images/recruitment/hjrk-dialog-bg.png") no-repeat;
    background-size: 100% 100%;
    margin-left: -26.302vw;
    z-index: 9999;
    .titleBox {
      display: flex;
      justify-content: space-between;
      height: 2.604vw;
      .title {
        font-size: 1vw;
        height: 100%;
        line-height: 2.604vw;
        padding: 0 0 0 1.042vw;
        font-weight: bold;
      }
      .close {
        width: 1.5625vw;
        height: 1.5625vw;
        background: url("~@/assets/images/recruitment/hjrk-dialog-close.png")
          no-repeat;
        background-size: 100% 100%;
        margin: 0.5vw;
        cursor: pointer;
      }
    }
    ul.tabsBox {
      display: flex;
      justify-content: space-around;
      padding: 1vw 7vw;
      li {
        width: 3.958vw;
        height: 1.354vw;
        line-height: 1.354vw;
        text-align: center;
        font-size: 0.625vw;
        background: url("~@/assets/images/recruitment/tabs-bg.png") no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
      li.active {
        background: url("~@/assets/images/recruitment/tabs-active-bg.png")
          no-repeat;
        background-size: 100% 100%;
      }
    }
    .barBox {
      width: 40vw;
      height: 20vw;
      margin: 0 auto;
    }
  }
}
ul.statisticOne {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 3vw;
  li {
    // width: 450px;
    height: 190px;
    margin: 0 10px;
    // 第一排的前2个元素（第一排显示2个）
    &:nth-child(-n + 2) {
      width: 20vw; // 减去margin值
    }

    // // 第二排的第3-5个元素（第二排显示3个）
    // &:nth-child(n + 3):nth-child(-n + 5) {
    //   width: calc(33.33% - 20px); // 减去margin值
    // }

    img {
      display: block;
      width: 7vw;
      height: 7vw;
      float: left;
    }
    .infoBox {
      float: left;
      padding: 0 0 0 10px;
      .title {
        height: 40px;
        line-height: 40px;
        margin-top: 36px;
        span {
          background: -webkit-linear-gradient(#ffffff, #75e8ff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 1.3vw;
          font-weight: 400;
        }
      }
      .count {
        font-size: 24px;
        padding: 18px 0 0 0;
        span.numb {
          font-size: 2.1vw;
          display: inline-block;
          padding: 0 5px 0 0;
        }
      }
    }
  }
}
</style>
