<template>
  <div class="dashboard_images-container" v-loading="loading">
    <el-row :gutter="20" style="margin-top: 20px;">
      <!--新增商品 start-->
      <el-col :span="24">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>快捷起草</span>
          </div>
          <div class="menus">
            <div class="ments-item" v-for="(item, index) in menuList" :key="index">
              <div @click="goList(item)" style="display: flex;flex-direction: column;align-items: center;">
                <div>
                  <img :src="item.icon">
                </div>
                <div>{{ generateTitle(item.identifier) }}</div>
              </div>
            </div>
            <!-- <div class="ments-item" v-if="checkIsauth('purchase-contract-add') && checkIsauth('purchase-contract')"v-if="checkIsauth('purchase-plan-add') && checkIsauth('purchase-plan')">
              <router-link to="/purchase/purchase-contract-add">
                <div>
                  <img src="../../assets/dashboard_images/2.png">
                </div>
                <div>合同管理</div>
              </router-link>
            </div> -->
            <!-- <div class="ments-item" v-if="checkIsauth('purchase-warehousing-add') && checkIsauth('purchase-warehousing')">
              <router-link to="/purchase/purchase-warehousing-add">
                <div>
                  <img src="../../assets/dashboard_images/3.png">
                </div>
                <div>采购入库</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkIsauth('supplier-returns-add') && checkIsauth('supplier-returns')">
              <router-link to="/purchase/supplier-returns-add">
                <div>
                  <img src="../../assets/dashboard_images/4.png">
                </div>
                <div>供应商退货</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkIsauth('supplier-settlement')">
              <router-link to="/purchase/supplier-settlement">
                <div>
                  <img src="../../assets/dashboard_images/5.png">
                </div>
                <div>供应商结算</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkPermission(['order'])">
              <router-link to="/stock/order">
                <div>
                  <img src="../../assets/dashboard_images/6.png">
                </div>
                <div>订单列表</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkPermission(['orderReturnAdd']) && checkPermission(['orderReturn'])">
              <router-link to="/stock/order-return-add">
                <div>
                  <img src="../../assets/dashboard_images/7.png">
                </div>
                <div>订单退货</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkPermission(['warehouse-out'])">
              <router-link to="/stock/warehouse-out">
                <div>
                  <img src="../../assets/dashboard_images/8.png">
                </div>
                <div>出库管理</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkIsauth('goods-transfer-add') && checkIsauth('goods-transfer')">
              <router-link to="/stock/goods-transfer-add">
                <div>
                  <img src="../../assets/dashboard_images/9.png">
                </div>
                <div>商品调拨</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkIsauth('goods-lend-add') && checkIsauth('goods-lend')">
              <router-link to="/stock/goods-lend-add">
                <div>
                  <img src="../../assets/dashboard_images/10.png">
                </div>
                <div>商品借出</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkPermission(['goods-exchange-add']) && checkPermission(['goods-exchange'])">
              <router-link to="/stock/goods-exchange-add">
                <div>
                  <img src="../../assets/dashboard_images/11.png">
                </div>
                <div>商品换货</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkPermission(['goods-inventory-add']) && checkPermission(['goods-inventory'])">
              <router-link to="/stock/goods-inventory-add">
                <div>
                  <img src="../../assets/dashboard_images/12.png">
                </div>
                <div>库存盘点</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkPermission(['goods-inventoryLoss-add']) && checkPermission(['goods-inventoryLoss'])">
              <router-link to="/stock/goods-inventoryLoss-add">
                <div>
                  <img src="../../assets/dashboard_images/13.png">
                </div>
                <div>库存报损</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkIsauth('goods-understock')">
              <router-link to="/stock/goods-understock">
                <div>
                  <img src="../../assets/dashboard_images/14.png">
                </div>
                <div>库存预警</div>
              </router-link>
            </div> -->
          </div>
        </el-card>
      </el-col>
      <!--新增商品 end-->
    </el-row>
    <el-row :gutter="20" style="margin-bottom: 0">
      <el-col :span="16" v-if="checkPermission(['order'])">
        <el-card style="height: 350px;" shadow="never">
          <div slot="header" class="clearfix">
            <span>待发货订单</span>
            <router-link to="/sales/order">
              <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
            </router-link>
          </div>
          <div class="goods-statistics">
            <el-table :data="OrderList.records"  :loading="loading" :header-cell-style="{ textAlign: 'center' }">
              <el-table-column prop="order_vo.sn" label="订单编号">
              </el-table-column>
              <el-table-column prop="warehouse_name" label="仓库名称">
                <template slot-scope="scope">{{ warehouseName(scope.row.order_vo.warehouse_id) }}</template>
              </el-table-column>
              <el-table-column prop="create_time" label="下单时间">
                <template slot-scope="scope">{{ scope.row.update_time | unixToDate }}</template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" @click="addWarehouse(scope.row)">发货</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" v-if="checkIsauth('goods-understock')">
        <el-card class="box-card" style="height:350px;" shadow="never">
          <div slot="header" class="clearfix"
            style="    display: flex;justify-content: space-between;align-items: center;">
            <span>库存预警</span>
            <!--  <router-link to="/stock/goods-understock">
              <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
            </router-link> -->
            <el-select @change="cleanGoodsList" v-model="warehouse_id" clearable style="width: 100px;">
              <el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </div>
          <div class="yu-statistics">
            <el-table :data="tableData" :loading="loading" height="280"  :header-cell-style="{ textAlign: 'center' }">
              <el-table-column prop="sn" label="商品编号">
                <template slot-scope="scope">{{ scope.row.goods_vo.sn }}</template>
              </el-table-column>
              <el-table-column prop="name" label="商品名称">
                <template slot-scope="scope">{{ scope.row.goods_vo.name }}</template>
              </el-table-column>
              <el-table-column prop="stock_num" label="库存数量">
                <template slot-scope="scope">{{ scope.row.usable_stock }}</template>
              </el-table-column>
              <el-table-column prop="stock_num" label="预警数量">
                <template slot-scope="scope">{{ scope.row.warning_stock }}</template>
              </el-table-column>
              <el-table-column prop="warehouse_id" label="仓库名称">
                <template slot-scope="scope">{{ wareName(scope.row.warehouse_id) }}</template>
              </el-table-column>
            </el-table>
          </div>
          <!-- <ul class="list-unstyled">
            <li class="lis" style="color: black;">
              <span>商品编号</span>
              <span>商品名称</span>
.my_table >>> .el-table__row>td{
  /* 去除表格线 */
  border: none;
}
              <span>库存数量</span>
              <span>库位号</span>
            </li>
            <li v-for="(row, key) in tableData" class="lis" :key="key">
               <span>{{ row.sn }}</span>
               <span>{{ row.name }}</span>
               <span>{{ row.specification }}</span>
               <span>{{ row.dept_name }}</span>
            </li>
          </ul> -->
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="12" style="margin-top: 20px;padding-bottom:40px"
      v-if="checkIsauth('goods-lend-add') && checkIsauth('goods-lend')">
      <el-col :span="16">
        <el-card class="box-card" style="height:350px;" shadow="never">
          <div slot="header" class="clearfix">
            <span>待入库订单</span>
            <router-link to="/sales/order">
              <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
            </router-link>
          </div>
          <div class="goods-statistics">
            <el-table  :data="goodsLendListWaitReturnData.data" :loading="loading"  
              :header-cell-style="{ textAlign: 'center' }">
              <el-table-column prop="sn" label="订单编号">
              </el-table-column>
              <el-table-column prop="warehouse_name" label="仓库名称">
                <template slot-scope="scope">{{ warehouseName(scope.row.warehouse_id) }}</template>
              </el-table-column>
              <el-table-column prop="create_time" label="下单时间">
                <template slot-scope="scope">{{ scope.row.create_time | unixToDate }}</template>
              </el-table-column>

            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import * as API_goods from '@/api/goods'
import { mapGetters } from 'vuex'
import * as API_order from '@/api/order'
import { generateTitle } from '@/utils/i18n'
import * as API_GoodsLend from '@/api/goodsLend'
import * as API_Menus from '@/api/menus'
import * as API_BasicSetting from "@/api/basicSetting";
import * as API_GoodsTransfer from "@/api/goodsTransfer";
import store from '@/store'
export default {
  name: 'dashboard_images',
  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: {

      },
      menuList: [],
      routerLIst: [],
      warehouseList: [],
      warehouse_id: ''
    }
  },
  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() {
    this.permission_routers.map(el => {
      if (el.name !== undefined && el.name !== "dashboard" && this.menuList) {
        this.routerLIst.push(el)
      }
    })
    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_WarehouseList()
    this.GET_OrderList()
    this.GET_GoodsLendList()
    this.GET_menus()

  },
  methods: {
    /* 发货 */
    addWarehouse(row) {
      this.$router.push({
        name: "orderOutboundAdd",
        params: { id: row.id },
      });
      // this.$router.params{ name: 'orderOutboundDetail', params: { id: scope.row.id } }
    },
    warehouseName(val) {
      let name = [];
      this.warehouseList.map((el) => {
        val.map((e) => {
          if (el.id == e) {
            return name.push(el.name)
          }
        });
      });
      return name.join('/')
    },
    wareName(val) {
      let name = ''
      this.warehouseList.map((el) => {
        if (el.id == val) {
          return name = el.name
        }
      });
      return name
    },
    /* 切换仓库 */
    cleanGoodsList(val) {
      this.warehouse_id = val
      this.GET_WarningGoodsList()
    },
    generateTitle,
    /** 获取待入库订单 */
    GET_GoodsLendList() {
      this.loading = true
      API_order.getOrderList({
        page_no: 1,
        page_size: 10,
        selectType: 'to_be_return'
      }).then(response => {
        this.loading = false
        this.goodsLendListWaitReturnData = response
      }).catch(() => { this.loading = false })
      /* API_GoodsLend.warehouseEntry(this.warehouse_id).then(response => {
        this.loading = false
        this.goodsLendListWaitReturnData = response
      }) */
    },
    /** 获取待发货订单 */
    GET_OrderList() {
      API_order.getSaleOrderOutList({
        page_no: 1,
        page_size: 10,
        selectType: 'to_be_send'
      }).then(response => {
        this.OrderList = response
      })
    },
    checkIsauth(e) {
      return this.listAll.some(function (v) { return v.path === e })
    },
    GET_WarningGoodsList() {
      API_GoodsTransfer.getWarnStock(this.warehouse_id).then(response => {
        this.tableData = response
      })
    },
    /** 窗口缩放时计算table高度 */
    countTableHeight() {
      this.tableHeight = (document.body.clientHeight - 80 - 44 - 80 - 80 - 20 - 20 - 4) / 2
      /** 图表刷新 */
      setTimeout(this.sesalChart.resize)
    },
    /**获取菜单列表*/
    GET_menus() {
      API_Menus.getMenusChildren(0).then(response => {
        response.map(el => {
          el.children.map(e => {
            if (e.show_home == 1) {
              this.menuList.push(e)
            }
          })
        })
      })
      API_Menus.getMenuList(this.params).then(res => {
        console.log(res);
      })
    },
    // 前往目标页面identifier
    goList(item) {
      this.routerLIst.map(el => {
        el.children.map(e => {
          if (e.name == item.identifier) {
            console.log(el);
            this.$router.push(`${el.name}/${e.path}`)
          }
        })
      })
    },
    GET_WarehouseList() {
      API_BasicSetting.getWarehouseListAll().then((response) => {
        this.warehouse_id = response[0].id
        this.warehouseList = response;
        this.GET_WarningGoodsList()
      });
    }
  }
}
</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; // 默认不换行；
  }

  .lis {
    display: flex;
    justify-content: space-around;
  }

  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;
      }
    }
  }

  .yu-statistics /deep/.el-table__row>td {
    /* 去除表格线 */
    border: none;
  }

  .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>
