<template>
    <div class="serialNumber">
        <h4>{{title}}</h4>
        <el-form class="t-form" ref="form" :model="form" label-width="100px">
            <el-row>
                <el-col :span="20">
                    <el-form-item v-for="(item, index) in form" :label="item.label" :key="item.key">
                        <el-select v-model="item.value1" placeholder="" disabled>
                            <el-option v-for="inner in option" :label="inner.text" :value="inner.value"></el-option>
                        </el-select>
                        <el-select v-if="item.type === 'select'" v-model="item.value2" :multiple="item.value1 === 'IN' || item.value1 === 'NOT IN'" :collapse-tags="item.value1 === 'IN' || item.value1 === 'NOT IN'" filterable :placeholder="item.placeholder">
                            <el-option v-for="inner in item.option" :label="inner.text" :value="inner.value"></el-option>
                        </el-select>
                        <el-input v-else-if="item.type === 'input'" type="number" v-model="item.value2" :placeholder="item.placeholder"></el-input>
                        <el-input v-else-if="item.type === 'custom'" v-model="item.value2" :placeholder="item.placeholder" suffix-icon="el-icon-search" @focus="inputFocus"></el-input>
                        <span v-if="item.btn">{{item.btn}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
export default {
  name: 'serialNumber',
  data() {
    return {
        title: this.$t('field.dealsId'),
        form: [],
        defaultForm: [
            {
                label: this.$t('field.transactionSerialNumber'),
                type: 'input',
                key: 'dealId',
                value1: 'EQ',
                value2: '',
                placeholder: this.$t('field.pleaseInput')
            },
            {
                label: this.$t('field.externalSerialNumber'),
                type: 'input',
                key: 'businessId',
                value1: 'EQ',
                value2: '',
                placeholder: this.$t('field.pleaseInput')
            },
            {
                label: this.$t('field.fatherTransactionSerialNumber'),
                type: 'input',
                key: 'parentId',
                value1: 'EQ',
                value2: '',
                placeholder: this.$t('field.pleaseInput')
            },
            {
                label: this.$t('field.externalBusinessNumber'),
                type: 'input',
                key: 'globalId',
                value1: 'EQ',
                value2: '',
                placeholder: this.$t('field.pleaseInput')
            },
        ],
        option: [
            {
                text: '=',
                value: 'EQ'
            },
            {
                text: '!=',
                value: 'NQ'
            },
            {
                text: this.$t('field.contain'),
                value: 'IN'
            },
            {
                text: this.$t('field.notContain'),
                value: 'NOT IN'
            }
        ]
    };
  },
  mounted() {
    this.reset()
  },
  methods: {
    submit () {
        return this.form
    },
    reset () {
        this.form = JSON.parse(JSON.stringify(this.defaultForm))
    }
  }
};
</script>

<style lang="scss" scoped>
    .serialNumber{
        width: 100%;
        h4{
            padding: 6px 20px;
            margin: 0;
            background-color: var(--select-item-hover-bg);
        }
        .t-form{
            padding: 20px;
            .el-form-item__content{
                .el-select{
                    &:first-child{
                        width: 20%;
                        margin-right: 10px;
                    }
                }
                div{
                    &:nth-of-type(2){
                        flex: 1;
                    }
                }
                span{
                    position: absolute;
                    right: -60px;
                    cursor: pointer;
                    padding: 0 8px;
                    border: 1px solid var(--scrollBar);
                    line-height: 28px;
                }
            }
        }
    }
</style>
<style lang="scss">
    .serialNumber{
        width: 100%;
        .t-form{
            .el-form-item__content{
                display: flex;
                justify-content: space-between;
            }
        }
    }
</style>