<template>
  <div>
    <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="盘点单名称" :rules="[{ required: true }]" class="m-form-item">
        <a-input v-model:value="inventorySheetName" placeholder="请输入盘点单名称" />
      </a-form-item>
      <a-form-item label="仓库" :rules="[{ required: true }]" class="m-form-item">
        <a-select v-model:value="warehouseId" :allow-clear="true" show-search option-filter-prop="label" :options="warehouseOptions" placeholder="请选择仓库" />
      </a-form-item>
    </a-form>
    <a-divider style="margin:14px 0 20px 0 !important;" />
    <a-button type="primary" @click="previous">上一步</a-button>
    <a-button style="float: right;" type="primary" @click="next">下一步</a-button>
  </div>
</template>

<script>
import { Notify } from 'pc-component-v3';
import AssetInventoryResource from '../api/asset/AssetInventoryResource.js';


export default {

  components: {},

  props: {
    currentStep: {
      type: Object,
      default() {
        return {};
      },
    },
  },

  // 定义抛出的事件名称
  emits: ['previous', 'next'],
  data: function () {
    return {
      inventorySheetName: null,
      warehouseId: undefined,
      warehouseOptions: [],
      currentStepTempory: {},
    };
  },

  watch: {
    currentStep: {
      handler(newVal, oldVal) {
        console.log(newVal);
        if (newVal != null) {
          this.currentStepTempory = JSON.parse(JSON.stringify(newVal));
          if (newVal.assetInventoryStep6) {
            this.inventorySheetName = newVal.assetInventoryStep6.inventorySheetName || null;
            this.warehouseId = newVal.assetInventoryStep6.warehouseId;
          }
        }
      },
      immediate: true,
    },

    currentStepTempory: {
      handler(newVal, oldVal) {
        clearTimeout(this.timer); //清除延迟执行
        let _self = this;
        this.timer = setTimeout(() => { //设置延迟执行
          _self.$emit('update', _self.currentStepTempory);
        }, 1000);
      },
      deep: true,
    },
  },
  mounted: function () {
    this.getWarehouseList();
  },

  methods: {
    getWarehouseList: function () {
      var _self = this;
      AssetInventoryResource.getWarehouseList().then(
        successData => {
          if (successData && successData.length > 0) {
            _self.warehouseOptions = successData.map(item => {
              return {
                value: item.id,
                label: item.name,
              };
            });
          }
        },
        errorData => {
          console.log(errorData);
        },
      );
    },
    next: function () {
      var _self = this;
      if (_self.inventorySheetName == null || _self.inventorySheetName == '') {
        Notify.error('错误', '请填写盘点单名称', 1000);
        return;
      }
      if (_self.warehouseId == null || _self.warehouseId == undefined) {
        Notify.error('错误', '请选择仓库', 1000);
        return;
      }
      var param = {
        inventorySheetName: _self.inventorySheetName,
        warehouseId: _self.warehouseId,
      };


      console.log(this.currentStep);
      var data = {
        currentStep: 2,
        showPage: 6,
        assetInventoryStep6: param,
      };
      this.$emit('next', data);
    },

    previous: function () {
      var data = {
        currentStep: 0,
        showPage: 0,
      };
      this.$emit('previous', data);
    },
  },
};
</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;
}

.m-monthly-picker>>>.month-year-display {
  height: 35px;
  font-size: 1.5rem;
  padding-left: 0.9rem;
  font-weight: 400;
}

.m-form-item {
  margin-bottom: 5px;
}

:deep(.ant-form-item-label > label) {
  font-size: 14px !important;
  font-weight: 500 !important;
}
</style>
