<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="1">
        <div style="margin-top:160px">
        <Tooltip :content="leftBtnTitle === undefined ? '添加' :leftBtnTitle " placement="right">
          <el-button type="primary" style="color: #fff; background-color: #00a0e9;border-color: #00a0e9;" size="small" @click="_options(leftBtnTitle === undefined ? '添加' :leftBtnTitle)">
            <Icon type="ios-arrow-forward" />
          </el-button>
        </Tooltip>
      </div>
      <div style="margin-top: 20px">
        <Tooltip :content="rightBtnTitle === undefined ? '删除' :rightBtnTitle " placement="right">
          <el-button type="primary" style="color: #fff; background-color: #00a0e9;border-color: #00a0e9;" size="small" @click="_options(rightBtnTitle === undefined ? '删除' :rightBtnTitle)">
            <Icon type="ios-arrow-back" />
          </el-button>
        </Tooltip>
      </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: 14,
      rightSpan: 9,
      isFold: true
    }
  },
  methods: {
    _fold() {
      if (this.isFold) {
        this.leftSpan = 1
        this.rightSpan = 22
        this.isFold = false
      } else {
        // this.leftSpan = this.leftWidth ? this.leftWidth : 11
        // this.rightSpan = this.leftWidth ? 24 - this.leftWidth - 1 : 12
        // this.isFold = true
        this.leftSpan = 14
        this.rightSpan = 9
        this.isFold = true
      }
    },
    _options(name) {
      this.$emit('on-result-change', name)
    }
  }
}
</script>
<style>
.ivu-btn-primary {
  color: #fff;
  background-color: #00a0e9;
  border-color: #00a0e9;
}
</style>
