<template>
  <div id="resume-tem">
    <el-row ref="search" :gutter="10">
      <el-col :span="5" class="searchInput"><el-input v-model="search" placeholder="请输入学生名称"></el-input></el-col>
      <!-- <el-col :span="4" class="searchSelect">
        <el-select v-model="value" placeholder="全部">
          <el-option v-for="(item, index) in getOptions()" :key="index" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-col> -->
      <el-col :span="2" class="searchBtn">
        <el-button circle icon="el-icon-search" @click="toSearch()"></el-button>
      </el-col>
    </el-row>
    <el-row class="pageStyle" ref="resume">
      <el-col :span="6" class="interview">
        <ul class="interviewUl">
          <li v-for="(item, index) in list" :key="index" @click="searchInfo(item.id)">
            <p class="item-text">{{ item.name || 'none' }}</p>
          </li>
          <li v-if="list.length <= 0">
            <p class="item-text">暂无数据</p>
          </li>
        </ul>
      </el-col>
      <el-col :span="18" class="p10" v-if="info && info.id">
        <el-row ref="btnGroup" type="flex" align="middle" justify="center" class="contextRow">
          <el-col :span="3">
            <el-button size="small" type="success" @click="changeStatus('2')">暂不考虑</el-button>
          </el-col>
          <el-col :span="3">
            <el-button size="small" type="success" @click="changeStatus('1')">纳入考虑</el-button>
          </el-col>
          <el-col :span="3">
            <el-button size="small" type="success" @click="test()">通&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知</el-button>
          </el-col>
          <!-- <el-col :span="3">
            <el-button size="small" type="success" @click="test()">简历下载</el-button>
          </el-col> -->
        </el-row>
        <!-- <el-row ref="remarkPart" type="flex" align="middle" justify="center" :gutter="10" class="contextRow">
          <el-col :span="15">
            <el-input v-model="input2" placeholder="备注"></el-input>
          </el-col>
          <el-col :span="3">
            <el-button type="success" @click="test()">保存</el-button>
          </el-col>
        </el-row> -->
        <resume-context :info="info"></resume-context>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import resumeContext from './context.vue';
export default {
  name: 'resume-tem',
  props: {
    list: { type: Array, default: () => [] },
    info: { type: Object, default: () => {} },
  },
  components: {
    resumeContext,
  },
  data: () => ({
    search: '',
    input2: '2',
    value: '',
    options: [
      {
        value: '1',
        label: '全部',
      },
      {
        value: '2',
        label: '未查看',
      },
      {
        value: '3',
        label: '已查看',
      },
      {
        value: '4',
        label: '不合格',
      },
    ],
    optionsint: [
      {
        value: '1',
        label: '全部',
      },
      {
        value: '2',
        label: '第一轮',
      },
      {
        value: '3',
        label: '第二轮',
      },
      {
        value: '4',
        label: '第三轮以上',
      },
    ],
    optionsemp: [
      {
        value: '1',
        label: '全部',
      },
      {
        value: '2',
        label: '未明确',
      },
      {
        value: '3',
        label: '明确录用',
      },
    ],
  }),
  created() {},
  computed: {},
  methods: {
    toSearch() {
      this.$emit('search', { studname: this.search });
    },
    searchInfo(id) {
      this.$emit('searchInfo', id);
    },
    changeStatus(value) {
      this.$emit('changeStatus', { id: this.info.id, status: value });
    },
    test() {
      alert(1);
    },
    getOptions() {
      if (this.type === '1') {
        return this.options;
      } else if (this.type === '2') {
        return this.optionsint;
      } else {
        return this.optionsemp;
      }
    },
  },
};
</script>

<style lang="less" scoped>
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
p {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
.interview {
  height: 57.4375rem;
  border-right: 0.0625rem solid #d9dadc;
  overflow-y: scroll;
}
.interviewUl li {
  border-bottom: 0.0625rem solid #f5f5f5;
  position: relative;
  padding: 0.625rem 0.9375rem;
  background: #44b549;
}
.interviewUl li .item-text {
  color: #fff;
  font-size: 0.875rem;
}
.pageStyle {
  width: 100%;
  min-height: 55.4375rem;
  border: 0.0625rem solid #ccc;
  margin-top: 1rem;
}
.p10 {
  padding: 0.625rem 1.25rem;
  overflow-y: scroll;
}
.contextRow {
  margin-top: 1rem;
}
</style>
