<template>
    <div class="ht-page-operate-detail">
        <ht-base-title v-bind="titleData">{{titleData.title}}</ht-base-title>
        <div class="ht-page-operate-detail-header">
            <slot></slot>
        </div>
        <ht-base-tabs :animated="false" :value="tabsData[0].tab.name" v-if="tabsData.length>1">
            <template v-for="(item,index) in tabsData">
                <ht-base-tab-pane :label="item.tab.label" :name="item.tab.name">
                    <ht-block-form v-bind="item" :style="style"></ht-block-form>
                </ht-base-tab-pane>
            </template>
        </ht-base-tabs>
        <ht-block-form v-bind="tabsData[0]" :style="style" v-else></ht-block-form>
    </div>
</template>

<script>
  export default {
      name: 'HtPageOperateDetail',
      props:{
          //note 包含title信息的对象
          titleData:{
              type:Object,
          },
          //note 包含整个页签的信息
          tabsData:{
              type:Array,
              default(){
                  return []
              }
          },
          //note form表单的样式
          formStyle:{
              type:Object,
              default(){
                  return {
                      align:'center',
                      width:'60%'
                  }
              }
          }
      },
      computed:{
          style(){
              let width = this.formStyle.width.toString();
              let align = '';
              if(width.charAt(width.length - 1) === '%') {
                  width = this.formStyle.width;
              } else {
                  width = this.formStyle.width + 'px';
              }
              switch(this.formStyle.align){
                  case 'center':
                      align='0 auto';
                      break;
                  case 'right':
                      align='0 0 auto auto'
              }

              return {
                  width:width,
                  margin:align
              }
          }
      }
  }
</script>
<style>
    .ht-page-operate-detail {

    }
</style>

