<template>
  <div class="bg-F5">
    <div class="container">
      <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="userDiv">
            <div class="txDiv">
              <img
                v-if="loginAccount == ''"
                src="@assets/touxiang01.png"
                alt=""
              />
              <img v-else src="@assets/touxiang02.png" alt="" />
            </div>
            <div class="welInfo">
              <span class="user" v-if="loginAccount == ''">神码洛阳，</span>
              <span class="user" v-else>{{ loginAccount }}，</span>
              <span class="wel">欢迎您</span>
            </div>
            <div class="btnDiv">
              <router-link to="/user/editPassword">
                <el-button class="edit">修改信息</el-button>
              </router-link>
              <el-button class="logOut">退出登录</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="18">
          <img class="rightImg" src="@assets/userbg.png" alt="" />
        </el-col>
      </el-row>
      <div class="infoTabDiv">
        <el-tabs v-model="activeName">
          <el-tab-pane label="我的关注" name="first">
            <el-table class="qyrzgs" border :data="followListArr">
              <el-table-column
                type="index"
                label="序号"
                width="50"
              ></el-table-column>
              <el-table-column
                prop="name"
                label="商家名称"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="address"
                label="主营产品"
              ></el-table-column>
              <el-table-column
                prop="address"
                label="关注日期"
              ></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    class="textBtn"
                    @click="handleClick(scope.row)"
                    type="text"
                    size="small"
                    >进入店铺</el-button
                  >
                  <span class="editline"></span>
                  <el-button class="textBtn" type="text" size="small"
                    >取消关注</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="pageDiv"
              background
              @current-change="followPageChange"
              :page-size="pageSize1"
              :current-page="currentPage1"
              layout="prev, pager, next,total, jumper"
              :total="total1"
            ></el-pagination>
          </el-tab-pane>
          <el-tab-pane label="我的需求" name="second">
            <el-table class="qyrzgs" border :data="demandListArr">
              <el-table-column
                type="index"
                label="序号"
                width="50"
              ></el-table-column>
              <el-table-column
                prop="purchaseTitle"
                label="需求标题"
              ></el-table-column>
              <el-table-column
                prop="summaryOfNeeds"
                label="概要"
              ></el-table-column>
              <el-table-column
                prop="createTime"
                label="发布时间"
              ></el-table-column>
              <el-table-column label="目前状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 0">征集中</span>
                  <span v-else>已结束</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    class="textBtn"
                    @click="cancelClick(scope.row)"
                    type="text"
                    size="small"
                    >撤销</el-button
                  >
                  <span class="editline"></span>
                  <router-link to="/info/buy">
                    <el-button class="textBtn" type="text" size="small"
                      >再次发布</el-button
                    >
                  </router-link>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="pageDiv"
              background
              @current-change="demandPageChange"
              :page-size="pageSize2"
              :current-page="currentPage2"
              layout="prev, pager, next,total, jumper"
              :total="total2"
            ></el-pagination>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- <router-view /> -->
  </div>
</template>
<script>
import { Component, Vue, Watch } from "vue-property-decorator";
export default {
  name: "app",
  components: {},
  data() {
    return {
      activeName: "first",
      followListArr: [],
      demandListArr: [],
      pageSize1: 10,
      currentPage1: 1,
      total1: 24,
      pageSize2: 10,
      currentPage2: 1,
      total2: 24,
      loginAccount: ""
    };
  },
  methods: {
    followPageChange(val) {
      this.currentPage2 = val;
      this.followList();
    },
    demandPageChange(val) {
      this.currentPage2 = val;
      this.demandList();
    },
    handleClick(row) {
      console.log(row);
    },
    followList() {
      var that = this;
      that
        .$post("/member/follow/getMemberFollowList", {
          pageNum: that.currentPage1,
          pageSize: that.pageSize1
        })
        .then(function(res) {
          console.log(res);
          if (!res[0]) {
            that.memberData = res[1].noticeSupply;
          }
        });
    },
    demandList() {
      var that = this;
      that
        .$post("demand/info/getMemberDemandList", {
          pageNum: that.currentPage2,
          pageSize: that.pageSize2
        })
        .then(function(res) {
          console.log(res);
          if (!res[0]) {
            that.demandListArr = res[1].rows;
            that.total2 = res[1].total;
          }
        });
    },
    cancelClick(row) {
      console.log(row);
      var that = this;
      that
        .$post("demand/info/cancleMemberDemandInfo", {
          id: row.id
        })
        .then(function(res) {
          console.log(res);
          if (!res[0]) {
            that.demandList();
            that.$message({
              message: "恭喜你，撤销成功！",
              type: "success"
            });
          }
        });
    }
  },
  activated() {
    if (this.$store.state.user.UserInfo) {
      this.loginAccount = this.$store.state.user.UserInfo.loginAccount;
    }
  },
  mounted() {
    this.followList();
    this.demandList();
  }
};
</script>
<style scoped lang="scss">
.breadcrumb {
  height: 4rem;
  line-height: 4rem;
}
.userDiv {
  width: 100%;
  height: 19rem;
  background: #fff;
  border-radius: 0.4rem;
  text-align: center;
  .txDiv {
    img {
      width: 5.8rem;
      border-radius: 50%;
      margin-top: 3rem;
    }
  }
  .welInfo {
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    .user {
      color: #fd5522;
    }
    .wel {
      color: #333;
    }
  }
  .btnDiv {
    padding-top: 2rem;
    .edit {
      height: 3rem;
      line-height: 3rem;
      color: #fff;
      background: #fd5522;
      border: 0.1rem solid #fd5522;
      padding-top: 0;
      padding-bottom: 0;
      margin-right: 1rem;
    }
    .logOut {
      height: 3rem;
      line-height: 3rem;
      color: #fd5522;
      background: #fff;
      padding-top: 0;
      padding-bottom: 0;
      border: 0.1rem solid #fd5522;
    }
  }
}
.rightImg {
  width: 100%;
  height: 19rem;
  border-radius: 0.4rem;
}
.editline {
  display: inline-block;
  height: 1rem;
  width: 0.1rem;
  background: #aaaaaa;
  margin: 0 0.6rem;
}
.textBtn {
  color: #606266;
}
.pageDiv {
  text-align: right;
  margin-top: 0.5rem;
  padding: 3rem 0;
}
</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;
  }
}
.qyrzgs th {
  background: #fd5522;
  color: #fff;
  padding: 0.6rem 0;
  text-align: center;
}
.qyrzgs.el-table td {
  padding: 0.2rem 0;
}
.qyrzgs.el-table--border th,
.el-table--border td {
  border-right: 1px solid #eae1dc;
  border-bottom: 1px solid #eae1dc;
}
.qyrzgs.el-table--border {
  border: 0.1rem solid #fd5522;
}

.qyrzgs .cell {
  text-align: center;
}
</style>
