<template>
  <Module
    class="h-1/3"
    :info="bsMeta && bsMeta['emplRate']"
    :loading="loading"
    :error="error"
  >
    <template class="personnelNumber" #title>人员占比 <span class="personnel-detail-skip"  @click="goPersonnelDetail">人员明细&nbsp;&nbsp;<i class="el-icon-caret-right"></i></span></template>
    <!-- <template #end>
      <span class="mr-2">{{ showDate }}</span>
      <Switcher :options="options" v-model="latest" />
    </template> -->
    <template v-if="!loading">
      <div class="listout">
        <vue-seamless-scroll
          :data="processValue"
          v-if="processValue.length > 3"
        >
          <processBar :processValue="processValue"></processBar>
        </vue-seamless-scroll>
        <processBar v-else :processValue="processValue"></processBar>
      </div>
    </template>
  </Module>
</template>
<script lang="jsx">
import processBar from "./processBar.vue";
import { staffCountNew, staffCountChildNew, staffEmployModeCountChild } from "@/api/businessOverview";
import { mapState } from "vuex";
import vueSeamlessScroll from "@/components/vueSeamlessScroll/index.vue";

export default {
  components: {
    processBar,
    vueSeamlessScroll,
  },
  computed: {
    ...mapState({
      selectRoadId: (state) => state.road.selectRoadId,
      setSelectCode: (state) => state.road.selectCode,
      selectLevel: (state) => state.road.selectLevel,
    }),
  },
  data() {
    return {
      ectOpts: {},
      error: "",
      loading: false,
      options: [
        { name: "最新", value: true },
        // { name: "月", value: false },
      ],
      latest: true,
      processValue: [
        // {
        //   name: "潼荣高速",
        //   total: 807,
        //   types: [
        //     {
        //       name: "1",
        //       data: 500,
        //     },
        //     {
        //       name: "2",
        //       data: 100,
        //     },
        //     {
        //       name: "3",
        //       data: 100,
        //     },
        //     {
        //       name: "4",
        //       data: 492,
        //     },
        //   ],
        // },
        // {
        //   name: "新建公司",
        //   total: 723,
        //   types: [
        //     {
        //       name: "1",
        //       data: 400,
        //     },
        //     {
        //       name: "2",
        //       data: 100,
        //     },
        //     {
        //       name: "3",
        //       data: 123,
        //     },
        //     {
        //       name: "4",
        //       data: 100,
        //     },
        //   ],
        // },
        // {
        //   name: "新建公司",
        //   total: 723,
        //   types: [
        //     {
        //       name: "1",
        //       data: 400,
        //     },
        //     {
        //       name: "2",
        //       data: 100,
        //     },
        //     {
        //       name: "3",
        //       data: 123,
        //     },
        //     {
        //       name: "4",
        //       data: 100,
        //     },
        //   ],
        // },
        // {
        //   name: "新建公司",
        //   total: 723,
        //   types: [
        //     {
        //       name: "1",
        //       data: 400,
        //     },
        //     {
        //       name: "2",
        //       data: 100,
        //     },
        //     {
        //       name: "3",
        //       data: 123,
        //     },
        //     {
        //       name: "4",
        //       data: 100,
        //     },
        //   ],
        // },
        // {
        //   name: "新建公司",
        //   total: 723,
        //   types: [
        //     {
        //       name: "1",
        //       data: 400,
        //     },
        //     {
        //       name: "2",
        //       data: 100,
        //     },
        //     {
        //       name: "3",
        //       data: 123,
        //     },
        //     {
        //       name: "4",
        //       data: 100,
        //     },
        //   ],
        // },
      ],
    };
  },
  mounted() {
    this.getData();
  },
  watch: {
    selectRoadId() {
      this.getData();
    },
  },
  methods: {
      goPersonnelDetail(){
           window.open(`http://183.64.175.153:28880/#/QXGL/users`);
          //  window.open(`http://183.64.175.153:28880/#/QXGL/users/list&orgCode=${this.setSelectCode}`);
    },
    async getData() {
      const res = await staffEmployModeCountChild({
              level: this.selectLevel,
              dimension: this.selectRoadId[this.selectLevel - 1],
            })
        // this.selectLevel > 2
        //   ? await staffCountChildNew({
        //       level: this.selectLevel,
        //       dimension: this.selectRoadId[this.selectLevel - 1],
        //     })
        //   : await staffCountNew(
        //       this.selectLevel,
        //       this.selectRoadId[this.selectLevel - 1]
        //     );
      const data = res.msgContent;
      this.processValue = [];
      data.map((item) => {
        const obj = {
          name: item.orgName,
          total:
            (item.onPayrollCount || 0) +
            (item.delegateCount || 0) +
            (item.employCount || 0) +
            (item.outsourceCount || 0),
          types: [
            {
              name: "在编人员数量",
              data: item.onPayrollCount,
            },
            {
              name: "委派人员数量",
              data: item.delegateCount,
            },
            {
              name: "聘用人员数量",
              data: item.employCount,
            },
            {
              name: "外包人员数量",
              data: item.outsourceCount,
            },
          ],
        };
        this.processValue.push(obj);
      });
    },
  
  },
};
</script>
<style lang="scss" scoped>
.listout {
  width: 100%;
  height: calc(100% - 30px);
  overflow: hidden;
}
.personnelNumber{
  position: relative;
}

.personnel-detail-skip{
    position: absolute;
   right: 20px;
  cursor:pointer;
}
</style>
