<template>
  <div class="dashboard_container">
    <template>
      <div class="flex">
        <div class="mode" @click="gotopage('attachmentProfile', '', '')">
          <div class="title">配件资料配置统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allpGoodsNum }}</div>
                <div class="title">总配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onPGoodsNum }}</div>
                <div class="title">有效配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offPGoodsNum }}</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('partsStorage', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.savePurchasePNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('partsStorage', '已审核数量', 'OK')">
              <div class="text">
                <div class="num">{{ collectData.okPurchasePNum }}</div>
                <div class="title">已审核数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('partsStorage', '审核失败数量', 'FAIL')">
              <div class="text">
                <div class="num">{{ collectData.failPurchasePNum }}</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('partsReturn', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.savePurchaseRetPNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('partsReturn', '已审核数量', 'OK')">
              <div class="text">
                <div class="num">{{ collectData.okPurchaseRetPNum }}</div>
                <div class="title">已审核数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('partsReturn', '审核失败数量', 'FAIL')">
              <div class="text">
                <div class="num">{{ collectData.failPurchaseRetPNum }}</div>
                <div class="title">审核失败数量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex">
        <div class="mode" style="min-width: 66.33%">
          <div class="title">配件销售订单统计</div>
          <div class="flex head">
            <div class="tab" @click="gotopage('attachmentSalesOrder', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.saveSalesPNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('attachmentSalesOrder', '已提交数量', 'SUBMIT')">
              <div class="text">
                <div class="num">{{ collectData.submitSalesPgNum }}</div>
                <div class="title">已提交数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('attachmentSalesOrder', '已支付未提交', 'PAY_NOT_TAKE')">
              <div class="text">
                <div class="num">{{ collectData.payNoTakeSalesPgNum }}</div>
                <div class="title">已支付未提交</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('attachmentSalesOrder', '已支付已提交', 'PAY_TAKE')">
              <div class="text">
                <div class="num">{{ collectData.payTakeSalesPgNum }}</div>
                <div class="title">已支付已提交</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('attachmentSalesOrder', '取消订单数量', 'CANCEL')">
              <div class="text">
                <div class="num">{{ collectData.cancelSalesPgNum }}</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('attachmentNewReturn', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.saveNewNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('attachmentNewReturn', '已提交数量', 'SUBMIT')">
              <div class="text">
                <div class="num">{{ collectData.submitNewNum }}</div>
                <div class="title">已提交数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('attachmentNewReturn', '审核通过数量', 'OK')">
              <div class="text">
                <div class="num">{{ collectData.okNewNum }}</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('attachmentOldReturn', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.saveOldNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('attachmentOldReturn', '已提交数量', 'SUBMIT')">
              <div class="text">
                <div class="num">{{ collectData.submitOldNum }}</div>
                <div class="title">已提交数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('attachmentOldReturn', '审核通过数量', 'OK')">
              <div class="text">
                <div class="num">{{ collectData.okOldNum }}</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('oldPartsReturnFactory', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.saveOldFactoryNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('oldPartsReturnFactory', '已提交数量', 'SUBMIT')">
              <div class="text">
                <div class="num">{{ collectData.submitOldFactoryNum }}</div>
                <div class="title">已提交数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('oldPartsReturnFactory', '审核通过数量', 'OK')">
              <div class="text">
                <div class="num">{{ collectData.okOldFactoryNum }}</div>
                <div class="title">审核通过数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('oldPartsReturnFactory', '审核失败数量', 'FAIL')">
              <div class="text">
                <div class="num">{{ collectData.failOldFactoryNum }}</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>
