<template>
    <BasicModal
        @register="register"
        :getContainer="getContainer"
        :canFullscreen="false"
        :title="title"
        :width="500"
        destroyOnClose
        @ok="handleOk"
        wrapClassName="j-user-select-modal2" >

        <div style="position: relative; min-height: 350px">
            <div style="width: 100%">
                <a-input v-model:value="searchText" allowClear style="width: 100%" placeholder="搜索">
                    <template #prefix>
                        <SearchOutlined style="color: #c0c0c0" />
                    </template>
                </a-input>
            </div>

            <!-- tabs -->
            <div class="modal-select-list-container">
                <div class="scroll">
                    <div class="content" style="right: -10px">
                        
                        <label class="item" v-for="item in showDataList" @click="(e)=>onSelect(e, item)">
                            <a-checkbox v-model:checked="item.checked">
                                <span class="text">{{ item.name }}</span>
                            </a-checkbox>
                        </label>
                    </div>
                    
                </div>
            </div>

            <!-- 选中用户 -->
            <div class="selected-users" style="width: 100%; overflow-x: hidden">
                <SelectedUserItem v-for="item in selectedList" :info="item" @unSelect="unSelect" />
            </div>
        </div>
    </BasicModal>
</template>

<script lang="ts">
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { SearchOutlined, CloseOutlined } from '@ant-design/icons-vue';
  import SelectedUserItem from '../userSelect/SelectedUserItem.vue';
  import { defHttp } from '/@/utils/http/axios';

  import { computed, ref, toRaw, watch } from 'vue';
  export default {
    name: 'RoleSelectModal',
    components: {
      BasicModal,
      SearchOutlined,
      CloseOutlined,
      SelectedUserItem,
    },
    props: {
      multi: {
        type: Boolean,
        default: true,
      },
      getContainer: {
        type: Function,
        default: null,
      },
      title:{
        type: String,
        default: '',
      },
      type: {
        type: String,
        default: 'sys_role',
      },
      appId: {
        type: String,
        default: '',
      }
    },
    emits: ['selected', 'register'],
    setup(props, { emit }) {

      const searchText = ref('');
      const selectedIdList = computed(() => {
        let arr = selectedList.value;
        if (!arr || arr.length == 0) {
          return [];
        } else {
          return arr.map((k) => k.id);
        }
      });

      watch(()=>props.appId, async (val)=>{
        if(val){
          await loadDataList();
        }
      }, {immediate: true});
      
      
      // 弹窗事件
      const [register] = useModalInner(() => {
        let list = dataList.value;
        if(!list || list.length ==0 ){
        }
        for(let item of list){
          item.checked = false
        }
      });

      // 确定事件
      function handleOk() {
        let arr = toRaw(selectedIdList.value);
        emit('selected', arr);
      }
      
      const dataList = ref<any[]>([]);
      const showDataList = computed(()=>{
        let list = dataList.value;
        if(!list || list.length ==0 ){
          return []
        }
        let text = searchText.value;
        if(!text){
          return list
        }
        return list.filter(item=>item.name.indexOf(text)>=0)
      });
  
      const selectedList = computed(()=>{
        let list = dataList.value;
        if(!list || list.length ==0 ){
          return []
        }
        return list.filter(item=>item.checked)
      });

      function unSelect(id) {
        let list = dataList.value;
        if(!list || list.length ==0 ){
          return;
        }
        let arr = list.filter(item=>item.id == id);
        arr[0].checked = false;
      }
      
      async function loadDataList() {
        let params = {
          pageNo: 1,
          pageSize: 200,
          column: 'createTime',
          order: 'desc'
        };
        const url = '/sys/role/listByTenant';
        const data = await defHttp.get({ url, params }, { isTransformResponse: false });
        if (data.success) {
          const { records } = data.result;
          let arr:any[] = [];
          if(records && records.length>0){
            for(let item of records){
              arr.push({
                id: item.id,
                name: item.name || item.roleName,
                selectType: props.type,
                checked: false
              })
            }
          }
          dataList.value = arr;
        } else {
          console.error(data.message);
        }
        console.log('loadDataList', data);
      }


      function onSelect(e, item) {
        prevent(e);
        console.log('onselect');
        item.checked = !item.checked;
      }

      function prevent(e) {
        e.preventDefault();
        e.stopPropagation();
      }

      return {
        register,
        showDataList,
        searchText,
        handleOk,
        selectedList,
        selectedIdList,
        unSelect,
        onSelect
      
      };
    },
  };
</script>
<style scoped lang="less">
    .modal-select-list-container{
        height: 352px;
        margin-top: 12px;
        overflow: auto;
        .scroll{
            height: 100%;
            position: relative;
            width: 100%;
            overflow: hidden;
            .content{
                bottom: 0;
                left: 0;
                overflow: scroll;
                overflow-x: hidden;
                position: absolute;
                right: 0;
                top: 0;
                .item{
                    padding: 7px 5px;
                    cursor: pointer;
                    display: block;
                    &:hover{
                        background-color: #f5f5f5;
                    }
                }
               
            }
        }

       
    }
</style>

<style lang="less">
    .j-user-select-modal2 {
        .depart-select {
            .ant-select-selector {
                color: #fff !important;
                background-color: #409eff !important;
                border-radius: 5px !important;
            }
            .ant-select-selection-item,
            .ant-select-arrow {
                color: #fff !important;
            }
        }
        .my-search {
            position: absolute;
            top: 14px;
            z-index: 1;
            &.all-width {
                width: 100%;
            }

            .anticon {
                cursor: pointer;
                &:hover {
                    color: #0a8fe9 !important;
                }
            }
            .hidden {
                display: none;
            }
        }

        .my-tabs {
        }

        .selected-users {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            padding-top: 15px;
        }

        .scroll-container {
            padding-bottom: 0 !important;
        }
    }
</style>
