<template>
    <div class="page">
        <div style="margin:10px 0">
           <tab-pane :thirdList="thirdList" :activeName="activeName" @handleClick="handleClick"></tab-pane>
        </div>
        <el-row :gutter="20">
          <el-col :span="6" :xs="12" class="mytree">
              <div class="title">
                  <el-button type="primary" size="mini" @click="saveFn('group')">新增分组</el-button>
                  <el-button type="success" size="mini" @click="saveFn('job')">新增职位</el-button>
              </div>
              <el-scrollbar style="height: 100%" class="mt20">
                <!-- 区分分组和职位 -->
                <el-tree
                    size="mini"
                    ref="siteTree"
                    :data="tableData.data"
                    id="el-tree"
                    node-key="id"
                    indent="4"
                    :props="{
                        children:'children'
                    }"
                    highlight-current
                    default-expand-all
                    :expand-on-click-node="false"
                    :render-content="renderContent"
                    @node-click.self="handleNodeClick"
                >
                    <template slot-scope="{ node, data }">
                        <span class="custom-tree-node">
                            <span style="font-size:14px" v-if="!data.groupId">{{ data.groupName }}</span>
                            <span style="font-size:14px" v-if="data.groupId">{{ data.jobName }}</span>
                            <span style="margin-left:50px">
                                <el-button
                                type="text"
                                class="el-icon-edit-outline"
                                size="mini"
                                @click.stop="editJob(data)"
                                ></el-button>
                                <el-button
                                type="text"
                                class="el-icon-delete"
                                size="mini"
                                style="color:#F56C6C"
                                @click.stop="deleteFn(data)"
                                ></el-button>
                            </span>

                        </span>
                    </template>
                    
                </el-tree>
              </el-scrollbar>
          </el-col>
          <el-col :span="18" :xs="12" class="mytree">
                <div class="mt20" style="font-size:14px" v-if="currentName">
                    {{currentName}} ({{this.staffList.length}})
                </div>

                <div class="mt10">
                    <el-button type="success" size="mini" @click="addStaff">
                        新增员工</el-button>
                    <el-button type="primary" @click="doExport" :disabled="isExport"
                    size="mini">导出数据</el-button>

                    <el-button type="danger" @click="allDelete" :disabled="isExport"
                    size="mini">批量删除</el-button>      
                </div>

                  <el-table :data="staffList" border class="mt20" @selection-change="handleSelectionChange">
                      <el-table-column
                        type="selection"
                        width="55">
                      </el-table-column>
                      <el-table-column label="序号" type="index" width="50"></el-table-column>
                      <el-table-column label="姓名" prop="name"></el-table-column>
                      <el-table-column label="部门" prop="deptName"></el-table-column>
                      <el-table-column label="员工类型" prop="staffType"
                      >
                        <template slot-scope="scope">
                            <el-tag size='mini' v-show="scope.row.staffType == 1">全职</el-tag>
                            <el-tag size='mini' v-show="scope.row.staffType == 2">兼职</el-tag>
                            <el-tag size='mini' v-show="scope.row.staffType == 3">实习</el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column label="手机号" prop="phoneNumber"></el-table-column>
                      <el-table-column label="添加时间" prop="createTime"></el-table-column>
                      <el-table-column label="操作">
                          <template slot-scope="scope">
                              <el-button type="text" @click="deleteStaff(scope.row)">
                                  删除
                              </el-button>
                          </template>
                      </el-table-column>
                  </el-table>
          </el-col>
        </el-row>
        <drawer-show ref="drawerform" @ok="getData"/>
        <drawer-staff ref="drawerStaff" :bumentree="bumentree" @ok="refresh"></drawer-staff>
    </div>
</template>

<script>
    /** 表单弹出框模式需引入 */
    import {handleTree} from "@/assets/utils/table";
    import drawerShow from "./drawershow";
    import table from "@/assets/mixins/table";
    import TabPane from "@/components/tabPane.vue"
    import drawerStaff from './drawershowStaff.vue'
    import {timestampToTime} from '@/assets/utils/dateFormat.js'
    export default {
        name: "JobList",
        components: {
            drawerShow,
            TabPane,
            drawerStaff
        },
        mixins: [table],
        created() {
            this.query = {
                "page":1,
                "size":-1
            }
            this.$post("/dept/treeselect", {}).then(({ data }) => {
                this.bumentree = data.result
            })
        },
        computed:{
          thirdList(){
              if(!this.$store.state.CurrentThirdArr) return []
              return this.$store.state.CurrentThirdArr
          },
          activeName(){
              return this.$store.state.ThirdPath
          }
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            getStaff(){
                this.$post('/job/info?id='+this.currentId).then(res => {
                    if(res.code == 1){
                        this.staffList = res.data.staffEntities
                        this.staffList.forEach(item => {
                            item.createTime = timestampToTime(item.createTime,6)
                        })
                    }
                })
            },
            addStaff(){
                this.$refs.drawerStaff.add(this.currentId)
            },
            refresh(){
                // 请求 
                // 员工、职位列表
                if(this.currentId){
                  this.getStaff()  
                }
                this.getData()
            },
            handleNodeClick(node){
                if(!node.groupId){
                    return
                }
                this.currentId = node.id
                this.currentName = node.jobName
                this.getStaff()
            },
            // 获取数据后
            // 处理树结构
            afterRender(data){
                data.data = handleTree(data.data, "id", "groupId");
            },
            saveFn(from){
                this.$refs.drawerform.add(from)
            },
            doExport(){
                this.isExport = true;
                let params = {}
                if(this.multipleSelection.length>0){
                    params['idList'] = this.multipleSelection
                }
              this.$download("/staff/exportExcel", {
                ...params
              }, { type: "excel" }).then(() => this.isExport = false).catch(error => {
                this.isExport = false;
                this.$message.error(error.message);
              })
            },
            /** 重写新增方法 */
            toAdd(row) {
                // console.log(row,'ssss')
                // this.$refs.drawerform.add(row);
            },
            /** 重写编辑方法 */
            toEdit(form,row) {
                this.$refs.drawerform.edit(form,row);
            },
            /** 重写查看方法 */
            toView(row) {
                this.$refs.drawerform.view(row);
            },
            handleClick(key){
                this.$store.commit('setThirdPath',key)
                this.$router.push({
                    path:key
                })
            },
            // 职位
            editJob(row){
                let from  = ''
                // 编辑职位/分组
                if(!row.groupId){
                    from = 'group'
                }else{
                    from = 'job'
                }

                this.toEdit(from,row)
            },
            // 删除分组或者职位
            deleteFn(row){
                this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(res => {
                    // 删除操作
                    this.$post('/job/delete?id='+row.id).then(data => {
                        if(data.code == 1){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.getData()
                        }
                    })
                })
            },
            // 删除员工
            deleteStaff(row){
                this.$confirm("此操作将永久删除该员工，是否继续",'提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(res => {
                    this.$post('/staff/delete?id='+row.id).then(res => {
                        if(res.code == 1){
                            this.$message.success('删除成功')
                            this.getStaff()
                        }
                    })
                })
            },
            // 批量删除员工
            allDelete(){
                if (!this.multipleSelection.length) {
                    return this.$message.warning('请选中一条记录');
                }
                let ids = this.multipleSelection.map(item => item.id).join(',')
                this.$get('/staff/delete?',{id:ids}).then(res => {
                    if(res.code == 1){
                        this.$message.success('删除成功')
                        this.getStaff()
                    }
                })
            }
        },
        data() {
            return {
                isExport:false,
                saveFrom:'',
                addShow:false,
                staffList:[],
                bumentree:[],
                currentId:'',
                currentName:'',
                multipleSelection:[]
            }
        }
    }
</script>