<template>
  <el-space :size="30">
    <span
      v-for="(v, i) in sceneTypeData"
      :key="i"
      style="font-weight: 600; font-size: 14px; cursor: pointer; margin-top: 20px;margin-bottom: 10px;"
      :style="{ color: +currentSceneType === i ? '#3067ef' : '' }"
      @click="handleChangeSceneType(i)"
      >{{ v }}</span
    >
  </el-space>
  <el-row :gutter="10" justify="space-between">
    <el-col :span="12" v-for="(v, i) in sceneData" :key="i">
      <div
        style="
          text-align: center;
          line-height: 32px;
          background: #ffffff;
          margin-top: 10px;
          cursor: pointer;
          border: 1px solid #fff;
        "
        @click="docs.setCurrentScene(v.id)"
        :class="currentScene === v.id ? 'scene-active' : ''"
      >
        {{ v.template_name }}
      </div>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { isEmpty } from 'lodash-es'
import { computed, ref } from 'vue'
import { sceneTypeData } from '../formConfig'
import useStore from '@/stores'
import { useRoute } from 'vue-router'
const { docs } = useStore()
const { query } = useRoute()
import { getTemplate } from '@/api/writing'


const sceneData: any = ref([])

const getSceneData = async (sceneType: number) => {
  // todo 替换接口返回数据， sceneConfig 去除
  const data = await getTemplate(sceneType)
  // 默认选中第0项
  if (!isEmpty(data.data)) {
    docs.setCurrentScene(data.data[0].id)
  }
  sceneData.value = data?.data;
}

const init = () => {
  // 设置默认场景类型
  if (!isEmpty(query) && query.scene) {
    const sceneType = +query?.scene;
    // @ts-ignore
    docs.setCurrentSceneType(sceneType)
    getSceneData(sceneType);
  }
}

init();

const handleChangeSceneType = (sceneType: any) => {
  getSceneData(sceneType)
  docs.setCurrentSceneType(sceneType)
}

const currentSceneType = computed(() => {
  if (sceneData.value.length === 0) {
    getSceneData(docs.currentSceneType)
  }
  return docs.currentSceneType
})

const currentScene = computed(() => docs.currentScene)
</script>
<style scoped lang="scss">
.scene-active {
  color: #3067ef;
  border: 1px solid rgba(48, 103, 239, 0.5) !important;
}
</style>
