<template>
  <div class="content">
    <div class="top-box">
      <div class="flex-row">
        <h3 class="font-size-16 color-1">信息台</h3>
        <el-select v-model="period_value" placeholder="请选择">
          <el-option
            v-for="item in period_list"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <header class="mt20 flex-item-none flex-row">
        <div class="flex-item-none count-item">
          <div class="left-icon">
            <img src="@/assets/icon/hdlb1.png" alt />
          </div>
          <div class="right-text">
            <div class="count">{{ totalData.xxt.lctj }}</div>
            <div class="name">流程统计</div>
          </div>
        </div>
        <div class="flex-item-none count-item">
          <div class="left-icon">
            <img src="@/assets/icon/hdlb2.png" alt />
          </div>
          <div class="right-text">
            <div class="count">{{ totalData.xxt.dblc }}</div>
            <div class="name">待办流程</div>
          </div>
        </div>
        <div class="flex-item-none count-item">
          <div class="left-icon">
            <img src="@/assets/icon/hdlb3.png" alt />
          </div>
          <div class="right-text">
            <div class="count">{{ totalData.xxt.yblc }}</div>
            <div class="name">已办流程</div>
          </div>
        </div>
        <div class="flex-item-none count-item">
          <div class="left-icon">
            <img src="@/assets/icon/hdlb4.png" alt />
          </div>
          <div class="right-text">
            <div class="count">{{ totalData.xxt.bjlc }}</div>
            <div class="name">办结流程</div>
          </div>
        </div>
        <div class="flex-item-none count-item">
          <div class="left-icon">
            <img src="@/assets/icon/hdlb5.png" alt />
          </div>
          <div class="right-text">
            <div class="count">{{ totalData.xxt.wdqq }}</div>
            <div class="name">我的请求</div>
          </div>
        </div>
      </header>
    </div>
    <div class="mt10 d-flex">
      <div class="flex-1 info-box">
        <div class="flex-row ph15 border-grey-bottom">
          <h3 class="font-size-16 lh40">流程审批</h3>
          <a href="javascript:;" class="lh40" @click="toList(1)">
            <span class="font-size-14 color-2">更多</span>
            <span
              class="ml3 el-icon-more font-size-15 icon-more text-light"
            ></span>
          </a>
        </div>
        <ul class="ph15 info-list">
          <li v-for="item in totalData.lcsp">
            <div class="flex-row">
              <h3 class="flex-1 font-size-14 text-overflow">{{ item.bt }}</h3>
              <h4 class="font-size-14 color-4">{{ item.zt }}</h4>
            </div>
            <h5 class="mt10 font-size-14 color-4">
              {{ item.cjr }}&nbsp;&nbsp;&nbsp;{{ item.cjsj }}
            </h5>
          </li>
        </ul>
      </div>
      <div class="ml10 flex-1">
        <div class="info-box">
          <div class="flex-row ph15 border-grey-bottom">
            <h3 class="font-size-16 lh40">教师人员流动统计</h3>
            <a href="javascript:;" class="lh40" @click="toList(2)">
              <span class="font-size-14 color-2">更多</span>
              <span
                class="ml3 el-icon-more font-size-15 icon-more text-light"
              ></span>
            </a>
          </div>
          <div id="boxChart" style="height: 300px"></div>
        </div>
        <div class="mt10 info-box">
          <div class="ph15 border-grey-bottom">
            <h3 class="font-size-16 lh40">流程申请</h3>
          </div>
          <ul class="apply-link pv40">
            <li @click="toApply(1)">
              <div>
                <h3 class="apply-icon">
                  <img src="@/assets/images/a-1.png" alt />
                </h3>
                <h4 class="mt20 font-size-16 text-center">教师入职</h4>
              </div>
            </li>
            <li @click="toApply(2)">
              <div>
                <h3 class="apply-icon">
                  <img src="@/assets/images/a-2.png" alt />
                </h3>
                <h4 class="mt20 font-size-16 text-center">教师离职</h4>
              </div>
            </li>
            <li @click="toApply(3)">
              <div>
                <h3 class="apply-icon">
                  <img src="@/assets/images/a-3.png" alt />
                </h3>
                <h4 class="mt20 font-size-16 text-center">教师流动</h4>
              </div>
            </li>
            <li @click="toApply(4)">
              <div>
                <h3 class="apply-icon">
                  <img src="@/assets/images/a-4.png" alt />
                </h3>
                <h4 class="mt20 font-size-16 text-center">教师退休</h4>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { gzt } from "./api";
import * as echarts from "echarts";

export default {
  name: "index",
  data() {
    return {
      totalData: {
        xxt: {
          bjlc: "",
          dblc: "",
          lctj: "",
          wdqq: "",
          yblc: "",
        },
      },
      period_value: "",
      period_list: [
        {
          label: "全部",
          value: "0",
        },
        {
          label: "近一个月",
          value: "1",
        },
        {
          label: "近三个月",
          value: "2",
        },
        {
          label: "近半年",
          value: "3",
        },
      ],
    };
  },
  methods: {
    getTotalData() {
      gzt({}).then((res) => {
        if (res.code == 1) {
          this.totalData = res.data.content_json;
          this.$nextTick(() => {
            this.boxChart();
          });
        }
      });
    },
    boxChart() {
      var chartDom = document.getElementById("boxChart");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        yAxis: {
          type: "category",
          axisLabel: {
            textStyle: {
              fontSize: 14,
            },
          },
          axisLine: {
            lineStyle: {
              type: "dashed",
            },
          },
          data: this.totalData.jsldtj.lb,
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              fontSize: 14,
            },
          },
        },
        label: {
          show: true,
        },
        series: [
          {
            data: this.totalData.jsldtj.data,
            type: "bar",
            barWidth: 10,
            label: {
              show: true,
              position: "right",
              formatter: "{c}",
              color: "#A2A1A1",
              fontSize: 12,
            },
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#8DC3FF", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#BBD9FF", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              borderRadius: 5,
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    toList(type) {
      switch (type) {
        case 1:
          this.$router.push({name:'jsld_lcgl'});
          break;
        case 2:
          this.$router.push({name:'jsld_bbtj'});
          break;
      }
    },
    toApply(type) {
      switch (type) {
        case 1:
          this.$router.push({name:'jsld_rzlc_rzsq'});
          break;
        case 2:
          this.$router.push({name:'jsld_lzlc_lzsq'});
          break;
        case 3:
          this.$router.push({name:'jsld_ldlc_ldsq'});
          break;
        case 4:
          this.$router.push({name:'jsld_txlc_txsq'});
          break;
      }
    }
  },
  mounted() {
    this.getTotalData();
  },
};
</script>

<style lang="scss" scoped>
.content {
  background: #f2f6fc;
  height: 100%;
  width: 100%;
  margin: -10px;
  padding-right: 20px;
  padding-bottom: 20px;
}

.top-box {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  background: #fff;
  border-radius: 6px;
}

.count-item {
  width: 19%;
  height: 90px;
  border-radius: 6px;
  overflow: hidden;
  color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  & + .count-item {
    margin-left: 1.25%;
  }

  &:nth-child(1) {
    .left-icon {
      background-color: #4a7dbd;
    }

    .right-text {
      background-color: #5daaec;
    }
  }

  &:nth-child(2) {
    .left-icon {
      background-color: #4a7dbd;
    }

    .right-text {
      background-color: #5daaec;
    }
  }

  &:nth-child(3) {
    .left-icon {
      background-color: #5b5295;
    }

    .right-text {
      background-color: #7266ba;
    }
  }

  &:nth-child(4) {
    .left-icon {
      background-color: #2c967c;
    }

    .right-text {
      background-color: #37bc9b;
    }
  }

  &:nth-child(5) {
    .left-icon {
      background-color: #cc7d30;
    }

    .right-text {
      background-color: #ff9c3c;
    }
  }

  > div {
    box-sizing: border-box;
  }

  .left-icon {
    width: 44%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 50px;
    }
  }

  .right-text {
    width: 56%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: start;

    .count {
      font-size: 20px;
    }
  }
}

.info-list {
  margin: 0;
  padding: 0 15px;

  li {
    cursor: pointer;
    padding: 15px 0;

    & + li {
      border-top: 1px solid #ebeef5;
    }
  }
}

.apply-link {
  display: flex;

  li {
    cursor: pointer;
    flex: 1;
    justify-content: center;
  }

  .apply-icon {
    margin: 0 auto;
    width: 80px;
    height: 80px;

    img {
      width: 100%;
    }
  }
}
</style>