<template>
  <div>
    <el-alert class="diy-tip" title="温馨提示：" :closable="false"  type="success" description show-icon>
      当前组织架构成员通过微信通讯录同步，员工开启积分管理后才能正式启用并进入“功道云积分制”，如果您的微信通讯录有变动，点击
      <span class="blue" style="margin-left: 10px;cursor: pointer;" @click="tb()" v-loading="tbLoading">
        <i class="el-icon-refresh"></i>
        立即同步
      </span>
    </el-alert>

    <el-row class="architecture">
      <el-col :span="6" class="RuleLeft">
        <div>
          <div v-loading="ruleDeprt">
            <div class="company_name">
              <img src="static/images/two.png" />
              <span>组织架构</span>
            </div>
            <div ref="ruletree" class="department_box">
              <el-tree
                node-key="id"
                :expand-on-click-node="false"
                :data="bmList"
                class="cate-tree"
                :highlight-current="true"
                :props="{ children: 'children', label: 'name', value: 'id' }"
                @node-click="handleNodeClick"
                :accordion="true"
                empty-text="您暂无部门数据,请同步微信通讯录"
              >
                <div
                  content="tree"
                  v-show="treedata.length != 0"
                  class="custom-tree-node"
                  slot-scope="{ node, data }"
                  style="font-size: 14px;color: #606266; width:100%; text-align: left;"
                >
                  <img src="static/images/one.png" style="width: 20px;margin-right: 5px;" />
                  <span class="name"><WWOpenData type="departmentName" :openid="data.name"></WWOpenData></span>
                </div>
              </el-tree>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18" class="RuleRight">
        <el-button @click="participation()" :loading="enable_loading" size="medium" type="primary" style="margin-right: 10px;">批量启用积分管理</el-button>
        <el-input placeholder="输入同事姓名" size="medium" style="width: 230px;" v-model="keywords" clearable @input="searchUser()"></el-input>
        <div style="color: #303133;font-size: 14px;padding:10px 0 0 0; line-height: 32px; overflow: hidden;"></div>
        <div class="list_box">
          <div style="margin-bottom:10px;margin-top:30px;" class="inline-block-btn-list"><div class="gap-right-8 fr" style="display:inline-block; width:180px;"></div></div>
          <el-table :data="userList" @selection-change="handleSelectionChange" v-loading="tableToading">
            <el-table-column type="selection" width="50" :selectable="isSelectable"></el-table-column>
            <el-table-column label="姓名">
              <template slot-scope="scope">
                <div class="flex-box flex-v-ce">
                  <userImage :user_name="scope.row.name" :img_url="scope.row.img_url" width="44px" height="44px"></userImage>
                  <div style="margin-left: 10px;"><WWOpenData type="userName" :openid="scope.row.name"></WWOpenData></div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="部门">
              <template slot-scope="scope">
                <div class="" style="">
                  <span v-for="(item, index) in scope.row.employee_detail.dept_list" :key="index">
                    <div v-if="item.depart_id !== 1">
                      <WWOpenData type="departmentName" :openid="item.depart_name"></WWOpenData>
                      <span v-if="scope.row.employee_detail.dept_list.length - index > 1">,</span>
                    </div>
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="accedence_time" label="入职时间">
              <template slot-scope="scope">
                <div class="tabaccTIme" v-loading="scope.row.entryIf">
                  <el-date-picker
                    @change="entryclick(scope.row)"
                    clear-icon="el-icon-circle-close"
                    v-model="scope.row.accedence_time"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="timestamp"
                    placeholder="选择日期时间"
                    :clearable="false"
                    :picker-options="assistantOptions"
                  ></el-date-picker>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="启用积分管理">
              <template slot="header" slot-scope="scope">
                <el-popover placement="top-start" width="300" trigger="manual" v-model="visible">
                  <div class="el-popover2">
                    <div class="title">
                      提示
                      <i class="el-icon-info" style="margin-left: 5px;"></i>
                    </div>
                    <div style="margin-bottom: 10px;">在这里启用积分管理，即可进入系统</div>
                    <div class="flex-box">
                      <div class="flex-1"></div>
                      <el-button size="small" @click="visible_close()">我知道了</el-button>
                    </div>
                  </div>
                  <div slot="reference" class="popover" @click="visible = !visible">启用积分管理</div>
                </el-popover>
              </template>
              <template slot-scope="scope">
                <div :class="[scope.row.is_official == 1 ? 'switch-box' : '']" @click="changeIs(scope.row.is_official, scope.row.id)"><div class="switch"></div></div>
              </template>
            </el-table-column>
            <template slot="empty">
              <noData></noData>
            </template>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="perPage"
            layout="total,sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="设置是否参与排名" :visible.sync="dialogVisible" top="30vh" width="520px" :before-close="handleClose">
      <div style="margin-left:20px;">
        <el-radio v-for="(item, index) in radioLi" :key="index" v-model="radio" :label="item.id">
          <span style="font-size:17px;">{{ item.name }}</span>
          <p style="font-size:14px;margin:8px 0 0 24px;">{{ item.kam }}</p>
        </el-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setRanking" :disabled="rangLoad">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import noData from '@/components/noData';
import { _debounce } from '@/api/auth';
export default {
  components: {
    noData
  },

  data() {
    return {
      entryData: {
        userId: 0,
        accedence_time: ''
      },
      is: 1,
      no: 0,
      page: 1,
      perPage: 10,
      total: 0,
      info: {}, //公司信息
      tips_show: true,
      bmList: [],
      userList: [],
      class_type: '',
      treedata: [1],
      tableData: [],
      keywords: '',
      dept_id: 0,

      tableToading: false,
      tbLoading: false,
      selectIds: [],
      enable_loading: false,
      visible: false,

      ruleDeprt: false,
      dialogVisible: false,
      rankingtakePartInId: '',
      radio: '1',

      rangLoad: false,
      radioLi: [{ id: '1', name: '参与排名', kam: '在排名中展示此人' }, { id: '0', name: '不参与排名', kam: '排名不展示此人(自定义排名除外)' }],
      assistantOptions: {
        // disabledDate(time) {
        //   let date = new Date();
        //   var lastDayOfThisMonth = new Date(
        //     date.getFullYear(),
        //     date.getMonth() + 1,
        //     0
        //   );
        //   return time.getTime() > lastDayOfThisMonth;
        // },
        // shortcuts: [
        //   {
        //     text: "今天",
        //     onClick(picker) {
        //       picker.$emit("pick", new Date());
        //     }
        //   },
        //   {
        //     text: "昨天",
        //     onClick(picker) {
        //       const date = new Date();
        //       date.setTime(date.getTime() - 3600 * 1000 * 24);
        //       picker.$emit("pick", date);
        //     }
        //   },
        //   {
        //     text: "本周一",
        //     onClick(picker) {
        //       const date = new Date();
        //       date.setTime(
        //         date.getTime() + 3600 * 1000 * 24 * (1 - date.getDay())
        //       );
        //       picker.$emit("pick", date);
        //     }
        //   }
        // ]
      }
    };
  },
  watch: {
    dept_id(val) {
      this.getEmployee();
    }
  },
  mounted() {
    this.$nextTick(function() {
      if (localStorage.getItem('rule')) {
        this.tips_show = false;
      } else {
        this.tips_show = true;
      }
    });
  },
  created() {
    this.getInfo();
    // this.getDepartment();
    this.getEmployee();
  },

  methods: {
    entryclick(row) {
      console.log(row);
      let data = {
        employee_id: row.id,
        accedence_time: row.accedence_time / 1000
      };
      row.entryIf = true;
      this.$http('post', '/api/employee/accedence_time', data)
        .then(res => {
          if (res.data.code == 1) {
          }
        })
        .finally(() => {
          row.entryIf = false;
        });
    },
    entryTime(row) {
      console.log(row);
      row.entryIf = true;
    },

    setRanking() {
      this.rangLoad = true;
      let data = {
        employee_id: this.rankingtakePartInId,
        switch: Number(this.radio)
      };
      this.$http('post', '/api/employee/ranking_switch', data)
        .then(res => {
          if (res.data.code == 1) {
            this.$message.success({ message: res.data.msg });
            this.getEmployee();
          }
        })
        .finally(() => {
          this.dialogVisible = false;
          setTimeout(() => {
            this.rangLoad = false;
          }, 200);
        });
    },
    rankingtakePartIn(id, is_ranking) {
      this.radio = is_ranking.toString();
      this.rankingtakePartInId = id;
      this.dialogVisible = true;
    },
    handleClose(done) {
      done();
    },
    //同步信息
    tb() {
      this.$http('get', '/api/sync').then(res => {
        if (res.data.code == 1) {
          this.$message.success({ message: '正在同步，请稍候刷新页面查看同步结果' });
          // this.getEmployee();
          // this.getInfo();
        }
      });
      // this.$confirm('下次同步时间需在10分钟之后，是否同步?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      // 	this.tbLoading = true;
      // 	this.$http('post','/api/ding/department_sync').then(res => {
      // 		this.$message.success({ message: '同步成功' });
      // 		this.dept_id=0;
      // 		this.getInfo();
      // 		this.getEmployee();
      // 	}).finally(()=>{
      // 		this.tbLoading = false;
      // 	});
      // });
    },
    //搜索
    searchUser: _debounce(function() {
      this.page = 1;
      this.getEmployee();
    }),
    //是否开通
    changeIs(e, id) {
      var url = e == 1 ? '/api/employee/disable' : '/api/employee/enable';
      this.$http('post', url, { employee_id: [id] }).then(res => {
        if (res) {
          if (e == 0) {
            this.$message.success({ message: '开启成功,可在"角色权限设置对应管理范围"' });
          } else {
            this.$message.success({ message: res.data.msg });
          }
          this.getEmployee();
        }
      });
    },
    //批量开通权限
    participation() {
      if (this.selectIds.length == 0) {
        this.$message.error({ message: '请选择参与的人员！' });
        return;
      }

      this.enable_loading = true;
      this.$http('post', '/api/employee/enable', { employee_id: this.selectIds })
        .then(res => {
          if (res) {
            this.$message.success({ message: '开启成功,可在"角色权限设置对应管理范围"' });
            this.getEmployee();
          }
        })
        .finally(err => {
          this.enable_loading = false;
        });
    },
    //获取公司信息
    getInfo(is) {
      this.ruleDeprt = true;
      // api/test?employee_id=155
      this.$http('get', '/api/site/info').then(res => {
        this.info = res.data.data;
        this.getDepartment(is);
      });
    },
    //选择员工
    handleSelectionChange(e) {
      var arr = [];
      for (var item in e) {
        arr.push(e[item].id);
      }
      this.selectIds = arr;
    },
    isSelectable: function(row, index) {
      return row.is_official != 1;
    },
    //点击部门
    handleNodeClick(e) {
      this.page = 1;
      this.dept_id = e.id;
    },
    //获取部门
    getDepartment() {
      this.ruleDeprt = true;
      this.$http('get', '/api/department/tree')
        .then(res => {
          var list = [
            {
              id: 0,
              name: this.info.name,
              children: res.data.data.list
            }
          ];
          this.bmList = list;
        })
        .finally(() => {
          this.ruleDeprt = false;
        });
    },
    //获取员工
    getEmployee() {
      this.tableToading = true;
      let params = {
        page: this.page,
        page_size: this.perPage,
        dept_id: this.dept_id,
        keywords: this.keywords
      };
      if (this.page == 0) {
        params.page = this.page;
      } else {
        params.page = this.page - 1;
      }
      this.$http('get', '/api/employee/index', params)
        .then(res => {  
        this.total = res.data.data.pageInfo.count;
          let list = res.data.data.list;
          list.forEach(item => {
            item.entryIf = false;
            item.accedence_time *= 1000;
          });
          this.userList = list;
          var visible = localStorage.getItem('visible');
          if (!visible) {
            this.visible = true;
          }
        })
        .finally(err => {
          this.tableToading = false;
        });
    },
    visible_close() {
      localStorage.setItem('visible', 'true');
      this.visible = false;
    },
    //关闭提示
    tips_close() {
      localStorage.setItem('rule', 'true');
      this.tips_show = false;
    },
    handleSizeChange: function(val) {
      this.perPage = val;
      this.page = 1;
      this.getEmployee();
    },
    //页码变更
    handleCurrentChange: function(val) {
      this.page = val;
      this.getEmployee();
    }
  }
};
</script>
<style lang="scss" scoped>
.name {
  text-overflow: ellipsis;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  width: 120px;
}
.administration {
  color: #e6a23c;
  border: 1px solid #e6a23c;
  border-radius: 2px;
  font-size: 12px;
  margin-left: 4px;
  padding: 2px;
}

.el-table th > .cell {
  font-weight: normal;
}
.el-table .has-gutter th > .cell {
  background-color: #fff;
  font-size: 14px;
  color: #909399;
  font-weight: normal;
}
.title {
  color: #303133;
  font-size: 20px;
}
.el-button--text {
  color: #606266;
}
.add {
  color: #26a2ff;
  font-size: 14px;
  //padding-top: 20px;
  cursor: pointer;
}
.el-pagination {
  text-align: center;
  margin-top: 15px;
}
.arrRotation {
  transform: rotate(180deg);
}
.treeActice {
  color: #606266;
}

.treeIcon {
  display: none;
}
.custom-tree-node {
  // display: flex;
  //flex-direction:row;
  // justify-content: space-between;
  // width: 100%;
  margin-left: -4px;
}
.custom-tree-node * {
  vertical-align: middle;
}
.custom-tree-node:hover {
  .treeIcon {
    display: inline-block;
    width: 55%;
  }
}
.item:hover {
  .blueTree {
    display: block;
  }
  .iconTree {
    display: none;
  }
}

.blueTree {
  display: none;
}
el-tooltip {
  display: none;
}
.add {
  color: #26a2ff;
  font-size: 14px;
  //padding-top: 20px;
  cursor: pointer;
}
.architecture {
  display: flex;
  text-align: center;
  // margin-top:20px;
  padding-left: 0px;
  background-color: #fff;
  width: 100%;
  overflow: hidden;
  cursor: default;
  min-height: calc(100vh - 160px);
}
.architecture .RuleLine {
  display: table-cell;
  width: 1px;
  min-height: 600px;
  background: #efefef;
}
.architecture .RuleLeft {
  display: block;
  text-align: center;
  padding: 20px 10px;
  border-right: none;
  overflow: auto;
}
/*滚动条的宽度*/

.architecture .RuleLeft::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/

.architecture .RuleLeft::-webkit-scrollbar-track {
  width: 6px;
  background-color: #fff0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

/*滚动条的设置*/

.architecture .RuleLeft::-webkit-scrollbar-thumb {
  background-color: #fff0;
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/*滚动条移上去的背景*/

.architecture .RuleLeft:hover::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
}

.architecture .RuleLeft .company_name {
  position: relative;
  display: block;
  font-family: 'Microsoft YaHei';
  text-align: left;
  padding: 15px 28px 17px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-bottom: 1px #f8f8f8 solid;
}
.architecture .RuleLeft .company_name img {
  position: relative;
  display: inline-block;
  top: 2px;
  width: 18px;
  height: 18px;
  margin-right: 4px;
}
.architecture .RuleLeft /deep/ .el-button {
  margin-bottom: 16px !important;
}
.architecture .RuleRight {
  position: relative;
  display: table-cell;
  text-align: left;
  padding: 20px;
}
.architecture .RuleRight .title span .sapn {
  display: inline-block;
  vertical-align: middle;
  max-width: 600px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.architecture .RuleRight:after {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background: #ebeef5;
}
.architecture .RuleRight .list_box {
  width: 100%;
  background: #fff;
}
.architecture .RuleRight .list_box /deep/ table {
  font-family: 'Microsoft YaHei';
  width: 100% !important;
  /*max-width:1920px; */
}
.architecture .department_box {
}
.architecture .department_box /deep/ .el-tree-node {
  display: block;
  text-align: center;
}
.architecture .department_box /deep/ .el-tree-node__content {
  // padding-left:24px !important;
  height: auto !important;
}

.architecture .department_box /deep/ .el-tree-node .el-icon-caret-right {
  display: inline-block;
  color: #909399;
  font-size: 16px;
  padding: 6px 8px;
}
.architecture .department_box /deep/ .el-tree-node .el-icon-caret-right.is-leaf {
  color: transparent;
  cursor: default;
}
.architecture .department_box /deep/ .el-tree-node .custom-tree-node img {
  margin-top: 0px;
  width: 20px;
}
.architecture .department_box /deep/ .el-tree-node .custom-tree-node span {
}
.architecture .department_box /deep/ .el-tree-node__content {
  padding: 12px 0;
  border-bottom: 1px #f8f8f8 solid;
}
.architecture .department_box /deep/ .el-tree-node__content:hover {
  background: #ecf5ff;
  border-radius: 4px;
}
.architecture .department_box /deep/ .is-focusable .is-current {
  border-radius: 4px;
}
.architecture .department_box /deep/ .is-focusable .is-current .name {
  color: #409eff;
  font-weight: normal;
  transition: 0.35s ease-in-out;
}
.diy-tip {
  margin-bottom: 15px;
  border: 1px solid #67c23a;
  padding: 20px 16px;
  p {
    color: #67c23a !important;
    font-size: 14px;
    margin: 0 !important;
    padding: 4px 0;
  }
}

.switch {
  margin: 0;
  display: inline-block;
  position: relative;
  width: 40px;   height: 20px;
  border: 1px solid #dcdfe6;
  outline: none;   border-radius: 10px;
  box-sizing: border-box;
  background: #dcdfe6;   cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s;
  vertical-align: middle;
}
.switch:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;   border-radius: 100%;
  transition: all 0.3s;
  width: 16px;
  height: 16px;   background-color: #fff;
}
.switch-box .switch {
  border-color: #409eff;
  background-color: #409eff;
}
.switch-box .switch:after {   left: 100%;
  margin-left: -17px;
}

/deep/ .tabaccTIme {
  width: 100px;
  .el-input__inner {
    border: 0;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
    width: 100px;
  }
  .el-input__prefix {
    display: none;
  }
}
</style>
