<template>
  <div class="app-container">
    <main id="main">
      <section id="item" class="wow fadeInUp">
        <div class="container">
          <div class="row">
            <a href="javascript:history.go(-1)">我的工具</a> &gt; <span>{{tool.name}}</span>
          </div>
<!--          <el-button type="primary" class="btn-blue" size="small"  @click="back" style="float: right">返回</el-button>-->
          <div class="row store item-cp">
            <div class="item-pic"><a style="top:0px;" @click="preview(icon.fileUrl)"><img :src="icon.fileUrl"></a></div>
            <div class="item-info">
              <h3>{{tool.name}}</h3>
              <p class="index__Feature-list-itemlist-title newline" :title="tool.toolDesc"> {{tool.toolDesc | ellipsis}} </p>
              <!--              <form>-->
              <table>
                <tr>
                  <td>工具价格</td>
                  <td class="price">{{tool.price | currency('￥')}}</td>
                </tr>
                <tr>
                  <td>交付方式</td>
                  <td><span>{{myTool.deliverType}}</span></td>
                </tr>
                <tr>
                  <td>工具类型</td>
                  <td>
                    <tool-type :type="tool.toolType"></tool-type>
                  </td>
                </tr>
                <tr v-if="myTool.deliverType=='SaaS'">
                  <td>剩余次数</td>
                  <td>
                    {{myTool.remains}}
                  </td>
                </tr>
                <tr v-if="myTool.deliverType=='License'">
                <td>过期时间</td>
                <td>
                  {{myTool.expireTime}}
                </td>
                </tr>
                <tr>
                  <td colspan="2">
                  <button  type="submit" class="btn btn-primary" v-if="myTool.deliverType=='SaaS'" @click="useTool(tool)">立即使用</button>
                </td>
                </tr>
              </table>
            </div>
          </div>

          <div class="tab">
            <ul class="store-menu">
              <li @click="setActive('detail')" :class=" activeTab == 'detail' ? 'curr':''"><a href="#a1" @click="goTo('#a1')">商品详情</a></li>
              <li @click="setActive('price')" :class=" activeTab == 'price' ? 'curr':''"><a href="#a2" @click="goTo('#a2')">商品定价</a></li>
              <li @click="setActive('question')" :class=" activeTab == 'question' ? 'curr':''"><a href="#a3" @click="goTo('#a3')">商品问答</a></li>
              <li v-if="tool.deliverType=='License'" @click="setActive('support')" :class=" activeTab == 'support' ? 'curr':''"><a href="#a4" @click="goTo('#a4')">服务与支持</a></li>
            </ul>
            <div class="line"></div>
          </div>

          <div id="con_a_1" class="store-info">
            <p>
              <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="image in detailImages">
                  <a @click="preview(image.fileUrl)"> <img :src="image.fileUrl"></a>
                </el-carousel-item>
              </el-carousel>
            </p>

            <h3 id="a1">产品简介</h3>
            <p>{{tool.toolDesc}}</p>
            <h3>主要功能</h3>
            <div class="store-pro">
              <div v-for="fun in functions">
                <h4>{{fun.title}}</h4>
                <p>{{fun.funDesc}}</p>
              </div>
            </div>
            <h3>技术亮点</h3>
            <div class="store-pro">
              <div v-for="item in highlights">
                <h4>{{item.title}}</h4>
                <p>{{item.funDesc}}</p>
              </div>
            </div>
            <h3 id="a2">商品定价</h3>
            <p class="textarea">{{tool.priceDesc}}</p>
            <h3 id="a3">商品问答</h3>
            <p class="textarea">{{tool.productQA}}</p>
            <h3 id="a4" v-if="tool.deliverType=='License'">服务与支持</h3>
            <p v-if="tool.deliverType=='License'" class="download">下载软件包<a class="btn default"  @click="downloadPackage">下载</a></p>
            <p v-if="tool.deliverType=='License' && readmeUrl != ''" class="download">下载安装手册<a class="btn default" href="javascript:void(-1)" @click="downloadReadme">下载</a></p>
          </div>
        </div>
      </section>
      <el-backtop :bottom="20">
        <div
          style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 30px;
        color: #1989fa;
      }"
        >
          top
        </div>
      </el-backtop>
    </main>
    <task-upload ref="taskUpload" @handleSuccess="getMyTool"></task-upload>
    <el-image-viewer v-if="imageVisible" :on-close="closeViewer" :url-list="[dialogImageUrl]"  z-index="5000"/>
  </div>
</template>

<script>
  import {getTool, getFunction} from "@/api/toolInfo/market";
  import {addShoppingCart, getMyTool} from "@/api/my/my";
  import TaskUpload from "@/views/components/TaskUpload";
  import {getFileList} from "@/api/file/file";
  import ToolType from "../../components/enum/ToolType";
  import ToolInfo from "../../components/ToolInfo";
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  export default {
    name: "myToolDetail",
    components: {ToolInfo, ToolType, TaskUpload, ElImageViewer},
    data() {
      return {
        id: '',
        ImgUrl: '',
        title:'订单支付',
        open:false,
        amount: 1,
        imageVisible: false,
        dialogImageUrl:'',
        tool: {},
        detailImages: [],
        icon: {},
        functions: [],
        highlights:[],
        identification:'',
        payForm:{},
        myTool:{},
        packageUrl:'',
        activeTab:'detail',
        readmeUrl:''
      }
    },
    filters: {
      ellipsis(value) {
        if (!value) return ''
        if (value.length > 100) {
          return value.slice(0, 100) + '...'
        }
        return value
      }
    },
    methods: {
      setActive(tabName){
        this.activeTab = tabName;
      },
      goTo(id) {
        document.querySelector(id).scrollIntoView({
          behavior: "smooth"
        });
      },
      preview(url){
        this.dialogImageUrl = url;
        this.imageVisible = true;
      },
      closeViewer(){
        this.imageVisible = false;
      },
      handleChange(value) {
        console.log(value);
      },
      addToShoppingCart() {
        addShoppingCart(this.id).then(response => {
          this.$notify({
            title: '添加购物车成功',
            message: '',
            align: 'center',
            type: 'success'
          });
        })
      },
      buy(){
        this.open = true;
      },
      pay() {
        if (this.tool.deliverType=='License') {
          if (this.identification == null || this.identification.trim() == '') {
            alert("请输入唯一标识")
          }
        }
      },
      getMyTool(){
        getMyTool(this.id).then(response => {
          this.myTool = response.data;
        })
      },
      useTool() {
        getMyTool(this.tool.toolId).then(response => {
          let useTool = response.data;
          if (useTool.remains == 0) {
            this.$alert("该工具可用次数为0,请先购买再使用。", {dangerouslyUseHTMLString: true});
          } else {
            this.currentToolId = useTool.toolId;
            this.currentToolName = useTool.name;
            this.$refs.taskUpload.openDialog(this.tool.toolId, this.tool.name);
          }
        })
      },
      back(){
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.push({ path: "/testmanage/myTool" });
      },
      downloadPackage(){
        const loading = this.$loading({
          lock: true,
          text: '正在下载，请稍后...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        downloadFast(this.packageUrl, loading);
      },
      downloadReadme(){
        const loading = this.$loading({
          lock: true,
          text: '正在下载，请稍后...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        downloadFast(this.readmeUrl, loading);
      }
  },
    created() {
      this.id = this.$route.params && this.$route.params.id;
      this.getMyTool();
      getTool(this.id).then(response => {
        this.tool = response.tool;
        this.images = response.fileInfoList;
        this.functions = response.functionList.filter(function (item) {
          return item.funType == 0;
        })
        this.highlights = response.functionList.filter(function (item) {
          return item.funType == 1;
        })
        for (let index in this.images) {
          if (this.images[index].fileType == 'head')
            this.icon = this.images[index];
          else if (this.images[index].fileType == 'detail') {
            this.detailImages.push(this.images[index]);
          }else if (this.images[index].fileType == 'package'){
            this.packageUrl = this.images[index].fileId;
          }else if (this.images[index].fileType == 'readme'){
            this.readmeUrl = this.images[index].fileId;
          }
        }
      })
    }
  }
</script>

<style scoped>
  .el-carousel {
    width: 600px;
  }

  .el-carousel__item img {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
