<template>
  <div v-if="formConfig.currentItem.componentCode == 'step'">
    <a-form-item>
      <template #label>
        <a-space :size="10">
          <span>步骤条的配置:</span>
          <a-button type="primary" class="border-radius" @click="addStep">新增</a-button>
        </a-space>
      </template>
      <div class="step-list" v-for="(item, index) in formConfig.currentItem.formItemStep" :key="index">
        <div class="step-left">
          <div class="step-left-top">
            <div class="step-left-title">标题:</div>
            <div class="step-left-input">
              <a-input v-model:value="item.title"></a-input>
            </div>
          </div>
          <div class="step-left-bottom">
            <div class="step-left-title">描述:</div>
            <div class="step-left-input">
              <a-input v-model:value="item.detail"></a-input>
            </div>
          </div>
        </div>
        <div class="step-delete" @click="deleteStepItem(index)"><delete-outlined /></div>
      </div>
    </a-form-item>
  </div>
</template>

<script setup name="StepAttr">
import { inject } from 'vue';

const formConfig = inject('formConfig');

// 新增step
const addStep = () => {
  let obj = {
    title: '',
    detail: ''
  }
  if (!formConfig.value?.currentItem?.formItemStep) {
    formConfig.value.currentItem.formItemStep = [];
  }
  formConfig.value.currentItem.formItemStep.push(obj);
}

// 删除
const deleteStepItem = (index) => {
  formConfig.value.currentItem.formItemStep.splice(index, 1);
}
</script>

<style scoped lang="less">
.step-list {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.step-left-top,
.step-left-bottom {
  display: flex;
  align-items: center;
  margin: 10px 10px 10px 0;
  .step-left-title {
    margin-right: 5px;
  }
}
.step-delete {
  cursor: pointer;
  font-size: 18px;
  :hover {
    color: red;
  }
}
</style>
