<template>
  <div>
    <Row :gutter="16">
      <!--待选列表-->
      <Col :span="leftSpan">
      <div v-show="isFold">
        <Card>
          <div slot="title" style="position: relative">
            <div>{{ leftTitle }}</div>
            <div style="position: absolute;right: -14px;top:-14px;">
              <Tooltip content="收起" placement="bottom">
                <div style="padding: 14px;cursor: pointer" @click="_fold">
                  <Icon type="md-arrow-dropleft" />
                </div>
              </Tooltip>
            </div>
          </div>
          <div>
            <slot name="left" />
          </div>
        </Card>
      </div>
      <div v-show="!isFold" class="hide-box" :style="{height:hideTableHeight === undefined ?'485px' : hideTableHeight}">
        <Tooltip content="打开" placement="bottom">
          <div style="margin:-14px;padding: 14px;cursor:pointer;" @click="_fold">
            <Icon type="md-arrow-dropright" />
          </div>
        </Tooltip>
        <div>{{ leftTitle }}</div>
      </div>
      </Col>
      <!--已选列表-->
      <Col :span="rightSpan">
      <Card>
        <div slot="title" style="position: relative">
          <div>{{ rightTitle }}</div>
        </div>
        <div>
          <slot name="right" />
        </div>
      </Card>
      </Col>
    </Row>
  </div>
</template>
<style scoped>
.hide-box {
  width: 43px;
  /*height: 485px;*/
  padding: 14px;
  text-align: center;
  border: 1px solid #e9eaec;
  border-radius: 4px;
}
</style>
<script>
export default {
  name: 'Collapse',
  props: {
    leftTitle: null,
    rightTitle: null,
    leftBtnTitle: null,
    rightBtnTitle: null,
    hideTableHeight: null,
    // showModal: false,
    leftWidth: null // 自定义宽度   传左侧宽度即可
  },
  data() {
    return {
      // leftSpan: 1,
      // rightSpan: 22,
      // isFold: false,

      leftSpan: this.leftWidth ? this.leftWidth : 11,
      rightSpan: this.leftWidth ? 24 - this.leftWidth : 12,
      isFold: true
    }
  },
  methods: {
    _fold() {
      if (this.isFold) {
        this.leftSpan = 1
        this.rightSpan = 23
        this.isFold = false
      } else {
        this.leftSpan = this.leftWidth ? this.leftWidth : 11
        this.rightSpan = this.leftWidth ? 24 - this.leftWidth : 12
        this.isFold = true
      }
    },
    _options(name) {
      this.$emit('on-result-change', name)
    }
  }
}
</script>
