<template>
  <div class="todo-list" v-loading="loading">
    <div class="todo-item" @click="$router.push('/mch/mchApply?status=0')">
      <div class="label"><svg-icon icon-class="apply"/> 商家合作申请</div>
      <div class="value">
        <count-to :start-val="0" :end-val="data.mchApplyCount" :duration="3000"/>
      </div>
      <div class="unit">条</div>
    </div>
    <div class="todo-item" @click="$router.push('/mch/storeApply?status=1')">
      <div class="label"><svg-icon icon-class="store"/> 店铺审核</div>
      <div class="value">
        <count-to :start-val="0" :end-val="data.storeApplyCount" :duration="3000"/>
      </div>
      <div class="unit">条</div>
    </div>
    <div class="todo-item" @click="$router.push('/money/withdraw?status=11')">
      <div class="label"><svg-icon icon-class="withdraw"/> 提现申请</div>
      <div class="value">
        <count-to :start-val="0" :end-val="data.withdrawCount" :duration="3000"/>
      </div>
      <div class="unit">条</div>
    </div>
    <div class="todo-item"  @click="$router.push('/smDevice/device?isArrears=1')">
      <div class="label"><svg-icon icon-class="monitor"/> 设备到期</div>
      <div class="value">
        <count-to :start-val="0" :end-val="data.arrearsDeviceCount" :duration="3000"/>
      </div>
      <div class="unit">台</div>
    </div>
    <div class="todo-item" @click="$router.push('/complaint/abnormal?status=1')">
      <div class="label"><svg-icon icon-class="bug"/> 设备故障</div>
      <div class="value">
        <count-to :start-val="0" :end-val="data.abnormalCount" :duration="3000"/>
      </div>
      <div class="unit">条</div>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { getTodoList } from '@/api/system/dashboard'

export default {
  name: 'TodoList',
  components: {
    CountTo
  },
  data() {
    return {
      loading: false,
      data: {
        withdrawCount: 0,
        mchApplyCount: 0,
        storeApplyCount: 0,
        abnormalCount: 0,
        arrearsDeviceCount: 0
      }
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.loading = true;
      getTodoList().then(res => {
        this.data = res.data;
      }).finally(() => {
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped lang="scss">
.todo-list {
  position: relative;
  width: 100%;
  height: 292px;
  overflow: auto;
}
.todo-item {
  position: relative;
  width: 100%;
  display: flex;
  transition: .25s;
  padding: 0.8em 1em;
  cursor: pointer;
  border-radius: 16px;
  vertical-align: bottom;
  background: #fff;
  .value {
    display: inline-block;
    width: fit-content;
    margin-left: 1em;
    color: #165DFF;
    font-size: 20px;
  }
  .label {
    display: inline-block;
    color: #1D252F;
    flex: 1;
    .svg-icon {
      color: #165DFF;
    }
  }
  .unit {
    display: inline-block;
    margin-left: 0.5em;
    font-size: 14px;
  }
}
.todo-item:hover {
  background: linear-gradient(180deg, #F2F9FE -3%, #E6F4FE 100%);
}
.todo-item:nth-child(n + 2) {
  margin-top: 8px;
}
</style>
