<template>
    <view class="comp-list" :class="[hasButton()]" :id="module_id" v-if="render">


        <view class="no-data" v-if="!render || props.data.length<=0">

            {{loading?'正在加载数据':'查询无数据'}}
        </view>
        <template v-if="props.data.length>0">
            <template v-for="(row, index) in props.data" :key="index">
                <!-- {{ row }} -->
                <view class="item" :class="[getItemClass(), hasSelectBox(), isSelect(index)]" @click="clickItem(row)">
                    <view v-if="select_box" class="selectBox" @click.native.stop="change_select(index)"> 
                        <template v-if="select_box=='checkbox'">
                            <template v-if="selectList[index]">
                                <iconfont icon="checkbox" />
                            </template>
                            <template v-else>
                                <iconfont icon="check_no" />
                            </template>
                        </template>
                        <template v-else-if="select_box=='radio'">
                            <template v-if="selectList[index]">
                                <iconfont icon="radio" />
                            </template>
                            <template v-else>
                                <iconfont icon="radio_no" />
                            </template>
                        </template>
                    </view>
                    <template v-for="(item, index_field) in props.fields" :key="item['field']">
                        <view 
                            v-if="item.show && (!item.expand || (item.expand && expandList[index]))"
                            :class="[`lv${item['lv'] || '3'}`, `grid${item['grid']||'1'}`]"
                            :data-field="item['field']"
                        >
                            <text v-if="item['showLabel']" class="label">{{ item['label'] || item['field'] }}: </text>    
                            <text>{{ row[item['field']] }}</text>
                        </view>
                    </template>
                    <view class="expandBtn" v-if="hasExpand" @click.native.stop="change_expand(index)">
                        <template v-if="expandList[index]">{{ translate('expand') }} <iconfont icon="caret-up" /></template>
                        <template v-else >{{ translate('more') }} <iconfont icon="caret-down" /></template>
                    </view>
                    <view class="clickIcon" >
                        <iconfont icon="right"/>
                    </view>
                    <text v-if="statusField" class="status" :style="`background: ${row['color']};`">
                        {{ row[statusField] }}
                    </text>
                </view>
            </template>
        </template>
        <view class="reachBottomText" v-if="reachBottomText">
            {{ reachBottomText }}
        </view>
    </view>
    <view class="comp-buttons" v-if="buttons.length>0">
        <view class="content">
            <view class="left">
                <view class="checkAll" v-if="select_box=='checkbox'" @click="checkAll">
                    <template v-if="getSelect().length>0">
                        <iconfont icon="checkbox" />
                    </template>
                    <template v-else>
                        <iconfont icon="check_no" />
                    </template>
                </view>
                <text class="selectNum"  >
                    共{{ total }}行 
                    <template v-if="select_box"> 选中 {{getSelect().length}} 行</template>
                </text>
            </view>
            <view class="right">
                <template v-for="(btn, index) in buttons">
                    <button 
                        :class="['btn', btn.type, `disabled${btn._disabled}`]" 
                        :disabled="btn._disabled"
                        hover-class="hover"
                        @click="btn['click']"
                    >
                        {{ btn['label'] }}
                    </button>
                </template>
            </view>
        </view>
    </view>
</template>
  
<script setup lang="ts">
import { ref, reactive, computed, onBeforeMount, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { create } from './js/index'
import { translate } from '@/common/utils/language/index'
import { onReachBottom } from '@dcloudio/uni-app'

const module_id = ref('') 
const render = ref(false)
const props = defineProps({
    menu_id: { default: ''},  // 菜单ID
    module_code: { default: '' },  // 模块名
    query_type: { default: 'default' }, // 查询类型

    select_box: { type: String, default: '' }, // checkbox || radio
    fields:  <any>{ type: Array, default: () => [], }, 
    buttons: <any>{ type: Array, default: () => [], }, 
    data:  <any>{ type: Array, default: () => [], },
    select_data:  <any>{ type: Array, default: () => [], }, 
    loading:  <any>{ type: Boolean, default: false, },
    reachBottomText:  { type: String, default: '' },
    total: { type: String, default: 0 },
})
const fields = computed({
    get: () => props.fields,
    set: val => emit('update:fields', val)
})
const buttons = computed({
    get: () => props.buttons,
    set: val => emit('update:buttons', val)
})


// 展开
const hasExpand = ref(false) //是否字段有收起
const expandList = <any>ref([]) 
const change_expand = (index:any) => {
    expandList.value[index] = !expandList.value[index]
}

// 选择 ： 记录checkbox和radio 选中行数下标
const hasSelectBox = () => {
    return props.select_box?'hasSelectBox':''
}
const isSelect = (index:any) => {
    return selectList.value[index]?'isSelect':''
}
const selectList = <any>ref([])
const change_select = (index:any) => {
    if(props.select_box == 'checkbox'){
        selectList.value[index] = !selectList.value[index]
    }else if(props.select_box == 'radio'){
        for(let i in selectList.value){
            if(i==index) continue
            selectList.value[i] = false
        }
        selectList.value[index] = !selectList.value[index]
    }
    getButtonDisabled(props.buttons)
    emit('select',  getSelect())
}
const checkAll = () => {
    let check = true
    if(getSelect().length==props.data.length){
        check = false
    }
    for(let index in selectList.value){
        selectList.value[index] = check
    }
}
const getSelect = () => { // 根据选择下标 获取data的数据集
    let selectData:any = []
    for(let index in selectList.value){
        if(selectList.value[index]) {
            selectData.push(props.data[index])
        }
    }
    return selectData
}
const gather = () => getSelect() // 别名gather 

const getButtonDisabled = (btns:any) => {
    let _disabled
    for(let btn of btns){
        if(btn['disabled']){
            _disabled = true
        }
        if(getSelect().length>0){
            _disabled = false
        }else{
            if(btn.not_verify){
                _disabled = false
            }else{
                _disabled = true
            }
        }
        btn._disabled = _disabled
    }
}

// 状态字段
const statusField = ref('')
// item class
const getItemClass = () => {
    return `${statusField.value?'hasStatus ':''}${hasExpand.value?'hasExpand ':''}${hasExpand.value?'hasClick ':''}`
}
const hasButton = () => {
    return `${props.buttons.length>0?'hasButton ':''}`
}
const clicking = ref(false)
const clickItem = (row:any) => {
    if(!clicking.value){
        emit('row_click', row)
        clicking.value = true
        let timer = setTimeout(() => {
            clicking.value = false
            clearTimeout(timer)
        }, 500);
    }
}


defineExpose({
    gather, getSelect,
})
onBeforeMount(async() => {
    module_id.value = `LIST_COMP/${props.menu_id||'无效菜单'}/${props.module_code||'无效容器'}/${props.query_type}`;
    create({ fields, buttons, render, hasExpand, statusField})
})
onMounted(()=>{
    getButtonDisabled(props.buttons)
})
onUnmounted(() => {
})
onReachBottom(()=>{
    emit('onReach')
})

const emit = defineEmits(['update:fields', 'update:buttons', 'changeData' , 'select', 'row_click', 'onReach'])
  

watch( 
    ()=>props.data,
    (newData,oldData)=>{
        expandList.value = []
        selectList.value = []
        for(let i=0; i<newData.length; i++){
            expandList.value.push(false)
            selectList.value.push(false)
        }
        getButtonDisabled(props.buttons)
    },
    { immediate: false, deep: true, }
)
  
  
</script>
  
<style lang="scss">

view.no-data{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    font-size: 32rpx;
    font-weight: 200;
    text-align: center;
    color: #999;
}
.comp-list{
    padding-bottom:env(safe-area-inset-bottom);
    &.hasButton{
        padding-bottom: calc(53px + env(safe-area-inset-bottom))
    }
    .item{
        background: #fff;
        margin: 20rpx 20rpx;
        border-radius: 20rpx;
        padding: 25rpx;
        display: flex;
        flex-wrap: wrap;
        position: relative;

        &.hasClick{
            padding-right: 100rpx;
        }
        &.hasExpand{
            padding-bottom: 70rpx;
        }
        &.hasStatus{
            >.lv1{
                padding-right: 60rpx;
            }
        }
        &.hasSelectBox{
            padding-left: 80rpx;

            &.isSelect{
                .selectBox{
                    background: $primary-color;
                    color: #fff;
                }
            }
        }


        >.lv1{
            width: 100%;
            order: 1;
            font-size: 32rpx;
            line-height:42rpx;
            font-weight: bold;
            color: #333;
            word-break: break-word;
            margin-bottom: 20rpx;

        }
        >.lv2{
            width: 100%;
            order: 2;
            font-size: 27rpx;
            color: #444;
            word-break: break-word;
            line-height: 1;
            margin-bottom: 20rpx;
        }
        >.lv3{
            width: 50%;
            order: 3;
            font-size: 24rpx;
            line-height: 40rpx;
            color: #888;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-word;

            &.grid2{
                width: 100% !important;
            }
        }
        >.expandBtn{
            height: 50rpx;
            line-height: 40rpx;
            color: #666;
            display: flex;
            justify-content: flex-end;
            font-size: 10px;
            position: absolute;
            right: 25rpx;
            bottom: 0;
        }
        >.clickIcon{
            position: absolute;
            right: 25rpx;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }
        >.status{
            background: $primary-color;
            border-radius: 15rpx;
            padding: 0 8rpx;
            color: #fff;
            font-size: 12px;
            line-height:42rpx;
            height: 42rpx;
            margin-right: 10rpx;
            max-width: 100rpx;
            position: absolute;
            right: 25rpx;
            top: 25rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

        }
        >.selectBox{
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            background: #f9f9f9;
            border-right: 1rpx solid #ddd;
            color: #999;
            width: 60rpx;
            border-radius: 20rpx 0 0 20rpx;
            view{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateY(-50%) translateX(-50%);
            }
        }
    }

    .reachBottomText{
        text-align: center;
        font-size: 13px;
        color: #ccc;
        line-height: 80rpx;
    }
}
.comp-buttons{
    position: fixed;
    background: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    padding-bottom:env(safe-area-inset-bottom);
    border-top: 1rpx solid #eaf1f7;
    padding-left: 10rpx;
    >.content{
        padding: 10rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        >.right{
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            > .btn{
                    width: auto;
                    padding: 20rpx;
                    flex-grow: 0;
                    flex-shrink: 0;
                    margin: 10rpx;
                    font-size: 13px;
                    line-height: 1;
                    background: $primary-color;
                    color: #fff;
                    transition: 0.3;
                    opacity: 1;
                    &.hover, &:focus{
                        opacity: 0.5;
                    }

                    &.danger{
                        background: $danger-color;
                    }
                    &.warning{
                        background: $warning-color;
                    }
                    &.success{
                        background: $success-color;
                    }
                    &.info{
                        background: $info-color;
                    }
                    &.disabledtrue{
                        opacity: .3;
                    }
                }
        }
        
        >.left{
            display: flex;
            justify-content: left;
            >.checkAll{
                height: 60rpx;
                line-height: 60rpx;
                font-size: 12px;
                margin-right: 15rpx;
                color: $primary-color;
            }
            >.selectNum{
                height: 60rpx;
                line-height: 60rpx;
                background: #fff;
                color: $primary-color;
                border: 1px solid $primary-color;
                padding: 0 20rpx;
                border-radius: 20px;
                font-size: 12px;
            }
        }
    }
}
</style>
  