<template>
  <div class="electronic">
    <dv-decoration-11 class="dv11">电子作业票</dv-decoration-11>
    <ul class="contents">
      <li v-for="(item, index) in list" :key="index" @click="seeWork(item)">
        <div class="contentsLeft">
          <img
            :src="iconObj[item.workTicketType]"
            alt=""
          />
          <span>{{ item.workTicketTypeName }}</span>
        </div>
        <div>{{ item.workTicketCount }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { workTicketTypeStatistics } from '@/api/home'
export default {
  name: "RuoyiUiElectronic",

  data() {
    return {
      list: [],
      iconObj: {
        10 : require("@/assets/images/donghuo.png"),
        20 : require("@/assets/images/shouxian.png"),
        30 : require("@/assets/images/mangban.png"),
        40 : require("@/assets/images/gaochu.png"),
        50 : require("@/assets/images/diaozhuang.png"),
        60 : require("@/assets/images/linshi.png"),
        70 : require("@/assets/images/dongtu.png"),
        80 : require("@/assets/images/duanlu.png"),
      },
    };
  },

  mounted() {
    workTicketTypeStatistics().then(res => {
      if (res.code === 200) {
        console.log(res)
        this.list = res.data
      }
    })
  },

  methods: {
    seeWork(item) {
      this.$emit('seeWork', item)
    }
  },
};
</script>

<style lang="scss" scoped>
.electronic {
  color: #fff;
  position: relative;
  overflow: hidden;
}
.dv11{
  width:200px;
  height:50px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin: 10px 0 0 10px;
}
.contents{
  width: 100%;
  height: 190px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
  padding: 0 10px;
  justify-content: space-between;
  align-content: space-around;
  li{
    width: 46%;
    display: flex;
    height: 30px;
    border-radius: 3px;
    align-items: center;
    justify-content: space-between;
    padding:0 5px;
    font-size: 12px !important;
    background: #0b7780;
    cursor: pointer;
    .contentsLeft{
      display: flex;
      align-content: center;
      align-items: center;
    }
    img{
      width: 17px;
      height: 17px;
      margin-right: 7px;
      border-radius: 50%;
    }
  }
}
</style>
