<template>
  <div id="detail">
    <detail-layout>
      <template #title>
        <back-bar to="/manager/plan/index" title="面试详情"></back-bar>
      </template>
      <template #main>
        <el-row>
          <ul class="mainInt">
            <li>
              <el-col :span="24">
                <el-radio v-model="radio" label="1">
                  <p class="danxuan">
                    <span><i class="el-icon-user-solid"></i>线下面试安排</span>
                    <br />
                    <span>自主进行线下面试，提供面试通知。</span>
                  </p>
                </el-radio>
              </el-col>
            </li>
            <li>
              <el-col :span="24">
                <el-radio v-model="radio" label="2">
                  <p class="danxuan">
                    <span><i class="el-icon-video-camera-solid"></i>申请学校免费面试间</span>
                    <br />
                    <span>连接学校远程面试间进行视频面试。</span>
                  </p>
                </el-radio>
              </el-col>
            </li>
            <li>
              <el-col :span="24">
                <el-radio v-model="radio" label="3">
                  <p class="danxuan">
                    <span><i class="el-icon-video-camera-solid"></i>申请校园面试间</span>
                    <br />
                    <span>连接"同学们好"校园视频面试间进行视频面试。</span>
                  </p>
                </el-radio>
              </el-col>
            </li>
          </ul>
        </el-row>
        <el-form v-if="radio === '1'" ref="form" :model="form" label-width="80px">
          <el-col :span="12">
            <el-form-item label="面试地点">
              <el-col :span="24">
                <el-input v-model="form.name"></el-input>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日期">
              <el-col :span="24">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="时间范围">
              <template>
                <el-time-picker
                  is-range
                  v-model="form.value1"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                >
                </el-time-picker>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="说明">
              <el-input v-model="form.explain"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-col :span="24" class="demandTit">
              <div class="demandTitBtn">
                <el-button type="success">导入面试夹</el-button>
                <el-button type="success">打印面试名单</el-button>
              </div>
              <el-row class="profileLi">
                <template>
                  <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column align="center" label="序号" type="index" width="50"> </el-table-column>
                    <el-table-column align="center" label="岗位" prop="post" width="100"> </el-table-column>
                    <el-table-column align="center" label="姓名" prop="name" width="100"> </el-table-column>
                    <el-table-column align="center" label="学校" prop="school" width="100"> </el-table-column>
                    <el-table-column align="center" label="专业" prop="major" width="110"> </el-table-column>
                    <el-table-column align="center" label="投递时间" prop="day" width="100"> </el-table-column>
                    <el-table-column align="center" label="手机号" prop="phone" width="120"> </el-table-column>
                    <el-table-column align="center" label="操作">
                      <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-row>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-form-item style="width:100%;margin: 25px 0px;">
              <el-col :span="3" align="center" style="margin-left:250px;">
                <el-checkbox v-model="form.checked">群发通知</el-checkbox>
              </el-col>
              <el-col :span="3" align="center">
                <el-button type="success">保存</el-button>
              </el-col>
            </el-form-item>
          </el-col>
        </el-form>
        <el-form v-if="radio === '2'" ref="form" :model="form" label-width="80px">
          <el-col :span="12">
            <el-form-item label="学校">
              <el-col :span="24">
                <el-select v-model="form.school" placeholder="请选择" style="width:100%">
                  <el-option label="长春大学" value="长春大学"></el-option>
                  <el-option label="长春光华学院" value="长春光华学院"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="场地">
              <el-col :span="24">
                <el-select v-model="form.field" placeholder="请选择" style="width:100%">
                  <el-option label="教学楼一" value="教学楼一"></el-option>
                  <el-option label="教学楼二" value="教学楼二"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动时间">
              <el-col :span="24">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="说明">
              <el-input v-model="form.explain"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="时间">
              <el-radio-group v-model="form.time">
                <el-radio label="1">9:00—12:00</el-radio>
                <el-radio label="2">14:00—18:00</el-radio>
                <el-radio label="3">19:00—21:00</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-col :span="24" class="demandTit">
              <div class="demandTitBtn">
                <el-button type="success">导入面试夹</el-button>
                <el-button type="success">打印面试名单</el-button>
              </div>
              <el-row class="profileLi">
                <template>
                  <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column align="center" label="序号" type="index" width="50"> </el-table-column>
                    <el-table-column align="center" label="岗位" prop="post" width="100"> </el-table-column>
                    <el-table-column align="center" label="姓名" prop="name" width="100"> </el-table-column>
                    <el-table-column align="center" label="学校" prop="school" width="100"> </el-table-column>
                    <el-table-column align="center" label="专业" prop="major" width="110"> </el-table-column>
                    <el-table-column align="center" label="投递时间" prop="day" width="100"> </el-table-column>
                    <el-table-column align="center" label="手机号" prop="phone" width="120"> </el-table-column>
                    <el-table-column align="center" label="操作">
                      <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-row>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-form-item style="width:100%;margin: 25px 0px;">
              <el-col :span="3" align="center" style="margin-left:250px;">
                <el-checkbox v-model="form.checked">群发通知</el-checkbox>
              </el-col>
              <el-col :span="3" align="center">
                <el-button type="success">保存</el-button>
              </el-col>
            </el-form-item>
          </el-col>
        </el-form>
        <el-form v-if="radio === '3'" ref="form" :model="form" label-width="80px">
          <el-col :span="12">
            <el-form-item label="学校">
              <el-col :span="24">
                <el-select v-model="form.school" placeholder="请选择" style="width:100%">
                  <el-option label="请选择" value="请选择"></el-option>
                  <el-option label="南海测试" value="南海测试"></el-option>
                  <el-option label="广州商学院" value="广州商学院"></el-option>
                  <el-option label="广东水利电力职业学院" value="广东水利电力职业学院"></el-option>
                  <el-option label="回收" value="回收"></el-option>
                  <el-option label="华南农业大学珠江学院" value="华南农业大学珠江学院"></el-option>
                  <el-option label="潮汕学院" value="潮汕学院"></el-option>
                  <el-option label="7楼办公室" value="7楼办公室"></el-option>
                  <el-option label="广东技术师范学院" value="广东技术师范学院"></el-option>
                </el-select>
                <!-- <el-select v-model="form.value" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select> -->
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时间">
              <el-col :span="24">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="时间">
              <el-radio-group v-model="form.time">
                <el-radio label="1">9:00—12:00</el-radio>
                <el-radio label="2">14:00—18:00</el-radio>
                <el-radio label="3">19:00—21:00</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="说明">
              <el-input v-model="form.explain"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-col :span="24" class="demandTit">
              <div class="demandTitBtn">
                <el-button type="success">导入面试夹</el-button>
                <el-button type="success">打印面试名单</el-button>
              </div>
              <el-row class="profileLi">
                <template>
                  <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column align="center" label="序号" type="index" width="50"> </el-table-column>
                    <el-table-column align="center" label="岗位" prop="post" width="100"> </el-table-column>
                    <el-table-column align="center" label="姓名" prop="name" width="100"> </el-table-column>
                    <el-table-column align="center" label="学校" prop="school" width="100"> </el-table-column>
                    <el-table-column align="center" label="专业" prop="major" width="110"> </el-table-column>
                    <el-table-column align="center" label="投递时间" prop="day" width="100"> </el-table-column>
                    <el-table-column align="center" label="手机号" prop="phone" width="120"> </el-table-column>
                    <el-table-column align="center" label="操作">
                      <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-row>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-form-item style="width:100%;margin: 25px 0px;">
              <el-col :span="3" align="center" style="margin-left:250px;">
                <el-checkbox v-model="form.checked">群发通知</el-checkbox>
              </el-col>
              <el-col :span="3" align="center">
                <el-button type="success">保存</el-button>
              </el-col>
            </el-form-item>
          </el-col>
        </el-form>
      </template>
    </detail-layout>
  </div>
</template>

<script>
import detailLayout from '@/layout/detail-layout.vue';
import backBar from '@/components/back-bar.vue';
import formItem from '@/components/form-item.vue';
export default {
  name: 'detail',
  props: {},
  components: {
    detailLayout,
    backBar,
  },
  data: () => ({
    radio: '1',
    form: {
      name: '',
      date1: '',
      explain: '',
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      checked: false,
      school: '',
      field: '',
      time: '',
    },
    tableData: [
      {
        post: '前端',
        name: '顾红伟',
        school: '长春大学',
        major: '本科',
        day: '2019-07-17',
        phone: '17319450324',
      },
    ],
    // options: [{ value: '长春大学', label: '长春大学' }, { value: '长春光华学院', label: '长春光华学院' }],
    // value: '',
  }),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.title_space {
  margin: 0.9rem 0;
  font-size: 1rem;
}
.bord {
  float: left;
  background: #f4f5f9;
  border: 1px solid #e7e8ec;
}
.text-owt {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.detailReturn .el-button {
  float: left;
  width: 26px;
  height: 26px;
  border-radius: 90px;
  padding: 0;
  border: 2px solid #9e9fa1;
  margin: 0 5px 0 0;
}
.detailReturn .el-button:hover {
  background: #fff;
}
.detailReturn .el-button:hover i {
  color: #333333;
}
.detailReturn .el-button i {
  font-size: 15px;
  font-weight: bold;
}
.detailTit {
  float: left;
  width: 96%;
  height: 26px;
  line-height: 26px;
  font-size: 14px;
  color: #333333;
}
li {
  list-style: none;
}
p {
  padding: 0;
  margin: 0;
}
.mainInt {
  width: 100%;
  height: 102px;
  padding: 0 0px;
}
.mainInt li {
  float: left;
  width: 280px;
  height: 86px;
  margin: 0 0 0 40px;
}
/deep/.mainInt li .el-radio__input {
  position: absolute;
  top: 25%;
}
.danxuan {
  width: 170px;
  height: 66px;
  position: relative;
  top: -15px;
  left: 20px;
  padding: 10px;
  background: #60d295;
  color: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.danxuan span {
  width: 190px;
  white-space: pre-wrap;
  line-height: 20px;
}
.demandTit {
  float: left;
}
.demandTitBtn {
  float: right;
  width: 100%;
  text-align: right;
  margin-bottom: 10px;
}
.demandTitBtn .el-button {
  padding: 9px 12px;
}
</style>
