<template>
  <div class="layout-type-list">
    <div
      @click="handleChangeLayoutType(item.value)"
      :class="['layout-type-list--item', { checked: config.layoutType === item.value }]"
      v-for="(item, index) in layoutList"
      :key="index"
    >
      <div class="layout-type-list--imgdiv">
        <img class="layout-type-list--img" :src="item.img" />
        <div class="layout-type-list--checked" v-if="config.layoutType === item.value">
          <i class="el-icon-check"></i>
        </div>
      </div>
      <p class="layout-type-list--label">{{ $t(item.label) }}</p>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'WebcodeLayout',
    components: {},
    inject: ['formConfig'],
    data() {
      return {
        // 布局设置
        layoutList: [
          {
            img: `/mars/img/onlineform/layout.png`,
            value: 1,
            label: '普通列表',
          },
          {
            img: `/mars/img/onlineform/layout-left.png`,
            value: 2,
            label: '左侧树形+普通列表',
          },
        ],
      };
    },
    computed: {
      config() {
        return this.formConfig;
      },
    },
    created() {},
    methods: {
      handleChangeLayoutType(type) {
        this.config.layoutType = type;
      },
    },
  };
</script>
<style lang="scss" scoped>
  .layout-type-list {
    display: flex;
    flex-wrap: wrap;
    padding: 16px 0;

    &--item {
      width: 144px;
      margin: 0 0 16px 16px;
    }

    &--imgdiv {
      width: 144px;
      height: 100px;
      background: #f1f2f5;
      border-radius: 2px;
      overflow: hidden;
      cursor: pointer;
      position: relative;
      border: 1px solid #f1f2f5;
    }

    &--item.checked &--imgdiv {
      border: 1px solid #409eff;
    }

    &--img {
      height: 100%;
      width: 100%;
    }

    &--label {
      font-size: 12px;
      color: #606266;
      margin-top: 8px;
      text-align: center;
    }

    &--checked {
      border: 12px solid #409eff;
      border-left: 12px solid transparent;
      border-bottom: 12px solid transparent;
      border-top-right-radius: 2px;
      position: absolute;
      right: 3px;
      top: 3px;
      .el-icon-check {
        position: absolute;
        top: -10px;
        left: -2px;
        font-size: 12px;
        color: #fff;
      }
    }
  }
</style>
