<template>
  <el-drawer title="博主详情" :visible.sync="drawer" size="50%">

    <el-descriptions class="margin-top" :column="3" size="small" border>
      <el-descriptions-item>
        <template slot="label">
          昵称
        </template>
        {{ bloggerDetail.nickName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          会员
        </template>
        {{ bloggerDetail.memberCardName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          联系电话
        </template>
        {{ bloggerDetail.tel }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          剩余积分
        </template>
        {{ bloggerDetail.pointsBalance }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          剩余报名次数
        </template>
        {{ bloggerDetail.report }}
      </el-descriptions-item>
    </el-descriptions>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>名片信息</span>
      </div>
      <el-table
        size="small"
        :data="bloggerDetail.busiCards"
        height="150">
        <el-table-column align="center" prop="platformCode" label="平台名称"/>
        <el-table-column align="center" prop="accountName" label="平台昵称"/>
        <el-table-column align="center" prop="accountNumber" label="平台id"/>
        <el-table-column align="center" prop="fansNum" label="粉丝数"/>
        <el-table-column align="center" prop="tel" label="联系方式"/>
        <el-table-column fixed="right" label="操作" width="100px" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="busiCardDetail(scope.row.id)"
            >详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--  报名通告  -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>报名通告</span>
      </div>
      <el-table
        size="small"
        :data="noticeList"
        height="150">
        <el-table-column prop="title" width="150" align="center" label="标题"/>
        <el-table-column prop="feeDown" align="center" label="稿费下限"/>
        <el-table-column prop="feeUp" align="center" label="稿费上限"/>
        <el-table-column label="粉丝下限" align="center" prop="fansDown"/>
        <el-table-column label="粉丝上限" align="center" prop="fansUp"/>
        <el-table-column label="截止日期" width="150" align="center" prop="endDate">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.endDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合作状态" width="150" align="center" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.dl_notice_cooperate_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getNoticeList"
      />
    </el-card>
    <BusiCardForm ref="refForm" :isDetail="true"/>
  </el-drawer>
</template>

<script>
import {getBlogger} from "@/api/member/member";
import BusiCardForm from "@/views/member/busiCard/form/busiCardForm.vue"
import {queryListByUserId} from "@/api/busi/notice";
export default {
  name: "BloggerDraw",
  dicts: ['dl_notice_cooperate_status'],
  components: {
    BusiCardForm
  },
  data() {
    return {
      //抽屉打开框
      drawer: false,
      //博主用户id
      userId: null,
      //博主详情
      bloggerDetail: {},
      noticeList:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
      },
      // 总条数
      total: 0,
    }
  },
  methods: {
    /**初始化博主详情页*/
    initDraw(id) {
      this.drawer = true
      this.userId = id
      this.getBloggerDetail(id)
      this.getNoticeList()
    },

    /**获取已发布通告*/
    getNoticeList(){
      this.queryParams.userId = this.userId
      queryListByUserId(this.queryParams).then(response => {
        this.noticeList = response.data.records;
        this.total = response.data.total;
      });
    },

    /**获取博主详情*/
    getBloggerDetail(userId) {
      this.bloggerDetail = {}
      getBlogger(userId).then(response => {
        this.bloggerDetail = response.data;
      });
    },

    /**博主名片审核详情*/
    busiCardDetail(id) {
      this.$refs['refForm'].initDraw(id)
    }

  }
}
</script>

<style scoped>

</style>
