<template>
  <div
    :class="'ts-title-panel panel_border '+(isShadow?'monitor__block':'')+(borderRadius?' border-radius':'')"
    :style="{borderRight:isBorder?borderRight:'none', borderLeft:isBorder?borderLeft:'none', borderTop:isBorder?borderTop:'1px solid #fff', borderBottom:isBorder?borderBottom:'none', backgroundColor:data.groundColor||groundColor}"
  >
    <div
      class="form-title2"
      :title="title"
      :style="{fontWeight:data.titleWeight?'bold':'500',
       backgroundColor:data.titleBackgroundColor||titleBackgroundColor,
       color:data.titleColor||titleColor,
      textAlign:data.titlePosition?(data.titlePosition=='flex-end'?'right':(data.titlePosition=='flex-start'?'left':'center')):titlePosition,alignItems: 'center'}"
      v-if="(showTitleSlot||title)&&titleStructure==0"
    >
      {{title}}
      <slot name="titleSlot"></slot>
    </div>
    <div
      ref="panel"
      :class="((showTitleSlot||title)?'panel-content':'height100')"
      :style="{background:backgroundColor||data.backgroundColor}"
    >
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ts-title-panel',
  props: {
    isShadow: {
      // 是否有阴影
      type: Boolean,
      default: false
    },
    data: {
      type: [Object],
      default: () => {
        return {}
      }
    },
    showTitleSlot: {
      // 是否显示标题插槽
      type: Boolean,
      default: false
    },
    title: {
      type: [String, Number],
      default: ''
    },
    id: {
      type: String,
      default: ''
    },
    borderRadius: {
      // 是否有圆角
      type: Boolean,
      default: false
    },
    borderColor:{
      type:String
    },
    isBorder: {
      // 是否有边框
      type: Boolean,
      default: true
    },
    backgroundColor: {
      //面板背景颜色
      type: String,
      default: '#fff'
    },
    titleBackgroundColor: {
      // 标题面板背景颜色
      type: String,
      default: '#fff'
    },
    groundColor: {
      // 整体面板颜色
      type: String,
      default: '#fff'
    },
    titleColor: {
      // 标题颜色
      type: String,
      default: 'var(--base-black)'
    },
    titleStructure: {
      // 标题结构方式 默认左右结构
      type: String,
      default: '0'
    },
    titlePosition: {
      type: String,
      default: 'flex-start' // flex-start;flex-end;center
    }
  },
  data() {
    return {
      borderRight: '1px solid var(--border_color)',
      borderLeft: '1px solid var(--border_color)',
      borderBottom: '1px solid var(--border_color)',
      borderTop: '1px solid var(--border_color)'
    }
  },
  created() {},
  mounted() {
    this.initPanel()
  },
  methods: {
    initPanel() {
      if (this.data) {
        // this.titleBackgroundColor = this.data.titleBackgroundColor
        // this.backgroundColor = this.data.backgroundColor
        if (
          this.data.borderChoose &&
          typeof this.data.borderChoose == 'string'
        ) {
          this.data.borderChoose = [
            { name: 'name1', value: 1 },
            { name: 'name2', value: 2 },
            { name: 'name3', value: 3 },
            { name: 'name4', value: 4 }
          ]
        }
        let borderColor = this.data.borderColor ||borderColor|| 'var(--border_color)'
        var choose = this.data.borderChoose
        if (typeof choose == 'object') {
          this.borderTop =
            choose.findIndex(res => res.name == 'name1') != '-1'
              ? '3px solid ' + borderColor
              : 'none'
          this.borderBottom =
            choose.findIndex(res => res.name == 'name2') != '-1'
              ? '3px solid ' + borderColor
              : 'none'
          this.borderLeft =
            choose.findIndex(res => res.name == 'name3') != '-1'
              ? '3px solid ' + borderColor
              : 'none'
          this.borderRight =
            choose.findIndex(res => res.name == 'name4') != '-1'
              ? '3px solid ' + borderColor
              : 'none'
        } else {
          this.borderRight = '1px solid ' + borderColor
          this.borderBottom = '1px solid ' + borderColor
          this.borderLeft = '1px solid ' + borderColor
          this.borderTop = '1px solid ' + borderColor
        }
      }
    }
  },
  watch: {
    data: {
      handler(n) {
        this.data = n
        this.initPanel()
      },
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>

.border-radius {
  border-radius: 6px;
}
.form-title-up {
  line-height: 14px;
  font-size: 14px;

  
  /* padding-left: 10px; */
  // margin: 10px 15px;
  span {
    padding: 8px;
    // border-bottom: var(--base-acv) 2px solid;
    font-weight: bold;
  }
}
.monitor__block {
  height: 100%;
  // overflow: hidden;
  margin: 5px 6px 0 3px;
  position: relative;
  font-size: 12px;
  background: #fff;
  border: 1px solid var(--border_color);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
  .monitor__block_con {
    left: 0;
    right: 0;
    top: 0px;
    bottom: 0;
    // overflow-y: auto;
    // position: absolute;
    height: 100%;
  }
}
.ts-title-panel {
  width: 100%;
  height:100%;
  box-sizing: border-box;
  // border: 1px solid var(--border_color);
  // border-right: 1px solid var(--border_color);
  // border-left: 1px solid var(--border_color);
  // border-bottom: 1px solid var(--border_color);
  // border-top:1px solid var(--border_color);
  .form-title2 {
    border: none;
    width: 100%;
    padding: 0 5px;
    box-sizing: border-box;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    // padding: 10px 15px;
    height: 34px;
    line-height: 34px;
    overflow: hidden;
    margin: 0;
    // .title-i {
    //   width: 4px;
    //   background: var(--base-acv);
    //   height: 14px;
    //   margin-right: 10px;
    // }
  }
  .panel-content {
    // border-top: 1px solid var(--border_color);
    height: calc(100% - 34px);
    margin: 0 6px;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }
}
</style>
