<template>
  <div class="min-w-60">
    <div  class="steps-content">
      <!-- <div class="mb-2">
        <div class="text-x" v-for="step,i in props.steps" :key="step.id">
        {{ `步骤${i + 1}：`  +  step.description }}
      </div> -->
      <!-- </div> -->
      <div >
        <div class=" font-semibold">
          执行
        </div>
        <div  class="break-all mb-0.5" v-for="action,index in props.content" :key="index">
        {{ actionMap[action.action]?.text && actionMap[action.action].text + '：'+ action[actionMap[action.action].valueKey]}} 
      </div>
      </div>
      <div v-if="props.finish">{{props.finish === '1' ? '执行完成' : '执行出错'}}</div>
      <el-progress v-else :show-text="false" class="w-full !h-0.5 overflow-hidden"  :percentage="100"
      :indeterminate="true"
      :duration="2"/>
    </div>
  </div>
</template>
<script lang="js" setup>
import { onMounted } from 'vue'
import { actionMap } from '@/utils/actionMap'

onMounted(() => {
    chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
    })
})

const props = defineProps({
  content: {
    type:Array,
    required: true
  },
  finish: {
    type: String,
    request:true
  }, 
  steps: {
    type:Array,
    required: true
  },
  title: {
    type: String,
    request:true
  }
})

</script>

<style scoped>
</style>
