<template>
  <BasicModal v-bind="$attrs" @register="register" title="打印票据" width="80%">
    <BasicTable @register="registerTable" id="printTable">
      <template #tableTitle>
        <div class="pb-30px pl-15px">
          <address>
            <div
              ><strong>{{ modalRecord.consignee }}</strong></div
            >
            <div>{{ modalRecord.address }}</div>
            <abbr title="phone"> 联系方式： </abbr> {{ modalRecord.mobile }}
          </address>
        </div>
      </template>

      <template #toolbar>
        <div class="pb-30px pl-15px">
          <div
            ><strong>单据编号 :</strong>
            <span style="color: #1ab394">{{ modalRecord.orderSn }}</span></div
          >
          <div><strong>日期 :</strong> : <Time :value="modalRecord.addTime" mode="datetime" /></div>
        </div>
      </template>
      <template #footer>
        <div style="text-align: right; min-width: 100px"> 总计：¥{{ modalRecord.goodsPrice }} </div>
      </template>
      <template #retailPrice="{ record }">
        <div>¥{{ record.retailPrice }} </div>
      </template>
      <template #marketPrice="{ record }">
        <div>¥{{ record.number * record.retailPrice }} </div>
      </template>
    </BasicTable>

    <template #footer>
      <a-button type="primary" @click="handlePrint" class="mr-2">打印</a-button>
    </template>
  </BasicModal>
</template>
<script lang="ts">
  // reactive
  import { defineComponent, nextTick, reactive } from 'vue';
  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { cloneDeep } from 'lodash-es';
  import { Time } from '/@/components/Time';
  import printJS from 'print-js';
  export default defineComponent({
    name: 'PrintModal',
    components: { BasicModal, BasicTable, Time },
    emits: ['success', 'register', 'reload'],
    setup() {
      // const isUpdate = ref(true);
      let modalRecord = reactive({
        id: 0,
        address: '',
        consignee: '',
        mobile: '',
        orderSn: '',
        addTime: '',
        goodsPrice: '',
      });
      const columns: BasicColumn[] = [
        {
          title: '清单',
          dataIndex: 'goodsName',
          width: 180,
        },
        {
          title: '数量',
          dataIndex: 'number',
          ellipsis: false,
          width: 180,
        },
        {
          title: '单价',
          dataIndex: 'retailPrice',
          ellipsis: false,
          width: 180,
          slots: { customRender: 'retailPrice' },
        },
        {
          title: '总价',
          dataIndex: 'totalPrice',
          ellipsis: false,
          width: 180,
          slots: { customRender: 'marketPrice' },
        },
      ];

      const [registerTable, { setTableData, redoHeight }] = useTable({
        title: '订单列表',

        columns: columns,
        // useSearchForm: false,
        // formConfig: searchForm,
        // clickToRowSelect: false,
        // showTableSetting: true,
        // tableSetting: { fullScreen: true },
        showIndexColumn: false,
        // maxHeight: 250,
        // resizeHeightOffset: 0,
        isCanResizeParent: true,
        // rowKey: 'id',
        pagination: false,

        bordered: true,
      });

      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });
      function onDataReceive(data) {
        console.log('data', data);
        // modalRecord = { ...cloneDeep(data) };
        // console.log('modalRecord', modalRecord);
        modalRecord.consignee = data.consignee;
        modalRecord.address = data.address;
        modalRecord.mobile = data.mobile;
        modalRecord.orderSn = data.orderSn;
        modalRecord.addTime = data.addTime;
        modalRecord.goodsPrice = data.goodsPrice;
        // modalRecord.brandId = data.brandId;
        nextTick(() => {
          setTableData(cloneDeep(data.goodsList));
          redoHeight();
        });
      }
      async function handlePrint() {
        printJS({
          printable: 'printTable',
          type: 'html',
          style: 'table th td { border: 1px solid black; border-collapse: collapse; }  }',
        });
      }

      return {
        register,

        closeModal,
        registerTable,
        modalRecord,
        handlePrint,
      };
    },
  });
</script>
