<template>
  <div class="borderLayout" :class="[showBorder?'showBorder':'',showPadding?'showPadding':'']">
    <div
      v-if="layoutCfg.header"
      class="header"
      :class="[header.showBorder?`showBorder`:``,header.cssClass]"
      :style="headerStyle"
    >
      <div
        v-if="header.showBar"
        class="toolBar"
        :style="[{height:`${header.barHeight}`},header.toolBarStyle] "
      >
        <span v-if="header.title" class="title">{{ header.title }}</span>
        <span class="tool">
          <slot name="headerExtraContent" />
        </span>
        <span v-if="header.expand " class="expand" @click="headerExpandHandler">
          {{ header.expandText }} &nbsp;<ta-icon :type="header.state?'up':'down'" />
        </span>
      </div>
      <div
        v-if="header.state"
        class="layoutCon"
        :style="[{height:` calc(100% - ${header.showBar?`${header.barHeight}`:`0px`})`},header.layoutConStyle]"
      >
        <slot name="header" />
      </div>
    </div>
    <div
      v-if="layoutCfg.left"
      class="left"
      :class="[left.showBorder?`showBorder`:``,left.cssClass]"
      :style="leftStyle"
    >
      <div
        v-if="left.showBar"
        class="toolBar"
        :style="[{height:`${left.barHeight}`},left.toolBarStyle]"
      >
        <span v-if="left.title && left.state" class="title">{{ left.title }}</span>
        <span v-if="left.state" class="tool">
          <slot name="leftExtraContent" />
        </span>
        <span
          v-if="left.expand"
          class="expand"
          style="margin-right: 0px"
          @click="leftExpandHandler"
        >
          <span v-if="left.state">{{ left.expandText }} &nbsp;</span><ta-icon :type="left.state?'left':'right'" />
        </span>
      </div>
      <div
        class="layoutCon"
        :style="[{height: `calc(100% - ${left.showBar?`${left.barHeight}`:`0px`})`},left.layoutConStyle]"
      >
        <slot v-if="left.state" name="left" />
      </div>
    </div>
    <div
      v-if="layoutCfg.center"
      class="center"
      :class="[center.cssClass]"
      :style="centerStyle"
    >
      <div
        v-if="center.showBar"
        class="toolBar"
        :style="[{height:`${center.barHeight}`},center.toolBarStyle]"
      >
        <span v-if="center.title" class="title">{{ center.title }}</span>
        <span class="tool">
          <slot name="centerExtraContent" />
        </span>
      </div>
      <div
        class="layoutCon"
        :style="centerConStyle"
      >
        <slot />
      </div>
      <div v-if="center.showFooter" class="centerFooter" :style="{height:center.footerHeight}">
        <slot name="centerFooter" />
      </div>
    </div>
    <div
      v-if="layoutCfg.right"
      class="right"
      :class="[right.showBorder?`showBorder`:``,right.cssClass]"
      :style="rightStyle"
    >
      <div
        v-if="right.showBar"
        class="toolBar"
        :style="[{height:`${right.barHeight}`},right.toolBarStyle]"
      >
        <span v-if="right.title && right.state" class="title">{{ right.title }}</span>
        <span v-if="right.state" class="tool">
          <slot name="rightExtraContent" />
        </span>
        <span
          v-if="right.expand"
          class="expand"
          style="margin-right: 0px"
          @click="rightExpandHandler"
        >
          <span v-if="right.state">{{ right.expandText }} &nbsp;</span><ta-icon
            :type="right.state?'right':'left'"
          />
        </span>
      </div>
      <div
        class="layoutCon"
        :style="[{height:` calc(100% - ${right.showBar?`${right.barHeight}`:`0px`})`},right.layoutConStyle]"
      >
        <slot v-if="right.state" name="right" />
      </div>
    </div>
    <div
      v-if="layoutCfg.footer"
      class="footer"
      :class="[footer.showBorder?`showBorder`:``,footer.cssClass]"
      :style="footerStyle"
    >
      <div
        v-if="footer.showBar"
        class="toolBar"
        :style="[{height:`${footer.barHeight}`},footer.toolBarStyle]"
      >
        <span v-if="footer.title" class="title">{{ footer.title }}</span>
        <span class="tool">
          <slot name="footerExtraContent" />
        </span>
        <span v-if="footer.expand " class="expand" @click="footerExpandHandler">
          {{ footer.expandText }} &nbsp;<ta-icon :type="footer.state?'down':'up'" />
        </span>
      </div>
      <div
        v-if="footer.state"
        class="layoutCon"
        :style="[{height:` calc(100% - ${footer.showBar?`${footer.barHeight}`:`0px`})`},footer.layoutConStyle]"
      >
        <slot name="footer" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TaBorderLayout',
  props: {
    // 布局配置
    layout: {
      type: Object,
      default: () => {
        return {}
      },
    },
    showBorder: {
      type: Boolean,
      default: true,
    }, // 控制显示/隐藏所有边框
    showPadding: {
      type: Boolean,
      default: true,
    }, // 控制显示/隐藏所有padding
    // header配置
    headerCfg: {
      type: Object,
      default: () => {
        return {}
      },
    },
    // left配置
    leftCfg: {
      type: Object,
      default: () => {
        return {}
      },
    },
    centerCfg: {
      type: Object,
      default: () => {
        return {}
      },
    },
    // right配置
    rightCfg: {
      type: Object,
      default: () => {
        return {}
      },
    },
    footerCfg: {
      type: Object,
      default: () => {
        return {}
      },
    },

  },
  data () {
    let defLy = {
      header: false,
      left: false,
      center: true,
      right: false,
      footer: false,
    }
    let defCfg = {
      title: '',
      // 是否显示expand按钮
      expand: false,
      expandText: 'more',
      showBar: false,
      barHeight: '62px',
      state: true, // 是否是展开状态
      showBorder: true, // 是否显示灰色隔开框,默认显示
      cssClass: '', // css
      toolBarStyle: {}, // 工具条的样式
      layoutConStyle: {}, // 容器的样式
      style: {}, // 整个框框的样式
      expandCallback: () => { // 点击按钮收起或者展开的回调

      },
    }
    let centerDefCfg = {
      title: '',
      showBar: false,
      ShowFooter: false,
      footerHeight: '62px',
      barHeight: '62px',
      style: {},
      expandCallback: () => {

      },
    }
    return {
      defCfg,
      centerDefCfg,
      defLayout: {
        ...defLy,
        ...this.layout,
      },
      layoutCfg: {
        ...defLy,
        ...this.layout,
      },
    }
  },
  computed: {
    centerConStyle () {
      let h = '100%'
      h = `calc(100% -  ${this.center.showBar ? `${this.center.barHeight}` : `0px`}
        - ${this.center.showFooter ? this.center.footerHeight : `0px`}
        )`

      return {
        height: h,
        ...this.center.layoutConStyle,
      }
    },
    header () {
      return {
        ...this.defCfg,
        ...this.headerCfg,
      }
    },
    left () {
      return {
        ...this.defCfg,
        ...this.leftCfg,
      }
    },
    center () {
      return {
        ...this.centerDefCfg,
        ...this.centerCfg,
      }
    },
    right () {
      return {
        ...this.defCfg,
        ...this.rightCfg,
      }
    },
    footer () {
      return {
        ...this.defCfg,
        ...this.footerCfg,
      }
    },
    headerStyle () {
      return {
        top: '0px',
        height: this.checkCfgData(this.layoutCfg.header),
        width: '100%',
        ...this.header.style,
      }
    },
    leftStyle () {
      return {
        top: this.checkCfgData(this.layoutCfg.header),
        bottom: '0px',
        left: '0px',
        width: this.checkCfgData(this.layoutCfg.left),
        ...this.left.style,
      }
    },
    rightStyle () {
      return {
        top: this.checkCfgData(this.layoutCfg.header),
        bottom: this.checkCfgData(this.layoutCfg.footer),
        right: '0px',
        width: this.checkCfgData(this.layoutCfg.right),
        ...this.right.style,
      }
    },
    centerStyle () {
      return {
        top: this.checkCfgData(this.layoutCfg.header),
        bottom: this.checkCfgData(this.layoutCfg.footer),
        left: this.checkCfgData(this.layoutCfg.left),
        right: this.checkCfgData(this.layoutCfg.right),
        ...this.center.style,
      }
    },
    footerStyle () {
      return {
        bottom: '0px',
        left: this.checkCfgData(this.layoutCfg.left),
        right: '0px',
        height: this.checkCfgData(this.layoutCfg.footer),
        ...this.footer.style,
      }
    },
  },
  created () {
    this.initState()
  },
  methods: {
    // 初始化状态
    initState () {
      this.header.state === false && (this.layoutCfg.header = this.header.barHeight)
      this.left.state === false && (this.layoutCfg.left = '35px')
      this.right.state === false && (this.layoutCfg.right = '35px')
      this.footer.state === false && (this.layoutCfg.footer = this.footer.barHeight)
    },
    // header expand
    headerExpandHandler () {
      this.header.state = !this.header.state
      if (this.header.state) {
        this.layoutCfg.header = this.layout.header || this.defLayout.header
      } else {
        this.layoutCfg.header = this.header.barHeight
      }
      if (typeof this.header.expandCallback == `function`) {
        this.header.expandCallback(this.header.state)
      }
    },
    leftExpandHandler () {
      this.left.state = !this.left.state
      if (this.left.state) {
        this.layoutCfg.left = this.layout.left || this.defLayout.left
      } else {
        this.layoutCfg.left = '35px'
      }
      if (typeof this.left.expandCallback == `function`) {
        this.left.expandCallback(this.left.state)
      }
    },
    rightExpandHandler () {
      this.right.state = !this.right.state
      if (this.right.state) {
        this.layoutCfg.right = this.layout.right || this.defLayout.right
      } else {
        this.layoutCfg.right = '35px'
      }
      if (typeof this.right.expandCallback == `function`) {
        this.right.expandCallback(this.right.state)
      }
    },
    footerExpandHandler () {
      this.footer.state = !this.footer.state
      if (this.footer.state) {
        this.layoutCfg.footer = this.layout.footer || this.defLayout.footer
      } else {
        this.layoutCfg.footer = this.footer.barHeight
      }
      if (typeof this.footer.expandCallback == `function`) {
        this.footer.expandCallback(this.footer.state)
      }
    },
    // 检查配置过来的数据是否正确
    checkCfgData (data) {
      return !isNaN(parseInt(data)) ? data : '0px'
    },
  },
}
</script>

