<template>
  <div class="mainArea">
    <CCard color="" class="text-center welcome"  text-color="black">
      <blockquote class="card-blockquote">
        <h2>欢迎使用实验室管理系统</h2>
          <footer>welcome to 
            <cite title="Source Title">LIMS</cite>
          </footer>
      </blockquote>
    </CCard>
    <CCard>
        <CButton
          @click="quickPath = !quickPath"
          tag="button"
          block
          class="text-left shadow-none card-header">          
        <CIcon name="cil-justify-center" />
        <strong class="m-0">快捷入口</strong>
        </CButton>
        <CCollapse :show="quickPath">
          <CCardBody class="quickPathBox">
            <CCard v-for="items in quickPathList" :key="items.ch" 
            :color="items.color" 
            class="text-center welcome entrance" 
            body-wrapper  
            text-color="white"
            @click="jumpTo(items.to)"
            >
              <blockquote class="card-blockquote">
                <h5>{{items.ch}}</h5>
                  <footer> 
                    <cite title="Source Title">{{items.en}}</cite>
                    Management
                  </footer>
              </blockquote>
            </CCard>
          </CCardBody>
        </CCollapse>
    </CCard>
    <CCard>
        <CButton
          @click="recentTarget = !recentTarget"
          tag="button"
          block
          class="text-left shadow-none card-header">          
        <CIcon name="cil-justify-center" />
        <strong class="m-0">最近访问</strong>
        </CButton>
      <CCollapse :show="recentTarget">
      <CCardBody>
        <CListGroup>
          <CListGroupItem
          v-for="target in recentView" 
              class="d-flex justify-content-between align-items-center">
            {{target.name}}
            <CBadge color="" shape="pill">{{target.time}} </CBadge>
          </CListGroupItem>
        </CListGroup>
      </CCardBody>
      </CCollapse>
    </CCard>
    <CCard>
        <CButton
          @click="relatedNotification = !relatedNotification"
          tag="button"
          block
          class="text-left shadow-none card-header">          
        <CIcon name="cil-justify-center" />
        <strong class="m-0">最新动态</strong>
        </CButton>
      <CCollapse :show="relatedNotification">
      <CCardBody>
        <CListGroup>
          <CListGroupItem
          v-for="log in logs" 
              class="d-flex justify-content-between align-items-center">
            {{log.content}}
            <CBadge color="" shape="pill">{{log.time}}</CBadge>
          </CListGroupItem>
        </CListGroup>
      </CCardBody>
      </CCollapse>
    </CCard>

  </div>

</template>

<script>
import MainChartExample from './charts/MainChartExample'
import WidgetsDropdown from './widgets/WidgetsDropdown'
import WidgetsBrand from './widgets/WidgetsBrand'
import SoftwareVue from './outSide/Software.vue'
import { getLog } from "../api/log";
import { singleDateFilter } from "../utils/filters";

export default {
  name: 'Dashboard',
  components: {
    MainChartExample,
    WidgetsDropdown,
    WidgetsBrand
  },

  data () {
    return {
      quickPath:true,
      relatedNotification:true,
      recentTarget:true,
      quickPathList:[
        {
          ch:"测试项目",
          en:"Software",
          color:"primary",
          to:"/softwares"
        },
        {
          ch:"测试计划",
          en:"Test-plans",
          color:"info",
          to:"testPlans"
        },
        {
          ch:"测试任务",
          en:"Test-tasks",
          color:"warning",
          to:"testTasks"
        },
        {
          ch:"不合格项",
          en:"Unqualified-items",
          color:"danger",
          to:"testNoPass"
        },
      ],
      logs:[
        // {
        //   id:1,
        //   content:"xxxxxxxx创建了测试计划",
        //   time:"2021-02-03 20:02:33"
        // },
        //         {
        //   id:2,
        //   content:"xxxxxxxx创建了测试任务",
        //   time:"2021-02-03 20:02:33"
        // },
        //         {
        //   id:3,
        //   content:"xxxxxxxx分配了测试任务给yyyyyy",
        //   time:"2021-02-03 20:02:33"
        // },
        // {
        //   id:4,
        //   content:"xxxxxxxx登记了测试项目：xxxxxxxxx",
        //   time:"2021-02-03 20:02:33"
        // }

      ],
      recentView:[
        // {
        //   id:1,
        //   name:'lims实验室管理系统',
        //   time:'2021-06-30 08:32'
        // },
        //         {
        //   id:2,
        //   name:'智能测试用例生成平台',
        //   time:'2021-06-29 08:32'
        // },
        //         {
        //   id:3,
        //   name:'慕测mooctest主站系统',
        //   time:'2021-06-28 08:32'
        // }
      ],
      userName:''
    }
  },
  filters:{singleDateFilter},
  mounted(){
    this.userName = localStorage.getItem('userName');

    this.getRecentViewTarget();
    this.getLatestLogs();
},
  methods: {
    color (value) {
      let $color
      if (value <= 25) {
        $color = 'info'
      } else if (value > 25 && value <= 50) {
        $color = 'success'
      } else if (value > 50 && value <= 75) {
        $color = 'warning'
      } else if (value > 75 && value <= 100) {
        $color = 'danger'
      }
      return $color
    },
    jumpTo(path){
      this.$router.push(path);
    },
    checkSoftwareDetail(id){
      this.$router.push("softwareInside/"+id);
    },
    getRecentViewTarget(){
      getLog('测试项目','GET',this.userName,'','','0').then(res=>{
        for(let item of res){
          let logItem = {};
          let descrip = item.entity_name;
          logItem.name = descrip;
          logItem.time = singleDateFilter(item.execute_time)
          this.recentView.push(logItem);
        }
        this.recentView = this.recentView.slice(0,5)
      })
    },
    getLatestLogs(){
      getLog('','','','','','1').then(res=>{
        for(let item of res){
          let logItem = {};
          logItem.content = item.executor_username + ' ' + item.action + item.entity_name;
          logItem.time = singleDateFilter(item.execute_time)
          this.logs.push(logItem);
        }
        this.logs = this.logs.slice(0,5)
      })
    }
  }
}
</script>
<style>
.mainArea{
  width: 100%;
  margin: auto;
  min-width: 800px;
}
.welcome{
  font-size: 16px;
  padding: 10px 0 0 10px;
}
.quickPathBox{
  display: flex;
  /* justify-content: ; */
}
.entrance{
    min-width: 180px;
    margin-right: 10px;
    cursor: pointer;
}
</style>