<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="Barcode" :selectEnable="true" @create="$refs.form.open()">
        <template #filterCommand>
          <Button size="small" type="info" custom-icon="fa fa-print" @click="print">打印</Button>
          <Button size="small" type="warning" custom-icon="fa fa-trash" @click="remove">删除</Button>
          <Button size="small" type="info" custom-icon="fa fa-file-excel" @click="template()">导入模板</Button>
          <file-upload url="api/barcode/import" accept=".xlsx" @on-success="importFileSuccess">
            <template #>
              <Button type="primary" custom-icon="fa fa-cloud-upload-alt" size="small">导入</Button>
            </template>
          </file-upload>
          <slot name="filterCommand"></slot>
        </template>
        <template #command="{ row, index }">
          <slot name="command" :row="row" :index="index"></slot>
        </template>
      </view-table>
    </Card>
    <modal-form ref="form" view-code="BarcodeEdit">
      <template #footer>
        <Button type="primary" custom-icon="fa fa-save" @click="save">保存</Button>
      </template>
    </modal-form>
    <Modal v-model="quantityOpened" scrollable :width="'400'">
      <template #header>
        <div>
          <slot name="header">
            <span class="title">打印数量</span>
            <span class="description">Print Quantity</span>
          </slot>
        </div>
      </template>
      <div class="ivu-ml-8 ivu-mr-8">
        <Form ref="quantityForm" label-position="top" :rules="rules" label-colon="：" class="ivu-mt" @submit.prevent>
          <Row :gutter="24" type="flex">
            <Col key="barcodeNum" v-bind="grid24">
              <FormItem label="打印标签数量" prop="printQuantity" key="num">
                <Select v-model="printQuantity" clearable :transfer="true">
                  <Option v-for="(item, index) in quantityList" :key="index" :value="item">{{ item }}</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <template #footer>
        <div>
          <Button type="primary" custom-icon="fa fa-print" @click="printBarcodes">打印</Button>
          <Button type="default" custom-icon="fa fa-times" @click="quantityOpened = false">关闭</Button>
        </div>
      </template>
    </Modal>
  </div>
</template>
<script>
  import { mixinPage } from 'mooho-base-admin-plus';
  import barcodeApi from '../../api/barcode';

  export default {
    name: 'storage-barcode',
    mixins: [mixinPage],
    components: {},
    data() {
      return {
        quantityOpened: false,
        printQuantity: 1,
        quantityList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        rules: {
          barcodeNum: [
            {
              required: true,
              type: 'number',
              message: '标签数量不能为空',
              trigger: 'blur,change'
            }
          ]
        },
        printIds: []
      };
    },
    computed: {},
    created() {},
    methods: {
      print() {
        this.printIds = this.$refs.table.getSelected().map(x => {
          return x.id;
        });

        if (this.printIds.length == 0) {
          this.error('请选择需要打印的数据！');
          return;
        } else {
          this.quantityOpened = true;
        }
      },
      async save() {
        let isOK = await this.$refs.form.validate();
        if (!isOK) {
          this.error('有内容不符合要求，请正确填写！');
        } else {
          this.confirm('确定要保存吗？', async () => {
            const res = await barcodeApi.addBatch(this.$refs.form.data);
            this.success('创建成功!', () => {
              this.$refs.table.loadData();
              this.$refs.form.close();
              this.printIds = res;
              this.printQuantity = 1;

              this.confirm('要打印吗？', async () => {
                this.quantityOpened = true;
              });
            });
          });
        }
      },
      // 打印条码
      async printBarcodes() {
        let isOK = await this.$refs.quantityForm.validate();
        if (!isOK) {
          this.error('有内容不符合要求，请正确填写！');
        } else {
          await barcodeApi.printList(this.printIds, this.printQuantity);
          this.quantityOpened = false;
        }
      },
      // 模板下载
      template() {
        window.location.href = this.rootPath + '/template/BarcodeTemplate.xlsx';
      },
      // 批量删除
      remove() {
        let ids = this.$refs.table.getSelected().map(x => {
          return x.id;
        });
        if (ids.length > 0) {
          this.confirm('确定要删除这些项吗？', async () => {
            await barcodeApi.batchRemove(ids);

            this.$refs.table.loadData();
            this.success('删除成功！');
          });
        } else {
          this.error('请选择要删除的项目');
        }
      },
      // 导入成功
      importFileSuccess(res) {
        if (res.code == 0) {
          this.success('导入成功', () => {
            this.$refs.table.loadData();
          });
        } else {
          this.error(res.message);
        }
      }
    }
  };
</script>
