<template>
  <div class="dashboard_container">
    <template>
      <div class="flex">
        <div class="mode" @click="gotopage('auxiliaryPriceManagement', '', '')">
          <div class="title">辅材列表配置统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allmGoodsNum }}</div>
                <div class="title">总配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onMGoodsNum }}</div>
                <div class="title">有效配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offMGoodsNum }}</div>
                <div class="title">无效配置数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode" @click="gotopage('masterAuxiliaryMaterials')">
          <div class="title">师傅辅材列表统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allmWorkerGoodsNum }}</div>
                <div class="title">总配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onmWorkerGoodsNum }}</div>
                <div class="title">有效配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offmWorkerGoodsNum }}</div>
                <div class="title">无效配置数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode" @click="gotopage('auxiliaryChargeManagement', '', '')">
          <div class="title">辅材收费标准配置统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allmChargeGoodsNum }}</div>
                <div class="title">总配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onmChargeGoodsNum }}</div>
                <div class="title">有效配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offmChargeGoodsNum }}</div>
                <div class="title">无效配置数量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex">
        <div class="mode" @click="gotopage('supplier', '', '')">
          <div class="title">供应商维护统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allVendNum }}</div>
                <div class="title">总配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onVendNum }}</div>
                <div class="title">有效配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offVendNum }}</div>
                <div class="title">无效配置数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode" @click="gotopage('vender-goods-sheet')">
          <div class="title">产品关系维护单统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allPNum }}</div>
                <div class="title">总数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.savePNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onPNum }}</div>
                <div class="title">已审核数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode" @click="gotopage('shop-purchase')">
          <div class="title">网点采购单统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.websitCheckNum }}</div>
                <div class="title">总数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.websitCheckNeverNum }}</div>
                <div class="title">未核实数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.websitCheckYesNum }}</div>
                <div class="title">已核实数量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex">
        <div class="mode" @click="gotopage('purchase-apply-sheet')">
          <div class="title">网点采购申请单统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.websitApplySaveNum }}</div>
                <div class="title">保存数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.websitApplySumbitNum }}</div>
                <div class="title">提交数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.websitApplyCancelNum }}</div>
                <div class="title">作废数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.websitApplyOkNum }}</div>
                <div class="title">通过数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.websitApplyFailNum }}</div>
                <div class="title">失败数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode" @click="gotopage('purchase-sheet')">
          <div class="title">网点采购订单统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.websitOrderSaveNum }}</div>
                <div class="title">保存数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.websitOrderSumbitNum }}</div>
                <div class="title">提交数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.websitOrderCancelNum }}</div>
                <div class="title">作废数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.websitOrderOkNum }}</div>
                <div class="title">通过数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.websitOrderFailNum }}</div>
                <div class="title">失败数量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex">
        <div class="mode" @click="gotopage('purchase-adjustment-sheet')">
          <div class="title">网点采购调整单统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.websitAdjustmentSaveNum }}</div>
                <div class="title">保存数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.websitAdjustmentSumbitNum }}</div>
                <div class="title">提交数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.websitAdjustmentCancelNum }}</div>
                <div class="title">作废数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.websitAdjustmentOkNum }}</div>
                <div class="title">通过数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.websitAdjustmentFailNum }}</div>
                <div class="title">失败数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode">
          <div class="title">辅材采购退货单统计</div>
          <div class="flex head">
            <div class="tab" @click="gotopage('returnAuxiliaryMaterials', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.savePurchaseRetNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('returnAuxiliaryMaterials', '已审核数量', 'OK')">
              <div class="text">
                <div class="num">{{ collectData.okPurchaseRetNum }}</div>
                <div class="title">已审核数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('returnAuxiliaryMaterials', '审核失败数量', 'FAIL')">
              <div class="text">
                <div class="num">{{ collectData.failPurchaseRetNum }}</div>
                <div class="title">审核失败数量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex">
        <div class="mode">
          <div class="title">辅材调价单统计</div>
          <div class="flex head">
            <div class="tab" @click="gotopage('auxiliaryAdjustPriceOrder', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.savePriceUpdNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('auxiliaryAdjustPriceOrder', '已保存数量', 'OK')">
              <div class="text">
                <div class="num">{{ collectData.okPriceUpdNum }}</div>
                <div class="title">已审核数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode" style="min-width: 66.33%">
          <div class="title">辅材销售订单统计</div>
          <div class="flex head">
            <div class="tab" @click="gotopage('auxiliarySalesOrder', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.saveSalesNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('auxiliarySalesOrder', '已经提交数量', 'SUBMIT')">
              <div class="text">
                <div class="num">{{ collectData.submitSalesNum }}</div>
                <div class="title">已经提交数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('auxiliarySalesOrder', '已支付未提货', 'PAY_NOT_TAKE')">
              <div class="text">
                <div class="num">{{ collectData.payNoTakeSalesNum }}</div>
                <div class="title">已支付未提货</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('auxiliarySalesOrder', '已支付已提货', 'PAY_TAKE')">
              <div class="text">
                <div class="num">{{ collectData.paytakeSalesNum }}</div>
                <div class="title">已支付已提货</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('auxiliarySalesOrder', '取消订单数量', 'CANCEL')">
              <div class="text">
                <div class="num">{{ collectData.cancelSalesNum }}</div>
                <div class="title">取消订单数量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex">
        <div class="mode">
          <div class="title">辅材销售退货单统计</div>
          <div class="flex head">
            <div class="tab" @click="gotopage('auxiliarySalesReturnOrder', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.saveSalesRetNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('auxiliarySalesReturnOrder', '已提交数量', 'SUBMIT')">
              <div class="text">
                <div class="num">{{ collectData.submitSalesRetNum }}</div>
                <div class="title">已提交数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('auxiliarySalesReturnOrder', '待审核数量', 'WAIT')">
              <div class="text">
                <div class="num">{{ collectData.waitSalesRetNum }}</div>
                <div class="title">待审核数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('auxiliarySalesReturnOrder', '审核通过数量', 'OK')">
              <div class="text">
                <div class="num">{{ collectData.okSalesRetNum }}</div>
                <div class="title">审核通过数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode" style="max-width: 33%">
          <div class="title">结算管理-电子支付</div>
          <div class="flex head">
            <div class="tab" @click="gotopage('settleManagElecpay', '结算状态', 'WAIT', 'status')">
              <div class="text">
                <div class="num">{{ collectData.settlementOrderWait || 0 }}</div>
                <div class="title">待结算</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('settleManagElecpay', '结算状态', 'OK', 'status')">
              <div class="text">
                <div class="num">{{ collectData.settlementOrderOk || 0 }}</div>
                <div class="title">已完成</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('settleManagElecpay', '结算状态', 'YC', 'status')">
              <div class="text">
                <div class="num">{{ collectData.settlementOrderYc || 0 }}</div>
                <div class="title">异常结算</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('settleManagElecpay', '结算状态', 'LINE', 'status')">
              <div class="text">
                <div class="num">{{ collectData.settlementOrderLine || 0 }}</div>
                <div class="title">线下结算</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { dataCountMaterialCount } from '@/api/dataCount.js'
export default {
  data() {
    return {
      collectData: {}
    }
  },
  created() {
    this.refreshData()
  },
  methods: {
    refreshData() {
      dataCountMaterialCount().then(res => {
        this.collectData = res.data
      })
    },
    gotopage(name, pageName = '', pageCode = '', pageType = '-') {
      if (pageCode) {
        this.$router.push({
          name: name,
          params: {
            pageName: pageName,
            pageType: pageType,
            pageCode: pageCode
          }
        })
      } else {
        this.$router.push({
          name: name
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.dashboard_container {
  background: #f5f5f5;
  padding: 20px;
  min-height: calc(100vh - 86px);
  box-sizing: border-box;

  .refresh {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // text-align: right;
    margin-bottom: 10px;

    span {
      cursor: pointer;
    }

    i {
      font-weight: bold;
      margin-left: 4px;
      cursor: pointer;
    }
  }

  .flex {
    display: flex;
    margin-bottom: 10px;
  }

  .flex_asb {
    display: flex;
    justify-content: space-between;
  }

  .mode {
    flex: 1;
    padding: 10px;
    margin-right: 10px;
    background-color: #ffffff;
    border-radius: 10px;

    .title {
      font-weight: bold;
    }

    .head {
      padding-top: 12px !important;
      margin: 0 !important;
      margin-bottom: 0 !important;
    }

    .opacity {
      opacity: 0;
    }

    .tab {
      display: flex;
      align-items: center;
      flex: 1;
      cursor: pointer;

      .text {
        margin: 0 10px;

        .title {
          color: #999999;
          font-size: 12px;
          margin-top: 8px;
        }

        .num {
          font-size: 22px;
          font-weight: bold;
        }
      }

      .img {
        width: 46px;
        height: 46px;
        margin-left: 20px;
      }
    }

    .child {
      border-right: 1px solid #dddddd;

      .text {
        .title {
          margin-top: 8px;
          margin-bottom: 0;
        }
      }
    }

    .child:last-child {
      border-right: none;
    }
  }

  .mode:last-child {
    margin-right: 0;
  }

  .container_bottom {
    width: 100%;
    height: 350px;
    padding: 10px;
    background-color: #ffffff;
    margin-top: 10px;
    border-radius: 10px;
  }
}
</style>
