<template>
    <div class="look-all-people-dialog-main">
        <div class="look-all-people-dialog-header">
            <el-input
                :placeholder="`${$t('cs.common.text.searchPlaceholder')}...`"
                size="small"
                v-model="filterText"
                @keyup.enter.native="searchAllCompany"
                prefix-icon="el-icon-search"
                style="width:240px;"
            ></el-input>
            <el-button @click="insertPeople"  size="small" type="primary" >{{$t("cs.common.button.insert")}}</el-button>
        </div>
        <div class="table-people" :key="contentIndexKey">
            <div class="table-people-item" v-show="!peopleItem.isHide" v-for="(peopleItem,peopleIndex) in peopleList" :key="peopleItem[idPropName] + peopleIndex +'people'" >
                <span>{{peopleItem[propName]}}</span>
                <i v-show="!peopleItem.isHide" v-if="(peopleItem.isDefault && authorityType == '3' ? peopleItem[idPropName] != systemUserId : true)"  @click="deletePeopleFunc(peopleItem)" class="el-icon-error"></i>
            </div>
        </div>
        <el-dialog
            title="选择人员"
            :visible.sync="selectUserFlag"
            width="860px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :append-to-body="true"
            custom-class="el-dialog-width-1200"
        >
            <ChooseUser :role-user-list="dataList" :system-user-id="'672888303978721280'"  @clearRoleUserListFunc="clearDataList" v-if="selectUserFlag" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">{{
                $t("cs.common.button.cancel")
                }}</el-button>
                <el-button type="primary" @click="submitFunc">{{
                $t("cs.common.button.ok")
                }}</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="选择部门"
            :visible.sync="selectDepartmentFlag"
            width="680px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :append-to-body="true"
            custom-class="el-dialog-width-1200"
        >
            <ChooseDepartment :department-list="dataList" @clearDepartmentListFunc="clearDataList" v-if="selectDepartmentFlag" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">{{
                $t("cs.common.button.cancel")
                }}</el-button>
                <el-button type="primary" @click="submitFunc">{{
                $t("cs.common.button.ok")
                }}</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="选择角色"
            :visible.sync="selectRoleFlag"
            width="680px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :append-to-body="true"
            custom-class="el-dialog-width-1200"
        >
            <ChooseRole  :role-list="dataList" @clearRoleListFunc="clearDataList"  v-if="selectRoleFlag" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">{{
                $t("cs.common.button.cancel")
                }}</el-button>
                <el-button type="primary" @click="submitFunc">{{
                $t("cs.common.button.ok")
                }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script scoped>
// @ is an alias to /src
import  CoreAPI from "../../Common/JS/CoreAPI";
import  ChooseUser from "../Components/ChooseUser.vue";
import  ChooseDepartment  from "../Components/ChooseDepartment.vue";
import  ChooseRole  from "../Components/ChooseRole.vue";

export default {
    components: { ChooseUser, ChooseDepartment, ChooseRole },
    props: {
        peopleList: {
            type: Array,
            default: function () {
                return []
            }
        },
        idPropName: {
            type: String,
            default: function() {
                return 'id'
            }
        },
        propName: {
            type: String,
            default: function() {
                return 'name'
            }
        },
        authorityType: {
            type: String,
            default: function() {
                return '3'
            }
        },
        systemUserId: {
            type: String,
            default: function() {
                return ''
            }
        }
    },
    data() {
        return {
            contentIndexKey: this.generateMixed(8) + new Date().getTime(),
            filterText: '',
            selectUserFlag: false,
            selectDepartmentFlag: false,
            selectRoleFlag: false,
            dataList: []
        };
    },
    watch: {
        
    },
    methods: {
        generateMixed(n) {
            var str = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
            var res = "";
            for(var i = 0; i < n ; i ++) {
                var id = Math.ceil(Math.random()*35);
                res += str[id];
            }
            return res;
        },
        deletePeopleFunc(item) {
            let _this = this;
            let targetIndex = 0
            _this.peopleList.forEach(function(target, index) {
                if(target[_this.idPropName] == item[_this.idPropName]) {
                    targetIndex = index
                }
            })
            _this.peopleList.splice(targetIndex, 1)
            _this.refreshContet()
        },
        refreshContet: function() {
            let _this = this;
            _this.contentIndexKey = this.generateMixed(8) + new Date().getTime()
        },
        insertPeople() {
            let _this = this;
            _this.dataList = _this.peopleList ? JSON.parse(JSON.stringify(_this.peopleList)) : []
            switch (_this.authorityType) {
                case '3':
                    _this.selectUserFlag = true;
                    break;
                case '4':
                    _this.selectRoleFlag = true;
                    break;
                case '5':
                    _this.selectDepartmentFlag = true;
                    break;
                default:
                    break;
            }
        },
        closeDialog() {
            let _this = this;
            _this.selectUserFlag = false;
            _this.selectDepartmentFlag = false;
            _this.selectRoleFlag = false;
        },
        submitFunc() {
            let _this = this;
            for( var i = 0; i < _this.peopleList.length; i++) {
                _this.peopleList.splice(i, 1)
                i--
            }
            if(_this.dataList.length) {
                _this.dataList.forEach(function(item){ 
                    item.isHide = false
                    if(item[_this.idPropName] == undefined) {
                        item[_this.idPropName] = item.participationUserId
                        item[_this.propName] = item.participationUserName
                    }
                    _this.peopleList.push(item)
                 })
            }
            _this.refreshContet()
            _this.selectUserFlag = false;
            _this.selectDepartmentFlag = false;
            _this.selectRoleFlag = false;
        },
        clearDataList() {
            let _this = this;
            if(_this.selectUserFlag) {
                for(var i = 0; i < _this.dataList.length; i++) {
                    if(_this.dataList[i].disabled && _this.dataList[i].participationUserId != '672888303978721280') {
                        _this.dataList.splice(i, 1)
                        i--
                    }else if(!_this.dataList[i].disabled){
                        _this.dataList.splice(i, 1)
                        i--
                    }
                }
            }else{
                _this.roleUserList = []
                _this.dataList = []
            }
        },
        searchAllCompany(item) {
            let _this = this;
            //延迟5s执行搜索
            let timer = setTimeout(() => {
                this.$nextTick(() => {
                    let filterValue = _this.filterText.trim()
                    if(filterValue != "") {
                        _this.peopleList.forEach(function(target) {
                            if(target[_this.propName].includes(filterValue)) {
                                target.isHide = false
                            }else{
                                target.isHide = true
                            }
                        })
                    }else{
                        _this.peopleList.forEach(function(target) {target.isHide = false})
                    }
                    _this.refreshContet()
                    clearTimeout(timer);
                    return;
                });
            }, 500);
        }
    },
    created() {
        let _this = this;
        _this.peopleList.forEach(function(target) {target.isHide = false})
    }
};
</script>
<style lang="less" scoped>
.look-all-people-dialog-main {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.look-all-people-dialog-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-top: 16px;
}
.table-people {
    width: 100%;
    max-height: calc(100% - 90px);
    overflow: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .table-people .table-people-add {
    width: 32px;
    height: 32px;
    color: #909399;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #909399;
    border-radius: 4px;
    cursor: pointer;
    .el-icon-plus {
      font-size: 18px;
    }
  }
  .table-people-label {
    color: #1890ff; 
    margin-right: 10px; 
    flex-shrink: 0;
    cursor: pointer;
    span {
      margin-left: 5px;
    }
  }
  .table-people-item {
    margin-right: 20px; 
    flex-shrink: 0;
    position: relative;
    padding: 8px 0;
    cursor: default;
    i {
      position: absolute;
      top: 0;
      right: -10px;
      display: none;
      cursor: pointer;
      color: red;
    }
    &:hover {
      i {
        display: block;
      }
    }
  }
</style>
