<template>
    <div class="valuationResult">
        <el-form class="form" ref="form" :model="form" label-width="100px">
            <el-row>
                <el-col :span="6" v-for="(item) in searchList" :key="item.label">
                    <el-form-item :label="item.label">
                        <el-select v-if="item.type === 'select'" :key="item.label" v-model="form[item.name]" :multiple="item.multiple||false" :collapse-tags="item.collapseTags||false" filterable placeholder="">
                            <el-option v-for="inner in item.options" :label="inner.text" :key="inner.value" :value="inner.value"></el-option>
                        </el-select>
                        <el-input v-else-if="item.type === 'input'" v-model="form[item.name]" placeholder=""></el-input>
                        <el-date-picker
                            v-else-if="item.type === 'dateRange'"
                            v-model="form[item.name]"
                            type="daterange"
                            value-format="yyyyMMdd">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6" class="search">
                    <el-button type="primary" @click="pmsQueryPage">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="table" v-loading="loading">
            <p>
                逐笔估值结果列表
                <el-button size="small" :disabled="!selection" @click="reDoCalcFont(selection)">批量提交</el-button>
            </p>
            <el-table
                :data="tableData"
                stripe
                border
                :height="maxHeight"
                :max-height="maxHeight"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="vlId"
                    headerAlign="center"
                    label="交易流水号"
                    align="left">
                </el-table-column>
                <el-table-column
                    prop="vlDateStr"
                    headerAlign="center"
                    label="估值日期"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="vlTimeStr"
                    headerAlign="center"
                    label="估值时间"
                    align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.vlTimeStr.toString().substr(0, 2) + ':' + scope.row.vlTimeStr.toString().substr(2, 2) + ':' + scope.row.vlTimeStr.toString().substr(4, 2) }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="tradeDateStr"
                    headerAlign="center"
                    label="交易日"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="valueDateStr"
                    headerAlign="center"
                    label="起息日"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="maturityDateStr"
                    headerAlign="center"
                    label="到期日"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="underlying"
                    headerAlign="center"
                    label="标的"
                    align="left">
                </el-table-column>
                <el-table-column
                    prop="instrumentStr"
                    headerAlign="center"
                    label="金融工具"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="productStr"
                    headerAlign="center"
                    label="产品"
                    align="left">
                </el-table-column>
                <el-table-column
                    prop="profitCcy"
                    headerAlign="center"
                    label="估值货币"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="mvStr"
                    headerAlign="center"
                    label="市值"
                    align="right">
                    <template slot-scope="scope">
                        <span>{{ formatNum(scope.row.mvStr, 2) }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    headerAlign="center"
                    label="操作"
                    width="140px"
                    align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="reDoCalcFont(scope.row.vlId)">重新估值</el-button>
                        <el-button type="text" size="small" @click="openDialog(scope.row)">估值结果</el-button>
                        <!-- <el-button type="text" size="small">交易明细</el-button> -->
                      </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 15, 30, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <trialDiallogStandard ref="trialDialog"></trialDiallogStandard>
    </div>
</template>

<script>
// import TrialDialog from '../../components/trialDialog.vue'
import { baseRcsQueryComboxData, getSystemDatePMS, pmsQueryPage, reDoCalcFont } from '@/api/pmsApi.js'
export default {
  name: 'valuationResult',
  components: {
    trialDiallogStandard: () => import('@/components/trialDialogStandard/index.vue')
  },
  data() {
    return {
        searchList: [
            {
                label: '交易流水号：',
                name: 'vlId',
                type: 'input'
            },
            {
                label: '金融工具：',
                type: 'select',
                name: 'instrument',
                options: []
            },
            {
                label: '估值日期：',
                type: 'dateRange',
                name: 'date'
            }
        ],
        form: {
            vlId: '',
            instrument: '',
            date: []
        },
        tableData: [],
        currentPage: 1,
        pageSize: 15,
        total: null,
        maxHeight: null,
        loading: false,
        defaultDate: [],
        selection: ''
    }
  },
  mounted() {
    this.handleResize()
    this.getSystemDatePMS()
    this.baseRcsQueryComboxData()
    window.addEventListener('resize', this.handleResize)
  },
  activated () {
    window.addEventListener('resize', this.handleResize)
  },
  deactivated () {
    window.removeEventListener('resize', this.handleResize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    // 获取系统日期
    async getSystemDatePMS () {
        const res = await getSystemDatePMS()
        if (res.success) {
            this.form.date = [res.data.result.date.toString(), res.data.result.date.toString()]
            this.defaultDate = [res.data.result.date.toString(), res.data.result.date.toString()]
        } else {
            this.$message({
                message: res.message,
                type: 'error'
            })
        }
    },
    // 获取字典
    async baseRcsQueryComboxData () {
        // const params = new URLSearchParams()
        // params.append('codifierGrpCodes', "PubInstrument")
        const params = {
          'codifierGrpCodes': 'PubInstrument'
        }
        const res = await baseRcsQueryComboxData(params)
        if (res.success) {
            this.searchList[1].options = res.data.result.PubInstrument
        } else {
            this.$message({
                message: res.message,
                type: 'error'
            })
        }
    },
    async pmsQueryPage () {
        this.loading = true
        // const params = new URLSearchParams()
        // params.append('queryParam.moduleName', "pmsResultService")
        // params.append('queryParam.vlId', this.form.vlId)
        // params.append('queryParam.instrument', this.form.instrument)
        // params.append('queryParam.startDate', this.form.date[0])
        // params.append('queryParam.endDate', this.form.date[1])
        // params.append('queryParam.pageStart', this.currentPage)
        // params.append('queryParam.pageLimit', this.pageSize)
        const params = {
          'queryParam.moduleName': 'pmsResultService',
          'queryParam.vlId': this.form.vlId,
          'queryParam.instrument': this.form.instrument,
          'queryParam.startDate': this.form.date[0],
          'queryParam.endDate': this.form.date[1],
          'queryParam.pageStart': this.currentPage,
          'queryParam.pageLimit': this.pageSize
        }
        const res = await pmsQueryPage(params)
        this.tableData = res.data.result.datals
        this.total = res.data.result.total
        this.loading = false
    },
    openDialog (row) {
        let json = {
            "globalId": row.globalId,
            "vlDate": row.vlDateStr.split('-').join('')
        }
        this.$refs.trialDialog.init(json, '逐笔估值结果', {})
    },
    // 获取table最大高度
    handleResize () {
        const valuationResult = Array.from(document.getElementsByClassName('valuationResult')) || []
        const valuationResultH = valuationResult.find(ele => ele.clientHeight > 0)?.clientHeight || 0
        const form = Array.from(document.getElementsByClassName('form')) || []
        const formH = form.find(ele => ele.clientHeight > 0)?.clientHeight || 0
        const pagination = Array.from(document.getElementsByClassName('el-pagination')) || []
        const paginationH = pagination.find(ele => ele.clientHeight > 0)?.clientHeight || 0
        this.maxHeight = valuationResultH - formH - paginationH - 10 - 44
    },
    reset () {
        this.form = {
            vlId: '',
            instrument: '',
            date: this.defaultDate
        }
    },
    handleSizeChange (e) {
        this.currentPage = 1
        this.pageSize = e
        this.pmsQueryPage()
    },
    handleCurrentChange (e) {
        this.currentPage = e
        this.pmsQueryPage()
    },
    handleSelectionChange (e) {
        this.selection = e.map(c=>c.vlId).join(',')
    },
    async reDoCalcFont (e) {
        const obj = {}
        obj.op = 'AND'
        obj.field = 'deal_id'
        obj.value = e
        const condition = [
            obj
        ]
        // const params = new URLSearchParams()
        // params.append('queryParam.dataSet', "RealTime")
        // params.append('queryParam.vlDate', this.defaultDate[0])
        // params.append('queryParam.condition', JSON.stringify(condition))
        const params = {
          'queryParam.dataSet':  "RealTime",
          'queryParam.vlDate': this.defaultDate[0],
          'queryParam.condition': JSON.stringify(condition)
        }
        const res = await reDoCalcFont(params)
        if (res.success) {
            this.$message.success('操作成功!')
        } else {
            this.$message.error(res.message)
        }
    },
    formatNum (e, digit) {
        return (e*1).toLocaleString('en-US', {
            minimumFractionDigits: digit,
            maximumFractionDigits: digit
        }) // 转换千分位
    }
  }
};
</script>

<style lang="scss" scoped>
    .valuationResult{
        height: 100%;
        ::v-deep .el-select{
            width: 100%;
        }
        .form{
            padding: 20px 20px 0;
            margin-bottom: 10px;
            background-color: var(--card-bg);
        }
        .search{
            text-align: right;
            .el-button{
                height: 30px;
                line-height: 30px;
                padding-top: 0;
                padding-bottom: 0;
            }
        }
        .table {
            padding: 0 10px;
            background-color: var(--card-bg);
            p{
                font-size: 18px;
                font-weight: bold;
                margin: 0;
                padding: 10px 0;
                display: flex;
                justify-content: space-between;
            }
        }
        .el-pagination{
            padding: 10px;
            text-align: right;
        }
        ::v-deep .el-range-separator{
            line-height: 22px!important;
        }
    }
</style>