<template>
    <div class="optionCalculator">
        <el-row>
            <el-col :span="searchCol">
                <Search ref="search" @searchHide="searchHide"></Search>
            </el-col>
            <el-col :span="tableCol">
                <Table ref="table" :icon-show="iconShow"></Table>
            </el-col>
        </el-row>
        <div class="searchShow" v-show="iconShow">
            <i class="el-icon-d-arrow-right" @click="searchShow"></i>
        </div>
    </div>
</template>

<script>
import Search from "./components/search.vue";
import Table from "./components/table.vue";
export default {
  name: 'optionCalculator',
  components: {
    Search,
    Table,
  },
  data() {
    return {
        searchCol: 5,
        tableCol: 19,
        iconShow: false
    };
  },
  mounted() {
  },
  methods: {
    searchHide () {
        this.searchCol = 0
        this.tableCol = 24
        this.iconShow = true
    },
    searchShow () {
        this.searchCol = 5
        this.tableCol = 19
        this.iconShow = false 
    }
  }
};
</script>

<style lang="scss" scoped>
    .optionCalculator{
        height: 100%;
        position: relative;
        background-color: var(--table-cell-striped-bg);
        .el-row, .el-col{
            height: 100%;
        }
        .searchShow{
            width: 26px;
            height: 100%;
            text-align: center;
            border-right: 1px solid var(--scrollBar);
            position: absolute;
            top: 0;
            left: 0;
            .el-icon-d-arrow-right{
                cursor: pointer;
                margin-top: 10px;
            }
        }
    }
</style>