
<template>
  <div class="steps-polish-one" v-if="!docs.currentPolish">
    <ul class="steps-polish-one-ul">
      <li
        v-for="(v, i) in polishConfig"
        :key="i"
        class="steps-polish-one-ul-li"
        @click="clickPolish(v.id)"
      >
        <div class="title">{{ v.title }}</div>
        <div class="description">{{ v.description }}</div>
        <img :src="v.url" alt="" />
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import { polishConfig } from '../formConfig'
import useStore from '@/stores'
const emit = defineEmits(['createTitle'])
const props = defineProps({
  clickBefore: {
    type: Function,
    default: () => {}
  }
})
enum CurrentPolish {
  GenerateTitle = 0,
  Polish = 1,
  Expand = 2,
  Shrink = 3
}

const { docs } = useStore()
const clickPolish = (i: CurrentPolish) => {
  if (props.clickBefore()) return false;
  if (i === 0) {
    return emit('createTitle')
  }
  docs.setCurrentPolish(i)
}

</script>

<style scoped lang="scss">

.steps-polish-one {
  margin: 0 20px;

  &-ul {
    &-li {
      background: #ffffff;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid rgba(48, 103, 239, 0.2);
      padding: 13px 20px;
      position: relative;
      margin-bottom: 10px;
      cursor: pointer;

      .title {
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        line-height: 18px;
      }

      .description {
        font-weight: 400;
        font-size: 12px;
        color: #666666;
        line-height: 18px;
        margin-top: 8px;
      }

      img {
        position: absolute;
        right: 20px;
        top: 19px;
      }
    }
  }
}
</style>
