<template>
  <div class="bg-F5">
    <div class="container">
      <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row :gutter="20">
        <el-col :span="6">
          <user-info />
        </el-col>
        <el-col :span="18">
          <img class="rightImg" src="@assets/userbg.png" alt="" />
        </el-col>
      </el-row>
      <tab class="tab" titles="我的关注,我的需求" :currIndex.sync="currIndex" />

      <el-table
        empty-text="数据加载中..."
        class="qyrzgs"
        border
        v-if="arr[currIndex].items"
        :data="arr[currIndex].items"
      >
        <template v-if="currIndex">
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="purchaseTitle" label="需求标题" />
          <el-table-column prop="summaryOfNeeds" label="概要" />
          <el-table-column prop="createTime" label="发布时间" />
          <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="{ row: { id } }">
              <el-button
                class="textBtn"
                @click="revocation(id)"
                type="text"
                size="small"
                >撤销</el-button
              >
              <span class="editline"></span>
              <router-link class="textBtn" to="/info/add">
                再次发布
              </router-link>
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="companyName" label="商家名称" width="180" />
          <el-table-column prop="primaryBusiness" label="主营产品" />
          <el-table-column prop="followDate" label="关注日期" />
          <el-table-column label="操作">
            <template slot-scope="{ row: { companyId } }">
              <router-link class="textBtn" :to="`/shop/${companyId}`"
                >进入店铺</router-link
              >
              <span class="editline"></span>
              <el-button
                class="textBtn"
                type="text"
                size="small"
                @click="cancelGz(companyId)"
                >取消关注</el-button
              >
            </template>
          </el-table-column>
        </template>
      </el-table>

      <load-more
        v-for="({ url, params, items }, index) in arr"
        :key="`table${index}`"
        :url="url"
        :params="params"
        v-show="currIndex === index"
        @getItems="items => setItems(items, index)"
      />
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component
export default class extends Vue {
  @Prop(String) private index!: string;
  private currIndex: number = 0;
  private arr: Array<{
    url: string;
    params: IAny | null;
    items: any[];
  }> = "/member/follow/getMemberFollowList,demand/info/getMemberDemandList"
    .split(",")
    .map(url => ({
      url,
      params: null,
      items: []
    }));
  @Watch("index", { immediate: true })
  indexChange(index: string) {
    this.currIndex = Number(index) || 0;
    this.reload();
  }
  @Watch("currIndex")
  currIndexChange() {
    this.arr[this.currIndex].params = this.arr[this.currIndex].params || {};
  }
  setItems(items: any[], index: number) {
    this.$set(this.arr[index], "items", items.length ? items : null);
  }

  reload() {
    this.arr[this.currIndex].params = {};
  }
  async cancelGz(companyId: number) {
    if (!(await this.$confirm("是否取消关注?").catch(x => false))) return;
    const [err] = await this.$post("/member/follow/cancleMemberFollow", {
      companyId
    });
    if (err) return;
    this.$message.success("取消成功");
    this.reload();
  }
  async revocation(id: number) {
    if (!(await this.$confirm("是否撤销该需求?").catch(x => false))) return;
    const [err] = await this.$post("demand/info/cancleMemberDemandInfo", {
      id
    });
    if (err) return;
    this.$message.success("撤销成功");
    this.reload();
  }
}
</script>
<style scoped lang="scss">
.breadcrumb {
  height: 4rem;
  line-height: 4rem;
}
.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;
}
.tab {
  margin-bottom: 2rem;
}
</style>
<style lang="scss">
.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>
