<template>
  <el-dialog :visible.sync="visible" width="70%" :title="'供需详情'">
    <div class="supply-detail">
      <div class="section">
        <div class="label">供需类型</div>
        <div>{{ detail.type === 1 ? '供应' : '需求' }}</div>
      </div>
      <div class="section">
        <div class="label">标题</div>
        <div>{{ detail.title }}</div>
      </div>
      <div class="section">
        <div class="label">详细描述</div>
        <div>{{ detail.content }}</div>
      </div>
      <div class="section">
        <div class="label">行业标签</div>
        <div>{{ detail.tag || '-' }}</div>
      </div>
      <div class="section">
        <div class="label">联系方式</div>
        <div>
          <div v-if="detail.mobile">电话：{{ detail.mobile }}</div>
          <div v-if="detail.wechat">微信：{{ detail.wechat }}</div>
          <div v-if="detail.email">邮箱：{{ detail.email }}</div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible', false)">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    detail: Object
  }
}
</script>
<style scoped>
.supply-detail .section { margin-bottom: 16px; }
.supply-detail .label { font-weight: bold; margin-bottom: 4px; }
</style> 