<template>
  <div id="jobfair-head">
    <el-row>
      <el-col :span="24" class="webMessage">
        {{ title }}
      </el-col>
      <el-col :span="24" style="padding: 20px 15px;">
        <el-col :span="18">
          <span style="font-size: 16px;">{{ info && info.title ? info.title : '' }}</span>
          <el-button type="danger" class="btn">参会单位</el-button>
        </el-col>
        <el-col :span="6" class="ticketBtn">
          <el-button type="primary" @click="applyTicket()">领取门票</el-button>
        </el-col>
        <el-col :span="24">
          <span class="sizeA">时&nbsp;&nbsp;&nbsp;间：{{ info && info.date ? info.date : '' }}</span>
        </el-col>
        <el-col :span="24">
          <span class="sizeA">地&nbsp;&nbsp;&nbsp;点：{{ info && info.organizer ? info.organizer : '' }}</span>
        </el-col>
        <el-col :span="24">
          <span class="sizeA">主办方：{{ info && info.address ? info.address : '' }}</span>
        </el-col>
        <!-- <el-col :span="24">
          <span class="sizeA">点击量：{{ info && info.click ? info.click : '' }}</span>
        </el-col> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'jobfair-head',
  props: {
    title: {
      type: String,
    },
    info: {
      type: Object,
      default: () => {},
    },
  },
  components: {},
  data: () => ({
    // detail: {},
  }),
  created() {},
  mounted() {
    // this.$set(this, `detail`, this.list);
    // this.$set(this, `list`, this.info);
  },
  computed: {},
  methods: {
    applyTicket() {
      this.$emit('getTicket');
    },
  },
};
</script>

<style lang="less" scoped>
.btn {
  margin-left: 1.5rem;
  padding: 10px 5px;
  background: #850000;
}
.webMessage {
  border-left: 3px solid #850000;
  font-size: 16px;
  line-height: 30px;
  height: 30px;
  padding: 0 15px;
  margin: 0 0 0 -15px;
}
.sizeA {
  font-size: 14px;
}
.ticketBtn {
  padding: 10px 0 0 0;
}
/deep/.ticketBtn .el-button {
  padding: 8px;
}
</style>
