<template>
    <el-dialog
        :title="$t('field.valuationResults')"
        :visible.sync="dialogVisible"
        width="800px"
        class="trialDialog"
        :before-close="handleClose">
        <div class="box">
            <div class="b-top">
                <p>
                    <span>{{$t('field.valuationDate')}}</span>
                    <el-date-picker
                        v-model="form.date"
                        type="date"
                        value-format="yyyy-MM-dd"
                        :disabled="disabled"
                        @change="dateChange"
                        :placeholder="$t('field.chooseDate')">
                    </el-date-picker>
                </p>
                <p v-if="dialogTable.globalId">
                    <span>{{$t('field.dealsId')}}</span>
                    <b>{{dialogTable.globalId}}</b> 
                </p>
            </div>
            <el-tabs v-model="activeName">
                <el-tab-pane :label="$t('field.valuationResults')" name="first">
                    <div class="tab-box">
                        <ul>
                            <li>
                                <span>PV</span>
                                <span>{{table.PV + '  ' + form.select?.substr(0,3)}}</span>
                            </li>
                            <li>
                                <span>PNL</span>
                                <span>{{table.PNL + '  ' + form.select?.substr(0,3)}}</span>
                            </li>
                            <li>
                                <span>Delta</span>
                                <span>{{table.SpotDelta + '  ' + form.select?.substr(0,3)}}</span>
                            </li>
                            <li>
                                <span>FwdDelta</span>
                                <span>{{table.FwdDelta + '  ' + form.select?.substr(0,3)}}</span>
                            </li>
                            <li>
                                <span>Gamma</span>
                                <span>{{table.Gamma + '  ' + form.select?.substr(0,3)}}</span>
                            </li>
                            <li>
                                <span>Vega</span>
                                <span>{{table.Vega + '  ' + form.select?.substr(0,3)}}</span>
                            </li>
                            <li>
                                <span>Theta</span>
                                <span>{{table.Theta + '  ' + form.select?.substr(0,3)}}</span>
                            </li>
                            <li>
                                <span>Rho</span>
                                <span>{{table.Rho + '  ' + form.select?.substr(0,3)}}</span>
                            </li>
                            <li>
                                <span>Phi</span>
                                <span>{{table.Phi + '  ' + form.select?.substr(0,3)}}</span>
                            </li>
                            <li>
                                <span>Vanna</span>
                                <span>{{table.Vanna + '  ' + form.select?.substr(0,3)}}</span>
                            </li>
                            <li>
                                <span>Volga</span>
                                <span>{{table.Volga + '  ' + form.select?.substr(0,3)}}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-box">
                        <p><em></em><b>{{$t('field.marketData')}}</b></p>
                        <ul>
                            <li>
                                <span>DataSet</span>
                                <span>{{dialogTable.dataSet}}</span>
                            </li>
                            <li>
                                <span>Model</span>
                                <span>{{dialogTable.Model}}</span>
                            </li>
                            <li>
                                <span>{{form.select}} Spot</span>
                                <span>{{dialogTable.Spot}}</span>
                            </li>
                            <li>
                                <span>{{form.select}} Fwd</span>
                                <span>{{dialogTable.Fwd}}</span>
                            </li>
                            <li v-if="dialogResultType==='估值'">
                                <span>{{form.select?.substr(0,3)}} Curve</span>
                                <el-link type="primary">{{dialogTable.curveCode1}}</el-link>
                                <!-- <span>{{dialogTable.curveCode1}}</span> -->
                            </li>
                            <li v-if="dialogResultType==='估值'">
                                <span>{{form.select}} Vol</span>
                                <el-link type="primary">{{dialogTable.quantoCurveCode}}</el-link>
                                <!-- <span>{{dialogTable.quantoCurveCode}}</span> -->
                            </li>
                            <li v-if="dialogResultType==='估值'">
                                <span>{{form.select?.substr(3,3)}} Curve</span>
                                <el-link type="primary">{{dialogTable.curveCode2}}</el-link>
                                <!-- <span>{{dialogTable.curveCode2}}</span> -->
                            </li>
                            <li v-if="form.checked && options.length > 1 && dialogResultType==='估值'">
                                <span>{{options[0].text}} Vol</span>
                                <el-link type="primary">{{dialogTable.quantoCurveCode2}}</el-link>
                                <!-- <span>{{dialogTable.quantoCurveCode2}}</span> -->
                            </li>
                            <li v-if="form.checked && form.select9 && dialogResultType==='估值'">
                                <span>{{form.select9}} Curve</span>
                                <el-link type="primary">{{dialogTable.curveCode3}}</el-link>
                                <!-- <span>{{dialogTable.curveCode3}}</span> -->
                            </li>
                            <li v-if="form.checked && options.length > 1 && dialogResultType==='估值'">
                                <span>{{options[1].text}} Vol</span>
                                <el-link type="primary">{{dialogTable.quantoCurveCode3}}</el-link>
                                <!-- <span>{{dialogTable.quantoCurveCode3}}</span> -->
                            </li>
                        </ul>
                    </div>
                    <div class="tab-box">
                        <p><em></em><b style="cursor: pointer;" @click="moreShow=!moreShow">{{$t('field.more')}}
                                <i v-if="moreShow" class="el-icon-arrow-up"></i>
                                <i v-else class="el-icon-arrow-down"></i>
                            </b>
                        </p>
                        <ul v-show="moreShow">
                            <li>
                                <span>{{form.select?.substr(0,3)}} Rate</span>
                                <span>{{dialogTable.Rate1}}</span>
                            </li>
                            <li>
                                <span>{{form.select}} Vol</span>
                                <span>{{dialogTable.Vol1}}</span>
                            </li>
                            <li v-if="form.checked && options.length > 1">
                                <span>{{form.select?.substr(3,3)}} Rate</span>
                                <span>{{dialogTable.Rate2}}</span>
                            </li>
                            <li v-if="form.checked && options.length > 1">
                                <span>{{options[0].text}} Vol</span>
                                <span>{{dialogTable.Vol2}}</span>
                            </li>
                            <li v-if="form.checked && form.select9">
                                <span>{{form.select9}} Rate</span>
                                <span>{{dialogTable.Rate3}}</span>
                            </li>
                            <li v-if="form.checked && options.length > 1">
                                <span>{{options[1].text}} Vol</span>
                                <span>{{dialogTable.Vol3}}</span>
                            </li>
                            <li v-if="form.checked">
                                <span>Correlation</span>
                                <span>{{dialogTable.corr}}</span>
                            </li>
                            <li v-if="form.checked && form.value20">
                                <span>Conv Rate</span>
                                <span>{{form.value20}}</span>
                            </li>
                            <li>
                                <span>Maturity Days</span>
                                <span>{{dialogTable.Days1}}</span>
                            </li>
                            <li>
                                <span>Bus. Days</span>
                                <span>{{dialogTable.Days2}}</span>
                            </li>
                            <li>
                                <span>Delivery Days</span>
                                <span>{{dialogTable.Days3}}</span>
                            </li>
                        </ul>
                    </div>
                </el-tab-pane>
                </el-tabs>
        </div>
    </el-dialog>
</template>

<script>
import { simulationValuationAnalysis, simulateDealWithVlParam } from '../../../../api/pmsApi.js';
export default {
    name: 'trialDialog',
    props: {
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            dialogVisible: false,
            activeName: 'first',
            table: {},
            dialogTable: {},
            moreShow: false,
            formData: null,
            form: {},
            options: null,
            dialogResultType: ''
        }
    },
    mounted() {
    },
    methods: {
        init (json, type, data) {
            this.formData = json
            this.form = data.form ? JSON.parse(JSON.stringify(data.form)) : {}
            this.options = data.options || []
            this.table = data.table || []
            this.dialogTable = data.dialogTable || []
            this.dialogResultType = type
            this.dialogVisible = true
            this.moreShow = false
        },
        handleClose () {
            this.dialogVisible = false
        },
        async dateChange (date) {
            this.formData["queryParam.priceDate"] = date.split('-').join('')
            let formData = new FormData();
            formData.append('reqJson', JSON.stringify(this.formData))
            if (this.dialogResultType === '估值') {
                this.simulationValuationAnalysis(formData)
            } else {
                this.simulateDealWithVlParam(formData)
            }
        },
        // 估值
        async simulationValuationAnalysis (formData) {
            const res = await simulationValuationAnalysis(formData)
            if (res.success) {
                if (res.data.errorMessage) {
                    this.$message({
                        message: res.data.errorMessage,
                        type: 'error'
                    })
                } else {
                    let data = res.data
                    this.table = {
                        PNL: data.pnl?.toFixed(2) || '0.00',
                        PV: data.pv?.toFixed(2) || '0.00',
                        SpotDelta: data.spotDelta?.toFixed(2) || '0.00',
                        FwdDelta: data.fwdDelta?.toFixed(2) || '0.00',
                        Gamma: data.gamma?.toFixed(2) || '0.00',
                        Vega: data.vega?.toFixed(2) || '0.00',
                        Theta: data.theta?.toFixed(2) || '0.00',
                        Rho: data.rho?.toFixed(2) || '0.00',
                        Phi: data.phi?.toFixed(2) || '0.00',
                        Vanna: data.vanna?.toFixed(2) || '0.00',
                        Volga: data.volga?.toFixed(2) || '0.00'
                    }
                    this.dialogTable = {
                        Model: data.vlParam.model || '',
                        Spot: data.vlParam.spot ? (data.vlParam.spot * 1).toFixed(6) : '',
                        Fwd: data.vlParam.forward ? (data.vlParam.forward * 1).toFixed(6) : '',
                        curveCode1: data.vlParam.curveCode1 || '',
                        curveCode2: data.vlParam.curveCode2 || '',
                        curveCode3: data.vlParam.quantoCurveCode || '',
                        quantoCurveCode: data.vlParam.curvedSurfaceId || '',
                        quantoCurveCode2: data.vlParam.quantoCurvedSurfaceId1 || '',
                        quantoCurveCode3: data.vlParam.quantoCurvedSurfaceId2 || '',
                        Rate: data.vlParam.quantRate ? data.vlParam.quantRate.toFixed(2) : ' ',
                        Rate1: data.vlParam.rate1 ? (data.vlParam.rate1 * 100).toFixed(8) + '%' : '',
                        Rate2: data.vlParam.rate2 ? (data.vlParam.rate2 * 100).toFixed(8) + '%' : '',
                        Rate3: data.vlParam.rate3 ? (data.vlParam.rate3 * 100).toFixed(8) + '%' : '',
                        Vol1: data.vlParam.volatility ? (data.vlParam.volatility * 100).toFixed(6) + '%' : '',
                        Vol2: this.form.select10 && this.form.select10 === this.options[0].value ? (data.vlParam.quantoVol ? (data.vlParam.quantoVol * 100).toFixed(6) + '%' : '') : (data.vlParam.quantoVol2 ? (data.vlParam.quantoVol2 * 100).toFixed(6) + '%' : ''),
                        Vol3: this.form.select10 && this.form.select10 === this.options[1].value ? (data.vlParam.quantoVol2 ? (data.vlParam.quantoVol2 * 100).toFixed(6) + '%' : '') : (data.vlParam.quantoVol ? (data.vlParam.quantoVol * 100).toFixed(6) + '%' : ''),
                        corr: data.vlParam.volCorrelation ? data.vlParam.volCorrelation.toFixed(4) : '',
                        Days1: data.vlParam.maturityDays || '',
                        Days2: data.vlParam.businessDays || '',
                        Days3: data.vlParam.deliveryDays || '',
                        dataSet: data.dataSet || '',
                        globalId: data.globalId || ''
                    }
                }
            } else {
                this.$message({
                    message: res.message,
                    type: 'error'
                })
            }
        },
        // 试算
        async simulateDealWithVlParam (formData) {
            const res = await simulateDealWithVlParam(formData)
            if (res.success) {
                const data = res.data
                this.table = {
                        PNL: data.pnl?.toFixed(2) || '0.00',
                        PV: data.pv?.toFixed(2) || '0.00',
                        SpotDelta: data.spotDelta?.toFixed(2) || '0.00',
                        FwdDelta: data.fwdDelta?.toFixed(2) || '0.00',
                        Gamma: data.gamma?.toFixed(2) || '0.00',
                        Vega: data.vega?.toFixed(2) || '0.00',
                        Theta: data.theta?.toFixed(2) || '0.00',
                        Rho: data.rho?.toFixed(2) || '0.00',
                        Phi: data.phi?.toFixed(2) || '0.00',
                        Vanna: data.vanna?.toFixed(2) || '0.00',
                        Volga: data.volga?.toFixed(2) || '0.00'
                    }
                this.dialogTable = {
                    Model: data.vlParam.model || '',
                    Spot: data.vlParam.spot ? (data.vlParam.spot * 1).toFixed(6) : '',
                    Fwd: data.vlParam.forward ? (data.vlParam.forward * 1).toFixed(6) : '',
                    curveCode1: data.vlParam.curveCode1 || '',
                    curveCode2: data.vlParam.curveCode2 || '',
                    curveCode3: data.vlParam.quantoCurveCode || '',
                    quantoCurveCode: data.vlParam.curvedSurfaceId || '',
                    quantoCurveCode2: data.vlParam.quantoCurvedSurfaceId1 || '',
                    quantoCurveCode3: data.vlParam.quantoCurvedSurfaceId2 || '',
                    Rate: data.vlParam.quantRate ? data.vlParam.quantRate.toFixed(2) : ' ',
                    Rate1: data.vlParam.rate1 ? (data.vlParam.rate1 * 100).toFixed(8) + '%' : '',
                    Rate2: data.vlParam.rate2 ? (data.vlParam.rate2 * 100).toFixed(8) + '%' : '',
                    Rate3: data.vlParam.rate3 ? (data.vlParam.rate3 * 100).toFixed(8) + '%' : '',
                    Vol1: data.vlParam.volatility ? (data.vlParam.volatility * 100).toFixed(6) + '%' : '',
                    Vol2: this.form.select10 && this.form.select10 === this.options10[0].value ? (data.vlParam.quantoVol ? (data.vlParam.quantoVol * 100).toFixed(6) + '%' : '') : (data.vlParam.quantoVol2 ? (data.vlParam.quantoVol2 * 100).toFixed(6) + '%' : ''),
                    Vol3: this.form.select10 && this.form.select10 === this.options10[1].value ? (data.vlParam.quantoVol2 ? (data.vlParam.quantoVol2 * 100).toFixed(6) + '%' : '') : (data.vlParam.quantoVol ? (data.vlParam.quantoVol * 100).toFixed(6) + '%' : ''),
                    corr: data.vlParam.volCorrelation ? data.vlParam.volCorrelation.toFixed(4) : '',
                    Days1: data.vlParam.maturityDays || '',
                    Days2: data.vlParam.businessDays || '',
                    Days3: data.vlParam.deliveryDays || '',
                    dataSet: data.dataSet || '',
                    globalId: data.globalId || ''
                }
            } else {
                this.$message({
                    message: res.message,
                    type: 'error'
                })
            }
        }
    }
};
</script>

<style lang="scss" scoped>
    .trialDialog{
        .box{
            .b-top {
                padding: 0 40px;
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                p{
                    width: 50%;
                    margin: 0;
                    color: var(--color-70);
                    &>span{
                        display: inline-block;
                        width: 110px;
                        text-align: right;
                        margin-right: 8px;
                    }
                    b{
                        font-weight: normal;
                        color: #000;
                    }
                    .el-date-editor{
                        width: 200px;
                    }
                    em {
                        padding: 2px 6px;
                        font-style: normal;
                        color: var(--red-60);
                        border: 1px solid var(--red-60);
                        border-radius: 4px;
                        margin-left: 8px;
                    }
                }
            }
            .el-tabs{
                ::v-deep .el-tabs__content{
                    max-height: 500px;
                    overflow: hidden;
                    overflow-y: auto;
                    .tab-box{
                        border: 1px solid var(--scrollBar);
                        border-radius: 4px;
                        margin-bottom: 10px;
                        p{
                            padding: 0 30px;
                            position: relative;
                            height: auto;
                            em{
                                display: inline-block;
                                position: absolute;
                                top: 0;
                                bottom: 0;
                                left: 20px;
                                width: 4px;
                                background-color: var(--blue-70);
                                border-radius: 4px;
                                margin-right: 8px;
                            }
                        }
                        ul{
                            display: flex;
                            flex-wrap: wrap;
                            padding: 0 40px;
                            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;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>