<template>
  <!-- 内容 -->
  <div class="py-2 px-2">
      <div v-for="(object,index) in taskList" :key="index" class="rounded" >
        <div class="border-b pl-2.5 pr-1 py-2 w-full flex items-center text-sm" @click="clickIcon(index)">
          <app-icon
            :icon-name="checked === index+'' ? 'radio-checked': 'radio'"
            class-name="w-4 h-4 mr-6 flex items-center"
          />
          <div class=" px-2 mr-2 rounded-full" :class="isColor(object)">{{object.typeName}}</div>
          <div >{{object.thing}}</div>
        </div>
      </div>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'

  interface Task {
    id:number
    type: 'urgent' | 'important' |'common' ,
    typeName: string,
    thing: string
  }
export default Vue.extend({
  name: "Card",
  components: {
    'app-icon': () => import('@/components/common/Icon.vue'),
  },
  props: {
      taskList: Array as PropType<Array<Task>>,
      
    },
  data() {

    return {
      checked:'',
    }
  },
  computed: {
    
 
  },

  methods:{
    clickIcon(index:number){
      this.checked=index+''
    },
    isColor(object: {type: string, typeName: string,thing: string}){
      if(object.type==='urgent'){
        return 'border border-tag-red text-tag-red'
      }else if(object.type==='important'){
        return 'border border-tag-yellow  text-tag-yellow'
      }else if(object.type==='common'){
        return 'border border-tag-primary  text-tag-primary'
      }
    },

  }
})
</script>

<style lang="less" scoped>

</style>