<template>
    <!-- 现货仓单 现货明细 提货 true -->
    <Drawer :title="'提货'" :placement="'right'" class="bottom" :visible="visible" @cancel="cancel">
        <!-- 挂牌 -->
        <div class="listed">
            <div class="condition">
                <a-button class="conditionBtn">{{selectedRow.deliverygoodsname}}</a-button>
                <a-button class="conditionBtn">{{selectedRow.wrtypename}}</a-button>
                <a-button class="conditionBtn">{{selectedRow.warehousename}}</a-button>
            </div>
            <a-form class="inlineForm dialogForm" ref="formRef" :model="formState" :rules="rules">
                <div class="formBar">
                    <a-row :gutter="24">
                        <a-col :span="12">
                            <a-form-item label="提货数量" name="OutQty">
                                <a-input-number
                                    class="commonInput"
                                    v-model:value="formState.OutQty"
                                    :min="0"
                                    :max="selectedRow.enableqty"
                                    style="width: 140px"
                                />
                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="提货人" name="ContactName">
                                <a-input
                                    class="commonInput"
                                    v-model:value="formState.ContactName"
                                    style="width: 140px"
                                />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <a-col :span="12" class="mt-20">
                            <a-form-item>
                                <!-- <a-progress class="formProgress" :percent="30" /> -->
                                <a-slider
                                    v-model:value="formState.OutQty"
                                    ::min="0"
                                    :max="selectedRow.enableqty"
                                    class="formSlider"
                                    style="width: 140px;"
                                />
                                <div class="unit">
                                    <span>0</span>
                                    <span>{{selectedRow.enableqty}}{{selectedRow.enumdicname}}</span>
                                </div>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">&nbsp;</a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <a-col :span="12">
                            <a-form-item label="联系方式" name="ContactNum">
                                <a-input
                                    class="commonInput"
                                    v-model:value="formState.ContactNum"
                                    style="width: 140px"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="预约日期" name="AppointmentDate">
                                <a-date-picker
                                    class="commonDatePicker dialogDatePicker"
                                    allowClear="false"
                                    v-model:value="formState.AppointmentDate"
                                    style="width: 140px"
                                />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <a-col :span="12">
                            <a-form-item label="备注" name="AppointmentRemark">
                                <a-input
                                    class="commonInput"
                                    v-model:value="formState.AppointmentRemark"
                                    style="width: 140px"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">&nbsp;</a-col>
                    </a-row>
                </div>
                <a-row :gutter="24">
                    <a-col :span="24" class="fixedBtns">
                        <a-form-item class="btnCenter">
                            <a-button
                                class="listedBtn"
                                :loading="loading"
                                :disabled="loading"
                                @click="submit"
                            >提货</a-button>
                            <a-button class="ml10 cancelBtn" @click="cancel">取消</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </Drawer>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import Drawer from '@/common/components/drawer/index.vue';
import { WrHoldLB } from '@/services/go/wrtrade/interface';
import { getSelectedAccountId, getUserId } from '@/services/bus/account';
import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { wROutApply } from '@/services/proto/warehousetrade';
import { v4 as uuidv4 } from 'uuid';
import moment, { Moment } from 'moment';
import { ModalEnum } from '@/common/constants/modalNameEnum';
import { _closeModal } from '@/common/setup/modal/modal';
import { WROutInDetail } from '@/services/proto/warehousetrade/interface';
import { getUUID } from '@/utils/qt/common';
import { getLongTypeLoginID } from '@/services/bus/login';
import * as Long from 'long';
import { handleForm } from './setup';
import { validateAction } from '@/common/setup/form';
import { FormParam } from './interface';

export default defineComponent({
    name: ModalEnum.spot_warrant_spot_details_pick_up,
    components: { Drawer },
    emits: ['cancel', 'update'],
    props: {
        selectedRow: {
            type: Object as PropType<WrHoldLB>,
            default: {},
        },
    },
    setup(props, context) {
        const data = props.selectedRow;
        const loading = ref<boolean>(false);
        const { visible, cancel } = _closeModal(context);
        const { rules, formState, formRef } = handleForm();
        // console.log(param);
        function submit() {
            validateAction<FormParam>(formRef, formState).then((res) => {
                const param = {
                    ClientSerialID: getUUID(), // uint64 客户端唯一ID
                    WRStandardID: props.selectedRow.wrstandardid, // uint64 仓单标准ID
                    WarehouseID: props.selectedRow.warehouseid, // uint64 仓库ID
                    UserID: getUserId(), // uint64 申请人ID
                    AccountID: getSelectedAccountId()?.toString(), // uint64 申请人账户ID
                    AppointmentDate: (res.AppointmentDate.value as Moment).format('YYYYMMDD'), // string 预约出库时间（格式：20200101）
                    AppointmentModel: 3, // uint32 预约方式:1-物流,2-自送，3-自提
                    ContactName: res.ContactName, // string 收货人提货人
                    ContactNum: res.ContactNum, // string 收货人提货人手机
                    AppointmentRemark: '', // string 预约备注
                    CreatorID: Number(getLongTypeLoginID()), // uint64 创建人ID
                    WROutInDetails: {
                        LadingBillID: props.selectedRow.ladingbillid, // string 提单ID
                        SubNum: props.selectedRow.subnum, // uint64 提单子单号
                        Qty: res.OutQty, // uint64 子提单总数量
                        OutQty: res.OutQty, // uint64 预约数量
                    } as WROutInDetail, // WROutInDetail 仓单出库提单明细数据
                };
                requestResultLoadingAndInfo(wROutApply, param, loading, ['提货成功', '提货失败:']).then(() => {
                    cancel(true);
                });
            });
        }

        return {
            visible,
            cancel,
            submit,
            loading,
            rules,
            formState,
            formRef,
        };
    },
});
</script>

<style lang="less">
.listed {
    width: 100%;
    height: 100%;
    .flex;
    flex-direction: column;
    overflow: hidden;
    .condition {
        width: 100%;
        height: 48px;
        margin: 0 16px;
        padding: 10px 0;
        border-bottom: 1px solid @m-black6;
        .inlineflex;
        .conditionBtn {
            align-self: center;
            align-items: center;
            border: 0;
            min-width: 80px;
            height: 28px;
            line-height: 28px;
            background: @m-black7;
            .rounded-corners(3px);
            font-size: 14px;
            color: @m-blue0;
            &:hover {
                background: @m-black7-hover;
                color: @m-blue0-hover;
            }
        }
        .conditionBtn + .conditionBtn {
            margin-left: 10px;
        }
    }
}

::v-deep.formProgress {
    width: 260px;
    // height: 3px;
    // .rounded-corners(2px);
    margin-left: 70px;
    .ant-progress-outer {
        margin-right: 0;
        padding-right: 0;
        .ant-progress-inner {
            background: @m-grey14;
            .rounded-corners(2px);
            .ant-progress-bg {
                height: 3px !important;
                border-radius: 2px !important;
                background-color: @m-blue0;
            }
        }
    }
    .ant-progress-text {
        display: none;
    }
}
.unit {
    margin-left: 70px;
    .flex;
    justify-content: space-between;
    font-size: 14px;
    color: @m-grey41;
    height: 14px;
    line-height: 14px;
}
.listedBtn {
    width: 120px;
    height: 30px;
    line-height: 30px;
    background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
    border-radius: 3px;
    color: @m-white0;
    font-size: 14px;
    text-align: center;
    border: 0;
    &:hover {
        background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
        color: @m-white0-hover;
    }
}
.cancelBtn:extend(.listedBtn) {
    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%) !important;
    &:hover {
        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%) !important;
        color: @m-white0-hover;
    }
}
.ml10 {
    margin-left: 10px;
}
</style>;
