<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('position')">新增职位</el-button>
              </div>
              <el-scrollbar style="height: 100%">
                <el-tree
                    size="mini"
                    ref="siteTree"
                    :data="areaData"
                    id="el-tree"
                    node-key="id"
                    indent="4"
                    :props="treeProps"
                    :load="loadNode"
                    highlight-current
                    default-expand-all
                    :expand-on-click-node="false"
                    :render-content="renderContent"
                    @node-click="handleNodeClick"
                >
                </el-tree>
              </el-scrollbar>
          </el-col>
          <el-col :span="18" :xs="12" class="mytree">
             <LayoutTable :data="tableData" :config="tableConfig" notSearch>
                 <el-button type="primary" @click="doExport" :disabled="isExport"
                  size="mini" slot="table-head-left2">导出</el-button>
             </LayoutTable> 
          </el-col>
        </el-row>
        <drawer-show ref="drawerform" @ok="getData" />
    </div>
</template>

<script>
    /** 表单弹出框模式需引入 */
    import drawerShow from "./drawershow";
    import table from "@/assets/mixins/table";
    import tree from "@/assets/mixins/tree";
    import TabPane from "@/components/tabPane.vue"
    export default {
        name: "JobList",
        components: {
            drawerShow,
            TabPane
        },
        mixins: [table,tree],
        created() {
            console.log(this.activeName,'ssss')
        },
        computed:{
          thirdList(){
              if(!this.$store.state.CurrentThirdArr) return []
              return this.$store.state.CurrentThirdArr
          },
          activeName(){
              return this.$store.state.ThirdPath
          }
        },
        methods: {
            saveFn(from){
                this.$refs.drawerform.add(from)
            },
            renderContent: function (h, { node, data, store }) {
                return (
                    <span>
                    <i style="font-size:16px;color:#409EFF" class={data.icon}></i>
                    <span style="padding-left: 2px;font-size:14px">{node.label}</span>
                    <span>
                        <i style="font-size:16px;color:#409EFF" class='el-icon-edit-outline'></i>
                        <i style="font-size:16px;color:#409EFF" class='el-icon-delete'></i>
                    </span>
                    </span>
                )
            },
            async loadNode(node, resolve) {
                if (node.level === 0) {
                    return;
                }
                resolve(data.result);
            },
            doExport(){
              this.isExport = true;
              this.$download("/job/exportExcel", {
                "idList": this.selection,
                'name': this.$route.query['name'],
              }, { 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(row) {
                this.$refs.drawerform.edit(row);
            },
            /** 重写查看方法 */
            toView(row) {
                this.$refs.drawerform.view(row);
            },
            // 获取全部职位
            getpositions(){
                this.$post("/job/treeselect", {}).then(({ data }) => {
                    this.areaData = data.result
                })
            },
            handleClick(key){
                this.$store.commit('setThirdPath',key)
                this.$router.push({
                    path:key
                })
            },
        },
        data() {
            return {
                config: {
                    search: [
                        // {
                        //     name: "groupName",
                        //     type: "text",
                        //     label: "分组名称",
                        //     fuzzy: true
                        // },
                        // {
                        //     name: "jobCode",
                        //     type: "text",
                        //     label: "职位编码",
                        //     fuzzy: true
                        // },
                        // {
                        //     name: "jobName",
                        //     type: "text",
                        //     label: "职位名称",
                        //     fuzzy: true
                        // },
                    ],
                    columns: [
                        {type: "selection", width: 60},
                        {type: "index",label: "序号",width: 50},

                        // {label: "分组名称", prop: "groupName"},

                        // {label: "职位编码", prop: "jobCode"},

                        // {label: "职位名称", prop: "jobName"},
                        {label: "姓名", prop: "jobName"},
                        {label: "部门", prop: "jobName"},
                        {label: "员工类型", prop: "jobName"},
                        {label: "手机号", prop: "jobName"},
                        {label: "添加时间", prop: "jobName"},
                        {
                            label: "操作",
                            width: 240,
                            formatter: row => {
                                return (
                                    <table-buttons noAdd noEdit row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
                            )
                            }
                        }
                    ],
                },
                isExport:false,
                saveFrom:'',
                addShow:false,
            }
        }
    };
</script>