<template>
  <div>
    <section class="userFooterBox">
      <div class="userItemA">
        <div class="ItemAText">2023年普通案件办理数量</div>
        <div class="ItemNumberBox">
          <div class="startBox">
            <span>23</span>
            <span>家</span>
          </div>
          <div class="centerBox">
            <span>环比去年</span>
            <span style="margin: 0 5px"> 87% </span>
            <i class="el-icon-top"></i>
          </div>
          <div class="imgBox"></div>
        </div>
      </div>
      <div class="userItemA">
        <div class="ItemAText">2023年简易案件办理数量</div>
        <div class="ItemNumberBox">
          <div class="startBox">
            <span>11</span>
            <span>家</span>
          </div>
          <div class="centerBox colors">
            <span>环比去年</span>
            <span style="margin: 0 5px"> 3% </span>
            <!-- <i class="el-icon-top"></i> -->
            <i class="el-icon-bottom"></i>
          </div>
          <div
            class="imgBox"
            :style="{
              backgroundImage:
                'url(' + require('@/assets/images/icon3.png') + ')',
            }"
          ></div>
        </div>
      </div>
      <div class="userItemA">
        <div class="ItemAText">2023年药品生产监督检查数量</div>
        <div class="ItemNumberBox">
          <div class="startBox">
            <span>8</span>
            <span>家次</span>
          </div>
          <div class="centerBox">
            <span>环比去年</span>
            <span style="margin: 0 5px"> 87% </span>
            <i class="el-icon-top"></i>
            <!-- <i class="el-icon-bottom"></i> -->
          </div>
          <div
            class="imgBox"
            :style="{
              backgroundImage:
                'url(' + require('@/assets/images/icon4.png') + ')',
            }"
          ></div>
        </div>
      </div>
      <div class="userItemA">
        <div class="ItemAText">2023年参加检查发现缺陷类型统计</div>
        <div class="ItemNumberBox">
          <div class="itemleft">
            <div class="one">
              <section>一般</section>
              <section><span>8</span>条</section>
            </div>
            <div class="two">
              <section>主要</section>
              <section><span>8</span>条</section>
            </div>
            <div class="three">
              <section>严重</section>
              <section><span>8</span>条</section>
            </div>
          </div>
          <div class="itemright">
            <div
              class="imgBox"
              :style="{
                backgroundImage:
                  'url(' + require('@/assets/images/icon8.png') + ')',
              }"
            ></div>
          </div>
        </div>
      </div>
      <div class="userItemA">
        <div class="ItemAText">2023年药品流通监督检查数量</div>
        <div class="ItemNumberBox">
          <div class="startBox">
            <span>3</span>
            <span>家次</span>
          </div>
          <div class="centerBox">
            <span>环比去年</span>
            <span style="margin: 0 5px"> 87% </span>
            <i class="el-icon-top"></i>
            <!-- <i class="el-icon-bottom"></i> -->
          </div>
          <div
            class="imgBox"
            :style="{
              backgroundImage:
                'url(' + require('@/assets/images/icon5.png') + ')',
            }"
          ></div>
        </div>
      </div>
      <div class="userItemA">
        <div class="ItemAText">2023年医疗器械监督检查数量</div>
        <div class="ItemNumberBox">
          <div class="startBox">
            <span>3</span>
            <span>家次</span>
          </div>
          <div class="centerBox">
            <span>环比去年</span>
            <span style="margin: 0 5px"> 87% </span>
            <i class="el-icon-top"></i>
            <!-- <i class="el-icon-bottom"></i> -->
          </div>
          <div
            class="imgBox"
            :style="{
              backgroundImage:
                'url(' + require('@/assets/images/icon6.png') + ')',
            }"
          ></div>
        </div>
      </div>
      <div class="userItemA">
        <div class="ItemAText">2023年化妆品监督检查数量</div>
        <div class="ItemNumberBox">
          <div class="startBox">
            <span>17</span>
            <span>家次</span>
          </div>
          <div class="centerBox">
            <span>环比去年</span>
            <span style="margin: 0 5px"> 87% </span>
            <i class="el-icon-top"></i>
            <!-- <i class="el-icon-bottom"></i> -->
          </div>
          <div
            class="imgBox"
            :style="{
              backgroundImage:
                'url(' + require('@/assets/images/icon7.png') + ')',
            }"
          ></div>
        </div>
      </div>
      <div class="userItemA">
        <div class="ItemAText">
          {{ trainData.begainYear }} —
          {{ trainData.endBegainYear }} 年年度培训情况统计
        </div>
        <div class="ItemNumberBox">
          <div class="itemleft">
            <div class="one">
              <section>总学时</section>
              <section>
                <span>{{ trainData.sm }}</span
                >学时
              </section>
            </div>
            <div class="two">
              <section>总次数</section>
              <section>
                <span>{{ trainData.total }}</span
                >次
              </section>
            </div>
          </div>
          <div class="itemright">
            <div
              class="imgBox"
              :style="{
                backgroundImage:
                  'url(' + require('@/assets/images/icon1.png') + ')',
              }"
            ></div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import { getTrainData } from "@/api/largeSize";
export default {
  data() {
    return {
      trainData: {
        year: "",
        sm: "",
        total: "",
      },
    };
  },
  created() {
    let yearParams = {
      begainYear: new Date().getFullYear(),
      endBegainYear: new Date().getFullYear(),
    };
    this.getTrain(yearParams);
  },
  methods: {
    getinfoData(yearParams) {
      this.getTrain(yearParams);
    },
    getTrain(year) {
      getTrainData(year).then((res) => {
        if (res.result.length > 0) {
          this.trainData = res.result[0];
          this.trainData.begainYear = year.begainYear;
          this.trainData.endBegainYear = year.endBegainYear;
        } else {
          this.trainData = {
            begainYear: year.begainYear,
            endBegainYear: year.endBegainYear,
            sm: 0,
            total: 0,
          };
        }
      });
    },
  },
};
</script>
<style lang="scss">
.userFooterBox {
  height: calc(340px - 50px);
  padding: 10px 15px 20px;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
  .userItemA {
    background-color: rgba($color: #1e80eb, $alpha: 0.04);
    border-radius: 4px;
    width: 24.2%;
    height: 47%;
    padding: 0 15px;
    .ItemAText {
      height: 55px;
      font-size: 16px;
      font-weight: 400;
      color: #292f38;
      line-height: 50px;
    }
    .ItemNumberBox {
      display: flex;
      justify-content: space-between;
      .startBox {
        font-family: "DINPro-Medium";
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: end;

        & > span:nth-of-type(1) {
          color: #2468f2;
          font-size: 42px;
          margin-right: 8px;
          line-height: 100%;
        }
      }
      .colors {
        color: #52cd80 !important;
      }
      .centerBox {
        font-size: 14px;
        font-weight: 400;
        color: #f04f54;
        display: flex;
        align-items: end;
        & > span:nth-of-type(1) {
          color: #85898b;
        }
      }

      .itemleft {
        width: 75%;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 500;
        color: #3d3f40;
        & span {
          font-size: 32px;
          margin-right: 5px;
          font-family: "DINPro-Medium";
        }
        .one,
        .two,
        .three {
          & > section:nth-of-type(1) {
            margin-bottom: 4px;
          }
        }
        .one span {
          color: #1e80eb;
        }
        .two span {
          color: #52cd80;
        }
        .three span {
          color: #f88129;
        }
      }
      .itemright {
        width: 25%;
        display: flex;
        flex-direction: row-reverse;
      }
    }
  }
}
//图片公用样式
.imgBox {
  width: 50px;
  height: 50px;
  background-image: url("../../../assets/images/icon2.png");
  background-size: 100% 100%;
  // img {
  //   width: 100%;
  //   height: 100%;
  // }
}
</style>
