<template>
    <el-dialog
        title="定盘利率展示"
        :visible.sync="dialogVisible"
        width="900px"
        class="interestRateDialog"
        :close-on-click-modal="false"
        :before-close="handleClose">
        <div class="box" v-if="tableData.fixing === 'Y'">
            <ul>
                <li>
                    <span>指标</span>
                    <span></span>
                </li>
                <li>
                    <span>远期曲线</span>
                    <span></span>
                </li>
                <li>
                    <span>远期利率</span>
                    <span></span>
                </li>
                <li></li>
                <li>
                    <span>定盘日期</span>
                    <span></span>
                </li>
                <li></li>
                <li>
                    <span>天数</span>
                    <span></span>
                </li>
                <li>
                    <span>计息基础</span>
                    <span></span>
                </li>
                <li>
                    <span>开始日期</span>
                    <span></span>
                </li>
                <li>
                    <span>开始日期贴现</span>
                    <span></span>
                </li>
                <li>
                    <span>结束日期</span>
                    <span></span>
                </li>
                <li>
                    <span>结束日期贴现</span>
                    <span></span>
                </li>
            </ul>
        </div>
        <div class="box" v-else>
            <ul>
                <li>
                    <span>指标</span>
                    <span></span>
                </li>
                <li>
                    <span>远期曲线</span>
                    <span></span>
                </li>
                <li>
                    <span>利率</span>
                    <span>{{ tableData.coupon ? (tableData.coupon*1).toFixed(8) : '' }}</span>
                </li>
                <li>
                    <!-- <span>计息方式</span>
                    <span>0.99</span> -->
                </li>
                <li>
                    <span>比例</span>
                    <span></span>
                </li>
                <li>
                    <span>点差</span>
                    <span></span>
                </li>
                <li>
                    <span>开始日期</span>
                    <span>{{ tableData.periodStartDateAdj ? tableData.periodStartDateAdj.toString().substr(0, 4) + '-' + tableData.periodStartDateAdj.toString().substr(4, 2) + '-' + tableData.periodStartDateAdj.toString().substr(6, 2) : '' }}</span>
                </li>
                <li>
                    <span>结束日期</span>
                    <span>{{ tableData.periodEndDateAdj ? tableData.periodEndDateAdj.toString().substr(0, 4) + '-' + tableData.periodEndDateAdj.toString().substr(4, 2) + '-' + tableData.periodEndDateAdj.toString().substr(6, 2) : '' }}</span>
                </li>
                <li>
                    <span>天数</span>
                    <span></span>
                </li>
                <li>
                    <span>计息基础</span>
                    <span></span>
                </li>
            </ul>
            <el-table
                :data="tableData.children"
                stripe
                border
                style="width: 100%">
                <el-table-column
                    prop="no"
                    headerAlign="center"
                    label="编号"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="fixingDate"
                    headerAlign="center"
                    label="定盘日期"
                    align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.fixingDate ? scope.row.fixingDate.toString().substr(0, 4) + '-' + scope.row.fixingDate.toString().substr(4, 2) + '-' + scope.row.fixingDate.toString().substr(6, 2) : '' }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="startDate"
                    headerAlign="center"
                    label="开始日期"
                    align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.startDate ? scope.row.startDate.toString().substr(0, 4) + '-' + scope.row.startDate.toString().substr(4, 2) + '-' + scope.row.startDate.toString().substr(6, 2) : '' }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="endDate"
                    headerAlign="center"
                    label="结束日期"
                    align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.endDate ? scope.row.endDate.toString().substr(0, 4) + '-' + scope.row.endDate.toString().substr(4, 2) + '-' + scope.row.endDate.toString().substr(6, 2) : '' }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="fixingRate"
                    headerAlign="center"
                    label="定盘利率"
                    align="center">
                    <template slot-scope="scope">
                        <el-link v-if="scope.row.children && scope.row.children.length > 0" type="primary" @click="openDialog(scope.row)">{{ (scope.row.fixingRate*1).toFixed(8) }}</el-link>
                        <span v-else>{{ (scope.row.fixingRate*1).toFixed(8) }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="yearFactor"
                    headerAlign="center"
                    label="权重"
                    align="center">
                </el-table-column>
            </el-table>
        </div>
        <span slot="footer">
            <el-button size="small" @click="handleClose">关闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'interestRateDialog',
    data() {
        return {
            dialogVisible: false,
            tableData: {}
        }
    },
    mounted() {
    },
    methods: {
        init (data) {
            this.tableData = data
            this.dialogVisible = true
        },
        handleClose () {
            this.dialogVisible = false
        },
        openDialog (row) {

        }
    }
};
</script>

<style lang="scss" scoped>
    .interestRateDialog{
        .box{
            ul{
                display: flex;
                flex-wrap: wrap;
                padding: 20px 40px 10px;
                margin: 0;
                margin-bottom: 20px;
                border: 1px solid var(--scrollBar);
                border-radius: 4px;
                li{
                    width: 50%;
                    list-style: none;
                    margin-bottom: 10px;
                    display: flex;
                    align-items: center;
                    &.more{
                        width: 100%;
                    }
                    &>span{
                        display: inline-block;
                        &:nth-of-type(1) {
                            width: 110px;
                            text-align: right;
                            margin-right: 8px;
                            color: var(--color-70);
                        }
                        &:nth-of-type(2) {
                            width: 200px;
                            height: 30px;
                            line-height: 30px;
                            padding: 0 10px;
                            border: 1px solid var(--scrollBarHover);
                            background-color: var(--scrollBar);
                            border-radius: 4px;
                        }
                    }
                    a{
                        margin: 6px 10px;
                    }
                }
            }
            .el-table{
                border-bottom: 1px solid var(--scrollBar);
            }
        }
        ::v-deep .el-dialog__footer{
            border-top: 1px solid var(--scrollBar);
        }
    }
</style>