<template>
    <a-modal
            :title="modalTitle"
            :width="1000"
            :visible="visible"
            :confirmLoading="confirmLoading"
            class="ant-modal2"
            @cancel="handleCancel"
    >
        <a-card :bordered="false">
            <div class="table-page-search-wrapper">
                <a-form layout="inline">
                    <a-row :gutter="48">
                        <a-col :md="8" :sm="24">
                            <a-form-item label="关键字">
                                <a-input v-model="queryParam.keyword" placeholder="请输入名称/类型名称"/>
                            </a-form-item>
                        </a-col>
                        <a-col :md="8 || 24" :sm="24">
                <span class="table-page-search-submitButtons">
                  <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                  <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
                </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>

            <div class="table-operator">
            </div>

            <s-table
                    ref="table"
                    size="small"
                    rowKey="id"
                    :columns="columns"
                    :data="loadData"
                    :alert="options.alert"
                    :customRow="options.customRow"
                    :rowSelection="options.rowSelection"
                    showPagination="auto"
            >
                <span slot="action" slot-scope="record1">
                  <template>
                    <a @click="handleView(record1)">查看</a>
                  </template>
                </span>
            </s-table>
            <detail ref="detailModal"/>
        </a-card>
        <template slot="footer">
            <a-button :loading="confirmLoading" type="primary" @click="handleCancel()">取消</a-button>
            <a-button :loading="confirmLoading" type="primary" @click="handleSelect()">确定</a-button>
        </template>
    </a-modal>
</template>

<script>
    import { STable, Ellipsis } from '@/components'
    import Detail from './Detail'
    import { getPurchaseDispatchOrderPage, fetchPurchaseDispatchOrder } from '@/api/purchase/purchase-dispatch-order'

    export default {
        name: 'PurchaseDispatchOrderSelectModal',
        components: {
            STable,
            Ellipsis,
            Detail
        },
        props: {
            type: {
                type: String,
                default: 'radio'
            },
            selectedRowKey: {
                type: Array,
                default: () => {
                    return []
                }
            },
            selectedRow: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data () {
            return {
                confirmLoading: false,
                mdl: {},
                modalTitle: null,
                visible: false,
                record: null,
                // 查询参数
                queryParam: {
                },
                extraQueryParam: {
                },
                // 表头
                columns: [
                    {
                        title: '序号',
                        dataIndex: 'index',
                        customRender: (text, record, index) => {
                            return `${(this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1}`
                        }
                    },
                                                                                                                                                {
                                title: '单号',
                                dataIndex: 'billNo'
                            },
                                                                                                                                                        {
                                title: '采购申请ID',
                                dataIndex: 'purchaseApplyId'
                            },
                                                                                                                                                        {
                                title: '采购计划ID',
                                dataIndex: 'purchasePlanId'
                            },
                                                                                                                                                        {
                                title: '总需求计划主键',
                                dataIndex: 'demandPlanId'
                            },
                                                                                                                                                        {
                                title: '采购单ID',
                                dataIndex: 'purchaseOrderId'
                            },
                                                                                                                                                        {
                                title: '公司ID',
                                dataIndex: 'companyId'
                            },
                                                                                                                                                        {
                                title: '公司名称',
                                dataIndex: 'companyName'
                            },
                                                                                                                                                        {
                                title: '项目主键',
                                dataIndex: 'projectId'
                            },
                                                                                                                                                        {
                                title: '项目名称',
                                dataIndex: 'projectName'
                            },
                                                                                                                                                            {
                                    title: '类型',
                                    dataIndex: 'type',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Object.getField(this.typeMap, text)
                                    }                  ,
                                },
                                                                                                                                                        {
                                title: '发货日期',
                                dataIndex: 'dispatchDate'
                            },
                                                                                                                                                        {
                                title: '始发地国家ID',
                                dataIndex: 'originCountryId'
                            },
                                                                                                                                                        {
                                title: '始发地国家名称',
                                dataIndex: 'originCountryName'
                            },
                                                                                                                                                        {
                                title: '始发地国家地址',
                                dataIndex: 'originCountryAddress'
                            },
                                                                                                                                                        {
                                title: '目的地国家ID',
                                dataIndex: 'destinationCountryId'
                            },
                                                                                                                                                        {
                                title: '目的地国家名称',
                                dataIndex: 'destinationCountryName'
                            },
                                                                                                                                                        {
                                title: '目的地国家地址',
                                dataIndex: 'destinationCountryAddress'
                            },
                                                                                                                                                        {
                                title: '采购员ID',
                                dataIndex: 'purchaserId'
                            },
                                                                                                                                                        {
                                title: '采购员名称',
                                dataIndex: 'purchaserName'
                            },
                                                                                                                                                        {
                                title: '采购员联系方式',
                                dataIndex: 'purchaserPhone'
                            },
                                                                                                                                                        {
                                title: '发货员ID',
                                dataIndex: 'shipperId'
                            },
                                                                                                                                                        {
                                title: '发货员名称',
                                dataIndex: 'shipperName'
                            },
                                                                                                                                                        {
                                title: '发货员联系方式',
                                dataIndex: 'shipperPhone'
                            },
                                                                                                                                                        {
                                title: '收货员ID',
                                dataIndex: 'receiverId'
                            },
                                                                                                                                                        {
                                title: '收货员名称',
                                dataIndex: 'receiverName'
                            },
                                                                                                                                                        {
                                title: '收货员联系方式',
                                dataIndex: 'receiverPhone'
                            },
                                                                                                                                                        {
                                title: '存货位置',
                                dataIndex: 'inventoryLocation'
                            },
                                                                                                                                                            {
                                    title: '货运方式',
                                    dataIndex: 'dispatchType',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Object.getField(this.dispatchTypeMap, text)
                                    }                  ,
                                },
                                                                                                                                                            {
                                    title: '数量',
                                    dataIndex: 'quantity',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                            {
                                    title: '已发数量',
                                    dataIndex: 'dispatchedQuantity',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                            {
                                    title: '未发数量',
                                    dataIndex: 'notDispatchQuantity',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                        {
                                title: '海运提单邮寄单号',
                                dataIndex: 'mailingNum'
                            },
                                                                                                                                                            {
                                    title: '运费',
                                    dataIndex: 'freightFee',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                            {
                                    title: '保险费',
                                    dataIndex: 'insuranceFee',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                            {
                                    title: '运杂费',
                                    dataIndex: 'dispatchSurcharge',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                            {
                                    title: '关税',
                                    dataIndex: 'tariff',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                            {
                                    title: '清关费',
                                    dataIndex: 'clearanceCharge',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                            {
                                    title: '港杂税',
                                    dataIndex: 'portSurcharge',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                        {
                                title: '报关单',
                                dataIndex: 'customsDeclaration'
                            },
                                                                                                                                                        {
                                title: '形式发票',
                                dataIndex: 'proformaInvoice'
                            },
                                                                                                                                                            {
                                    title: '运费币种',
                                    dataIndex: 'freightFeeType',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                            {
                                    title: '保险费币种',
                                    dataIndex: 'insuranceFeeType',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                            {
                                    title: '运杂费币种',
                                    dataIndex: 'dispatchSurchargeType',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                            {
                                    title: '关税币种',
                                    dataIndex: 'tariffType',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                            {
                                    title: '清关费币种',
                                    dataIndex: 'clearanceChargeType',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                            {
                                    title: '港杂税币种',
                                    dataIndex: 'portSurchargeType',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                            {
                                    title: '二次转运费币种',
                                    dataIndex: 'secondaryTransportationFeeType',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                            {
                                    title: '二次转运费',
                                    dataIndex: 'secondaryTransportationFee',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                            {
                                    title: '差额情况',
                                    dataIndex: 'differenceType',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Object.getField(this.differenceTypeMap, text)
                                    }                  ,
                                },
                                                                                                                                                        {
                                title: '入库仓库ID',
                                dataIndex: 'warehouseId'
                            },
                                                                                                                                                        {
                                title: '入库仓库名称',
                                dataIndex: 'warehouseName'
                            },
                                                                                                                                                            {
                                    title: '入库原因',
                                    dataIndex: 'enterReason',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Object.getField(this.enterReasonMap, text)
                                    }                  ,
                                },
                                                                                                                                                        {
                                title: '状态',
                                dataIndex: 'status'
                            },
                                                                                                                                                        {
                                title: '备注',
                                dataIndex: 'remark'
                            },
                                                                                                                                                        {
                                title: '删除标志',
                                dataIndex: 'delFlag'
                            },
                                                                                                                                                                                                    {
                                title: '创建人名称',
                                dataIndex: 'createdUserName'
                            },
                                                                                                                                                        {
                                title: '创建时间',
                                dataIndex: 'createdTime'
                            },
                                                                                                                                                                                                                                {
                        title: '操作',
                        key: 'action',
                        width: '200px',
                        align: 'center',
                        scopedSlots: { customRender: 'action' }
                    }
                ],
                // 下拉框map
                                    typeMap: {},
                                    dispatchTypeMap: {},
                                    differenceTypeMap: {},
                                    enterReasonMap: {},
                                // 加载数据方法 必须为 Promise 对象
                loadData: parameter => {
                    parameter = {
                        ...parameter,
                        ...this.queryParam,
                        ...this.extraQueryParam,
                        dataScope: {
                            sortBy: 'desc',
                            sortName: 'update_time'
                        }
                    }
                    return getPurchaseDispatchOrderPage(Object.assign(parameter, this.queryParam))
                            .then(res => {
                                return res.data
                            })
                },
                selectedRowKeys: [],
                selectedRows: [],

                options: {
                    alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
                    rowSelection: {
                        selectedRowKeys: this.selectedRowKeys,
                        onChange: this.onSelectChange
                    }
                },
                optionAlertShow: false,
                isCreated: false
            }
        },
        created () {
            // 下拉框map
                            this.typeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.PURCHASE_DISPATCH_ORDER_TYPE)
                            this.dispatchTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.PURCHASE_DISPATCH_ORDER_DISPATCH_TYPE)
                            this.differenceTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.PURCHASE_DISPATCH_ORDER_DIFFERENCE_TYPE)
                            this.enterReasonMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.PURCHASE_DISPATCH_ORDER_ENTER_REASON)
                    },
        methods: {
            tableOption () {
                if (!this.optionAlertShow) {
                    this.options = {
                        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
                        rowSelection: {
                            selectedRowKeys: this.selectedRowKeys,
                            onChange: this.onSelectChange,
                            type: this.type,
                            getCheckboxProps: record => ({
                                props: {
                                    disabled: false,
                                    name: record.id
                                }
                            })
                        },
                        customRow: (record) => {
                            return {
                                on: { // 事件
                                    click: (event) => { // 点击行
                                        // 选择对象
                                        this.mySelect([record.id], [record])
                                    },
                                    dblclick: (event) => {
                                        this.mySelect([record.id], [record])
                                        this.handleSelect()
                                    }
                                }
                            }
                        }
                    }
                    this.optionAlertShow = true
                } else {
                    this.options = {
                        alert: false,
                        rowSelection: null
                    }
                    this.optionAlertShow = false
                }
            },
            handleView (record) {
                fetchPurchaseDispatchOrder({ id: record.id }).then(res => {
                    const modal = this.$refs.detailModal
                    modal.base(res.data)
                })
            },
            handleOk () {
                this.$refs.table.refresh()
            },
            onSelectChange (selectedRowKeys, selectedRows) {
                this.selectedRowKeys = selectedRowKeys
                this.selectedRows = selectedRows
            },
            resetSearchForm () {
                this.queryParam = {
                }
                this.$refs.table.refresh(true)
            },
            base (record, queryParam = {}) {
                this.visible = true
                this.modalTitle = '选择信息'
                this.extraQueryParam = queryParam
                this.record = record
                if (this.isCreated) {
                    this.$refs.table.clearSelected()
                    this.options.rowSelection.type = this.type
                    this.handleOk()
                } else {
                    this.tableOption()
                    this.isCreated = true
                }
            },
            handleCancel () {
                this.visible = false
                this.confirmLoading = false
            },
            handleSelect () {
                if (this.selectedRowKeys.length === 0) {
                    this.$message.warn('请至少选择一项信息')
                } else {
                    this.confirmLoading = true
                    this.$emit('selected', this.record, this.selectedRowKeys, this.selectedRows)
                    this.confirmLoading = false
                    this.visible = false
                }
            },
            mySelect(selectedRowKeys, selectedRows) {
                if (this.type === 'radio') {
                    this.$refs.table.updateSelect(selectedRowKeys, selectedRows)
                            this.$refs.table.rowSelection.onChange(selectedRowKeys, selectedRows)
                } else {
                    let mySelectedRowKeys
                    let mySelectedRows = this.selectedRows.filter(item => item.id !== selectedRowKeys[0])
                    if (this.selectedRowKeys.includes(selectedRowKeys[0])) {
                        mySelectedRowKeys = this.selectedRowKeys.filter(item => item !== selectedRowKeys[0])
                    } else {
                        mySelectedRowKeys = [...selectedRowKeys, ...this.selectedRowKeys]
                        mySelectedRows = [...mySelectedRows, ...selectedRows]
                    }
                    this.$refs.table.updateSelect(mySelectedRowKeys, mySelectedRows)
                            this.$refs.table.rowSelection.onChange(mySelectedRowKeys, mySelectedRows)
                }

            }
        }
    }
</script>
