<template>
  <div :class="PREFIX" :style="style"<% if (event) { %> @click="onClick"<% } %> >
    <% if (dataDynamic) { %><div>{{ content }}</div><% } %>
    <div v-if="$designTime" :class="`${PREFIX}-mask-wrapper`"></div>
  </div>
</template>

<script>
<% if (style) { %>import { postUnit } from '@platform/utils'

const getVarStr = space => {
  if (typeof space === 'number') {
    return postUnit(space)
  }
  if (typeof space === 'string') {
    return `var(--hcm-${space})`
  }
  return '0'
}<% } %>

export default {
  name: '<%= name %>',

  props: {<% if (dataDynamic) { %>
    content: {
      type: String,
      default: '',
    },<% } %><% if (dataSource) { %>
    // 数据源请求回来的值
    options: Array,
    // 固定值
    fixedOptions: Array,<% } %><% if (style) { %>
    boxArea: {
      type: Object,
      default: () => ({
        margin: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0,
        },
      }),
    },<% } %><% if (event) { %>
    actions: Object,<% } %>
  },

  data() {
    return {
      PREFIX: '<%= dirname %>',
    }
  },

  computed: {
    <% if (event) { %>
    /**
     * 事件执行
     */
    onClick() {
      const { actions } = this
      if ( actions && actions.change && actions.change.length > 0) {
        actions.click.forEach(action => {
          this.triggerAction(action)
        })
      }
    },<% } %>
    <% if (style) { %>
    style() {
      const { boxArea } = this
      const { margin = {} } = boxArea || {}

      const marginLeft = getVarStr(margin.left)
      const marginTop = getVarStr(margin.top)
      const marginRight = getVarStr(margin.right)
      const marginBottom = getVarStr(margin.bottom)

      return {
        marginLeft,
        marginTop,
        marginRight,
        marginBottom,
      }
    },<% } %><% if (linkage) { %>
    /**
     * 当值改变以后触发联动事件
     */
    onChange(val) {
      if (!this.$designTime) {
        this.triggerAction('onChange')
      }
    },
    /**
     * 必须 提供给系统中选择该筛选组件的值
     */
    getFilterKeyword() {
      return this.value.map(v => ({ value: `${v}` }))
    },<% } %>
  },
}
</script>

<style lang="less" scoped>
.<%= dirname %> {
  &-mask-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
</style>
