<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs='crumbs'></bread-crumb>
       <el-button  style="float:right;" type="primary" size="small" icon="el-icon-circle-plus-outline" @click="centerDialogVisible = true" >添加员工</el-button>
    </div>
    <div class="app-container">
         <div>
             <el-row :gutter="24">
                <el-col :span="8">
                  <el-input style="width: 300px"  placeholder="请输入您需要搜索的内容"></el-input>
                  <el-button type="primary"  icon="el-icon-search" @click="changeKey">搜索</el-button>
                </el-col>
             </el-row>
         </div>
         <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
            <el-checkbox style="width: 30px" v-model="checked" @change="changeAllSelected">全选</el-checkbox>
            <el-button size="small" icon="el-icon-delete" @click="batchDelete">删除</el-button>
          </div>
              <el-table ref="multipleTable" :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :data="tableData" border fit highlight-current-row  style="width: 100%;margin-top: 10px;">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column label="员工" align="center">
               <template slot-scope="scope">

               </template>
             </el-table-column>
            <el-table-column label="职称" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="介绍" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="手机号" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-edit-outline"
                    >
                  </el-button>
                  </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10,20,50,100]"
            :page-size="10"
            background
            style="margin-top:20px;float: right"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>

          <el-dialog
              title="添加会员"
              :visible.sync="centerDialogVisible"
              width="50%"
              center>
              <el-form label-width="80px" class="clearfix" :model="form" ref="form">
                 <el-row>
                   <el-col :span="12">
                      <el-form-item label="姓名:">
                           <el-input placeholder="请输入姓名">

                           </el-input>
                      </el-form-item>
                   </el-col>
                   <el-col :span="12">
                     <el-form-item label="手机号:">
                       <el-input placeholder="请输入手机号">

                       </el-input>
                     </el-form-item>
                   </el-col>
                 </el-row>
                <el-row>
                   <el-col :span="12">
                       <el-form-item label="性别:">
                         <el-radio v-model="radio" label="1">男</el-radio>
                         <el-radio v-model="radio" label="2">女</el-radio>
                       </el-form-item>
                   </el-col>
                  <el-col :span="12">
                    <el-form-item label="生日:">
                          <el-time-select
                            v-model="value"
                            :picker-options="{
                              start: '08:30',
                              step: '00:15',
                              end: '18:30'}"
                            placeholder="选择时间">
                        </el-time-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="员工职称:">
                          <template>
                            <el-select v-model="value1" multiple placeholder="请选择">
                              <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                              </el-option>
                            </el-select>
                          </template>
                        </el-form-item>
                    </el-col>
                  <el-col :span="6">
                      <template>
                        <el-select v-model="value2" multiple placeholder="请选择">
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </template>
                  </el-col>
                  <el-col :span="4">
                      <el-form-item label="医生头像:">
                        <el-upload
                          class="avatar-uploader"
                          action="https://jsonplaceholder.typicode.com/posts/"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess"
                          :before-upload="beforeAvatarUpload">
                          <img v-if="imageUrl" :src="imageUrl" class="avatar">
                          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                </el-row>
                 <el-row>
                     <el-col :span="24">
                         <el-form-item label="医生简介:">
                           <keep-alive>
                             <neditor ref="neditor"
                                      id="editor">
                             </neditor>
                           </keep-alive>
                         </el-form-item>
                     </el-col>
                 </el-row>
              </el-form>
              <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
               </span>
          </el-dialog>

    </div>
  </div>
</template>

<script>
  import BreadCrumb from '../components/bread-crumb'
  import Neditor from '@/components/Neditor'
  export default {
    name: 'articleComment',
    components:{
      BreadCrumb,
      Neditor,
    },
    data(){
      return{
        crumbs: [
          { path: false, name: '系统设置' },
          { path: '/Systemsetting/staffmanagement', name: '员工管理' }
        ],
         centerDialogVisible: false,
          radio: '1',
          value: '',
          options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value1: [],
        value2: [],
        imageUrl: ''
      }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

<style scoped>
    .avatar-uploader{
      border: 1px solid #d9d9d9;
      border-radius: 1px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader{
      border-color: #d9d9d9;
    }
    .avatar-uploader-icon {
      font-size: 20px;
      color: #8c939d;
      width: 65px;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
    .avatar {
      width: 50px;
      height: 50px;
      display: block;
    }
</style>
