<template>
  <div
    class="lz-container"
    :class="[playState ? 'anm-' + val.animationName : '']"
    :style="{
      display: val.display,
      position: 'absolute',
      width: val.width  + '%',
      height: val.height  + '%',
      left: val.left  + '%',
      top: val.top  + '%',
      zIndex: val.z,
      backgroundColor: val.bgColor,
      backgroundImage: 'url(' + val.backPic + ')',
      borderStyle: 'solid',
      borderRadius: val.radius + '%',
      borderColor: val.borderColor,
      borderWidth: val.borderWidth + '%',
      flexDirection: val.dir,
      justifyContent: val.justify,
      alignItems: val.align
    }"
  >
    <!-- 子组件 -->
    <slot></slot>
  </div>
</template>

<script>
import stylec from "./style.vue";
const WIDGET_NAME = "braid-container";

export default {
  name: WIDGET_NAME,
  icon: {
    type: "ios-archive"
  },
  title: "容器",
  panel: stylec,
  setting: {
    type: WIDGET_NAME,
    isContainer: true,
    hasGuide: true,
    isUpload: false,
    isChild: false,
    draggable: true,
    resizable: true,
    name: "",
    width: 30,
    height: 30,
    left: 10,
    offsetLeft: 10,
    offsetTop: 10,
    offsetWidth: 100,  // 父组件相对于page的百分比
    offsetHeight: 100, // 父组件相对于page的百分比
    top: 10,
    z: 0,
    display: "flex",
    bgColor: "#fff",
    backPic: "",
    backPicUrl: "",
    radius: 0,
    borderColor: "",
    borderWidth: 0,
    dir: "row",
    justify: "flex-start",
    align: "flex-start",
    belong: "page",
    animationName: ""
  },
  props: ["h", "val", "w", "playState"],
  mounted () {
  }
};
</script>

<style scoped>
.lz-container {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
</style>
