<template>
<el-dialog title="选择成员" :visible.sync="visibleDialog" width="600px" append-to-body class="promoter_person">
  <div class="person_body clear">
    <div class="person_tree l">
      <input type="text" placeholder="搜索成员" v-model="searchVal" @input="getDebounceData($event,activeName)">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="人员列表" name="1"></el-tab-pane>
        <el-tab-pane label="角色列表" name="2"></el-tab-pane>
      </el-tabs>
      <p class="ellipsis tree_nav" v-if="activeName==1&&!searchVal">
        <span @click="getPersonList(0)" class="ellipsis">{{departments.o_OrganName || '成员'}}</span>
        <!-- <span @click="getDepartmentList(0)" class="ellipsis">天下</span> -->
        <span v-for="(item,index) in departments.titleDepartments" class="ellipsis" :key="index+'a'" @click="getDepartmentList(item.id)">{{item.departmentName}}</span>
      </p>
      <ul style="height: 360px;" v-if="activeName==1" class="person-list" placeholder="人员列表为空">
        <!-- <li v-for="(item,index) in departments.childDepartments" :key="index+'b'" class="check_box" :class="{not: !isDepartment}">
          <a v-if="isDepartment" :class="$func.toggleClass(checkedDepartmentList,item)&&'active'" @click="$func.toChecked(checkedDepartmentList,item)">
            <img src="@/assets/images/icon_file.png">{{item.departmentName}}</a>
          <a v-else><img src="@/assets/images/icon_file.png">{{item.departmentName}}</a>
          <i @click="getDepartmentList(item.id)">下级</i>
        </li>
        <li v-for="(item,index) in departments.employees" :key="index+'c'" class="check_box">
          <a :class="$func.toggleClass(checkedEmployessList,item)&&'active'" @click="$func.toChecked(checkedEmployessList,item)" :title="item.departmentNames">
            <img src="@/assets/images/icon_people.png">{{item.employeeName}}</a>
        </li> -->
        <li v-for="(item,index) in personList" :key="index + '_person'" class="check_box">
          <a :class="$func.toggleClass(checkedEmployessList,item, 'P_PersonID')&&'active'" @click="$func.toCheckedDb(checkedEmployessList,item,'p_PersonID')" :title="item.o_OrganName">
            <img src="@/assets/images/icon_people.png">{{item.p_PersonName}}</a>
        </li>
      </ul>
      <ul  v-if="activeName==2" class="person-list" placeholder="角色列表为空">
        <!-- <li v-for="(item,index) in roles" :key="index+'c'" class="check_box">
          <a :class="$func.toggleClass(checkedRoleList,item,'roleId')&&'active'" @click="$func.toChecked(checkedRoleList,item,'roleId')" :title="item.description">
            <img src="@/assets/images/icon_role.png">{{item.roleName}}</a>
        </li> -->
        <li v-for="(item,index) in roles" :key="index+'b'" class="check_box not" :class="$func.toggleClass(checkedRoleList,item,'r_RoleID')&&'active'" @click="checkedRoleList=[item]">
          <a :title="item.r_RoleName"><img src="@/assets/images/icon_role.png">{{item.r_RoleName}}</a>
        </li>
      </ul>
    </div>
    <div class="has_selected l">
      <p class="clear">已选（{{total}}）
        <a @click="delList">清空</a>
      </p>
      <ul>
        <li v-for="(item,index) in checkedRoleList" :key="index+'e'">
          <img src="@/assets/images/icon_role.png">
          <span>{{item.r_RoleName}}</span>
          <img src="@/assets/images/cancel.png" @click="$func.removeEle(checkedRoleList,item,'r_RoleID')">
        </li>
        <!-- <template v-if="isDepartment">
          <li v-for="(item,index) in checkedDepartmentList" :key="index+'e1'">
            <img src="@/assets/images/icon_file.png">
            <span>{{item.departmentName}}</span>
            <img src="@/assets/images/cancel.png" @click="$func.removeEle(checkedDepartmentList,item)">
          </li>
        </template> -->
        <li v-for="(item,index) in checkedEmployessList" :key="index+'e2'">
          <img src="@/assets/images/icon_people.png">
          <span>{{item.p_PersonName}}</span>
          <img src="@/assets/images/cancel.png" @click="$func.removeEle(checkedEmployessList,item)">
        </li>
      </ul>
    </div>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="$emit('update:visible',false)">取 消</el-button>
    <el-button type="primary" @click="saveDialog">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
import { GetPersonnelList,GetRoleList } from "@/api/apis/flowPath"
import mixins from './mixins'
export default {
  mixins: [mixins],
  props: ['visible', 'data', 'isDepartment'],
  watch: {
    visible(val) {
      this.visibleDialog = this.visible
      if (val) { 
        this.activeName = "1";
        // this.getDepartmentList();
        this.getPersonList();
        // this.getPersonList();
        this.searchVal = "";
        this.checkedEmployessList = this.data.filter(item => item.type === 1).map(({
          name,
          targetId
        }) => ({
          p_PersonName: name,
          p_PersonID: targetId
        }));
        this.checkedRoleList = this.data.filter(item => item.type === 2).map(({
          name,
          targetId
        }) => ({
          r_RoleName: name,
          r_RoleID: targetId
        }));
        /* this.checkedDepartmentList = this.data.filter(item => item.type === 3).map(({
          name,
          targetId
        }) => ({
          departmentName: name,
          id: targetId
        })); */
      }
    },
    visibleDialog(val) {
      this.$emit('update:visible', val)
    }
  },
  computed: {
    total() {
      return this.checkedEmployessList.length + this.checkedRoleList.length + this.checkedDepartmentList.length
    }
  },
  data() {
    return {
      checkedRoleList: [],
      checkedEmployessList: [],
      checkedDepartmentList: [],
      personList: [{
        P_PersonID: 1231,
        P_PersonName: '测试'
      },
      {
        P_PersonID: 1,
        P_PersonName: '测试-青山'
      }], //* 人员
    }
  },
  methods: {
    handleClick() {
      this.searchVal = "";
      this.conditionRoleSearchName = "";
      if (this.activeName == 1) {
        // this.getDepartmentList();
        this.getPersonList();
      } else {
        // this.getRoleList();
        this.getRoleListByRoleManage();
      }
    },
    saveDialog() {
      let checkedList = [...this.checkedRoleList, ...this.checkedEmployessList, /* ...this.checkedDepartmentList */].map(item => ({
        type: item.p_PersonName ? 1 : (item.r_RoleName ? 2 : 3), //* 1 人员 2 角色
        targetId: item.p_PersonID || item.r_RoleID,
        name: item.p_PersonName || item.r_RoleName /* || item.departmentName */
      }))
      this.$emit('change', checkedList)
    },
    delList() {
      this.checkedEmployessList = [];
      this.checkedRoleList = [];
      this.checkedDepartmentList = []
    },
    //* 获取当前部门下的人员列表
    async getPersonList(OrganID = '') {
      const res = await GetPersonnelList({
        page: "1", //当前页码
        limit: "10", //每页显示多少
        departmentID: "", //部门ID
        Sequence: "descending", //排序方式
        SequenceName: "P_PersonID" //排序字段
      })
      this.personList = res.data[1]
      //  this.$axios.get(`${process.env.BASE_URL}departments-ya.json?page=1&limit=1000000&OrganID=${OrganID}`).then(res => {
      // this.$axios.post(`/PersonManage/GetList?page=1&limit=1000000&OrganID=${OrganID}`, {}).then(res => {
      //   this.personList = res.data;
      // }).catch((error) => {
      //   this.$message.error('请求人员接口出错，请联系管理员。', error);
      // });
    },
    //* 从接口获取角色列表
    async getRoleListByRoleManage() {
      const res = await GetRoleList({
        Sequence: "",
        SequenceName: "",
        limit: 10,
        page: 1,
      });
      this.roles = res.data[1]
      // this.$axios.post(`/RoleManage/GetList?page=1&limit=1000000`, {}).then(res => {
      //   this.roles = res.data;
      // }).catch((error) => {
      //   this.$message.error('请求角色接口出错，请联系管理员。', error);
      // });
    }
  }
}
</script>

<style src="../../css/dialog.css" src="../../css/override-element-ui.css" src="../../css/dialog.css"  scoped>
</style>
