<template>
  <div class="center-cmp">
    <div class="cc-header">
        库存总数
    </div>
    <div class="cc-details">
      <dv-decoration-1 style="width:160px;height:50px;" />  
      <div class="card" v-for="item,index in stockSum" :key="index">{{item}}</div>
      <dv-decoration-1 style="width:160px;height:50px;" />
    </div>
    
    <div class="cc-main-container">
        <div class="ccmc-left">
        <div class="station-info">
          今年入库<span style="color: #9fe6b8;font-size: 0.5rem;" v-if="formData.bigStockStatisticsVo">{{ formData.bigStockStatisticsVo.yinSum }}</span>
        </div>
      </div>
      <div class="ccmc-right">
        <div class="station-info">
         <span style="color: #ffdb5c;font-size: 0.5rem;" v-if="formData.bigStockStatisticsVo">{{ formData.bigStockStatisticsVo.youtSum }}</span>今年出库 
        </div>
      </div>
    </div>
    <a-carousel arrows autoplay>
      <ItemWrap :title="item.storeName" v-for="item,index in formData.detailVoList" :key="item.storeCode">
        <div class="card-warehouse">
          <div style="width: 34%;">
            <img src="../assets/img/ck.png"  style="padding: 0 20px 20px 20px; width: 320px;"/>
          </div>
          <div style="width: 66%;">
            <ul class="user_Overview" style="display: flex;">
              <li class="user_Overview-item" style="color: #00fdfa">
                <div class="user_Overview_nums allnum ">
                  <dv-digital-flop :config="digital(item.stockSum, 1)" style="width:100%;height:100%;" />
                </div>
                <p>库存总量</p>
              </li>
              <li class="user_Overview-item" style="color: #07f7a8">
                <div class="user_Overview_nums online">
                  <dv-digital-flop :config="digital(parseInt(item.percentage), 2)" style="width:100%;height:100%;" />
                </div>
                <p>使用率</p>
              </li>
              <li class="user_Overview-item" style="color: #e3b337">
                <div class="user_Overview_nums offline">
                  <dv-digital-flop :config="digital(item.classQty, 3)" style="width:100%;height:100%;" />
                </div>
                <p>物资种类</p>
              </li>
              <!-- 正常 -->
              <li class="user_Overview-item" style="color: #07f7a8" v-if="item.wd > item.temperatureMin && item.wd < item.temperatureMax">
                <div class="user_Overview_nums online">
                  <dv-digital-flop :config="digital(item.wd, 4, '#07f7a8')" style="width:100%;height:100%;" />
                </div>
                <p>库内温度</p>
              </li>
              <!-- 异常 -->
              <li class="user_Overview-item" style="color: #f5023d" v-else>
                <div class="user_Overview_nums laramnum">
                  <dv-digital-flop :config="digital(item.wd, 4, '#f5023d')" style="width:100%;height:100%;" />
                </div>
                <p>库内温度</p>
              </li>
              <li class="user_Overview-item" style="color: #00fdfa" v-if="item.sd > item.humidityMin && item.sd < item.humidityMax">
                <div class="user_Overview_nums">
                  <dv-water-level-pond :config="digital(item.sd, 5, ['#00BAFF', '#3DE7C9'])" style="width:100%;height:100%" />
                </div>
                <p>库内湿度</p>
              </li>
              <li class="user_Overview-item" style="color: #FFA500" v-else>
                <div class="user_Overview_nums">
                  <dv-water-level-pond :config="digital(item.sd, 5, ['#FFA500', '#FF7F50'])" style="width:100%;height:100%" />
                </div>
                <p>库内湿度</p>
              </li>
            </ul>
          </div>
        </div>
        </ItemWrap>
    </a-carousel>
  </div>
</template>

<script>
const baseUrl =
  'https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/';
let style = {
    fontSize: 24
}
import ItemWrap from '../components/item-wrap/item-wrap.vue'
import { getAction } from '@/api/manage'
export default {
  name: 'CenterCmp',
  data () {
    return {
      url: '/bigSunmmary/getStockByStore',
      stockSum: '00000000',
      formData: {
        bigStockStatisticsVo: {},
        detailVoList: []
      },
      baseUrl
    }
  },
  components: {
    ItemWrap
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      getAction(this.url).then(res => {
        this.formData = res.data
        this.stockSum = this.padding(this.formData.bigStockStatisticsVo.stockSum, 8)
      })
    },
    padding(num, length) {
      return (Array(length).join("0") + num).slice(-length);
    },
    digital(num, type, color) {
      switch(type) {
        case 1:
          return {
            number: [num],
            content: '{nt}',
            style: {
              fontSize: 18,
              stroke: "#00fdfa",
              fill: "#00fdfa"
            },
          }
          break;
        case 2: 
          return {
            number: [num],
            content: '{nt}%',
            style: {
              fontSize: 24,
              stroke: "#07f7a8",
              fill: "#07f7a8",
            },
          }
          break;
        case 3:
          return {
            number: [num],
            content: '{nt}',
            style: {
              fontSize: 24,
              fill: "#e3b337",
            },
          }
          break;  
        case 4: 
          return {
            number: [num],
            content: '{nt}℃',
            style: {
              fontSize: 24,
              fill: color,
            },
          }  
          break;
        case 5: 
          return {
            data: [num],
            shape: 'round',
            colors: color
          }  
          break;
      }
    }
  }
}
</script>
<style>
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel .slick-dots-bottom {
    bottom: 20px;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>
<style lang="scss">
  .contetn_lr-item {
    height: 310px;
  }
.user_Overview {
    li {
        flex: 1;

        p {
            text-align: center;
            height: 16px;
            font-size: 16px;
        }

        .user_Overview_nums {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 22px;
            margin: 50px auto 30px;
            background-size: cover;
            background-position: center center;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }

            &.bgdonghua::before {
                animation: rotating 14s linear infinite;
            }
        }

        .allnum {

            // background-image: url("../../assets/img/left_top_lan.png");
            &::before {
                background-image: url("../assets/img/left_top_lan.png");

            }
        }

        .online {
            &::before {
                background-image: url("../assets/img/left_top_lv.png");

            }
        }

        .offline {
            &::before {
                background-image: url("../assets/img/left_top_huang.png");

            }
        }

        .laramnum {
            &::before {
                background-image: url("../assets/img/left_top_hong.png");

            }
        }
    }
}
</style>

<style lang="less">
.center-cmp {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;

  .cc-header {
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-top: 5px;
    font-size: 32px;
  }


  .cc-details {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;

    .card {
      background-color: rgba(4,49,128,.6);
      color: #08e5ff;
      height: 80px;
      width: 80px;
      font-size: 48px;
      font-weight: bold;
      line-height: 80px;
      text-align: center;
      margin: 10px;
    }
  }

  .cc-main-container {
    position: relative;
    display: flex;
    margin: 10px;

    .ccmc-left, .ccmc-right {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 24px;

      span {
        font-size: 30px;
        font-weight: bold;
      }

      .station-info {
        // height: 100px;
        display: flex;
        align-items: center;
      }
    }

    .ccmc-left {
      align-items: center;

      span {
        margin-left: 20px;
      }
    }

    .ccmc-right {
      align-items: center;

      span {
        margin-right: 20px;
      }
    }
  }

  .card-warehouse {
    display: flex;
    justify-content: center;
    height: 3.8rem;
    align-items: center;
      span {
        color:  #fff;
        font-size: 0.5rem;
        display: block;
        text-align: center;
      }

  }

}
</style>