<template>
    <!-- 仓单贸易&仓单预售 融资-->

    <Drawer
        :title="'选择融资方案'"
        :placement="'right'"
        :visible="visible"
        width="486px"
        height="580px"
        @cancel="update"
        class="topHigh financing"
    >
        <div class="financingCont">
            <a-row class="f-t">
                <a-col :span="7">融出方/名称</a-col>
                <a-col :span="10">天数/保证金/利息</a-col>
                <a-col :span="7">结息/起息天数</a-col>
            </a-row>
            <div
                class="contBar"
                v-for="(item, index) in list"
                :key="index + 11"
                @click="choose(item)"
            >
                <a-row class="firstRow">
                    <a-col :span="17">{{item.username}}</a-col>
                    <a-col :span="7" v-if="item.isautoloan">放款快</a-col>
                </a-row>
                <a-row class="secondRow">
                    <a-col :span="7">{{item.productname}}</a-col>
                    <a-col :span="10">
                        <a-row class="middle">
                            <a-col :span="7">{{item.financingdays}}天</a-col>
                            <a-col :span="10">{{(item.marginratio * 100).toFixed(2)}}%</a-col>
                            <a-col :span="7">
                                <!-- <div class="two">{{item.interestrate * 100}}%</div>
                                <div class="two">{{item.interestrate * 100}}%</div>-->
                                {{item.interestratemode === 3 ? item.interestrate : (item.interestrate * 10000).toFixed(2)}}{{item.interestratemode === 3 ? '' : '‱'}}
                            </a-col>
                        </a-row>
                    </a-col>
                    <a-col :span="7">
                        <div class="settle">
                            <div>{{item.interestsettlemode === 1 ? '日' : '月'}}结</div>
                            <div>{{item.interestminlen}}天起息</div>
                        </div>
                    </a-col>
                </a-row>
            </div>
            <div class="noDataContBar" v-if="!list.length">
                <div class="noData"></div>
            </div>
        </div>
    </Drawer>
</template>

<script lang="ts">
import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
import { defineComponent, PropType } from 'vue';
import Drawer from '@/common/components/drawer/index.vue';
import { WrFAProductDetail, WrOrderQuoteDetail } from '@/services/go/wrtrade/interface';
import { ModalEnum } from '@/common/constants/modalNameEnum';
import { _closeModal } from '@/common/setup/modal/modal';
import { getFinacingList } from '../../../../setup';
export default defineComponent({
    name: ModalEnum.spot_trade_warehouse_delisting,
    components: { Drawer, PlusOutlined, MinusOutlined },
    emits: ['cancel', 'update'],
    props: {
        selectedRow: {
            type: Object as PropType<WrOrderQuoteDetail>,
            default: {},
        },
        isFloat: {
            type: Boolean,
            default: true,
        },
    },

    setup(props, context) {
        const { visible, cancel } = _closeModal(context);
        // ，浮动价只支持自动融资产品
        const list = props.isFloat ? getFinacingList().filter((e) => e.isautoloan === 1) : getFinacingList();
        function update() {
            cancel();
            context.emit('cancel');
        }
        function choose(item: WrFAProductDetail) {
            cancel();
            context.emit('update', item);
        }
        return {
            visible,
            update,
            choose,
            list,
        };
    },
});
</script>

<style lang="less" scoped>
.financing {
    z-index: 99;
    .financingCont {
        padding: 10px 20px 50px;
        .ant-row.f-t {
            .ant-col {
                font-size: 14px;
                color: @m-grey1;
                height: 35px;
                line-height: 35px;
            }
            .ant-col:nth-child(2) {
                text-align: center;
            }
            .ant-col:nth-child(3) {
                text-align: right;
            }
        }
        .contBar {
            margin-top: 10px;
            width: 100%;
            padding: 0 13px;
            cursor: pointer;
            .flex;
            flex-direction: column;
            background: @m-blue19;
            border-radius: 5px;
            .ant-row.firstRow {
                border-bottom: 1px solid @m-blue20;
                .ant-col {
                    height: 40px;
                    line-height: 40px;
                    font-size: 16px;
                    color: @m-white6;
                }
                .ant-col:nth-child(2) {
                    text-align: right;
                    color: @m-green0;
                    font-size: 14px;
                }
            }
            .ant-row.secondRow {
                padding: 10px 0;
                .ant-col {
                    height: 40px;
                    font-size: 14px;
                }
                .ant-col:first-child {
                    color: @m-yellow1;
                    line-height: 40px;
                }
                .ant-col:last-child {
                    text-align: right;
                    .settle {
                        padding: 4px 0;
                        height: 16px;
                        line-height: 16px;
                        color: @m-white6;
                    }
                }
                .middle.ant-row {
                    .ant-col {
                        height: 40px;
                        line-height: 40px;
                        color: @m-white6;
                    }
                    .ant-col:nth-child(2) {
                        text-align: center;
                    }
                    .ant-col:nth-child(3) {
                        text-align: right;
                        .two {
                            height: 20px;
                            line-height: 20px;
                        }
                    }
                }
            }
        }
        .noDataContBar {
            width: 100%;
            text-align: center;
            margin-top: 175px;
            .noData {
                margin: 0 auto;
            }
        }
    }
}
</style>;
