<template>
    <!-- 挂牌 -->
    <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 class="formBar">
            <a-form class="inlineForm dialogForm" :form="form" @submit="handleSearch">
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item label="挂牌方式">
                            <a-select
                                class="inlineFormSelect"
                                default-value="1"
                                style="width: 140px"
                            >
                                <a-select-option value="1">一口价</a-select-option>
                                <a-select-option value="2">一口价2</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="挂牌价">
                            <a-input class="commonInput" style="width: 140px" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item label="挂牌数量">
                            <a-input class="commonInput" suffix="吨" style="width: 140px" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="起摘数量" class="relative">
                            <a-input class="commonInput" suffix="吨" style="width: 140px" />
                            <div class="tip">最小单位：1吨</div>
                        </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" />
                            <div class="unit">
                                <span>0</span>
                                <span>300吨</span>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">&nbsp;</a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="24">
                        <a-form-item label="行情商品">
                            <a-select
                                class="inlineFormSelect"
                                style="width: 135px"
                                placeholder="请选择交易所"
                            >
                                <!-- <a-select-option value="1">一口价</a-select-option>
                                <a-select-option value="2">一口价2</a-select-option>-->
                            </a-select>
                            <a-select
                                class="inlineFormSelect ml5"
                                style="width: 135px"
                                placeholder="请选择商品"
                            ></a-select>
                            <a-select
                                class="inlineFormSelect ml5"
                                style="width: 135px"
                                placeholder="请选择合约"
                            ></a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" type="flex" justify="center">
                    <a-col :span="24">
                        <a-form-item class="tc">
                            <a-button class="listedBtn">卖出</a-button>
                            <a-button class="ml10 cancelBtn">取消</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    name: 'warehouse-trade-fixed-price',
    components: {},
    setup() {
        const form = {
            type: '1',
        };
        return {
            form,
        };
    },
});
</script>

<style lang="less">
// 浮动价挂牌
.listed {
    width: 100%;
    height: 100%;
    .flex;
    flex-direction: column;

    .condition {
        width: calc(100% - 32px);
        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;
        }
    }
}
.mt-20 {
    margin-top: -20px;
}
.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: 70px;
    width: 140px;
    .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;
}
.ml5 {
    margin-left: 5px;
}
</style>;