<!-- 员工管理 -->
<template>
    <div class="keycode">
        <!-- 添加 -->
        <div style="text-align: right;margin-bottom: 20px;">
          <el-button type="primary" class="keycode-Info-li" size="small" @click="keyCodeShow = true">添加</el-button>
        </div>
        <!-- 查询列表 -->
        <el-row class="keycode-list">
            <el-col :span="24">
                <el-table
                    :data="tableData"
                    border
                    :header-cell-style="{'text-align':'center'}"
                    :cell-style="{'text-align':'center'}"
                    style="width: 100%"
                    height="calc(100vh - 250px)">
                    <el-table-column
                    type="index"
                    label="序号"
                    width="50">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="员工名称"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="role_type"
                    label="员工类型"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="mobile"
                    label="员工账号"
                    width="150">
                    </el-table-column>
                    <el-table-column
                    prop="ctime"
                    label="创建时间"
                    width="150">
                    </el-table-column>
                   
                    <el-table-column
                    prop="remark"
                    label="备注"
                    width="">
                    </el-table-column>
                    <el-table-column
                    label="操作"
                    width="300">
                    <template slot-scope="scope">
                      <el-button type="primary" @click="details(scope.row)">详情</el-button>
                      <el-button type="warning" @click="editor(scope.row)">编辑</el-button>
                      <el-button :type="scope.row.status==1 ? 'danger' : 'success'" @click="deletclick(scope.row)">{{ scope.row.status==1 ? '禁用' : '恢复' }}</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <div style="text-align: right;">
          <el-pagination
              :hide-on-single-page="true"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
        <!-- 添加 -->
        <el-dialog title="新增员工" :visible.sync="keyCodeShow">
            <el-form :model="keyCodeForm"  ref="keyCodeForm">
                <el-form-item label="员工名称" :label-width="keyCodeWidth" >
                    <el-input v-model="keyCodeForm.name" autocomplete="off" placeholder="请输入关键词" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="员工类型" :label-width="keyCodeWidth" >
                    <el-select v-model="keyCodeForm.type" placeholder="请选择" style="width: 60%;">
                      <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="员工账号" :label-width="keyCodeWidth" >
                    <el-input v-model="keyCodeForm.number" autocomplete="off" placeholder="请输入关键词" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="员工密码" :label-width="keyCodeWidth" >
                    <el-input v-model="keyCodeForm.password" autocomplete="off" placeholder="请输入关键词" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="keyCodeWidth" >
                    <el-input type="textarea" v-model="keyCodeForm.remarks" autocomplete="off" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="keyCodeShow =!keyCodeShow">取 消</el-button>
              <el-button @click="keyCodeSubmit" type="primary">添 加</el-button>
                
            </div>
        </el-dialog>
        <!-- 详情 -->
        <el-dialog title="员工详情" :visible.sync="detailsshow">
            <el-form :model="detailsForm"  ref="keyCodeForm">
                <el-form-item label="员工名称" :label-width="keyCodeWidth" prop="name">
                    <el-input v-model="detailsForm.name" autocomplete="off" placeholder="请输入关键词"></el-input>
                </el-form-item>
                <el-form-item label="员工类型" :label-width="keyCodeWidth" prop="type">
                    <!-- <el-select v-model="detailsForm.type" placeholder="请选择" style="width: 60%;">
                      <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select> -->
                    <el-input v-model="detailsForm.type" autocomplete="off" placeholder="请输入关键词"></el-input>
                </el-form-item>
                <el-form-item label="员工账号" :label-width="keyCodeWidth" prop="number">
                    <el-input v-model="detailsForm.number" autocomplete="off" placeholder="请输入关键词"></el-input>
                </el-form-item>
                <el-form-item label="员工密码" :label-width="keyCodeWidth" prop="password">
                    <el-input v-model="detailsForm.password" autocomplete="off" placeholder="请输入关键词"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="keyCodeWidth" prop="remarks">
                    <el-input type="textarea" v-model="detailsForm.remarks" autocomplete="off" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="detailsshow =!detailsshow">取 消</el-button>
              <el-button @click="keyCodeSubmit('keyCodeForm')" type="primary">添 加</el-button>
                
            </div>
        </el-dialog>
        <!-- 编辑 -->
        <el-dialog title="员工编辑" :visible.sync="editorshow">
            <el-form :model="detailsForm"  ref="keyCodeForm">
                <el-form-item label="员工名称" :label-width="keyCodeWidth" prop="name">
                    <el-input v-model="detailsForm.name" autocomplete="off" placeholder="请输入关键词" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="员工类型" :label-width="keyCodeWidth" prop="type">
                  <el-select v-model="detailsForm.type" placeholder="请选择" style="width: 60%;">
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                    <!-- <el-input v-model="editorForm.type" autocomplete="off" placeholder="请输入关键词"></el-input> -->
                </el-form-item>
                <el-form-item label="员工账号" :label-width="keyCodeWidth" prop="number">
                    <el-input v-model="detailsForm.number" autocomplete="off" placeholder="请输入关键词" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="员工密码" :label-width="keyCodeWidth" prop="password">
                    <el-input v-model="detailsForm.password" autocomplete="off" placeholder="请输入关键词" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="keyCodeWidth" prop="remarks">
                    <el-input type="textarea" v-model="detailsForm.remarks" autocomplete="off" placeholder="请输入备注" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="editorshow =false">取 消</el-button> 
              <el-button @click="editorSubmit" type="primary">确 定</el-button>
                
            </div>
        </el-dialog>
    </div>
</template>

<script>
const moment = require('moment')
import { uParseTime } from "@/utils/tools";
import {getuselist,getMessage,getCreated,getuseedit,getusedelete} from '../../api/index'
// import {getMessage} from '../../api/employee'
import axios from 'axios'
export default {
    data(){
        return {
          tableData:[],
          keyCodeShow: false,//新增
          detailsshow:false,//详情
          editorshow:false,//编辑
          keyCodeForm:{
              name: '',
              type:'',
              number:'',
              password:'',
              remarks: ''
          },
          // detailsForm:{
          //     name: '',
          //     type:'',
          //     number:'',
          //     password:'',
          //     remarks: ''
          // },
          detailsForm:{
            id: '',
            name: '',
            type:'',
            number:'',
            password:'',
            remarks: ''
          },
          options:[{id:1,name:'运营'},{id:2,name:'销售'},{id:3,name:'销售经理'},],
          yun:2,//禁用恢复状态
          keyCodeWidth: '120px',
          info_id:1,
          total:0,
          page:1,
          pageSize:10,
        }
    },
    methods:{

        // 新增
        keyCodeSubmit(){
          console.log('1111',this.keyCodeForm);
          // this.tableData.push(arr)
          this.keyCodeShow =false
          var data = {
              name: this.keyCodeForm.name,
              mobile: this.keyCodeForm.number,
              user_password:this.keyCodeForm.password,
              type:this.keyCodeForm.type,
              remark:this.keyCodeForm.remarks,
          }
          getCreated(data).then(res =>{
            console.log('vvvvvvv',res.data);
            //   const context = res.data.admin
            //   context.mobile = this.keyCodeForm.number
            //   context.name = this.keyCodeForm.name
            //   context.password = this.keyCodeForm.passwords
            //   context.remark = this.keyCodeForm.remarks
            //   context.role_type = this.keyCodeForm.type
            //    console.log('res111333',context);
            this.getlist()
           
          })
            
        },
        //时间
        gettouxitime(time){
          time = moment()
          const times = moment(time).format("yyyy-MM-DD")
          return times
        },
        // 详情
        details(row){
          this.detailsForm={
            id:row.id,
            name: row.name,
            type:row.role_type,
            number:row.mobile,
            password:row.password,
            remarks: row.remark
          }
          this.detailsshow=true
        },
        // 编辑弹窗
        editor(row){
          this.detailsForm={
            id:row.id,
            name: row.name,
            type:row.role_type,
            number:row.mobile,
            password:row.password,
            remarks: row.remark
          }
          this.editorshow=true
        },
        // 确认修改
        editorSubmit(){
          var data = {
            id: this.detailsForm.id,
            name: this.detailsForm.name,
            mobile: this.detailsForm.number,
            user_password:this.detailsForm.password,
            type:this.detailsForm.type,
            remark:this.detailsForm.remarks,
          }
          console.log('data',data);
          getuseedit(data).then(res =>{
            console.log('getuseedit',res);
            const edit = res.data.admin
            edit.id = this.detailsForm.id
            edit.name = this.detailsForm.name
            edit.role_type = this.detailsForm.type
            edit.mobile = this.detailsForm.number
            edit.password = this.detailsForm.password
            edit.remark = this.detailsForm.remarks
            this.getlist()
          })

          this.editorshow=false
        },
        // 员工类型
        getoptions(id){
          for(let i in this.options){
            if(this.options[i].id==id){
              return this.options[i].name
            }
          }
        },
        // 表格数据源
        getlist(){
          getuselist().then(res =>{
            // if(res.data.state == 1){
              const list = res.data.list
              this.tableData.length = 0
              console.log('77777',list);
              const table = []
              list.forEach((item,index) => {
                const arr ={
                  index:index+1,
                  id:item.id,
                  ctime:this.getTime(item.ctime),
                  mobile:item.mobile,
                  name:item.name,
                  is_admin:item.is_admin,
                  password:item.password,
                  remark:item.remark,
                  role_type:this.getoptions(item.role_type),
                  status:item.status
                }
                table.unshift(arr)
              });            
              this.tableData = table.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
              this.total = list.length 
          })
        },
        // 删除恢复
        deletclick(row){
          console.log('row',row);
          if(row.status == 1){
            this.yun = 1
            for(let i in this.tableData){
              if(row.id == this.tableData[i].id){
                this.tableData[i].status = 0
              }
            }
          }else{
            this.yun = 2
            for(let i in this.tableData){
              if(row.id == this.tableData[i].id){
                this.tableData[i].status = 1
              }
            }
          }
          console.log('row.status',row.status,'this.yun',this.yun);
          const data ={
            id:row.id,
            type:this.yun,
          }
          getusedelete(data).then(res =>{
            this.$message({message:res.data.msg})
          })
        },
        // 转换时间
        getTime(val) {
          if(val < 0){
            return ""
          }
          if(val == ""){
            return ""
          }else {
            return uParseTime(val, '{y}-{m}-{d}')
          }
        },
        handleSizeChange(val){
          this.pageSize = val
          this.getlist()
        },
        handleCurrentChange(val){
          this.page = val
          this.getlist()
        },
    },
    created(){
      this.getlist()
    }

}
</script>

<style scoped>
.keycode{
    width: 100%;
    min-height: 100%;
    padding: 15px;
    box-sizing: border-box;
}
.keycode-Info{
    width: 100%;
    margin-bottom: 15px;
}
.keycode-Info-li{
    /* width: 100%; */
}
.keycode-list{
    width: 100%;
    margin-bottom: 20px;
}
.keycode-page-box{
    display: flex;
    justify-content: flex-end;
}
</style>