<template>
  <div v-if="formConfig.currentItem.componentCode == 'grid'">
    <a-form-item label="栅格间距:">
      <a-input-number v-model:value="formConfig.currentItem.gutter" :min="0" style="width: 100%" />
    </a-form-item>
    <a-form-item label="栅格列配置项:">
      <a-row :gutter="8">
        <div class="option-change-box" v-for="(val, index) in formConfig.currentItem.children" :key="index">
          <a-col :span="18"><a-input-number style="width: 100%" :max="24" v-model:value="val.itemColumnNumber" /></a-col>
          <a-col :span="6"
            ><div @click="handleDelete(index)" class="option-delete-box">
              <delete-outlined /></div
          ></a-col>
        </div>
        <a-col :span="24"><a @click="handleAddCol">添加</a></a-col>
      </a-row>
    </a-form-item>
  </div>
</template>

<script setup name="TitleAttr">
import { getUUID } from '@/utils/common/util';
import { inject } from 'vue';

const formConfig = inject('formConfig');

const handleDelete = deleteIndex => {
  formConfig.value.currentItem.children = formConfig.value.currentItem.children.filter((val, index) => index !== deleteIndex);
};

const handleAddCol = () => {
  let obj = {
    itemId: getUUID(19),
    itemColumnNumber: 12,
    componentCode: 'col',
    children: []
  };
  formConfig.value.currentItem.children.push(obj);
};
</script>

<style scoped lang="less">
.option-change-box {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  padding-bottom: 6px;

  .option-delete-box {
    margin-top: 3px;
    background: #ffe9e9;
    color: #f22;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.3s;

    &:hover {
      background: #f22;
      color: #fff;
    }
  }
}
</style>
