<template>
  <!-- 离职 -->
  <div class="displsy-mod">
    <div style="display: flex;">
      <div style="height:42px;widht:1px"></div>
      <!-- <div class="soc">
        <input type="primary" v-model="input" placeholder="搜索" />
      </div> -->
    </div>

    <hr />
    <el-table :data="tableData" stripe style="width: 100%" :header-cell-style="{background: 'linear-gradient(#6cb3ff, #1873d4)',color:'#eeeeee'}">
      <el-table-column align="center" prop="brandNumber" label="水牌号" min-width="100" sortable></el-table-column>
      <el-table-column align="center" prop="staffName" label="员工名称" sortable min-width="100"></el-table-column>
      <el-table-column align="center" prop="sex" label="性别" sortable min-width="80"></el-table-column>
      <el-table-column align="center" prop="mobilePhone" label="手机号码" sortable min-width="120"></el-table-column>
      <el-table-column align="center" prop="joinedDate" label="入职日期" sortable min-width="120"></el-table-column>
      <el-table-column align="center" prop="leaveDate" label="离职日期" sortable min-width="120"></el-table-column>
      <el-table-column align="center" prop="job" label="工种" sortable min-width="80"></el-table-column>
      <el-table-column align="center" prop="gradeName" label="APP权限" sortable min-width="100"></el-table-column>
      <el-table-column align="center" prop="postName" label="职务" sortable min-width="100"></el-table-column>
      <el-table-column align="center" prop="type" label="员工类型" sortable min-width="100">
        <template slot-scope="scope">
          {{scope.row.type==0?"高管":scope.row.type==1?"普工":"收银"}}

        </template>
      </el-table-column>
      <el-table-column align="center" prop="source" label="员工来源" sortable min-width="100">
        <template slot-scope="scope">
          {{scope.row.source==0?"校招":scope.row.source==1?"社招":scope.row.source==2?"介绍":"其他"}}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="identityCard" label="身份证号" sortable min-width="180"></el-table-column>
      <el-table-column align="center" prop="deptName" label="部门" sortable min-width="100">
        <template slot-scope="scope">
          {{scope.row.deptName==0?"美发部":scope.row.deptName==1?"美容部":scope.row.deptName==2?"其他部":"无"}}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="qq" label="QQ" sortable min-width="120"></el-table-column>
      <el-table-column align="center" prop="wechat" label="微信" sortable min-width="120"></el-table-column>
      <el-table-column align="center" prop="popularity" label="人气" sortable min-width="100"></el-table-column>
      <!-- <el-table-column align="center" v-if='sessionStorageList.payroll!=1' prop="baseSalary" label="底薪" sortable min-width="190"></el-table-column> -->
      <el-table-column align="center" prop="userState" label="是否用户" sortable min-width="100"></el-table-column>
      <el-table-column align="center" prop="inputBy" label="操作人" sortable min-width="100"></el-table-column>
      <el-table-column align="center" fixed="right" label="查看" width="76" v-role='4002006'>
        <template slot-scope="scope">
          <el-button @click="examine(scope.row)" size="mini" type="primary" plain>查看</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="复职" width="76" v-role='4002006'>
        <template slot-scope="scope">
          <el-button @click="giveto(scope.row)" size="mini" type="primary">复职</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top:15px;">
      <el-pagination align="left" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10,20,30,40,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"></el-pagination>
    </div>
    <edit ref="edit"></edit>
    <editother ref="editother" @editData="leave"></editother>
  </div>
</template>
<script>
import { Form } from 'element-ui';
import {
  staffPage,
  reinstated,
  selectOne,
  rolepage,
} from "../../../../api/storeManage";
import Bus from "../Bus.js";
import edit from "./edit";
import editother from "./editother.vue";
export default {
  props: ["notList"],
  components: { edit,editother },
  data() {
    return {
      dialogFormVisible: false, //弹窗开关
      sessionStorageList: null, //门店参数合集
      input: "",
      pageSize: 10,
      pageNum: 1,
      pageInfo: {
        total: 0, //分页总条数
        tableList: [],
      },
      queryFome:{
      state: 0,
      },
      id: {},
      dimission: {},
      searchTrue: false,
    };
  },
  methods: {
    giveto(row){
      var id = { id: row.id };
      selectOne(id)
        .then((res) => {
          if ((res.code = "000000")) {
            this.$refs.editother.show(row, "修改","复职");
          } else {
            this.$alert(res.message, "提示", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmbtnFalses",
              type: "warning",
              center: true,
              callback: (action) => {},
            });
          }
        })
        .catch((err) => {
          //console.log(err);
        });
    },
    //查看
    examine(row) {
      var id = { id: row.id };
      selectOne(id)
        .then((res) => {
          if ((res.code = "000000")) {
            this.$refs.edit.show(row, "查看");
          } else {
            this.$alert(res.message, "提示", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmbtnFalses",
              type: "warning",
              center: true,
              callback: (action) => {},
            });
          }
        })
        .catch((err) => {
          //console.log(err);
        });
    },
    //查看确定
    confirm() {
      this.pageInfo.tableList[this.examineIndex] = this.examineForm;
    },
    
    works() {
      this.$router.push("/staffWorks");
    },
    //分页方法
    handleSizeChange(val) {
      //   //console.log(`每页 ${val} 条`);
      if (this.searchTrue == true) {
        this.dimission.pageSize = val;
        this.search();
      } else {
        this.pageSize = val;
        this.leave();
      }
    },
    handleCurrentChange(val) {
      //   //console.log(`当前页: ${val}`);
      if (this.searchTrue == true) {
        this.dimission.pageNum = val;
        this.search();
      } else {
        this.pageNum = val;
        this.leave();
      }
    },
    leave() {
      // var arr1 = {
      //   state: 0,
      //   pageNum: this.pageNum,
      //   pageSize: this.pageSize,
      // };
      staffPage({...this.queryFome,pageSize:this.pageSize,pageNum:this.pageNum})
        .then((res) => {
          var list = [];
          res.pageInfo.list.forEach((item) => {
            item = JSON.parse(
              JSON.stringify(item).replace(/gradeName/g, "grade")
            );
            if (item.sex == 1) {
              item.sex = "男";
            } else if (item.sex == 0) {
              item.sex = "女";
            }
            if (item.userState == 1) {
              item.userState = "是";
            } else if (item.userState == 0) {
              item.userState = "否";
            }
            if (item.state == 0) {
              item.state = "已离职";
            }
            list.push(item);
          });
          res.pageInfo.tableList = list;
          this.pageInfo = res.pageInfo;
        })
        .catch((err) => {
          //console.log(err);
        });
    },
    search() {
      this.searchTrue = this.dimission.searchTrue;
      staffPage(this.dimission).then((res) => {
        if (res.code == "000000") {
          var list = [];
          res.pageInfo.list.forEach((item) => {
            if (item.sex == 1) {
              item.sex = "男";
            } else if (item.sex == 0) {
              item.sex = "女";
            }
            if (item.userState == 1) {
              item.userState = "是";
            } else if (item.userState == 0) {
              item.userState = "否";
            }
            if (item.state == 0) {
              item.state = "已离职";
            }
            list.push(item);
          });
          res.pageInfo.tableList = list;
          this.pageInfo = res.pageInfo;
          if (this.dimission.searchTrue == false) {
            this.$message.success({ message: "已刷新最新数据" });
          } else {
            if (res.pageInfo.total == 0) {
              this.$message.warning({ message: "没有找到符合条件的员工信息" });
            }
          }
        }
      });
    },
  },
  created() {
    // Bus.$on("dimission", (val) => {
    //   //取  Bus.$on
    //   this.dimission = {};
    //   this.dimission = val;
    //   this.search();
    // });
    this.sessionStorageList = JSON.parse(
      sessionStorage.getItem("sessionStorageData")
    );
    let list = JSON.parse(sessionStorage.getItem("list"));
    list.forEach((item) => {
      if (item.id == 4002001) {
        this.leave();
      }
    });
  },
  mounted() {
    // this.$nextTick(function () {
    //   this.$on("dimission", function () {
    //     this.leave();
    //   });
    // });
  },
  computed: {
    //表名列表中搜索
    tableData() {
      var search = this.input.toString().toLowerCase(); //将用户输入的值变字符串并小写
      if (search) {
        return this.pageInfo.tableList.filter(function (dataNews) {
          return Object.keys(dataNews).some(function (key) {
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      return this.pageInfo.tableList;
    },
  },
};
</script>
<style scoped>
.el-button {
  margin-bottom: 10px;
}
.el-input {
  width: 200px;
}
.examineForm {
  display: flex;
  justify-content: flex-start;
}
.examineForm .el-form-item {
  height: 30px;
}
</style>

