<template>
    <div class="customSearch">
        <div class="el-row">
            <div :class="saveShow?'width-75':'width-100'">
                <TopSearch ref="topSearch"></TopSearch>
                <el-row>
                    <el-col :span="12">
                        <div class="middle">
                            <Transaction ref="transaction"></Transaction>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="middle middle2">
                            <SerialNumber ref="serialNumber"></SerialNumber>
                            <Date ref="date"></Date>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="width-25 col-right" v-show="saveShow">
                <div class="right">
                    <SaveList ref="saveList" @gotoResult="gotoResult" @saveHide="saveHide"></SaveList>
                </div>
            </div>
            <div class="col-right arrow-left" v-show="!saveShow">
                <i class="el-icon-d-arrow-left" @click="saveShow=true"></i>
            </div>
        </div>
        <div class="btns">
            <el-button type="primary" class="btn" @click="search">{{btn1}}</el-button>
            <el-button plain class="btn" @click="reset">{{btn2}}</el-button>
            <el-button type="success" class="btn" @click="dialogVisible=true">{{btn3}}</el-button>
        </div>
        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="400px"
            :before-close="handleClose">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="20">
                        <el-form-item :label="this.$t('field.code')" prop="code">
                            <el-input v-model="form.code" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="this.$t('field.shortName')" prop="name">
                            <el-input v-model="form.name" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="this.$t('field.name')">
                            <el-input v-model="form.localName" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" class="btn" @click="submitForm">{{this.$t('field.save')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import TopSearch from "./components/topSearch.vue";
import Transaction from "./components/transaction.vue";
import SerialNumber from "./components/serialNumber.vue";
import Date from "./components/date.vue";
import SaveList from "./components/saveList.vue";
import { doSave } from '../../../api/dcsApi.js';
export default {
  name: 'customSearch',
  components: {
    TopSearch,
    Transaction,
    SerialNumber,
    Date,
    SaveList
  },
  data() {
    return {
        btn1: this.$t('field.search'),
        btn2: this.$t('field.reset'),
        btn3: this.$t('field.saveAs'),
        title: this.$t('field.saveAs'),
        dialogVisible: false,
        form: {
            code: '',
            name: '',
            localName: ''
        },
        rules: {
            code: [{ required: true, message: this.$t('field.pleaseInput'), trigger: 'blur' }],
            name: [{ required: true, message: this.$t('field.pleaseInput'), trigger: 'blur' }],
        },
        saveShow: true
    };
  },
  mounted() {
  },
  methods: {
    getParam () {
        const option = [
            {
                text: '=',
                value: 'EQ'
            },
            {
                text: '!=',
                value: 'NQ'
            },
            {
                text: this.$t('field.contain'),
                value: 'IN'
            },
            {
                text: this.$t('field.notContain'),
                value: 'NOT IN'
            }
        ]
        // 顶部查询处理
        const topSearch = this.$refs.topSearch.topSubmit()
        let products = []
        let topSearchRule = []
        topSearch.forEach(item=>{
            // products.push(...item.checked)
            let type = ''
            switch (item.type) {
                case "1":
                    type = 'foreignExchangeCondition'
                    break;
                case "2":
                    type = 'fxoptionCondition'
                    break;
                case "3":
                    type = 'repoCondition'
                    break;
                case "4":
                    type = 'bondCondition'
                    break;
                case "5":
                    type = 'cashflowCondition'
                    break;
                case "6":
                    type = 'instrumentlegCondition'
                    break;
                case "7":
                    type = 'fundCondition'
                    break;
                case "8":
                    type = 'futureCondition'
                    break;
                case "9":
                    type = 'instrumentlegCondition2'
                    break;
                default:
                    break;
            }
            item.checkedBox?.forEach(c=>{
                products.push({
                    ...c,
                    type: type
                })
            })
            item.formLists.forEach(e=>{
                let obj = {
                    Operator: e.type === 'select' ? 'IN' : 'EQ',
                    FieldChsname: e.label,
                    FieldEngname: e.key,
                    Field: e.key,
                    Value: item.form[e.key],
                    type: type
                }
                if (item.form[e.key].length > 0) {
                    topSearchRule.push(obj)
                }
            })
        })

        const foreignExchangeCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'foreignExchangeCondition')
        const fxoptionCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.Field !== 'contractId' && c.type === 'fxoptionCondition')
        const bondCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'bondCondition')
        const futureCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'futureCondition')
        const repoCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'repoCondition')
        const bondlendingCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'repoCondition')
        const cashflowCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'cashflowCondition')
        const loandepositCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'cashflowCondition')
        const posallocationCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'cashflowCondition')
        const instrumentlegCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'instrumentlegCondition')
        const capfloorCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'instrumentlegCondition')
        const swaptionCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'instrumentlegCondition')
        const contractCondition = topSearchRule.filter(c=>c.Field === 'contractId')
        const fundCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'fundCondition')
        const moreConditionRule2 = {
            foreignExchangeCondition: [
                topSearchRule.filter(c=>c.Field === 'underlying' && c.type === 'foreignExchangeCondition')?.[0],
                topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'foreignExchangeCondition')?.[0]
            ],
            fxoptionCondition: [
                topSearchRule.filter(c=>c.Field === 'underlying' && c.type === 'fxoptionCondition')?.[0],
                topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'fxoptionCondition')?.[0]
            ],
            repoCondition: [
                topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'repoCondition')?.[0]
            ],
            bondlendingCondition: [
                topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'repoCondition')?.[0]
            ],
            bondCondition: [
                topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'bondCondition')?.[0]
            ],
            cashflowCondition: [
                topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'cashflowCondition')?.[0]
            ],
            loandepositCondition: [
                topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'cashflowCondition')?.[0]
            ],
            posallocationCondition: [
                topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'cashflowCondition')?.[0]
            ],
            posallocationCondition: [
                topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'cashflowCondition')?.[0]
            ],
            futureCondition: [
                topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'futureCondition')?.[0]
            ],
            instrumentlegCondition2: [
                topSearchRule.filter(c=>c.Field === 'underlying' && c.type === 'instrumentlegCondition2')?.[0]
            ],
        }

        let moreConditionRule = []
        // 交易信息处理
        const transaction = this.$refs.transaction.submit()
        let transactionRule = []
        transaction.forEach(item=>{
            let obj = {
                Operators: option,
                Operator: item.value1,
                FieldChsname: item.label,
                FieldEngname: item.key,
                Field: item.key,
                Value: item.key === 'folder' ? item.id : (item.value1 === 'EQ' || item.value1 === 'NQ' ? item.value2 : item.value2.split(',')),
                isUser: item.isUser
            }
            if (item.value2.length > 0) {
                transactionRule.push(obj)
            }
        })

        // 流水号处理
        const serialNumber = this.$refs.serialNumber.submit()
        let serialNumberRule = []
        serialNumber.forEach(item=>{
            let obj = {
                Operators: option,
                Operator: item.value1,
                FieldChsname: item.label,
                FieldEngname: item.key,
                Field: item.key,
                Value: item.value2
            }
            if (item.value2.length > 0) {
                serialNumberRule.push(obj)
            }
        })
        
        // 日期处理
        const date = this.$refs.date.submit()
        let dateRule = []
        date.forEach(item=>{
            let obj = {
                Operators: option,
                Operator: item.value1,
                FieldChsname: item.label,
                FieldEngname: item.key,
                Field: item.key,
                Value: item.key === 'captureTime' ? item.value3 : item.value2,
                isNow: item.isNow
            }
            if (item.value2?.length > 0) {
                dateRule.push(obj)
            }
        })
        moreConditionRule.push(...transactionRule, ...serialNumberRule, ...dateRule)

        let params = {
            products,
            foreignExchangeCondition,
            fxoptionCondition,
            bondCondition,
            futureCondition,
            repoCondition,
            bondlendingCondition,
            cashflowCondition,
            loandepositCondition,
            posallocationCondition,
            instrumentlegCondition,
            capfloorCondition,
            swaptionCondition,
            contractCondition,
            fundCondition,
            moreConditionRule,
            moreConditionRule2
        }

        return params
    },
    async search () {
        await this.$refs.topSearch.handleClickOutside('', true)
        localStorage.setItem('params', JSON.stringify(this.getParam()))
        this.$router.push('/888970290/customResult')
    },
    // 重置清空所有条件
    reset () {
        this.$refs.topSearch.reset()
        this.$refs.transaction.reset()
        this.$refs.serialNumber.reset()
        this.$refs.date.reset()
    },
    // 另存为弹窗-确认
    submitForm(formName) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.doSave()
            this.handleClose()
          } else {
            return false;
          }
        });
    },
    // 另存为弹窗-取消
    handleClose(formName) {
        this.form = {
            code: '',
            name: '',
            localName: ''
        }
        this.$refs.form.resetFields();
        this.dialogVisible = false
    },
    // 自定义查询组合保存
    async doSave () {
        let param = {
            "queryParam.moduleName": "dcsUserCondition",
            "queryParam.domain": JSON.stringify({
                code: this.form.code,
                name: this.form.name,
                localName: this.form.localName,
                data: this.getParam(),
                user: Eui.Share.get("loginId"),
            })
        }
        let formData = new FormData();
        formData.append('reqJson', JSON.stringify(param));
        const res = await doSave(formData)
        if (res.success) {
            this.$message({
                type: 'success',
                message: this.$t('field.operationSuccessful')
            });
            this.$refs.saveList.queryList()
        } else {
            this.$message({
                type: 'error',
                message: res.message
            });
        }
    },
    // 点击自定义查询组合跳转至结果页
    gotoResult (data) {
        localStorage.setItem('params', data)
        this.$router.push('/888970290/customResult')
    },
    saveHide () {
        this.saveShow = false
        this.spanCol = 24
    },
    saveShow () {
        // this.saveShow = true
        this.spanCol = 18
    }
  }
};
</script>

<style lang="scss">
.customSearch{
    font-size: 12px;
    .el-form-item{
        width: 100%;
    }
    .el-input, .el-input__inner, .el-input__suffix span i, .el-form-item, .el-form-item__label, .el-form-item .el-form-item__content, .el-form-item__content span{
        height: 20px!important;
        line-height: 20px!important;
    }
    .el-date-editor .el-icon-date{
        font-size: 12px;
        line-height: 1px;
    }
    .el-date-editor .el-range-separator{
        font-size: 12px;
    }
    .el-form-item__error{
        text-align: left;
    }
    .transaction .el-dialog .btn{
        height:22px!important;
        line-height: 22px!important;
        width: 64px!important;
        padding: 0!important;
        text-align: center!important;
    }
    .el-select .el-select__tags{
        flex-wrap: nowrap;
        /* input{
            display: none;
        } */
    }
    .el-button{
        font-size: 12px;
    }

    /* number输入框上下箭头隐藏 */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }
}
</style>
<style lang="scss" scoped>
    .customSearch{
        height: calc(100% - 1px);
        background-color: var(--table-cell-striped-bg);
        position: relative;
        color: var(--color-90);
        .width-100{
            width: 100%;
        }
        .width-75{
            width: 75%;
        }
        .width-25{
            width: 25%;
        }
        .el-row{
            height: calc(100% - 51px);
            overflow: hidden;
            overflow-y: auto;
            position: relative;
            transition: all ease 1s 0;
        }
        .el-col-6{
            height: 100%;
        }
        .col-right{
            position: fixed;
            right: 16px;
            top: 85px;
            height: calc(100% - 185px);
            background-color: var(--table-cell-striped-bg);
            z-index: 9;
            transition: all 1s ease 0;
            &.arrow-left{
                width: 26px;
                text-align: center;
                border: 1px solid var(--scrollBar);
                border-bottom: none;
                i{
                    cursor: pointer;
                    margin-top: 7px;
                }
            }
        }
        .right{
            height: 100%;
            border: 1px solid var(--scrollBar);
            border-bottom: none;
        }
        .middle{
            height: 650px;
            border-top: 1px solid var(--scrollBar);
            &.middle2{
                border-left: 1px solid var(--scrollBar);
            }
        }
        .btns{
            position: absolute;
            background-color: var(--table-cell-striped-bg);
            bottom: 0;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: right;
            border-top: 1px solid var(--scrollBar);
        }
        .btn{
                height:22px;
                line-height: 22px;
                width: 64px;
                padding: 0;
                text-align: center;
            }
    }
</style>