<template>
  <div class="steps-polish-two" v-if="!!polishPage">
    <el-space :size="14" style="width: 100%">
      <el-icon @click="docs.setCurrentPolish(0)" style="cursor: pointer">
        <ArrowLeftBold />
      </el-icon>
      {{ polishTitle }}
    </el-space>
    <el-divider />
    <el-form
      :model="polishFormData"
      ref="polishFormDataRef"
      label-width="auto"
      style="max-width: 600px"
      label-position="top"
      class="steps-polish-two-form"
    >
      <div class="polish-content" v-if="[2, 3].includes(polishPage)">
        <el-form-item label="字数要求" required>
          <el-select v-model="polishFormData['字数要求']" placeholder="请选择">
            <el-option v-for="(item, index) in wordCountLimit" :key="index" :label="item" :value="item" />
          </el-select>
        </el-form-item>
      </div>
      <div class="polish-content" v-else>
        <el-form-item label="优化方向" required prop="优化方向" :rules="[{required: true, validator: valiDirection, trigger: 'change' }]">
          <el-checkbox-group v-model="polishFormData['优化方向']">
            <el-checkbox label="通顺表达" value="通顺表达" />
            <el-checkbox label="增强感情" value="增强感情" />
            <el-checkbox label="增强说服力" value="增强说服力" />
            <el-checkbox label="提升文采" value="提升文采" />
            <el-checkbox label="增加细节" value="增加细节" />
          </el-checkbox-group>
          <el-input v-model="polishFormData['优化方向1']" placeholder="自定义润色需求" />
        </el-form-item>
        <el-form-item label="长度要求" prop="长度要求" :rules="[{required: true, message: '请选择长度要求', trigger: 'change' }]">
          <el-radio-group v-model="polishFormData['长度要求']">
            <el-radio value="尽量保持">尽量保持</el-radio>
            <el-radio value="尽量精简">尽量精简</el-radio>
            <el-radio value="尽量扩写">尽量扩写</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
    </el-form>
    <el-button type="primary" style="width: 100%" @click="createPolish">开始生成</el-button>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { polishConfig, wordCountLimit } from '../formConfig'
import useStore from '@/stores'

const emit = defineEmits(['createTitle', 'polish', 'extend', 'shorten'])

const polishPage = computed(() => docs.currentPolish)
const { docs } = useStore()
const polishFormDataRef: any = ref(null)
const polishFormData: any = ref({})

const polishTitle = computed(() => {
  return polishConfig.filter((el: any) => el.id === polishPage.value)[0].title
})

const valiDirection = (_: any, value: any, callback: any) => {
  if (!polishFormData.value['优化方向'] && !polishFormData.value['优化方向1']) {
    return callback(new Error('请选择优化方向！'))
  }
  return callback()
}

const createPolish = async () => {
  await polishFormDataRef.value.validate();
  switch (polishPage.value) {
    case 0:
      emit('createTitle')
      break
    case 1:
      // 润色
      const result = {
        '长度要求': polishFormData.value['长度要求'],
        '优化方向': [...(polishFormData.value['优化方向'] || []), polishFormData.value['优化方向1']]
      }
      emit('polish', result)
      break
    case 2:
      // 扩写
      emit('extend', polishFormData.value)
      break
    case 3:
      // 缩写
      emit('shorten', polishFormData.value)

      break
  }
}
defineExpose({
  createPolish
})
</script>
<style scoped lang="scss">
.steps-polish-two {
  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;

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

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

      img {
        position: absolute;
        right: 20px;
        top: 19px;
      }
    }
  }
}

.steps-polish-two {
  height: calc(100% - 30px);
  background: #fff;
  border-radius: 20px;
  padding: 15px;
  display: flex;
  flex-direction: column;

  &-form {
    flex: 1;
  }
}
</style>
