<template>
  <div class="container">
    <Settings id="mainLeft" :msg="treeData" @handClick="handTreeClick"></Settings>
    <div id="mainRight">
      <div>
        <div class="button">
          <el-button type="success" @click="addperson()">新增人员</el-button>
        </div>
        <el-table
          border
          stripe
          :data="personData"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%"
        >
          <el-table-column type="index" align="center" label="序号"></el-table-column>
          <el-table-column property="uname" label="姓名" align="center"></el-table-column>
          <el-table-column property="depotName" min-width='160' label="所属公司" align="center"></el-table-column>
          <el-table-column property="ppost" label="职位" align="center"></el-table-column>
          <el-table-column property="uphone" label="手机号" align="center"></el-table-column>
          <el-table-column property="operation" width='250' label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="detailry(scope.$index, scope.row)">查看</el-button>
              <el-button size="mini" @click="editry(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" type="danger" @click="deletery(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="pageParam.pageIndex"
          :limit.sync="pageParam.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>
<script>
//引入左侧分公司菜单
import Settings from "../../../../layout/components/Settings/index"
import Pagination from "@/components/Pagination"
import { findbyTreeData } from "@/api/branchoff/index.js"
import { getUser } from "@/utils/auth"
import {
  getPersonnelInfo,deletePersonnelInfo
} from "@/api/system/organizationalStructure/personnel.js"
export default {
  components: { Pagination, Settings },
  data() {
    return {
      treeData: [],
      personData: [],
      total: 0,
      pageParam: {
        condition: "",
        pageIndex: 1,
        pageSize: 10
      },
      id: "",
      treeid: "",
      name:''
    }
  },
  created() {
    // this.pageParam.condition = '{ parentId:"' + this.treeid + '" }'
    this.pageParam.condition = '{ uName:"",uNickname:"",uSex:"",uPhone:"" }'
    this.id = JSON.parse(getUser()).depotId
    this.gettreedata()
    this.getList()
  },
  methods: {
    gettreedata() {
      findbyTreeData(this.id).then(res => {
        this.treeData = res.data
      })
    },
    handleCurrentChange() {},
    handTreeClick(data) {
      this.treeid = data.depotCode
      this.name =  data.depotName
      console.log(this.treeid, "this.queryid")
      this.pageParam.condition = '{depotId:"' + this.treeid + '"}'
      this.getList()
    },
    getList() {
      getPersonnelInfo(this.pageParam).then(res => {
      this.personData = res.data.records
      this.total= res.data.total
      })
    },
    addperson() {
      if (this.treeid == "") {
        this.$message({
          type: "warning",
          message: "请先选择左侧菜单树"
        })
        return
      }
      this.$router.push({
        name: "AddPersonnel",
        query: {
          id: this.treeid,
          state: "new",
          name: this.name
        }
      })
    },
    detailry(index, row) {
       this.$router.push({
        name: "AddPersonnel",
        query: {
          id: row.depotId,
          pid: row.pid,
          state: "detail",
           name: row.depotName
        }
      })
    },
    editry(index, row) {
       this.$router.push({
        name: "AddPersonnel",
        query: {
          id: row.depotId,
          pid: row.pid,
          state: "edit",
           name: row.depotName
        }
      })
    },
    deletery(index, row) {
       this.$confirm("您确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deletePersonnelInfo(row.pid).then(response => {
            this.$message({
              message: "删除成功！",
              type: "success"
            })
            this.getList()
          })
        })
        .catch(error => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  #mainLeft {
    width: 300px;
    height: calc(100vh - 200px);
  }
  #mainRight {
    margin-left: 20px;
    width: calc(100% - 320px);
  }
}
.button {
  text-align: right;
  margin-right: 20px;
  padding-bottom: 20px;
}
</style>