<template>
  <div>
    <section class="h-72 head flex-between-center px-20">
      <section class="flex-align-center">
        <div class="flex-center cursor-pointer w-28 h-28" @click="router.back()">
          <el-icon>
            <ArrowLeftBold />
          </el-icon>
        </div>
        <div class="ml-10">
          <div>新剧本策划</div>
          <div class="flex-align-center gap-10 line-h20 text-888 mt-2">
            <span>16:9</span>
            <div class="line-r"></div>
            <span>720p</span>
            <div class="line-r"></div>
            <span>写实通用</span>
            <el-button link style="color: #595dff;">查看剧本</el-button>
          </div>
        </div>
      </section>

      <section class="flex-align-center gap-20 w-500">
        <el-button v-for="(item, index) in steps" :key="index" class="px-24 box"
          :class="{ active: index == indexVal, noactive: index != indexVal, weiel: index < steps.length - 1 }"
          @click="changeTab(index)">
          <div class="flex-align-center flex-col">
            <el-icon v-if="item.name == '剧本'" size="16">
              <Notebook />
            </el-icon>
            <el-icon v-if="item.name == '设定'" size="16">
              <Reading />
            </el-icon>
            <el-icon v-if="item.name == '分镜'" size="16">
              <Film />
            </el-icon>
            <el-icon v-if="item.name == '视频'" size="16">
              <VideoCamera />
            </el-icon>
            <span class="fs-12 span">{{ item.name }}</span>
          </div>
        </el-button>
      </section>
      <section class="">
        <div class="flex-align-center h-32 px-10 rounded-4 jinbi">
          <svg t="1779335788481" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="9953" width="20" height="20">
            <path
              d="M408.8832 353.9968c40.7552-87.1424 61.0304-130.7648 92.7744-136.192a61.44 61.44 0 0 1 20.6848 0c31.744 5.4272 52.0192 49.0496 92.7744 136.192 7.8848 16.9984 11.8784 25.6 18.0224 32.3584a61.44 61.44 0 0 0 4.5056 4.5056c6.8608 6.144 15.36 10.1376 32.3584 18.0224 87.1424 40.7552 130.7648 61.0304 136.192 92.7744a61.44 61.44 0 0 1 0 20.6848c-5.4272 31.744-49.0496 52.0192-136.192 92.7744-16.9984 7.8848-25.6 11.8784-32.3584 18.0224a61.44 61.44 0 0 0-4.5056 4.5056c-6.144 6.8608-10.1376 15.36-18.0224 32.3584-40.7552 87.1424-61.0304 130.7648-92.7744 136.192a61.44 61.44 0 0 1-20.6848 0c-31.744-5.4272-52.0192-49.0496-92.7744-136.192-7.8848-16.9984-11.8784-25.6-18.0224-32.3584a61.44 61.44 0 0 0-4.5056-4.5056c-6.8608-6.144-15.36-10.1376-32.3584-18.0224-87.1424-40.7552-130.7648-61.0304-136.192-92.7744a61.44 61.44 0 0 1 0-20.6848c5.4272-31.744 49.0496-52.0192 136.192-92.7744 16.9984-7.8848 25.6-11.8784 32.3584-18.0224a61.44 61.44 0 0 0 4.5056-4.5056c6.144-6.8608 10.1376-15.36 18.0224-32.3584z"
              p-id="9954" fill="#5252ff"></path>
          </svg>
          <span class="text-555 ml-4">882</span>
        </div>
      </section>
    </section>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ArrowLeftBold, Notebook, Reading, Film, VideoCamera } from '@element-plus/icons-vue'
import router from '@/router';

const emit = defineEmits(['changeTab'])
const props = defineProps({
  indexVal: {
    type: Number,
    default: 0
  }
})

const steps = ref([
  { name: '剧本', active: true, icon: 'Notebook', finished: true },
  { name: '设定', active: false, icon: '', finished: false },
  { name: '分镜', active: false, icon: '', finished: false },
  { name: '视频', active: false, icon: '', finished: false },
])
const changeTab = (index: number) => {
  emit('changeTab', index)
}

defineExpose({
  changeTab
})

</script>
<style lang="scss" scoped>
.head {
  border-bottom: 1px solid #eee;

  .line-r {
    height: 12px;
    width: 1px;
    background: #ddd;
  }

  .box {
    border: 1px solid #eee;
    border-radius: 100px;
    height: 44px;
    margin: 0;

    .span {
      margin: 0;
      margin-top: 6px;
    }
  }

  .active {
    background-color: #f3f3ff;
    border-color: #595dff80;
    color: #595dff;
  }

  .noactive {
    &:hover {
      background-color: #f5f5f5;
    }
  }

  .weiel {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      right: -21px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 1px;
      background: #cfcfcf;
    }
  }

  .jinbi {
    background-color: #efeff7;
  }
}
</style>