<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="Warehouse" @create="$refs.form.open()">
        <template #filterCommand>
          <slot name="filterCommand"></slot>
        </template>
        <template #command="{ row, index }">
          <Button size="small" title="编辑" type="primary" custom-icon="fa fa-edit" @click="$refs.form.open(row)"></Button>
          <Button size="small" title="移库类型" type="primary" custom-icon="fa fa-cog" @click="openWarehouseMoveType(row)"></Button>
          <Button size="small" title="删除" type="warning" custom-icon="fa fa-trash-alt" @click="$refs.table.remove(row)"></Button>
          <slot name="command" :row="row" :index="index"></slot>
        </template>
      </view-table>
    </Card>
    <modal-form ref="form" view-code="WarehouseEdit" @on-after-save="$refs.table.loadData()" />
    <Modal v-model="moveTypeOpened" scrollable width="600">
      <template #header>
        <div>
          <slot name="header">
            <span class="title">移库类型</span>
            <span class="description">Move Type</span>
          </slot>
        </div>
      </template>
      <div class="i-table-no-border">
        <Table :columns="moveTypeColumns" :data="moveTypes" stripe size="small" no-data-text="暂无数据...">
          <template #command="{ row, index }">
            <Checkbox v-model="moveTypes[index].outChecked" :disabled="row.sourceType != 'Warehouse'">出库</Checkbox>
            <Checkbox v-model="moveTypes[index].inChecked" :disabled="row.targetType != 'Warehouse'">入库</Checkbox>
          </template>
        </Table>
      </div>
      <template #footer>
        <div>
          <Button type="primary" custom-icon="fa fa-save" @click="saveWareMoveType()">确定</Button>
          <Button type="default" custom-icon="fa fa-times" @click="moveTypeOpened = false">关闭</Button>
        </div>
      </template>
    </Modal>
  </div>
</template>
<script>
  import { mixinPage } from 'mooho-base-admin-plus';
  import moveTypeApi from '../../api/moveType';
  import warehouseMoveTypeApi from '../../api/warehouseMoveType';

  export default {
    name: 'master-wareHouse',
    mixins: [mixinPage],
    components: {},
    data() {
      return {
        moveTypeOpened: false,
        warhouseID: null,
        moveTypes: [],
        moveTypeColumns: [
          { title: '移库类型', align: 'center', key: 'name' },
          { slot: 'command', title: ' ', align: 'center' }
        ],
        directGroup: []
      };
    },
    computed: {},
    async created() {
      const res = await moveTypeApi.query();
      this.moveTypes = res.data;
    },
    methods: {
      async openWarehouseMoveType(row) {
        this.warhouseID = row.id;

        const res = await warehouseMoveTypeApi.query({ warehouseID: this.warhouseID });
        let warehouseMoveTypes = res.data;

        this.moveTypes.forEach(moveType => {
          moveType.inChecked = warehouseMoveTypes.some(item => item.moveTypeID == moveType.id && item.moveDirect == 'In');
          moveType.outChecked = warehouseMoveTypes.some(item => item.moveTypeID == moveType.id && item.moveDirect == 'Out');
        });

        this.moveTypeOpened = true;
      },
      async saveWareMoveType() {
        this.confirm('确定要保存设置吗？', async () => {
          let warehouseMoveTypes = [];
          this.moveTypes.forEach(moveType => {
            if (moveType.inChecked) {
              warehouseMoveTypes.push({
                moveTypeID: moveType.id,
                moveDirect: 'In'
              });
            }

            if (moveType.outChecked) {
              warehouseMoveTypes.push({
                moveTypeID: moveType.id,
                moveDirect: 'Out'
              });
            }
          });

          await warehouseMoveTypeApi.save({
            warehouseID: this.warhouseID,
            warehouseMoveTypes: warehouseMoveTypes
          });

          this.success('操作成功！', () => {
            this.moveTypeOpened = false;
          });
        });
      }
    }
  };
</script>
