<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="openCreate()" >添加员工</el-button>
    </div>
    <div class="app-container">
         <div>
             <el-row :gutter="24">
                <el-col :span="8">
                  <el-input style="width: 300px" v-model="keyword"  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">全选</el-checkbox>
            <el-button size="small" icon="el-icon-delete" @click="">删除</el-button>
          </div>
              <el-table ref="multipleTable" 
              :header-cell-style="{ backgroundColor: 
              'rgb(245, 247, 250)'}" 
              :data="staffData" 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">
                  <div style="display:flex;align-items: center;">
                   <img :src="staffAvatar(scope.row)" alt="" srcset="" style="width:50px;height:50px; border-radius:50%;margin-right:5px;" >
                    <div>
                     <span>{{scope.row.name}}</span>
                    </div>
                 </div>
                  <!-- {{scope.row.name}} -->
               </template>
             </el-table-column>
            <el-table-column label="职称" align="center" >
              <template slot-scope="scope">
                   {{staffTitle(scope.row.user_title)}}
              </template>
            </el-table-column>
            <el-table-column label="介绍" align="center">
              <template slot-scope="scope">
                 <li v-html="scope.row.content"></li>
              </template>
            </el-table-column>
            <el-table-column label="手机号" align="center">
              <template slot-scope="scope">
                 {{scope.row.phone}}
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center">
              <template slot-scope="scope">
                {{staffCreateTime(scope.row.ctime)}}
              </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>
            <!-- 添加员工 -->
          <create-staff-form ref="createStaffForm" :staffsData="staffsData"></create-staff-form>

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

<script>
  import BreadCrumb from '../components/bread-crumb'
  import {getAllStaffInfo} from '@/api/act/staffmanager'
  import {getToken} from '@/api/qiniu'
  import {getFileExtension,uParseTime} from '@/utils/tools'
  import CreateStaffForm from "./components/CreateStaffForm";
  export default {
    name: 'articleComment',
    components:{
      BreadCrumb,
      CreateStaffForm,
    },
    data(){
      return{
        crumbs: [
          { path: false, name: '系统设置' },
          { path: '/Systemsetting/staffmanagement', name: '员工管理' }
        ],
         centerDialogVisible: false,
          radio: '1',
          value: '',
          qiniuDomain: 'https://images.shengws.com/',
          uploadData: { token: '', key: '' },
         user_types: [
            { index: 2, name: '医生' },
            { index: 3, name: '护士' },
            { index: 4, name: '运营' },
            ],
        user_titles: [
            { index: 1, name: '医士' },
            { index: 2, name: '医师' },
            { index: 3, name: '住院医师' },
            { index: 4, name: '主治医师' },
            { index: 5, name: '副主任医师' },
            { index: 6, name: '主任医师' },
            { index: 7, name: '护士' },
            { index: 8, name: '护师' },
            { index: 9, name: '主管护师' },
            { index: 10, name: '副主任护师' },
            { index: 11, name: '主任护师' },
            { index: 12, name: '运营专员' },
            { index: 13, name: '运营主管' },
            ],
        imageUrl: '',
        staffsData:[],
        form:{
          name:'',
          phone:'',
          birthday:'',
          gender:'',
          user_type:'',
          user_title:'',
          dochead:'',
          page:1,
          limit:10,
          content:'',
        },
         total:0,
         keyword:'',
        staffform:[],
         staffData:[],
      }
    },
    methods: {
      openCreate(){
           this.$refs.createStaffForm.open();
        },
        staffAvatar(row) {
          if(typeof(row.avatar) == "undefined" || !row.avatar || row.avatar.length==0) {
              if(row.gender == 2) {
             return 'https://images.shengws.com/201809182128222.png';
              }else {
                return 'https://images.shengws.com/201809182128111.png';
              }
           }else {
             return row.avatar
          }
        },
        handleSelectionChange(val){
           this.selectedArticles = val;
        },
        handleSizeChange(limit) {
            this.from.limit = limit;
            this.getAllStaffInfo();
          },
        handleCurrentChange(page) {
         this.form.page = page;
          this.getAllStaffInfo();
        },
        getAllStaffInfo(){
          getAllStaffInfo(this.form,this.keyword).then(response=>{
            if(response.data.state ==1){
              this.staffData = response.data.data.userStaffInfo;
              console.log("数据",this.staffData)
              this.total = response.data.data.total;
              console.log("总页数",this.total)
           }
         })
      },
        staffCreateTime(time) {
          return uParseTime(time, "{y}-{m}-{d} {h}:{i}:{s}");
        },
        staffTitle(title){
            if(title == 1){
              return "医士";
            }else if(title == 2){
                return "医师";
            }else if(title == 3){
                return "住院医师";
            }

        },     
          changeKey(){
          this.getAllStaffInfo()
         },
    },
    created(){
      this.getAllStaffInfo();
     }
  }
</script>

<style scoped>

</style>
