<template>
  <div class="dashboard_images-container" v-loading="loading">
    <el-row :gutter="20" style="">
      <el-col :span="16">
        <el-card class="box-card" style="height:468px;" shadow="never">
          <div slot="header" class="clearfix">
            <h5 class="font-semibold text-lg" style="font-weight: 600;">Revenue</h5>
            <span></span>
          </div>
          <div class="relative">
              <revenChart></revenChart>
            </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" style="height:468px;" shadow="never">
          <div slot="header" class="clearfix">
                <h5 class="font-semibold text-lg dark:text-white-light">Sales By Category</h5>
          </div>
          <div class="relative">
              <salesByCategory></salesByCategory>
            </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="">
      <el-col :span="8">
        <el-card class="box-card" style="height:310px;" shadow="never">
          <div slot="header" class="clearfix">
            <h5 class="font-semibold text-lg">Daily Sales</h5>
            <span></span>
          </div>
          <div class="relative">
              <dailySales></dailySales>
            </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" style="height:310px;" shadow="never">
          <div slot="header" class="clearfix">
                <h5 class="font-semibold text-lg dark:text-white-light">Sales By Category</h5>
          </div>
          <div class="relative">
           <btcChart></btcChart>
            </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" style="height:310px;" shadow="never">
          <div class="relative">
              <totalOrders></totalOrders>
            </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import revenChart from '@/components/charts/revenChart.vue'
import salesByCategory from '../../components/charts/salesByCategory.vue'
import dailySales from '../../components/charts/dailySales.vue'
import totalOrders from '../../components/charts/totalOrders.vue'
import btcChart from '../../components/charts/btcChart.vue'
export default {
  name: 'dashboard_images',
  components: {
    revenChart,
    salesByCategory,
    dailySales,
    totalOrders,
    btcChart
  },
  computed: {
    ...mapGetters([
      'permission_routers'
    ])
  },
  data() {
    return {
      purchaseList: [],
      stockList: [],
      listAll: [],
      OrderList: [],
      goodsLendListWaitReturnData: [],
      params: {
        page_no: 1,
        page_size: 9
      },
      loading: false,
      goodsList: null,
      memberList: null,
      tableHeight: (document.body.clientHeight - 250) / 2,
      franchiseData: {},
      /** 列表数据 */
      tableData: [],
      revenueChart: {

      }

    }
  },
  filters: {
    secrecyMobile(mobile) {
      mobile = String(mobile)
      if (!/\d{11}/.test(mobile)) {
        return mobile
      }
      return mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3')
    }
  },
  activated() {
    window.onresize = this.countTableHeight
  },
  mounted() {
    if (this.permission_routers.some(v => v.name === 'stock')) {
      this.stockList = this.permission_routers.find(function(sc) { return sc.name === 'stock' })
    }
    if (this.permission_routers.some(v => v.name === 'purchase')) {
      this.purchaseList = this.permission_routers.find(function(sc) { return sc.name === 'purchase' })
    }
    this.listAll = []
    if (this.stockList.children && this.purchaseList.children) {
      this.listAll = this.stockList.children.concat(this.purchaseList.children)
    } else if (this.purchaseList.children) {
      this.listAll = this.purchaseList.children
    } else if (this.stockList.children) {
      this.listAll = this.stockList.children
    }
    this.GET_WarningGoodsList()
    this.GET_OrderList()
    this.GET_GoodsLendList()
  },
  methods: {
    /** 获取调整单列表 */
    GET_GoodsLendList() {
      this.loading = true
      API_GoodsLend.getGoodsLendListWaitReturn(this.params).then(response => {
        this.loading = false
        this.goodsLendListWaitReturnData = response
      })
    },
    GET_OrderList() {
      API_order.getOrderList({
        page_no: 1,
        page_size: 9,
        status: 'WAIT_WAREHOUSE_OUT'
      }).then(response => {
        this.OrderList = response
      })
    },
    checkIsauth(e) {
      return this.listAll.some(function(v) { return v.path === e })
    },
    GET_WarningGoodsList() {
      API_goods.getWarningGoodsList(this.params).then(response => {
        this.tableData = response.data
      })
    },
    /** 窗口缩放时计算table高度 */
    countTableHeight() {
      this.tableHeight = (document.body.clientHeight - 80 - 44 - 80 - 80 - 20 - 20 - 4) / 2
      /** 图表刷新 */
      setTimeout(this.sesalChart.resize)
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
/deep/ .el-table td:not(.is-left) {
  text-align: center;
}

.list-unstyled {
  font-size: 14px;

  li {
    padding-bottom: 5px;
    color: rgb(60, 141, 188);
    cursor: pointer;
    padding: 5.7px 0;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; // 默认不换行；
  }

  a {
    color: rgb(60, 141, 188);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.menus {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  font-size: 13px;
  padding: 30px 0 110px 0;

  .ments-item {
    img {
      width: 45px;
      padding-bottom: 10px;
    }

    a {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    cursor: pointer;
  }
}

.dashboard_images-container {
  height: 100%;
  // padding: 20px 20px;

  .flex-center {
    height: 104px;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    align-items: center;

    .felx-left {
      width: 56px;
      margin-right: 16px;

      img {
        width: 100%;
      }
    }

    .felx-right {
      .num {
        font-size: 24px;
      }

      .title {
        color: #747474;
      }
    }
  }

  .shopping-info {
    display: flex;
    align-items: center;
    padding: 20px 0;

    .shopping-info-item {
      flex: 1;
      margin-right: 20px;
      margin-bottom: 20px;
      height: 68px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #747474;

      .num {
        height: 48px;
        line-height: 48px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        // margin-bottom: 15px;
      }

      &:last-child {
        margin-right: 0px;
      }
    }
  }
  /deep/ .el-card .el-card__header {
  border-bottom: none !important; /* 去除底部边框 */
}

  /deep/ .el-card__body {
    padding: 10px;
  }

  .goods-statistics {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;

    a {
      display: block;
      margin: 0;
      width: 75%;

      button {
        height: 50px;
        width: 400px;
      }
    }
  }

  .goods-image {
    width: 50px;
    height: 50px;
  }
}

.el-row {
  position: relative;
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.goods-name {
  color: #606266;
}

.o2o-goods-name {
  color: #4183c4;
}
</style>
