<template>
  <div class="recommend-container">
    <div class="recommendposition">
      <!-- :class="isdetail ? 'showborder' : ''" -->
      <h1 class="bottombox" style="text-align: center"><i>推荐职位</i></h1>
      <div style="text-align: center">
        <a-spin tip="加载中..." :spinning="isspinning"> </a-spin>
      </div>
      <div
        class="jobinfobox"
        v-for="(item, index) in relationList"
        :key="index"
      >
        <router-link :to="'/detail/' + item.id">
          <a href="javascript:;" @click="resetpage">
            <div class="imgbox">
              <img v-if="item.logo" :src="item.logo" alt="" />
              <img v-else src="../../../../static/img/nopicture.png" alt="" />
              <span
                >服务费<i
                  v-if="
                    item.returnFee &&
                    item.returnFee !== -1 &&
                    item.returnFee !== null
                      ? true
                      : false
                  "
                  >{{ item.returnFee }}</i
                ><i v-else> -</i>{{ item.servetype }}</span
              >
            </div>
            <div class="jobname">
              {{
                item.aliasName !== null && item.aliasName !== ""
                  ? item.aliasName
                  : item.storeName
              }}
            </div>
          </a>
        </router-link>
        <div class="jobinfo">
          <span>{{ item.district }}</span>
          <span>{{ item.gender }}</span>
          <span>{{ item.age }}</span>
        </div>
        <div class="jobtag">
          <!-- <span>返费</span> -->
          <span
            v-for="(item1, index) in item.jobSpecialLabelNames"
            :key="index"
            >{{ item1 }}</span
          >
        </div>
        <div class="jobprice">
          <template v-if="item.hourlyPay"
            ><span>{{ item.hourlyPayTemp / 100 }}</span
            >元/小时</template
          >
          <template v-else-if="item.dayPay"
            ><span>{{ item.hourlyPayTemp / 100 }}</span
            >元/日</template
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { disposeJobListData } from "../../../utils/commonUtil";
import {
  JobListApi,
  // getCityApi,
} from "../../../api/job";
export default {
  inject: ["reload"],
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      isspinning: false,
      isdetail: false,
      relationList: [],
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getRecommendJob();
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    console.log(this.$route.fullPath);
    if (this.$route.fullPath.indexOf("detail") > -1) {
      this.isdetail = true;
    }
    console.log(this.isdetail);
  },
  // 组件方法
  methods: {
    async getRecommendJob() {
      this.isspinning = true;
      try {
        const { data } = await JobListApi({
          pageNum: 1,
          pageSize: 3,
          jobCategory: 608,
        });
        console.log(data);
        this.relationList = disposeJobListData(data.data.recordList);

        console.log(this.relationList);
        this.relationList.forEach((item) => {
          item.age = "";
        });
        // this.$emit("update:relationList", this.relationList);
      } catch (error) {
        console.log(error);
      }
      this.isspinning = false;
    },
    resetpage() {
      console.log(1);
      setTimeout(() => {
        this.reload();
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      }, 1000);
    },
  },
};
</script>

<style scoped lang="less">
.showborder {
  border: 1px solid rgba(77, 87, 94, 0.1);
}
.recommendposition {
  // width: 270px;
  // height: 1008px;
  overflow: hidden;
  background: #ffffff;
  border-radius: 4px;
  padding: 0px 20px 4px 20px;

  h1 {
    // margin-bottom: 12px;
    text-align: left;
    &::after {
      display: none;
    }
    i {
      display: inline-block;
      line-height: 20px;
      border-bottom: 2px solid #ff6a00;
      padding: 6px 0;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      margin-top: -4px;
      width: 4px;
      height: 20px;
      margin-right: 8px;
      background: #ff6a00;
    }
  }
  .jobinfobox:last-of-type {
    border-bottom: none;
  }
  .jobinfobox {
    // width: 240px;
    // height: 298px;
    // margin-bottom: 16px;
    background: #ffffff;
    // border: 1px solid rgba(77, 87, 94, 0.1);
    border-radius: 4px;
    // padding: 20px;
    border-bottom: 1px solid #f2f0ec;

    margin-bottom: 20px;
    .imgbox {
      width: 200px;
      height: 200px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      span {
        position: absolute;
        // width: 118px;
        padding: 0 10px;
        height: 20px;
        left: 0;
        bottom: 0;
        background: #ff6a00;
        border-radius: 16px 16px 16px 0px;
        font-size: 12px;
        font-weight: 500;
        text-align: center;
        color: #ffffff;
        line-height: 20px;
      }
    }
    .jobname {
      // height: 45px;
      // margin: 12px 0;
      font-size: 18px;
      font-weight: normal;
      text-align: left;
      color: #4d575e;
      line-height: 18px;
      margin-top: 16px;
      // border-bottom: 1px solid #f2f0ec;
    }
    .jobinfo {
      margin-top: 16px;
      opacity: 0.5;
      font-size: 16px;
      font-weight: 400;
      text-align: left;
      color: #4d575e;
      line-height: 18px;
    }
    .jobtag {
      margin-top: 12px;
      text-align: left;
      // span:first-child {
      //   color: #ff6a00;
      //   background: rgba(254, 97, 0, 0.1);
      // }
      span {
        margin-right: 12px;
        font-size: 14px;
        padding: 3px 5px;
        background: rgba(51, 51, 51, 0.06);
        border-radius: 4px;
      }
      span:nth-of-type(n + 3) {
        display: none;
      }
    }
    .jobprice {
      margin-top: 16px;
      margin-bottom: 16px;
      font-size: 16px;
      text-align: left;
      color: #ff6a00;
      font-weight: normal;
      line-height: 18px;
      span {
        font-size: 20px;
      }
    }
  }
}
</style>
