<template>
    <!-- 现货仓单 现货明细 提货 -->
    <Drawer :title="'提货'" :placement="'bottom'" :visible="visible" width="566px" height="405px">
        <div class="listed">
            <div class="condition">
                <a-button class="conditionBtn">螺纹钢</a-button>
                <a-button class="conditionBtn">12mm-江铜</a-button>
                <!-- <a-button class="conditionBtn">江铜</a-button> -->
                <a-button class="conditionBtn">华南仓库</a-button>
            </div>
        </div>
    </Drawer>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
import Drawer from '@/common/components/drawer/index.vue';
import { QueryWrPositionReq, WrPosition } from '@/services/go/wrtrade/interface';
import { getUserId } from '@/services/bus/account';
import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { hdWROrder } from '@/services/proto/warehousetrade';
import { v4 as uuidv4 } from 'uuid';
import moment from 'moment';
import { ModalEnum } from '@/common/constants/modalNameEnum';

export default defineComponent({
    name: ModalEnum.spot_warrant_spot_details_pick_up,
    components: { Drawer },
    props: {
        selectedRow: {
            type: Object as PropType<WrPosition>,
            default: {},
        },
    },
    setup(props) {
        const data = props.selectedRow;
        const loading = ref<boolean>(false);

        // console.log(param);
        // requestResultLoadingAndInfo(hdWROrder, param, loading, ['挂牌成功', '挂牌失败:']).then(() => {
        //     // cancel(true);
        // });
        return {
            visible: true,
        };
    },
});
</script>

<style lang="less" scoped>
.listed {
    width: 100%;
    height: 100%;
    .flex;
    flex-direction: column;
    overflow: hidden;
    .condition {
        width: 100%;
        height: 48px;
        padding: 10px 16px;
        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: 140px;
    // 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: 80px;
    .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%);
    &:hover {
        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%);
        color: @m-white0-hover;
    }
}
.ml10 {
    margin-left: 10px;
}
</style>;
