<template>
  <div class="app-container clearfix" style=" width: 1000px;">
    <div class="app-header-top" style="width: 100%;float: right;margin-bottom: 10px;">
      <el-button type="primary" style="float: right;" @click="backToList">返回</el-button>
    </div>
    <h1 class="card-h1">采购商品</h1>
    <el-card class="box-card">
      <div class="card-main">
        <div class="card-img">
          <el-popover
            placement="top-end"
            title=""
            width="230"
            trigger="hover"
          >
            <img :src="publishMan.productImage" alt="" style="width:200px;height:200px;">
            <img slot="reference" :src="publishMan.productImage" alt="" style="width:100px;height:100px;">
          </el-popover>
        </div>
        <div class="card-name">
          <p>{{ publishMan.productName }}</p>
        </div>
      </div>
    </el-card>
    <h1 class="card-h1">发起者需求</h1>
    <el-card class="box-card">
      <div class="card-cell">
        <div class="card-cell-p">
          <p><span>发起者：</span>{{ publishMan.clubName }}</p>
        </div>
      </div>
      <div class="card-cell">
        <div class="card-cell-p">
          <p><span>期望单价：</span>￥{{ publishMan.price }}</p>
        </div>
        <div class="card-cell-p">
          <p><span>采购数量：</span>{{ publishMan.number }}</p>
        </div>
      </div>
      <div v-if="publishMan.delFlag === 1" class="card-status">
        <el-tag effect="dark" type="danger">已删除</el-tag>
      </div>
      <div v-if="publishMan.isAchieve == 1" class="card-status">
        <el-tag effect="dark" type="success">已实现</el-tag>
      </div>
    </el-card>
    <template v-if="followMan.length > 0">
      <h1 class="card-h1">参与者需求（{{ followMan.length }}）</h1>
      <el-card v-for="(foll,index) in followMan" :key="index" class="box-card" style="margin-bottom: 16px;">
        <div class="card-cell">
          <div class="card-cell-p">
            <p><span>发起者：</span>{{ foll.clubName }}</p>
          </div>
        </div>
        <div class="card-cell">
          <div class="card-cell-p">
            <p><span>期望单价：</span>￥{{ foll.price }}</p>
          </div>
          <div class="card-cell-p">
            <p><span>采购数量：</span>{{ foll.number }}</p>
          </div>
        </div>
      </el-card>
    </template>
  </div>
</template>
<script>
import { buyDetail } from '@/api/centralized'
export default {
  data() {
    return {
      followMan: [],
      publishMan: {},
      loadingbut: false,
      loadingbuttext: '保存'
    }
  },
  computed: {

  },
  created() {
    this.buyDetail(this.$route.query.id)
  },
  methods: {
    async buyDetail(id) {
      try {
        const res = await buyDetail({ id: id })
        this.followMan = res.data.followMan
        this.publishMan = res.data.publishMan
      } catch (error) {
        console.log('errr', error)
      }
    },
    backToList() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: '/centralized/list'
          })
        })
      })
    }
  }
}
</script>
<style lang="scss">
.box-card{
  position: relative;
}
.card-status{
  position: absolute;
  top: 50px;
  right: 20px;
}
.card-h1{
  line-height: 40px;
  font-size: 16px;
  color: #303133;
  font-weight: normal;
  margin: 0;
}
.card-main{
  width: 100%;
  height: 100px;
  .card-img{
    width: 100px;
    height: 100px;
    float: left;
    border-radius: 4px;
  }
  .card-name{
    height: 100px;
    float: left;
    margin-left:16px;
    line-height: 40px;
    font-size: 14px;
    color: #606266;
  }
}
.card-cell{
  height: 40px;
  line-height: 40px;
  .card-cell-p{
    line-height: 40px;
    font-size: 14px;
    color: #606266;
    float: left;
    margin-right: 40px;
    p{
      margin: 0;
    }
    span{
      color: #909399;
    }
  }
}
</style>
