<template>
  <div class="app-container home">
    <el-row :gutter="40" class="list_card" v-if="roleType">
      <el-col :xs="12" :sm="12" :lg="6">
        <div class="item_card clothing" @click="btn_goto">
          <div class="card left">
            <i class="el-icon-date"></i>
            <div class="view">
              <div class="name">超3天</div>
              <count-to :start-val="0" :end-val="timeoutClothing.threeDayTimeoutCount" :duration="2600" class="card_num" />
            </div>
          </div>
          <div class="card right">
            <i class="el-icon-date"></i>
            <div class="view">
              <div class="name">超5天</div>
              <count-to :start-val="0" :end-val="timeoutClothing.fiveDayTimeoutCount" :duration="2600" class="card_num" />
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 50px;">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>一七生活后台管理系统</h2>
        <p>
          <b>当前版本:</b> <span>v{{ version }}</span>
        </p>
      </el-col>

      
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { getTimeoutClothing } from "@/api/statistics/reception";

export default {
  name: "Index",
  dicts: ['sys_source_type'],
  components: {
    CountTo
  },
  data() {
    return {
      // 版本号
      version: "3.8.4",
      //超时衣服数据
      timeoutClothing: {},
      roleType: false,
    };
  },
  mounted() {
    console.log(this.$store.getters)
    this.getroletype()
    this.getTimeout()
  },
  methods: {
    getroletype(){
      let name = ''
      this.dict.type.sys_source_type.map(item=>{
        if( item.value === this.$store.getters.user.userType ){
          name = item.label
        }
      })
      
      if( name === '工厂' || name === '门店' ){
        this.roleType = true;
      }
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    getTimeout(){
      getTimeoutClothing(this.queryParams).then(response => {
        this.timeoutClothing = response.data;
      });
    },
    btn_goto(type){
      this.$router.push({ path: '/query/overtimeOrders' })
    }
  },
};
</script>

<style scoped lang="scss">
.home {
  .list_card {
    .item_card {
      padding: 15px;
      background: #fff;
      box-shadow: 0px 1px 3px rgba(0, 0, 0, .2);
      border-radius: 5px;
      &.clothing {
        display: flex;
        align-items: center;
        .card {
          flex: 1;
          display: flex;
          border-radius: 5px;
          padding: 10px 20px;
          color: #333;
          font-weight: 500;
          cursor: pointer;
          i {
            font-size: 30px;
          }
          .view {
            padding-left: 10px;
            flex: 1;
            text-align: center;
            .name {
              margin-bottom: 5px;
            }
            .card_num {
              font-size: 16px;
              font-weight: bold;
            }
          }
          &.left {
            i,
            .card_num {
              color: #e6a23c;
            }
          }
          &.right {
            i,
            .card_num {
              color: #f56c6c;
            }
          }
        }
      }
    }
  }
}
</style>

