<!-- 工作考核 -->
<template>
  <div class="side-bg">
    <TitleC title="工作考核"></TitleC>
    <TitleD width="100">
      <div
        class="module_top_title"
        v-for="(item, index) in label"
        :key="index"
        @click="clickMenuOption(item.id)"
        :class="
          item.check == true
            ? 'module_menu_selected'
            : 'module_menu_notSelected'
        "
      >
        {{ item.title }}
      </div>
    </TitleD>
    <div class="portrait_con conBox">
      <div
        class="portrait_con_options"
        v-for="(item, index) in portraitList"
        :key="index"
      >
        <div>
          <div>
            <span>{{ index + 1 }}</span>
            <span>{{ item.label }}</span>
          </div>
          <div>{{ item.value }}/50</div>
        </div>
        <div><el-slider disabled v-model="item.value" max="50" /></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watchEffect } from "vue";
export default defineComponent({
  name: "WorkSituation",
});
</script>
<script setup lang='ts'>
const label = ref([
  { title: "各干部", check: true, id: 0 },
  { title: "村(社区)", check: false, id: 1 },
]);
const clickMenuOption = (id: any) => {
  label.value.forEach((item) => {
    item.check = false;
  });
  label.value[id].check = true;
};
const portraitList = ref([
  { label: "某某人-职位", value: 48 },
  { label: "某某人-职位", value: 40 },
  { label: "某某人-职位", value: 38 },
  { label: "某某人-职位", value: 18 },
  { label: "某某人-职位", value: 48 },
]);
</script>

<style lang="scss" scoped>
.portrait_con {
  width: 100%;
  height: 214px;
  padding: 10px 21px;
  overflow-y: scroll;
}
.portrait_con::-webkit-scrollbar {
  display: none;
}
.portrait_con_options {
  margin-top: 2px;
  > div:nth-child(1) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > div:nth-child(1) {
      > span:nth-child(1) {
        display: inline-block;
        width: 24px;
        height: 16px;
        border: 1px solid #ff7734;
        line-height: 14px;
        text-align: center;
        background-color: rgba(255, 119, 52, 0.3);
        font-size: 12px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: #ff7734;
      }
      > span:nth-child(2) {
        font-size: 14px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        margin-left: 9px;
      }
    }
    > div:nth-child(2) {
      font-size: 14px;
      font-family: Furore, Furore;
      font-weight: normal;
      color: #ffffff;
    }
  }
  > div:nth-child(2) {
    margin-top: -5px;
  }
}
::v-deep .el-slider__bar {
  background: linear-gradient(270deg, #00c7e6 0%, #0088ff 100%);
  height: 6px;
  margin: 2px 0px;
  border-radius: 0%;
}
::v-deep .el-slider__button {
  margin-top: 4px;
  border-radius: 3px;
  width: 2px;
  height: 10px;
  border: 0px;
  background-color: rgba(255, 255, 255, 1);
}

::v-deep .el-slider__runway {
  border-radius: 0%;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.1);
}
</style>