<template>
  <div>
    <main id="main">
      <section class="tips-long6" style="margin: 10px 0px 0px 30px">
        <el-card style="margin-bottom: 10px;">
          <span class="type">工具类型</span>
          <el-link :underline="false" @click="changeToolType('')"
                   :style="'color:'+ (queryParams.toolType==''? '#1890FF':'black')">全部
          </el-link>
          <el-link :underline="false" v-for="dict in toolTypes" @click="changeToolType(dict.dictValue)"
                   :style="'color:'+ (queryParams.toolType==dict.dictValue ? '#1890FF':'black')">{{dict.dictLabel}}
          </el-link>
          <br>
          <br>
          <span class="type">交付方式</span>
          <el-link :underline="false" type="text" @click="changePayType('')"
                   :style="'color:'+ (queryParams.deliverType==''? '#1890FF':'black')">全部
          </el-link>
          <el-link :underline="false" v-for="dict in deliverTypes" @click="changePayType(dict.dictValue)"
                   :style="'color:'+ (queryParams.deliverType==dict.dictValue ? '#1890FF':'black')">{{dict.dictLabel}}
          </el-link>
        </el-card>

          <table v-loading="loading">
            <tr v-if="tools.length==0"><td>暂无数据</td></tr>
            <tr v-for="tool in tools">
              <td>
                <router-link  :to="'/test/tool/detail/'+ tool.toolId" class="link-type">
                  <img v-if="tool.img == null" src="@/assets/pic/none.gif"/>
                  <img v-if="tool.img != null" :src="tool.img"/>
                </router-link>
              </td>
              <td>
                <p> <router-link  :to="'/test/tool/detail/'+ tool.toolId" class="link-type">{{tool.name}}</router-link></p>
                <p class="index__Feature-list-itemlist-title newline" :title="tool.toolDesc"> {{tool.toolDesc | ellipsis}} </p>
                <ul>
                  <li style="padding: 0px!important;">工具类型：{{tool.toolTypeName}}</li>
                  <li>交付方式：{{tool.deliverType}}</li>
                  <li>上架时间： {{tool.onlineTime}}</li>
                </ul>
                <div class="cl"></div>
                <p style="padding-left: 2px;">服务商：{{tool.providerName}}</p>
              </td>
              <td>
                <p>{{tool.price  | currency('￥') }} <span>/{{tool.deliverType=='License' ?'月':'次'}}</span></p>
              </td>
            </tr>
          </table>
      </section>
    </main>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <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>
  </div>
</template>
<script>
  import {listTools} from "@/api/toolInfo/market";

  export default {
    name: "Market",
    data() {
      return {
        // 遮罩层
        loading: true,
        toolTypes: [],
        deliverTypes: [],
        tools: [],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          status: 1,
          toolType: undefined,
          deliverType: undefined
        }
      }
    },
    methods: {
      /** 查询列表 */
      getList() {
        this.loading = true;
        listTools(this.queryParams).then(response => {
            this.tools = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      changeToolType(value) {
        this.queryParams.toolType = value;
        this.getList();
      },
      changePayType(value) {
        this.queryParams.deliverType = value;
        this.getList();
      }
    },
    filters: {
      ellipsis(value) {
        if (!value) return ''
        if (value.length > 100) {
          return value.slice(0, 100) + '...'
        }
        return value
      }
    },
    computed: {},
    created() {
      this.getDicts("sys_tool_type").then(response => {
        this.toolTypes = response.data;
      })
      this.getDicts("sys_pay_type").then(response => {
        this.deliverTypes = response.data;
      })
      listTools(this.queryParams).then(response => {
        this.tools = response.rows;
        this.total = response.total;
        this.loading = false;
      })
    }
  }
</script>

<style scoped>
  .type {
    color: #1890FF;
    font-weight: bold;
    font-size: 14px;
    margin-right: 10px;
  }

  .tip {
    font-size: 13px;
    color: gray;
  }

  .el-link {
    margin-right: 10px;
    font-size: 13px;
  }

  .active {
    color: #1890FF;
  }

  .el-row {
    margin-bottom: 5px;
    display: flex;
    flex-wrap: wrap
  }

  .el-card {
    min-width: 100%;
    height: 100%;
    margin-right: 20px;
    transition: all .5s;
  }

  .price {
    color: red;
    font-weight: bold;
  }
</style>
