<template>
  <div class="layer">
    <el-button type="primary" plain @click="previewData = getNew()">添加职位</el-button>

    <el-table :data="personnels" style="width: 100%">
      <el-table-column prop="address" label="工作地点" width="100px">
      </el-table-column>
      <el-table-column prop="type" label="岗位类别"  width="100px">
      </el-table-column>
      <el-table-column prop="title" label="岗位" width="100px">
      </el-table-column>
      <el-table-column prop="count" label="招聘人数" width="100px">
      </el-table-column>
      <el-table-column prop="describe" label="职位描述">
        <div slot-scope="{row}" style="text-align:left">
          <p v-for="(t, i) in row.describe" :key="i">{{i+1}}.{{t}}</p>
        </div>
      </el-table-column>
      <el-table-column prop="requirement" label="任职要求">
        <div slot-scope="{row}" style="text-align:left">
          <p v-for="(t, i) in row.requirement" :key="i">{{i+1}}.{{t}}</p>
        </div>
      </el-table-column>
      <el-table-column prop="bonus" label="加分项">
        <div slot-scope="{row}" style="text-align:left">
          <p v-for="(t, i) in row.bonus" :key="i">{{i+1}}.{{t}}</p>
        </div>
      </el-table-column>
    <el-table-column label="操作" width="160px">
      <template slot-scope="scope">
        <el-button size="mini" @click="previewData=scope.row">编辑</el-button>
        <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>

    <div class="preview" v-if="previewData">
      <div class="preview-layer">
        <Edit :datap="previewData" class="layer" @quit="previewData = null" @submit="insert"/>
      </div>
    </div>

  </div>
</template>

<script>
import edit from './edit'

export default {
  data () {
    return {
      personnels: [],
      previewData: null
    }
  },
  methods: {
    getNew () {
      return {
        language: '',
        text: '',
        type: '',
        describe: [''],
        requirement: [''],
        bonus: ['']
      }
    },
    async referData () {
      try {
        let {content} = await this.$http.get('/personnel')
        content.forEach(item => {
          item.describe = JSON.parse(item.describe)
          item.requirement = JSON.parse(item.requirement)
          item.bonus = item.bonus ? JSON.parse(item.bonus) : []
        })
        this.personnels = content
      } catch (e) {
        this.$error('服务端发生错误！')
      }
    },
    async insert (data) {
      data.describe = JSON.stringify(data.describe)
      data.requirement = JSON.stringify(data.requirement)
      data.bonus = JSON.stringify(data.bonus)
      try {
        if (data.id) {
          await this.$http.put('/personnel', data)
        } else {
          await this.$http.post('/personnel', data)
        }
        this.previewData = null
        this.referData()
      } catch (e) {
        this.$error('服务端发生错误！')
      }
    },
    async del (data) {
      if (!confirm('删除后无法恢复，你确定要删除这个职位吗？')) return

      try {
        await this.$http.delete('/personnel/' + data.id)
        this.referData()
      } catch (e) {
        this.$error('服务端发生错误！')
      }
    }
  },
  mounted () {
    this.referData()
  },
  components: { Edit: edit }
}
</script>

<style scoped>
@import url('./style.css');
</style>
