<template>
  <div>
    <Navbar title="发起盘点任务" :is-go-back="false" />
  </div>

  <section style="margin-top: 20px">
    <a-steps :current="pageInformation.currentStep">
      <a-step title="选择盘点类型" />
      <a-step title="确认盘点数据" />
      <a-step title="生成盘点单" />
    </a-steps>
  </section>

  <a-divider style="margin:20px 0  6px 0 !important;" />

  <section>
    <asset-inventory-step1 v-if="pageInformation.showPage == 0" :current-step="pageInformation" @next="nextStep"
      @previous="previousStep" />
    <asset-inventory-step2 v-if="pageInformation.showPage == 1" :current-step="pageInformation" @next="nextStep"
      @previous="previousStep" />
    <asset-inventory-step3 v-if="pageInformation.showPage == 2" :current-step="pageInformation" @next="nextStep"
      @previous="previousStep" />
    <asset-inventory-step4 v-if="pageInformation.showPage == 3" :current-step="pageInformation" @next="nextStep"
      @previous="previousStep" />
    <asset-inventory-step5 v-if="pageInformation.showPage == 4" :current-step="pageInformation" @next="nextStep"
      @previous="previousStep" />
    <asset-inventory-step6 v-if="pageInformation.showPage == 5" :current-step="pageInformation" @next="nextStep"
      @previous="previousStep" />
    <asset-inventory-step7 v-if="pageInformation.showPage == 6" :current-step="pageInformation" @next="nextStep"
      @previous="previousStep" />
  </section>
</template>

<script>

import AssetInventoryStep1 from './AssetInventoryStep1.vue';
import AssetInventoryStep2 from './AssetInventoryStep2.vue';
import AssetInventoryStep3 from './AssetInventoryStep3.vue';
import AssetInventoryStep4 from './AssetInventoryStep4.vue';
import AssetInventoryStep5 from './AssetInventoryStep5.vue';
import AssetInventoryStep6 from './AssetInventoryStep6.vue';
import AssetInventoryStep7 from './AssetInventoryStep7.vue';

export default {

  components: {
    'asset-inventory-step1': AssetInventoryStep1,
    'asset-inventory-step2': AssetInventoryStep2,
    'asset-inventory-step3': AssetInventoryStep3,
    'asset-inventory-step4': AssetInventoryStep4,
    'asset-inventory-step5': AssetInventoryStep5,
    'asset-inventory-step6': AssetInventoryStep6,
    'asset-inventory-step7': AssetInventoryStep7,
  },
  data: function () {
    return {
      pageInformation: {
        currentStep: 0,
        showPage: 0,
      },
    };
  },

  methods: {
    nextStep: function (data) {
      var _self = this;
      _self.pageInformation = data;
      Object.assign(this.pageInformation, data);
    },
    previousStep: function (data) {
      var _self = this;
      _self.pageInformation = data;
    },
    /**
         * 修改数据
         */
    update: function (pageInformation) {
      Object.assign(this.pageInformation, pageInformation);
    },

    mounted: function () {

    },
  },
};
</script>
<style scoped>
.grid-container {
  display: grid;
  grid-template-rows: 8% 8% 84%;
  grid-template-columns: 100%;
  width: 100%;
  /*视口被均分为 100 单位的 vh 占据整个窗口，扣掉顶部 topNav 的距离后，计算得到 responseOrganizationSelect 的高度*/
  height: calc(100vh - 130px);
  margin-top: 10px;
}

.grid-item-1 {
  grid-row: 1/2;
}

.grid-item-2 {
  grid-row: 2/3;
}

.grid-item-3 {
  grid-row: 3/4;
}

.box {
  border: 1px #ccc solid;
  margin-bottom: 15px;
  padding-top: 10px;
  border-radius: 5px;
  background-color: #ffffff;
}

.label {
  float: left;
}

.div-form {
  margin-bottom: 10px;
}

:deep(.ant-divider-horizontal) {
  margin: 0 !important;
}
</style>
