<template>
  <div id="realname">
    <div class="lt-area">
      <div class="status">
        <div
          class="status-count"
          v-for="(status, index) in countStatus"
          :key="index"
        >
          <img class="status-img" :src="status.img" alt="" />
          <div class="status-detail">
            <div class="status-text">
              {{ status.text }}
            </div>
            <div class="status-number">
              {{ status.counts }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mid-area">
      <Title text="实时考勤"></Title>
      <ShadowContainer>
        <vue-seamless-scroll
          :data="checkList"
          :class-option="classOption"
          class="warp"
          @ScrollEnd="scrollEnd"
          refs="scroll"
        >
          <div
            class="person-check"
            v-for="(person, index) in checkList"
            :key="index"
          >
            <div class="portrait">
              <img
                class="rect"
                src="@/assets/realname/portrait-rect.png"
                alt=""
              />
              <img class="person-head" src="@/assets/realname/portrait.png" />
            </div>
            <div class="person-detail">
              <div class="name">
                <div class="name-text">姓名：{{ person.name }}</div>
                <div class="work-no">工号：{{ person.workno }}</div>
              </div>
              <div class="status">状态：{{ person.status }}</div>
              <div class="time">时间：{{ person.time }}</div>
            </div>
          </div>
        </vue-seamless-scroll>
      </ShadowContainer>
      <Title text="人员地域分布"></Title>
      <ShadowContainer>
        <div class="chart-container">
          <img class="custom-chart" src="@/assets/chart.png" />
          <div ref="areaChart" id="area-chart"></div>
        </div>
      </ShadowContainer>
    </div>
    <div class="rt-area">
      <Title type="long" text="一周考勤"></Title>
      <ShadowContainer>
        <div class="chart-title">近一周考勤</div>
        <div id="week-check-chart" ref="weekcheckChart"></div>
        <div class="chart-title">近一周工种考勤</div>
        <div id="week-work-chart" ref="weekworkChart"></div>
      </ShadowContainer>
      <div class="bottom-chart">
        <div>
          <Title text="近一周进出场统计"></Title>
          <ShadowContainer>
            <div id="in-out-chart" ref="inoutChart"></div>
          </ShadowContainer>
        </div>
        <div>
          <Title text="工种分布"></Title>
          <ShadowContainer>
            <div
              v-for="(iType, index) in industryTypes"
              :key="index"
              class="i-type"
            >
              <div class="i-type-name">
                {{ iType.text }}
              </div>
              <div class="slider">
                <el-slider :value="50"></el-slider>
              </div>
              <div class="i-type-count">
                <span>{{ iType.count }}</span>
                人
              </div>
            </div>
          </ShadowContainer>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Realname",
  data() {
    return {
      countStatus: [
        {
          img: require("@/assets/realname/icon_b_yi@2x.png"),
          text: "总人数",
          counts: 1713,
        },
        {
          img: require("@/assets/realname/icon_b_er@2x.png"),
          text: "普通工人人数",
          counts: 1611,
        },
        {
          img: require("@/assets/realname/icon_b_san@2x.png"),
          text: "管理人员人数",
          counts: 102,
        },
        {
          img: require("@/assets/realname/icon_b_si@2x.png"),
          text: "新入场人员人数",
          counts: 0,
        },
        {
          img: require("@/assets/realname/icon_b_wu@2x.png"),
          text: "今日考勤人数",
          counts: 234,
        },
        {
          img: require("@/assets/realname/icon_b_liu@2x.png"),
          text: "今日在场人数",
          counts: 158,
        },
      ],
      checkList: [
        {
          name: "简爱",
          workno: "1289463894",
          status: "已进场",
          time: "2023年03月19日 12:23:25",
        },
        {
          name: "简爱",
          workno: "1289463894",
          status: "已进场",
          time: "2023年03月19日 12:23:25",
        },
        {
          name: "简爱",
          workno: "1289463894",
          status: "已进场",
          time: "2023年03月19日 12:23:25",
        },
        {
          name: "简爱",
          workno: "1289463894",
          status: "已进场",
          time: "2023年03月19日 12:23:25",
        },
        {
          name: "简爱",
          workno: "1289463894",
          status: "已进场",
          time: "2023年03月19日 12:23:25",
        },
        {
          name: "简爱",
          workno: "1289463894",
          status: "已进场",
          time: "2023年03月19日 12:23:25",
        },
        {
          name: "简爱",
          workno: "1289463894",
          status: "已进场",
          time: "2023年03月19日 12:23:25",
        },
        {
          name: "简爱",
          workno: "1289463894",
          status: "已进场",
          time: "2023年03月19日 12:23:25",
        },
      ],
      pieChartData: [
        { value: 30, name: "绍兴市" },
        { value: 10, name: "浙江省内绍兴市外" },
        { value: 1673, name: "浙江省外" },
      ],
      industryTypes: [
        { text: "普通人员", count: 1593 },
        { text: "管理人员", count: 1593 },
        { text: "质量员", count: 1593 },
        { text: "安全员", count: 1593 },
        { text: "钢筋工", count: 1593 },
        { text: "其他工种", count: 1593 },
      ],
      classOption: {
        singleHeight: 118,
      },
    };
  },
  methods: {
    renderAreaChart() {
      const chart = this.$echarts.init(this.$refs.areaChart);
      const option = {
        title: {
          x: "27%", //X坐标
          y: "40%",
          text: "2073",
          subtext: "总人数",
          textAlign: "center",
          textStyle: {
            //标题样式
            fontSize: 30,
            fontWeight: "bolder",
            color: "#00fcff",
          },
          subtextStyle: {
            //副标题样式
            fontSize: 16,
            fontWeight: "bolder",
            color: "rgba(255,255,255,0.7)",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          itemHeight: 12,
          itemWidth: 12,
          icon: "rect",
          right: "0%",
          top: "20%",
          orient: "vertical",
          itemGap: 40,
          textStyle: {
            color: "auto",
            rich: {
              a: {
                fontSize: 14,
                align: "left",
              },
              b: {
                fontSize: 20,
                align: "left",
                lineHeight: 25,
              },
            },
          },
          formatter: (name) => {
            let data = this.pieChartData;
            let target;
            for (let i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                target = data[i].value;
              }
            }
            let arr = [`{a|${name}}`, `{b|${target}} 人`];
            return arr.join("   ");
          },
        },
        series: [
          {
            type: "pie",
            radius: ["60%", "70%"],
            center: ["28%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 20,
              borderWidth: 4,
            },
            label: {
              show: false,
              position: "center",
            },

            data: this.pieChartData,
          },
        ],
      };
      chart.setOption(option);
    },
    renderWeekCheckChart() {
      const chart = this.$echarts.init(this.$refs.weekcheckChart);
      const option = {
        color: "#00FFF0",
        grid: {
          top: 30,
          bottom: 30,
          left: 30,
          right: 30,
        },
        xAxis: {
          type: "category",
          data: ["03.23", "03.24", "03.25", "03.26", "03.27", "03.28", "03.29"],
          axisTick: { show: false },
          axisLabel: {
            textStyle: {
              fontSize: "12",
              color: "#c6def9",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              fontSize: "12",
              color: "#c6def9",
            },
          },
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: "rgba(95, 120, 144, 0.4)",
            },
          },
        },
        series: [
          {
            data: [3, 4, 4, 5, 6, 7, 5],
            type: "line",
            symbol: "circle",
            symbolSize: 12,
          },
        ],
      };
      chart.setOption(option);
    },
    renderWeekWorkChart() {
      const chart = this.$echarts.init(this.$refs.weekworkChart);
      const option = {
        color: ["#17FDB7", "#1abcec", "#ffaf51"],
        grid: {
          top: 30,
          bottom: 30,
          left: 30,
          right: 30,
        },
        legend: {
          orient: "horizontal",
          x: "center",
          y: "top",
          textStyle: {
            fontSize: 12,
            color: "rgba(225, 239, 255, 0.7)",
          },
        },
        xAxis: {
          type: "category",
          data: ["03.23", "03.24", "03.25", "03.26", "03.27", "03.28", "03.29"],
          axisTick: { show: false },
          axisLabel: {
            textStyle: {
              fontSize: "12",
              color: "#c6def9",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              fontSize: "12",
              color: "#c6def9",
            },
          },
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: "rgba(95, 120, 144, 0.4)",
            },
          },
        },
        series: [
          {
            name: "保安",
            data: [2, 5, 4, 4, 7, 5, 6],
            type: "line",
            smooth: true,
          },
          {
            name: "普工",
            type: "line",
            data: [5, 2, 3, 4, 2, 2, 4],
            smooth: true,
          },
          {
            name: "管理人员",
            type: "line",
            data: [0, 0, 0, 0, 0, 0, 0],
            smooth: true,
          },
        ],
      };
      chart.setOption(option);
    },
    renderInOutChart() {
      const chart = this.$echarts.init(this.$refs.inoutChart);
      const option = {
        color: ["#FF4544", "#2980FF"],
        grid: {
          top: 30,
          bottom: 30,
          left: 30,
          right: 30,
        },
        legend: {
          orient: "horizontal",
          x: "center",
          y: "top",
          textStyle: {
            fontSize: 12,
            color: "rgba(225, 239, 255, 0.7)",
          },
        },
        xAxis: {
          type: "category",
          data: ["03.23", "03.24", "03.25", "03.26", "03.27", "03.28", "03.29"],
          axisTick: { show: false },
          axisLabel: {
            textStyle: {
              fontSize: "12",
              color: "#c6def9",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              fontSize: "12",
              color: "#c6def9",
            },
          },
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: "rgba(95, 120, 144, 0.4)",
            },
          },
        },
        series: [
          {
            name: "进场",
            data: [2, 5, 4, 4, 7, 5, 6],
            type: "line",
            smooth: true,
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#FF4544",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,0,0,0)",
                  },
                ]),
              },
            },
          },
          {
            name: "离场",
            type: "line",
            data: [5, 2, 3, 4, 2, 2, 4],
            smooth: true,
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#2980ff",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,0,0,0)",
                  },
                ]),
              },
            },
          },
        ],
      };
      chart.setOption(option);
    },
    scrollEnd() {
      this.$refs.scroll._cancle();
      setTimeout(() => {
        this.$ref.scroll._startMove();
      }, 3000);
    },
  },
  mounted() {
    this.renderAreaChart();
    this.renderWeekCheckChart();
    this.renderWeekWorkChart();
    this.renderInOutChart();
    this.$nextTick(() => {
      // 解决echarts图表放大溢出父容器
      const resizeOb = new ResizeObserver((entries) => {
        for (const entry of entries) {
          this.$echarts.getInstanceByDom(entry.target).resize();
        }
      });
      resizeOb.observe(document.getElementById("area-chart"));
      resizeOb.observe(document.getElementById("week-check-chart"));
      resizeOb.observe(document.getElementById("week-work-chart"));
      resizeOb.observe(document.getElementById("in-out-chart"));
    });
  },
};
</script>
<style lang="less" scoped>
#realname {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  .lt-area {
    width: 20%;
  }
  .mid-area {
    width: 28%;
  }
  .lt-area {
    .status {
      .status-count {
        background: url("@/assets/realname/rect.png") no-repeat;
        background-size: 100% 100%;
        padding: 12px 20px;
        margin-bottom: 20px;
        .status-img {
          width: 120px;
        }
        .status-detail {
          display: inline-block;
          vertical-align: top;
          width: calc(100% - 120px);
          .status-text {
            font-size: 22px;
            color: #1abcec;
            text-align: right;
            line-height: 60px;
          }
          .status-number {
            text-align: right;
            font-size: 44px;
            font-weight: bold;
            color: #c6eaf9;
            line-height: 60px;
            letter-spacing: 4px;
            text-shadow: 0 0 5px #c6eaf9;
          }
        }
      }
    }
  }
  .mid-area {
    margin: 0 20px;
  }

  .rt-area {
    width: 50%;
  }
}
.bottom-chart {
  display: flex;
  justify-content: space-between;
  & > div {
    width: calc(50% - 10px);
  }
}
.warp {
  height: 475px;
  overflow: hidden;
}
.person-check {
  padding: 14px;
  background: rgba(20, 86, 144, 0.2);
  border-radius: 4px;
  margin-bottom: 12px;
  display: flex;
  .portrait {
    position: relative;
    .rect {
      width: 80px;
      height: 80px;
      vertical-align: top;
    }
    .person-head {
      position: absolute;
      top: 8px;
      width: 64px;
      height: 64px;
      left: 8px;
    }
  }
  .person-detail {
    font-size: 14px;

    color: #c6def9;
    margin-left: 24px;
    width: calc(100% - 104px);
    line-height: calc(80px / 3);
    .name {
      display: flex;
      justify-content: space-between;
    }
  }
}
.chart-container {
  position: relative;
  .custom-chart {
    position: absolute;
    width: 30%;
    top: 50%;
    transform: translateY(-50%);
    left: 13%;
  }
}
#area-chart {
  width: 100%;
  height: 300px;
}
.chart-title {
  background: rgba(40, 137, 195, 0.2);
  border: 1px solid #217ff7;
  width: 160px;
  text-align: center;
  font-size: 16px;

  font-weight: bold;
  color: #ffffff;
  padding: 6px 0;
  letter-spacing: 2px;
}
#week-check-chart {
  width: 100%;
  height: 203px;
}
#week-work-chart {
  width: 100%;
  height: 203px;
}
#in-out-chart {
  width: 100%;
  height: 300px;
}
.i-type {
  display: flex;
  font-size: 14px;
  color: #c6def9;
  padding: 4px;
  .slider {
    width: 70%;
    vertical-align: top;
  }
  .i-type-name,
  .i-type-count {
    width: 15%;
    vertical-align: top;
    line-height: 42px;
    text-align: right;
    span {
      font-size: 16px;
    }
  }
  .i-type-name {
    padding-right: 12px;
  }
}
::v-deep .el-slider__bar {
  background-image: linear-gradient(90deg, #152647 0%, #5a9bee 97%) !important;
  height: 10px;
}
::v-deep .el-slider__runway {
  background: #103153;
  height: 10px;
}
::v-deep .el-slider__button {
  width: 12px;
  height: 12px;
}
::v-deep .el-slider__button-wrapper {
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
}
</style>