<template>
  <div>
    <div class="layout-content-padding">
      <div>
        <Row :gutter=gutter>
          <Col :span="leftSpan">
            <Card>
              <p slot="title" style="width: 60%;">{{leftName}}</p>
              <p slot="title" style="width: 40%;text-align: right">
                <a @click="_refresh" class="blue-color">
                  <Icon type="refresh" size="20"></Icon>
                </a>
              </p>
              <div>
                <slot name="left"></slot>
              </div>
            </Card>
          </Col>
          <Col :span="rightSpan">
            <Card>
              <p slot="title">{{rightName}}</p>
              <div>
                <slot name="right"></slot>
              </div>
            </Card>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    gutter: null,
    leftName: null,
    rightName: null,
    leftSpan: null
  },
  data() {
    return {
      rowGutter: this.gutter ? this.gutter : 0
    }
  },
  computed: {
    rightSpan: function() {
      return 24 - this.leftSpan
    }
  },
  methods: {
    // 刷新
    _refresh() {
      this.$emit('on-result-change')
    }
  }
}
</script>

<style scoped>
</style>
