<template>
  <uni-row class="main" v-bind:style="{ height: client.win_height + 'px' }">
    <uni-col :span="24" class="one">
      <u-cell-group>
        <u-cell v-for="(i, index) in fields" :key="`cell-${index}`">
          <view slot="title">
            <view v-if="i.type === 'line'" class="line">
              <text>{{ i.label }}</text>
            </view>
            <view v-else>
              <text>{{ i.label }}：</text> {{ getText(i) }}
            </view>
          </view>
        </u-cell>
      </u-cell-group>
    </uni-col>
  </uni-row>
</template>

<script>
import { mapState, mapGetters, createNamespacedHelpers } from "vuex";
const _ = require("lodash");
const { mapActions } = createNamespacedHelpers("company_recruit_work");
export default {
  name: "info",
  props: {},
  components: {},
  data: function () {
    return {
      info: {},
      fields: [
        { label: "招聘企业", model: "company" },
        { label: "职位名称", model: "post" },
        { label: "职位分类", model: "post_type" },
        { label: "工作城市", model: "city" },
        { label: "工作性质", model: "nature" },
        { label: "学历要求", model: "education" },
        { label: "职位相关专业", model: "major" },
        {
          label: "职位诱惑",
          model: "lure",
          format: (i) => {
            try {
              return JSON.parse(i).join(";");
            } catch (error) {}
            return i;
          },
        },
        { label: "招聘人数", model: "num" },
        { label: "截止日期", model: "stop_date" },
        { label: "薪资报酬", model: "money" },
        { label: "薪酬福利", model: "welfare" },
        { label: "职位描述", model: "desc" },
        { label: "简历投递说明", model: "explain" },
        { label: "岗位要求", model: "ask" },
        { label: "其他描述", model: "other" },
        { label: "职位咨询联系方式", type: "line" },
        { label: "招聘联系人", model: "personal" },
        { label: "联系电话", model: "phone" },
      ],
    };
  },
  created() {},
  onLoad: function (option) {
    this.search(option);
  },
  methods: {
    ...mapActions(["fetch"]),
    async search({ id }) {
      const res = await this.fetch({ id });
      if (this.$checkRes(res)) {
        this.$set(this, `info`, res.data);
      }
    },
    getText(field) {
      const { model, format } = field;
      if (!format) return _.get(this.info, model, "");
      return format(_.get(this.info, model, ""));
    },
  },
  computed: {
    ...mapGetters(["client"]),
  },
};
</script>

<style lang="scss" scoped>
.main {
  background-color: #409eff;
  overflow-y: auto;
  .one {
    .line {
      margin-top: 5px;
      color: #2979ff;
      height: 10px;
      border-top: 1px solid #2979ff;
      text-align: center;
      span {
        position: relative;
        top: -12px;
        background: #fff;
        padding: 0 20px;
      }
    }
  }
}
</style>
