<template>
  <div id="jobs-head">
    <span v-if="info && info.id">
      <el-card class="cards">
        <!-- <span class="cards__place" style="font-size:14px;">
        {{ info && info.city ? info.city : '' }}
      </span>
      <br /> -->
        {{ info.job_name }}
      </el-card>
      <el-row style="margin-top;1rem;">
        <el-col :span="22">
          <span style="color:#f40;font-size:18px;">
            <i class="el-icon-coin"></i>
            {{ info.salary.text }}
          </span>
          <span class="row_icon">
            <i class="el-icon-location"></i>
            {{ info.city }}
          </span>
          <span class="row_icon">
            <i class="el-icon-collection">{{ info.xl_req }}</i>
          </span>
        </el-col>
        <el-col :span="2">
          <el-button type="danger" size="mini" style="background:#850000;" @click="deliver()">投递简历</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="info" :span="24">
          职位诱惑: {{ info && info.job_tag ? info.job_tag : '绩效奖金 岗前培训 节日礼物 扁平管理 年度旅游 岗位晋升 带薪年假 餐补 股票期权 ' }}
        </el-col>
        <el-col class="info" :span="24"> 薪酬福利: {{ info && info.welfare ? info.welfare : '五险一金 ' }} </el-col>
        <el-col class="info" :span="24"> 截止时间: {{ info && info.end_date ? info.end_date : '2017年11月22日 ' }} </el-col>
        <!-- <el-col class="info fade" style="margin-bottom:1rem;" :span="24"> 点击量: {{ info && info.views ? info.views : '3000' }} </el-col> -->
      </el-row>
    </span>
  </div>
</template>

<script>
export default {
  name: 'jobs-head',
  props: {
    info: {
      type: Object,
      default: () => {},
    },
  },
  components: {},
  data: () => ({
    detail: {},
  }),
  created() {},
  mounted() {
    // this.$set(this, `detail`, this.info);
  },
  computed: {},
  methods: {
    deliver() {
      this.$emit('toDeliver');
    },
  },
};
</script>

<style lang="less" scoped>
.cards {
  color: #fff;
  font-size: 24px;
  background: #850000;
  padding: 0.5rem;
  margin-bottom: 1rem;
}
.break {
  word-break: keep-all;
}
.row_icon {
  font-size: 18px;
  margin-left: 1rem;
}
.info {
  font-size: 16px;
  margin-top: 0.5rem;
}
.fade {
  font-size: 14px;
  color: #cccccc;
}
</style>
