<template>
  <div id="info">
    <detail-layout>
      <template #title>
        <back-bar to="/jobs/jobfair/index" :title="`双选会`"></back-bar>
      </template>
      <template #main>
        <el-row class="titles">
          <el-col :span="24">招聘会信息</el-col>
        </el-row>
        <el-row type="flex" align="middle" justify="center">
          <el-col :span="20">
            <el-row class="top__info">
              <el-col :span="24">{{ info.title }}</el-col>
              <el-col :span="24">
                时间:
                <span>{{ info.time }}</span>
              </el-col>
              <el-col :span="24">
                主办方:
                <span>{{ info.organizer }}</span>
              </el-col>
              <el-col :span="24">
                地点:
                <span>{{ info.address }}</span>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>

        <el-row class="titles">
          <el-col :span="24">招聘会说明</el-col>
        </el-row>
        <el-row style="padding:1rem;" v-html="info.content"> </el-row>

        <el-row class="titles">
          <el-col :span="24">注意事项</el-col>
        </el-row>
        <el-row style="padding:1rem;" v-html="info.notice"> </el-row>
      </template>
    </detail-layout>
  </div>
</template>

<script>
import backBar from '@/components/back-bar.vue';
import detailLayout from '@/layout/detail-layout.vue';
import { mapActions, mapState } from 'vuex';
export default {
  name: 'info',
  props: {},
  components: {
    backBar,
    detailLayout,
  },
  data: () => ({
    info: {},
  }),
  created() {
    if (this.$route.query.id) {
      this.search();
    }
  },
  computed: {},
  methods: {
    ...mapActions(['jobfairOperation']),
    async search() {
      let result = await this.jobfairOperation({ type: 'search', data: { id: this.$route.query.id } });
      console.log(result);
      if (`${result.errcode}` === '0') {
        this.$set(this, `info`, result.data);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.titles {
  border-left: 0.1875rem solid #409eff;
  padding-left: 1rem;
  font-size: 1rem;
  margin-top: 1rem;
}
.top__info {
  .el-col {
    padding: 0.5rem 0 0 1rem;
    color: #666666;
    font-size: 0.875rem;
    span {
      padding-left: 0.2rem;
    }
  }
  .el-col:first-child {
    color: #333333;
  }
}
</style>
