<template>
  <div>
    <div class="position-recruit">
      <div class="position-recruit-search">
        <div class="position-recruit-title" >
          职位搜索
        </div>
        <div class="position-recruit-search-list">
          <div class="position-recruit-search-list_item">
            <span>工作地点：</span>
            <span
              v-for="address in addresss"
              :key="address"
              class="span_styl"
              :class="{active: aIndex === address}"
              @click="aIndex = address">{{address}}</span>
          </div>
          <div class="position-recruit-search-list_item">
            <span>岗位类别：</span>
            <span
              v-for="type in types"
              :key="type"
              class="span_styl"
              :class="{active: tIndex === type}"
              @click="tIndex = type">{{type}}</span>
          </div>
        </div>
        <div class="position-recruit-search-con"  >
          <span>
            <input type="text" placeholder="请输入关键字" class="form_input" v-model="filterVal">
          </span>
          <span class="search-btn">搜索</span>
        </div>
      </div>
      <div class="position-recruit-list">
        <div class="position-recruit-title " style="border-bottom: none;" >
          职位列表
        </div>
        <div class="position-recruit-list-con">
          <template v-if="isMobile">
            <div v-for="p in filter" :key="p.name" class="t-table">
              <div class="t-l">
                <div>{{p.name}}</div>
                <div>
                  <span>{{p.address}},</span>
                  <span>招{{p.count}}人,</span>
                  <span>发布于{{p.date}}</span>
                </div>
              </div>
              <div class="t-r">
                  <span class="apply-btn" @click="currItem=p">加入我们</span>
              </div>
            </div>
            <div v-if="!filter.length" style="text-align: center;">
              暂无此职位
            </div>
          </template>
          <template v-else>
             <table class="recruit-list-table" >
                <tr>
                  <th>职位名称</th>
                  <th>职位类别</th>
                  <th style="text-align: center;">地点</th>
                  <th style="text-align: center;">操作</th>
                </tr>
                <tr v-for="p in filter" :key="p.name">
                  <td>{{p.name}}</td>
                  <td>{{p.type}}</td>
                  <td style="text-align: center;">
                    <span style="padding-right: 10px;">{{p.address}}</span>
                  </td>
                  <td style="text-align: center;">
                    <span class="apply-btn" @click="currItem=p">申请</span>
                  </td>
                </tr>
                <tr v-if="!filter.length">
                  <td colspan="4" style="text-align: center;">暂无此职位</td>
                </tr>
              </table>
          </template>
        </div>
      </div>
    </div>

    <div class="model" v-show="currItem" @click="currItem = null"><model :item="currItem" /></div>
  </div>
</template>
<script>
import model from './model.vue'
import browser from '@/util/browser.js'

const data = [
  {
    name: '图像算法研究员（机械臂视觉）',
    type: '开发类',
    address: '珠海',
    count: 1,
    date: '2018-06-12',
    desc: '1. 负责基于机械臂的图像识别算法的开发与优化',
    req: `1.熟练掌握C/C++和MATLAB，Python 有很强的代码实现能力<br>
          2.熟练使用过OpenCV/OpenGL/PCL等图形图像开源库<br>
          3.有在Linux和Windows系统环境下编程的经验<br>
          4.具备良好的学习能力，熟练掌握常见数据结构和算法，能够分析和优化计算逻辑，提升性能`,
    bonus: `1.有做过嵌入式图像识别算法相关项目经验者优先<br>
            2.有使用过HALCON计算机视觉库做过相关项目者优先`
  },
  {
    name: '图像算法研究员（SLAM）',
    type: '开发类',
    address: '珠海',
    count: 1,
    date: '2018-06-12',
    desc: `1.算法的移植和产品化<br>
           2.研究并开发移动设备在未知环境中，基于相机、IMU等的SLAM定位算法<br>
           3.研究并开发移动机器人自主导航中的路径规划算法`,
    req: `1.熟练使用C/C++、OpenCV，并能在Linux环境下编程，熟悉ROS<br>
          2.熟悉视觉SLAM算法，了解其基础理论，熟悉视觉传感器和IMU传感器的标定<br>
          3.具备良好的学习能力`,
    bonus: ``
  },
  {
    name: '图像算法研究员（SFM）',
    type: '开发类',
    address: '珠海',
    count: 1,
    date: '2018-06-12',
    desc: `1. 负责基于图片的三维重建算法开发与优化<br>
           2. 负责在已有三维重建算法基础上开发新功能<br<
           3. 协助上司完成其他工作`,
    req: `1.模式识别/通信/计算机/自动化/数学相关专业硕士及以上学历；<br>
          2.熟练掌握C/C++和MATLAB 有很强的代码实现能力；<br>
          3.熟练使用过OpenCV/ceres-solver等图形图像开源库；<br>
          4.有在Linux和Windows系统环境下编程的经验；<br>
          5.具备良好的学习能力，能够熟练阅读英文文献，并根据文献实现相关算法；<br>
          6.熟练掌握常见数据结构和算法，能够分析和优化计算逻辑，提升性能；<br>
          7.此岗位亦接受无工作经验但愿意从事三维重建方向的硕士在校生。`,
    bonus: `1.有做过特征点提取与匹配，基于图片三维重建（SFM）相关项目经验者优先`
  },
  {
    name: '图像算法研究员（视觉深度学习方向）',
    type: '开发类',
    address: '珠海',
    count: 2,
    date: '2018-06-12',
    desc: `1、负责研究基于深度学习的特征点描述子、立体视觉、slam以及图片的深度预测`,
    req: `1、熟悉聚类、分类、回归、图模型等机器学习算法及原理<br>
          2、熟练掌握pytorch，tensorflow等深度学习框架的一种或多种<br>
          3、了解经典计算机视觉任务，如sfm、slam、目标检测等<br>
          4，有相关项目经验或有意向将深度学习应用于经典计算机视觉任务`,
    bonus: ``
  },
  {
    name: '图像算法研究员（全景图像拼接方向）',
    type: '开发类',
    address: '珠海',
    count: 1,
    date: '2018-06-12',
    desc: `1. 负责鱼眼相机标定算法开发与优化<br>
           2. 负责全景相机图像拼接算法开发与优化`,
    req: `1.模式识别/通信/计算机/自动化/数学相关专业硕士及以上学历<br>
          2.熟练掌握 C/C++ 和 MATLAB 有很强的代码实现能力<br>
          3.熟练使用过OpenCV/OpenGL等图形图像开源库<br>
          4.熟练掌握鱼眼相机标定和硬件结构及其相关参数<br>
          5.熟练掌握常见数据结构和算法，能够分析和优化计算逻辑，提升性能`,
    bonus: ``
  },
  {
    name: '网页设计师',
    type: '设计类',
    address: '芜湖',
    count: 1,
    date: '2018-06-12',
    desc: `1.分析网站的自身定位以及网站受众特点进行网站风格确立;<br>
           2.负责用多种创意表达方式进行视觉刻画<br>
           3.进行网站UI(用户界面)、UE(用户体验)设计;`,
    req: `1.排版构图、色彩搭配、字体设计、以及光影材质能力过硬<br>
          2.熟练掌握网页设计的相关软件Photoshop、Illustrator、Fireworks、Dreamweaver<br>
          3.熟练网页设计规范、网页布局、制作流程、以网页布局排版、切图、交互知识。`,
    bonus: '1. 具备一些前端代码HTML、CSS的运用能力'
  },
  {
    name: '平面设计师',
    type: '设计类',
    address: '芜湖',
    count: 1,
    date: '2018-06-12',
    desc: `1、负责公司产品及项目PC端、移动端的平面设计<br>
           2、负责项目及产品需求制作效果图以及相关宣传推广用图<br>
           3、负责公司日常运营推广专题的视觉设计，如企业形象VI设计、宣传画册设计、展架设计、包装设计、PPT设计等<br>
           4、完成上级安排的其他设计相关工作`,
    req: `1、熟练掌握Dreamweaver、Fireworks、Photoshop、Illustrator、pagemaker、InDesign、方正飞腾等设计软件<br>
          2、有良好的设计能力、色彩感觉和美术功底；排版构图、色彩搭配、字体设计、印刷材质及印刷规范能力强`
  },
  {
    name: '嵌入式硬件工程师',
    type: '硬件类',
    address: '珠海',
    count: 1,
    date: '2018-06-12',
    desc: `1. 负责单板机原理图、PCB设计<br>
           2. 负责电路系统功能测试验证`,
    req: `1. 数字模拟电路基础扎实<br>
          2. 熟悉ARM处理器系统、DDR内存系统<br>
          3. 了解EMC设计`
  }
]

export default {
  data () {
    return {
      position: data,
      aIndex: '全部',
      tIndex: '全部',
      filterVal: '',
      isMobile: browser.mobile,
      currItem: undefined
    }
  },
  computed: {
    types () {
      let ts = ['全部']
      this.position.forEach(p => {
        if (!~ts.indexOf(p.type)) {
          ts.push(p.type)
        }
      })
      return ts
    },
    addresss () {
      let ts = ['全部']
      this.position.forEach(p => {
        if (!~ts.indexOf(p.address)) {
          ts.push(p.address)
        }
      })
      return ts
    },
    filter () {
      let filterPosition = this.position
      if (this.aIndex !== '全部') {
        filterPosition = filterPosition.filter(p => p.address === this.aIndex)
      }

      if (this.tIndex !== '全部') {
        filterPosition = filterPosition.filter(p => p.type === this.tIndex)
      }

      if (this.filterVal) {
        filterPosition = filterPosition.filter(p => {
          for (let key of ['name', 'type', 'address']) {
            if (!p[key].indexOf) continue
            let index = p[key].indexOf(this.filterVal)
            if (~index) {
              return true
            }
          }
          return false
        })
      }
      return filterPosition
    }
  },
  components: {model}
}
</script>
<style lang="css" scoped>
  @import url('./style.css');
</style>
