<template>
  <div style="text-align: center">
   
       <table style=" margin: auto;margin-top:50px; font-family: verdana,arial,sans-serif;font-size:16px;backgroundColor:#bdf6be;color:#333333;border-width: 1px;border-color: #666666; border-collapse: collapse;">
      <tr v-for="(items,indexs) in card" :key="indexs+1">
        
         <td v-for="(item,index) in card[indexs]" :key="index" style="border-width: 1px;
  padding: 8px;    border-style: solid;    border-color: #a9c6c9;">
          <el-span  v-if="index>1&&indexs>0&&indexs!=9">
             <el-tag type="success" v-for="(item1,index1) in item" :key="index1">
            {{item1.action_by_name}}
             {{item1.action_time}}
          </el-tag>
          </el-span>
<el-span  v-else>{{item}}</el-span> 
         </td>
      </tr>
      
     
    </table>
  
   
  </div>
</template>
<script>
import checkPermission from "@/utils/permission";
import { getCard} from "@/api/wpm";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

export default {
  components: { Pagination },
  data() {
    return {
     card:{},
    };
  },
  computed: {},
  watch: {},
  created() {
     this.id = this.$route.params.id;
     this.getCard();
   
  },
  methods: {
    checkPermission,
     getCard(){
        getCard(this.id).then((response) => {
        if (response.code==200) {
          this.card = response.data;
        }
      });
     }
  },
};
</script>
