<template>
  <div class="app-container">
    <main id="main">
      <section id="services">
        <div class="container cportal tool-cp-main">

          <div class="tab">
            <ul class="tool-cp-menu">
              <li id="a1" @click="cur = true" :class="cur? 'curr':''">当前工具</li>
              <li id="a2" @click="cur = false" :class="!cur? 'curr':''">失效工具</li>
            </ul>
            <div class="cl"></div>
          </div>
          <div id="con_a_1" v-show="cur == true" v-loading="loading">
            <div class="row row10">
              <i v-if="onTools.length==0" style="display: inherit"><img src="@/assets/pic/none400x300.png"><br>当前没有可用工具</i>
              <div class="col-lg-4" v-for="tool in onTools">
              <div class="box wow fadeInLeft">
                <div class="icon svgImg">
                  <img v-if="tool.icon != null" :src="tool.icon" alt="">
                  <img v-if="tool.icon == null" src="@/assets/pic/none.gif"/>
                </div>
                <div class="content">
                  <h4 class="title"><a href="" :title="tool.name">{{tool.name}}</a></h4>
                  <p class="description">
                  规格：{{tool.deliverType=='License' ? '按月':'按次'}} <br>
                    交付方式：{{tool.deliverType}} <br>
                     <span v-if="tool.deliverType=='SaaS'" class="tip"> 剩余次数：{{tool.remains}}</span>
                     <span v-if="tool.deliverType=='License'" class="tip"> 过期时间：{{tool.expireTime}}</span>
                  </p>
                </div>
                <div class="tool-btn">
                  <button  type="submit" class="btn btn-primary btn-blue" v-if="tool.deliverType=='SaaS'" @click="useTool(tool)">立即使用</button>
                  <router-link :to="'/my/tool/detail/'+ tool.toolId" class="link-type">
                    <button type="submit" class="btn btn-primary  btn-blue">查看工具详情</button>
                  </router-link>
                </div>
              </div>
            </div>
          </div>
            </div>
          <div id="con_a_2" v-show="cur == false" v-loading="loading">
          <div class="row row10">
            <i v-if="offTools.length==0"  style="display: inherit"><img src="@/assets/pic/none400x300.png"><br>当前没有失效工具</i>
            <div class="col-lg-4" v-for="tool in offTools">
              <div class="box wow fadeInLeft">
                <div class="icon svgImg">
                  <img v-if="tool.icon != null" :src="tool.icon" alt="">
                  <img v-if="tool.icon == null" src="@/assets/pic/none.gif"/>
                </div>
                <div class="content">
                  <h4 class="title"><a href="" :title="tool.name">{{tool.name}}</a></h4>
                  <p class="description">
                  规格：{{tool.deliverType=='License' ? '按月':'按次'}}
                   交付方式：{{tool.deliverType}}  <br>
                     <span v-if="tool.deliverType=='SaaS'" class="tip"> 剩余次数：{{tool.remains}}</span>
                     <span v-if="tool.deliverType=='License'" class="tip"> 过期时间：{{tool.expireTime}}</span>
                  </p>
                </div>
                <div class="tool-btn">
                  <router-link :to="'/my/tool/detail/'+ tool.toolId" class="link-type">
                    <button type="submit" class="btn btn-primary btn-blue">查看工具详情</button>
                  </router-link>
                  <router-link :to="'/test/tool/detail/'+ tool.toolId" class="link-type">
                    <button type="submit" class="btn btn-primary btn-blue">再次购买</button>
                  </router-link>
                </div>
              </div>
            </div>
          </div>
          </div>
        </div>
      </section>
    </main>
    <task-upload ref="taskUpload"  @handleSuccess="listMyTools"></task-upload>
  </div>
</template>

<script>
  import {listMyTools, getMyTool} from "@/api/my/my";
  import {uploadTask} from "@/api/task/task";
  import TaskUpload from "@/views/components/TaskUpload";

  export default {
    name: "MyTool",
    components: {TaskUpload},
    data() {
      return {
        // 遮罩层
        loading: true,
        myToolList: [],
        onTools: [],
        offTools:[],
        title:'上传测试任务',
        form: {
          typeArr:[]
        },
        cur: true,
        currentToolId: 0,
        currentToolName: ''
      }
    },
    methods: {
      useTool(tool) {
        getMyTool(tool.toolId).then(response => {
          let useTool = response.data;
          if (useTool.remains == 0) {
            this.$alert("该工具可用次数为0,请先购买再使用。", {dangerouslyUseHTMLString: true});
            this.listMyTools();
          } else {
            this.currentToolId = useTool.toolId;
            this.currentToolName = useTool.name;
            this.$refs.taskUpload.openDialog(this.currentToolId, this.currentToolName);
          }
        })
      },
      listMyTools(){
        this.uploadShow = false;
        listMyTools().then(response => {
          this.myToolList = response.data;
          this.onTools = this.myToolList.filter(function(item) {
            return item.status==0;
          })
          this.offTools = this.myToolList.filter(function(item) {
            return item.status==1;
          })
          this.loading = false;
        })
      }
    },
    computed: {},
    created() {
      this.loading = true;
      this.listMyTools();
    }
  }
</script>
<style scoped>

  .tip{
    height: 30px!important;
    margin-bottom: 5px!important;
  }
  .toolBtn{
    color: #ffffff!important;
  }
</style>
