<template>
  <div class="bg-F5">
    <div class="container">
      <el-row class="mt2rem" :gutter="20">
        <el-col :span="4">
          <mymenu></mymenu>
        </el-col>
        <el-col :span="20">
          <div class="infoTabDiv">
            <el-tabs v-model="activeName" @tab-click="tabChange">
              <el-tab-pane label="求购信息" name="demand">
                <ul class="listUl">
                  <li v-for="item in demandAllList" :key="item.id">
                    <router-link :to="`/info/buyDetail?id=${item.id}`">
                      <span class="name">{{ item.purchaseTitle }}</span
                      ><span class="date"
                        >{{ item.updateTime }}发布</span
                      ></router-link
                    >
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="供应信息" name="supply">
                <ul class="listUl">
                  <li v-for="item in supplyAllList" :key="item.id">
                    <router-link :to="`/info/supplyDetail?id=${item.id}`">
                      <span class="name">{{ item.supplyTitle }}</span
                      ><span class="date"
                        >{{ item.updateTime }}发布</span
                      ></router-link
                    >
                  </li>
                </ul>
              </el-tab-pane>
            </el-tabs>
            <div class="btnDiv">
              <router-link to="/info/buy">
                <el-button class="buyBtn" size="mini">我要买</el-button>
              </router-link>
              <el-button class="buyBtn" size="mini">我要卖</el-button>
            </div>
          </div>
          <el-pagination
            class="pageDiv"
            background
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            :current-page="currentPage"
            layout="prev, pager, next,total, jumper"
            :total="total"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { Component, Vue, Watch } from "vue-property-decorator";
import mymenu from "@/components/menu.vue";
export default {
  name: "app",
  components: {
    mymenu
  },
  data() {
    return {
      activeName: "demand",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      demandAllList: [],
      supplyAllList: []
    };
  },
  methods: {
    tabChange() {
      var that = this;
      that.currentPage = 1;
      if (that.activeName == "demand") {
        that.demandInfoAllList();
      } else if (that.activeName == "supply") {
        that.supplyInfoAllList();
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      if (that.activeName == "demand") {
        that.demandInfoAllList();
      } else if (that.activeName == "supply") {
        that.supplyInfoAllList();
      }
    },
    // 求购信息列表 liuqiwen
    demandInfoAllList() {
      var that = this;
      that
        .$post("/demand/info/getDemandInfoAllList", {
          pageNum: that.currentPage,
          pageSize: that.pageSize
        })
        .then(function(res) {
          console.log(res);
          if (!res[0]) {
            that.demandAllList = res[1].rows;
            that.total = res[1].total;
          }
        });
    },
    // 供应信息列表 liuqiwen
    supplyInfoAllList() {
      var that = this;
      that
        .$post("/supply/info/getSupplyInfoAllList", {
          pageNum: that.currentPage,
          pageSize: that.pageSize
        })
        .then(function(res) {
          console.log(res);
          if (!res[0]) {
            that.supplyAllList = res[1].rows;
            that.total = res[1].total;
          }
        });
    }
  },
  activated() {
    if (this.$route.query.active) {
      this.activeName = this.$route.query.active;
      this.tabChange();
    }
  },
  mounted() {
    this.demandInfoAllList();
  }
};
</script>
<style lang="scss" scoped>
.infoTabDiv {
  position: relative;
  background: #fff;
  border-radius: 0.4rem;
  .btnDiv {
    height: 5rem;
    line-height: 5rem;
    position: absolute;
    right: 1.6rem;
    top: 0;
    .buyBtn {
      background: #fd5522;
      color: #fff;
      margin-left: 2rem;
      border: 0;
      border-radius: 0.4rem;
    }
  }
  .listUl {
    list-style: none;
    width: 100%;
    padding: 0 1.6rem 1.6rem;
    box-sizing: border-box;
    li {
      height: 3.6rem;
      line-height: 3.6rem;
      overflow: hidden;
      font-size: 1.4rem;
      .name {
        display: block;
        width: 80%;
        float: left;
        overflow: hidden;
        color: #333;
      }
      .date {
        display: block;
        width: 20%;
        float: left;
        text-align: right;
        color: #666;
      }
    }
  }
}
.pageDiv {
  text-align: right;
  margin-top: 0.5rem;
  padding: 2rem 0;
}
.mt2rem {
  margin-top: 2rem;
}
</style>
<style lang="scss">
.infoTabDiv {
  .el-tabs__nav-scroll {
    padding: 0 1.6rem;
    box-sizing: border-box;
  }
  .el-tabs__item {
    height: 5rem;
    line-height: 5rem;
  }
  .el-tabs__item:hover {
    color: #fd5522;
  }
  .el-tabs__item.is-active {
    color: #fd5522;
  }
  .el-tabs__active-bar {
    background-color: #fd5522;
  }
}
.pageDiv.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #fd5522;
}
.pageDiv.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #fd5522;
}
</style>
