<script setup lang="ts">
import { ref } from 'vue'
import addimg from '../images/default_add@2x.png'

interface TypeItem {
  description: string
}
interface Props {
  stepDataprops: TypeItem []
}
const props = withDefaults(defineProps<Props>(), {})

const stepData = ref(props.stepDataprops)
watch(
  () => props.stepDataprops,
  (current) => {
    stepData.value = current
    if(stepData.value == null) {
      stepData.value = []
    }
  }
)

// 上移
const updatastep = (index: number) => {
  if (index > 0) {
    const temp = stepData.value[index - 1]
    stepData.value[index - 1] = stepData.value[index]
    stepData.value[index] = temp
  }
}

// 下移
const downdatastep = (index: number) => {
  if (index < stepData.value.length - 1) {
    const temp = stepData.value[index + 1]
    stepData.value[index + 1] = stepData.value[index]
    stepData.value[index] = temp
  }
}

// 删除
const deletedatastep = (index: number) => {
  stepData.value.splice(index, 1)
}

// 添加步骤
const addstepdata = () => {
  stepData.value.push({
    description: ''
  })
}

defineExpose({
  addstepdata
})
</script>

<template>
  <div class="empty" v-if="stepData.length === 0">
    <div>
      <div><img :src="addimg" width="100" /></div>
      <el-button @click="addstepdata" class="el-button--main">+ 添加步骤</el-button>
    </div>
  </div>
  <div
    class="detail-step-item"
    v-else
    v-for="(stepItem, index) in stepData"
    :key="index"
  >
    <div class="regulation">
      <div class="left-step-icon">{{ index+1 }}</div>
      <div class="right-info">
        <el-input v-model="stepItem.description" type="textarea" style="width: 92%;"></el-input>
        <el-button class="el-button--noborder--configuration" style="margin-left: 4px;" @click="updatastep(index)">
          <span class="font_family icon-icon_moveup_b icon_dark"></span>
        </el-button>
        <el-button @click="downdatastep(index)" class="el-button--noborder--configuration">
          <span class="font_family icon-icon_movedown_b icon_dark"></span>
        </el-button>
        <el-button @click="deletedatastep(index)" class="el-button--noborder--configuration">
          <span class="font_family icon-icon_delete_b icon_dark"></span>
        </el-button>
      </div>
    </div>
    <div v-if="index+1 !== stepData.length " class="line"></div>
  </div>
</template>

<style lang="scss" scoped>
.empty {
  display: flex;
  margin-top: 30px;
  justify-content: center;
  height: 215px;
}
:deep(.el-button, .el-button.is-round) {
  padding: 8px 15px;
}
.el-button--main {
  margin-top: 10px;
}
.detail-step-item {
  position: relative;
}
.regulation {
  display: flex;
}
.left-step-icon {
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  background-color: var(--color-neutral-1);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 22px;
  color: var(--color-mode);
}
.line {
  position: absolute;
  top: 22px;
  height: 74px;
  margin-left: 10px;
  border-left: 1px solid var(--color-neutral-1);
}
.right-info {
  width: 100%;
  margin-bottom: 16px;
  display: flex;
}
:deep(.el-button.el-button--noborder--configuration) {
  padding: 20px 12px;
}
</style>