<template>
  <div>
    <div class="i-layout-page-header">
      <PageHeader :title="$route.meta.title" :content="$route.meta.description" hidden-breadcrumb />
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <view-table ref="table" view-code="Inventory" @create="$refs.form.open()">
        <template #command="{ row }">
          <Button size="small" v-if="row.status == 'New'" title="修改" type="primary" custom-icon="fa fa-edit" @click="$refs.form.open(row)"></Button>
          <Button size="small" v-if="row.status == 'New'" title="生成盘点明细" type="primary" custom-icon="fa fa-bolt" @click="active(row)"></Button>
          <Button size="small" v-if="row.status == 'Pending'" title="完成盘点" type="primary" custom-icon="fa fa-flag-checkered" @click="finish(row)"></Button>
          <Button size="small" v-if="row.status == 'Pending' || row.status == 'Finished'" title="明细" type="info" custom-icon="fa fa-bars" @click="openItem(row)"></Button>
          <Button size="small" v-if="row.status == 'Pending' || row.status == 'New'" title="取消" type="error" custom-icon="fa fa-stop-circle" @click="cancel(row)"></Button>
        </template>
      </view-table>
    </Card>
    <modal-form ref="form" view-code="InventoryEdit" @on-after-save="$refs.table.loadData()" />
    <modal-table ref="itemTable" view-code="InventoryItem">
      <template #filterCommand>
        <Button size="small" v-if="inventory.status == 'Pending'" type="primary" custom-icon="fa fa-edit" @click="$refs.itemEdit.open({ inventoryID: inventory.id })">
          结果录入
        </Button>
      </template>
    </modal-table>
    <modal-table ref="itemEdit" :footer-enable="true" view-code="InventoryItemEdit">
      <template #footer>
        <Button type="primary" custom-icon="fa fa-edit" @click="save()">保存</Button>
        <Button type="default" custom-icon="fa fa-times" @click="$refs.itemEdit.close()">关闭</Button>
      </template>
    </modal-table>
  </div>
</template>
<script>
  import { mixinPage } from 'mooho-base-admin-plus';
  import inventoryApi from '../../api/inventory';
  import inventoryItemApi from '../../api/inventoryItem';

  export default {
    name: 'storage-inventory',
    mixins: [mixinPage],
    components: {},
    data() {
      return {
        inventory: {}
      };
    },
    computed: {},
    created() {},
    methods: {
      openItem(row) {
        this.inventory = row;
        this.$refs.itemTable.open({ inventoryID: row.id });
      },
      active(row) {
        this.confirm('确定要开始盘点吗？', async () => {
          await inventoryApi.active(row.id);

          this.success('盘点明细生成成功！');

          this.$refs.table.loadData();
        });
      },
      finish(row) {
        this.confirm('确定盘点结果已全部录入，要生成盘点结果吗？', async () => {
          let res = await inventoryApi.finish(row.id);
          if (res) {
            this.confirm('还有实盘数量未填写，是否默认为与当前库存数量一致？', async () => {
              res.forEach(item => {
                if (!item.actualQuantity) {
                  item.actualQuantity = item.quantity;
                }
              });

              await inventoryItemApi.updateBatch(res);

              await inventoryApi.finish(row.id);

              this.success('盘点结果生成成功');

              this.$refs.table.loadData();
            });
          } else {
            this.success('盘点结果生成成功');

            this.$refs.table.loadData();
          }
        });
      },
      cancel(row) {
        this.confirm('确定要取消的该盘点单吗？', async () => {
          await inventoryApi.cancel(row.id);

          this.success('盘点单取消成功');

          this.$refs.table.loadData();
        });
      },
      save() {
        this.confirm('确定要保存盘点结果吗？', async () => {
          await inventoryItemApi.updateBatch(this.$refs.itemEdit.data);

          this.success('保存成功！');
        });
      }
    }
  };
</script>
