<template>
    <div
        :changeValue="changeValue"
        :changeQuery="changeQuery"
        v-domresize
        @domresize="resize"
    >

        <WListVertical
            :style="`height:${panelHeight}px;`"
            :items="itemsTrans"
            :enableActive="true"
            _itemActive="itemActive"
            :keyText="keyText"
            :keyIcon="keyIcon"
            :paddingStyle="paddingStyle"
            :itemTextFontSize="itemTextFontSize"
            :itemBackgroundColor="itemBackgroundColor"
            :itemBackgroundColorHover="itemBackgroundColorHover"
            :itemBackgroundColorActive="itemBackgroundColorActive"
            :itemBackgroundColorDisabled="itemBackgroundColorDisabled"
            :itemTextColor="itemTextColor"
            :itemTextColorHover="itemTextColorHover"
            :itemTextColorActive="itemTextColorActive"
            :itemTextColorDisabled="itemTextColorDisabled"
            :itemIconSize="itemIconSize"
            :itemIconColor="itemIconColor"
            :itemIconColorHover="itemIconColorHover"
            :itemIconColorActive="itemIconColorActive"
            :itemIconColorDisabled="itemIconColorDisabled"
            :itemRippleColor="itemRippleColor"
            :itemDisabledColor="itemDisabledColor"
            :itemCursorPointer="itemCursorPointer"
            :query="queryTrans"
            :funFilter="queryFunFilter"
            @click="(vitem,kitem)=>{clickItem(vitem.data,kitem)}"
        >

            <template v-slot:header>

                <slot name="header">
                </slot>

                <template v-if="enableQuery">

                    <div :style="`${useQueryPanelPaddingStyle}`">

                        <WText
                            :paddingStyle="queryPaddingStyle"
                            :borderRadius="queryBorderRadius"
                            :shadow="queryShadow"
                            :textFontSize="queryTextFontSize"
                            :textColor="queryTextColor"
                            :textAlign="queryTextAlign"
                            :leftIcon="queryIcon"
                            :leftIconSize="queryIconSize"
                            :leftIconColor="queryIconColor"
                            :leftIconColorHover="queryIconColorHover"
                            :leftIconColorFocus="queryIconColorFocus"
                            :leftIconTooltip="queryIconTooltip"
                            _rightIcon="queryRightIcon"
                            _rightIconSize="queryRightIconSize"
                            _rightIconColor="queryRightIconColor"
                            _rightIconColorHover="queryRightIconColorHover"
                            _rightIconColorFocus="queryRightIconColorFocus"
                            _rightIconTooltip="queryRightIconTooltip"
                            :iconShiftOuter="queryIconShiftOuter"
                            :iconShiftInner="queryIconShiftInner"
                            :backgroundColor="queryBackgroundColor"
                            :backgroundColorHover="queryBackgroundColorHover"
                            :backgroundColorFocus="queryBackgroundColorFocus"
                            :borderColor="queryBorderColor"
                            :borderColorHover="queryBorderColorHover"
                            :borderColorFocus="queryBorderColorFocus"
                            :bottomLineBorderColor="queryBottomLineBorderColor"
                            :bottomLineBorderColorHover="queryBottomLineBorderColorHover"
                            :bottomLineBorderColorFocus="queryBottomLineBorderColorFocus"
                            :bottomLineBorderWidth="queryBottomLineBorderWidth"
                            :bottomLineBorderWidthHover="queryBottomLineBorderWidthHover"
                            :bottomLineBorderWidthFocus="queryBottomLineBorderWidthFocus"
                            :placeholder="queryPlaceholder"
                            :height="queryHeight"
                            :focused="queryFocused"
                            :editable="true"
                            v-model="queryTrans"
                            @enter="modifyQuery"
                            @change="modifyQuery"
                            @input="modifyQuery"
                            @update:focused="modifyQueryFocused"
                        ></WText>

                    </div>

                    <div :style="`border-top:${querySepLineWidth}px solid ${effSepLineColor};`"></div>

                </template>

            </template>

            <template v-slot:item-left="props">

                <!-- 切換check統一由list的item處理, 此處不監聽處理input事件 -->
                <WCheckbox
                    :iconSize="itemCheckIconIconSize"
                    :checkedIcon="itemCheckIconCheckedIcon"
                    :checkedIconColor="props.isActive?itemCheckIconCheckedIconColorActive:props.isHover?itemCheckIconCheckedIconColorHover:itemCheckIconCheckedIconColor"
                    :checkedIconColorHover="props.isActive?itemCheckIconCheckedIconColorActive:itemCheckIconCheckedIconColorHover"
                    :checkedIconColorDisabled="itemCheckIconCheckedIconColorDisabled"
                    :uncheckedIcon="itemCheckIconUncheckedIcon"
                    :uncheckedIconColor="props.isActive?itemCheckIconUncheckedIconColorActive:props.isHover?itemCheckIconUncheckedIconColorHover:itemCheckIconUncheckedIconColor"
                    :uncheckedIconColorHover="props.isActive?itemCheckIconUncheckedIconColorActive:itemCheckIconUncheckedIconColorHover"
                    :uncheckedIconColorDisabled="itemCheckIconUncheckedIconColorDisabled"
                    :editable="getEditable(props.item.data)"
                    :value="getCheck(props.item.data)"
                ></WCheckbox>

                <div :style="`padding-right:${spaceBetweenCheckboxAndContent}px;`"></div>

            </template>

            <template v-slot:item-content="props">

                <slot
                    name="item-content"
                    :item="props.item.data"
                    :kitem="props.kitem"
                    :isHover="props.isHover"
                    :isActive="props.isActive"
                >
                </slot>

            </template>

            <template v-slot:footer>

                <slot name="footer">
                </slot>

            </template>

        </WListVertical>

    </div>
</template>

<script>
import { mdiCheckboxMarked, mdiCheckboxBlankOutline, mdiFilterOutline } from '@mdi/js/mdi.js'
import get from 'lodash-es/get.js'
import size from 'lodash-es/size.js'
import each from 'lodash-es/each.js'
import map from 'lodash-es/map.js'
import every from 'lodash-es/every.js'
import join from 'lodash-es/join.js'
import isEqual from 'lodash-es/isEqual.js'
import cloneDeep from 'lodash-es/cloneDeep.js'
import isestr from 'wsemi/src/isestr.mjs'
import isobj from 'wsemi/src/isobj.mjs'
import iseobj from 'wsemi/src/iseobj.mjs'
import isearr from 'wsemi/src/isearr.mjs'
import arrHas from 'wsemi/src/arrHas.mjs'
import sep from 'wsemi/src/sep.mjs'
import o2j from 'wsemi/src/o2j.mjs'
import cstr from 'wsemi/src/cstr.mjs'
import strleft from 'wsemi/src/strleft.mjs'
import domResize from '../js/domResize.mjs'
import convertColor from '../js/convertColor.mjs'
import parseSpace from '../js/parseSpace.mjs'
import WCheckbox from './WCheckbox.vue'
import WText from './WText.vue'
import WListVertical from './WListVertical.vue'


/**
 * @vue-prop {Boolean} [multiCheck=true] 輸入是否為複選模式布林值，預設true
 * @vue-prop {Array} [items=[]] 輸入項目的字串陣列或物件陣列，預設[]
 * @vue-prop {Array|String|Object} [value=null] 輸入單、複選陣列、字串或物件陣列，預設null
 * @vue-prop {String} [keyText='text'] 輸入項目為物件時，存放顯示文字之欄位字串，預設'text'
 * @vue-prop {String} [keyIcon='icon'] 輸入項目為物件時，存放圖標之欄位字串，預設'icon'
 * @vue-prop {String} [keyPickForObjItem=''] 輸入項目為物件時，比對是否核選之欄位字串，若為空字串代表使用項目物件直接作比對，預設''
 * @vue-prop {Object} [paddingStyle={v:6,h:8}] 輸入內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:6,h:8}
 * @vue-prop {Number} [spaceBetweenCheckboxAndContent=8] 輸入左側核選圖標與項目內容區之距離數字，單位px，預設8
 * @vue-prop {String} [itemTextFontSize='1.0rem'] 輸入文字字型大小字串，預設'1.0rem'
 * @vue-prop {String} [itemBackgroundColor='white'] 輸入背景顏色字串，預設'white'
 * @vue-prop {String} [itemBackgroundColorHover='rgba(200,200,200,0.2)'] 輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.2)'
 * @vue-prop {String} [itemBackgroundColorActive='rgba(200,200,200,0.4)'] 輸入主動模式時背景顏色字串，預設'rgba(200,200,200,0.4)'
 * @vue-prop {String} [itemBackgroundColorDisabled='white'] 輸入非啟用模式時背景顏色字串，預設'white'
 * @vue-prop {String} [itemTextColor='#444'] 輸入文字顏色字串，預設'#444'
 * @vue-prop {String} [itemTextColorHover='#222'] 輸入滑鼠移入時文字顏色字串，預設'#222'
 * @vue-prop {String} [itemTextColorActive='white'] 輸入主動模式時文字顏色字串，預設'white'
 * @vue-prop {String} [itemTextColorDisabled='#444'] 輸入非啟用模式時文字顏色字串，預設'#444'
 * @vue-prop {Number} [itemIconSize=18] 輸入左側圖標之尺寸數字，單位px，預設18
 * @vue-prop {String} [itemIconColor='#444'] 輸入圖標顏色字串，預設'#444'
 * @vue-prop {String} [itemIconColorHover='#222'] 輸入滑鼠移入時圖標顏色字串，預設'#222'
 * @vue-prop {String} [itemIconColorActive='white'] 輸入主動模式時圖標顏色字串，預設'white'
 * @vue-prop {String} [itemIconColorDisabled='#444'] 輸入非啟用模式時圖標顏色字串，預設'#444'
 * @vue-prop {String} [itemRippleColor='rgba(255,255,255,0.4)'] 輸入ripple效果顏色字串，預設'rgba(255,255,255,0.4)'
 * @vue-prop {String} [itemDisabledColor='transparent'] 輸入非編輯模式時遮罩顏色字串，預設'transparent'
 * @vue-prop {Boolean} [itemCursorPointer=true] 輸入是否滑鼠移入顯示pointer樣式布林值，預設true
 * @vue-prop {Number} [itemCheckIconIconSize=18] 輸入核選圖標之圖標大小，單位為px，預設18
 * @vue-prop {String} [itemCheckIconCheckedIcon=mdiCheckboxMarked] 輸入核選圖標之有效(true|'y')圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCheckboxMarked
 * @vue-prop {String} [itemCheckIconCheckedIconColor='blue darken-3'] 輸入核選圖標有效(true|'y')圖標顏色字串，預設'blue darken-3'
 * @vue-prop {String} [itemCheckIconCheckedIconColorHover='blue darken-2'] 輸入滑鼠移入時核選圖標有效(true|'y')圖標顏色字串，預設'blue darken-2'
 * @vue-prop {String} [itemCheckIconCheckedIconColorActive='blue darken-2'] 輸入主動模式時核選圖標有效(true|'y')圖標顏色字串，預設'blue darken-2'
 * @vue-prop {String} [itemCheckIconCheckedIconColorDisabled='grey'] 輸入非啟用模式時核選圖標有效(true|'y')圖標顏色字串，預設'grey'
 * @vue-prop {String} [itemCheckIconUncheckedIcon=mdiCheckboxBlankOutline] 輸入核選圖標之無效(false|'n')圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCheckboxBlankOutline
 * @vue-prop {String} [itemCheckIconUncheckedIconColor='blue darken-3'] 輸入核選圖標無效(false|'n')圖標顏色字串，預設'blue darken-3'
 * @vue-prop {String} [itemCheckIconUncheckedIconColorHover='blue darken-2'] 輸入滑鼠移入時核選圖標無效(false|'n')圖標顏色字串，預設'blue darken-2'
 * @vue-prop {String} [itemCheckIconUncheckedIconColorActive='blue darken-2'] 輸入主動模式時核選圖標無效(false|'n')圖標顏色字串，預設'blue darken-2'
 * @vue-prop {String} [itemCheckIconUncheckedIconColorDisabled='grey'] 輸入非啟用模式時核選圖標無效(false|'n')圖標顏色字串，預設'grey'
 * @vue-prop {Boolean} [enableQuery=false] 輸入是否使用過濾關鍵字功能布林值，預設false
 * @vue-prop {String} [query=''] 輸入過濾關鍵字字串，預設''
 * @vue-prop {String} [queryKeysPickForObjItem=[]] 輸入項目為物件時，於查詢時所須提取出之欄位字串陣列，預設[]
 * @vue-prop {Object} [queryPaddingStyle={v:0,h:0}] 輸入過濾文字框之內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:0}
 * @vue-prop {Number} [queryBorderRadius=30] 輸入過濾文字框之框圓角度數字，單位為px，預設30
 * @vue-prop {Boolean} [queryShadow=false] 輸入過濾文字框之是否為陰影模式，預設false
 * @vue-prop {String} [queryTextFontSize='1.0rem'] 輸入過濾文字框之文字大小字串，預設'1.0rem'
 * @vue-prop {String} [queryTextColor='black'] 輸入過濾文字框之文字顏色字串，預設'black'
 * @vue-prop {String} [queryTextAlign='left'] 輸入過濾文字框之文字左右對齊字串，預設'left'
 * @vue-prop {String} [queryIcon=mdiFilterOutline] 輸入過濾文字框之左側圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiFilterOutline
 * @vue-prop {Number} [queryIconSize=18] 輸入過濾文字框之左側圖標大小，單位為px，預設18
 * @vue-prop {String} [queryIconColor='blue'] 輸入過濾文字框之左側圖標顏色字串，預設'blue'
 * @vue-prop {String} [queryIconColorHover='blue darken-1'] 輸入過濾文字框之滑鼠移入時左側圖標顏色字串，預設'blue darken-1'
 * @vue-prop {String} [queryIconColorFocus='blue darken-1'] 輸入過濾文字框之取得焦點時左側圖標顏色字串，預設'blue darken-1'
 * @vue-prop {String} [queryIconTooltip=''] 輸入過濾文字框之左側圖標提示文字字串，預設''
 * @vue-prop {Number} [queryIconShiftOuter=0] 輸入過濾文字框之左右側圖標與外框距離數字，單位為px，預設0
 * @vue-prop {Number} [queryIconShiftInner=5] 輸入過濾文字框之左右側圖標與內插槽區距離數字，單位為px，預設5
 * @vue-prop {String} [queryBackgroundColor='transparent'] 輸入過濾文字框之背景顏色字串，預設'transparent'
 * @vue-prop {String} [queryBackgroundColorHover='transparent'] 輸入過濾文字框之滑鼠移入時背景顏色字串，預設'transparent'
 * @vue-prop {String} [queryBackgroundColorFocus='transparent'] 輸入過濾文字框之取得焦點時背景顏色字串，預設'transparent'
 * @vue-prop {String} [queryBorderColor='transparent'] 輸入過濾文字框之邊框顏色字串，預設'transparent'
 * @vue-prop {String} [queryBorderColorHover='transparent'] 輸入過濾文字框之滑鼠移入時邊框顏色字串，預設'transparent'
 * @vue-prop {String} [queryBorderColorFocus='transparent'] 輸入過濾文字框之取得焦點時邊框顏色字串，預設'transparent'
 * @vue-prop {String} [queryBottomLineBorderColor='grey lighten-1'] 輸入過濾文字框之底部線顏色字串，預設'grey lighten-1'
 * @vue-prop {String} [queryBottomLineBorderColorHover='grey'] 輸入過濾文字框之滑鼠移入時底部線顏色字串，預設'grey'
 * @vue-prop {String} [queryBottomLineBorderColorFocus='blue darken-1'] 輸入過濾文字框之取得焦點時底部線顏色字串，預設'blue darken-1'
 * @vue-prop {Number} [queryBottomLineBorderWidth=1] 輸入過濾文字框之底部線寬度數字，單位為px，預設1
 * @vue-prop {Number} [queryBottomLineBorderWidthHover=1] 輸入過濾文字框之滑鼠移入時底部線寬度數字，單位為px，預設1
 * @vue-prop {Number} [queryBottomLineBorderWidthFocus=2] 輸入過濾文字框之取得焦點時底部線寬度數字，單位為px，預設2
 * @vue-prop {String} [queryPlaceholder='Keywords'] 輸入過濾文字框之無文字時的替代字符字串，預設'Keywords'
 * @vue-prop {Number} [queryHeight=28] 輸入過濾文字框之高度數字，單位為px，預設28
 * @vue-prop {Boolean} [queryFocused=false] 輸入過濾文字框之是否為取得焦點狀態，預設false
 * @vue-prop {Object} [queryPanelPaddingStyle={v:10,h:10}] 輸入過濾文字框所在區域之內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:10,h:10}
 * @vue-prop {String} [querySepLineColor='#ddd'] 輸入過濾文字框與下方核選區之分界線顏色字串，預設'#ddd'
 * @vue-prop {Number} [querySepLineWidth=1] 輸入過濾文字框與下方核選區之分界線寬度數字，單位為px，預設1
 */
export default {
    directives: {
        domresize: domResize(),
    },
    components: {
        WCheckbox,
        WText,
        WListVertical,
    },
    props: {
        multiCheck: {
            type: Boolean,
            default: true,
        },
        items: {
            type: Array,
            default: () => [],
        },
        value: {
            type: [Array, String, Object],
            default: null,
        },
        keyText: {
            type: String,
            default: 'text',
        },
        keyIcon: {
            type: String,
            default: 'icon',
        },
        keyPickForObjItem: {
            type: String,
            default: '',
        },
        paddingStyle: {
            type: Object,
            default: () => {
                return {
                    v: 6,
                    h: 8,
                }
            },
        },
        spaceBetweenCheckboxAndContent: {
            type: Number,
            default: 8,
        },
        itemTextFontSize: {
            type: String,
            default: '1.0rem',
        },
        itemBackgroundColor: {
            type: String,
            default: 'white',
        },
        itemBackgroundColorHover: {
            type: String,
            default: 'rgba(200,200,200,0.2)',
        },
        itemBackgroundColorActive: {
            type: String,
            default: 'rgba(200,200,200,0.4)',
        },
        itemBackgroundColorDisabled: {
            type: String,
            default: 'white',
        },
        itemTextColor: {
            type: String,
            default: '#444',
        },
        itemTextColorHover: {
            type: String,
            default: '#222',
        },
        itemTextColorActive: {
            type: String,
            default: '#000',
        },
        itemTextColorDisabled: {
            type: String,
            default: '#444',
        },
        itemIconSize: {
            type: Number,
            default: 18,
        },
        itemIconColor: {
            type: String,
            default: '#444',
        },
        itemIconColorHover: {
            type: String,
            default: '#222',
        },
        itemIconColorActive: {
            type: String,
            default: '#000',
        },
        itemIconColorDisabled: {
            type: String,
            default: '#444',
        },
        itemRippleColor: {
            type: String,
            default: 'rgba(255,255,255,0.4)',
        },
        itemDisabledColor: {
            type: String,
            default: 'transparent',
        },
        itemCursorPointer: {
            type: Boolean,
            default: true,
        },
        itemCheckIconIconSize: {
            type: Number,
            default: 18,
        },
        itemCheckIconCheckedIcon: {
            type: String,
            default: mdiCheckboxMarked,
        },
        itemCheckIconCheckedIconColor: {
            type: String,
            default: 'blue darken-3',
        },
        itemCheckIconCheckedIconColorHover: {
            type: String,
            default: 'blue darken-2',
        },
        itemCheckIconCheckedIconColorActive: {
            type: String,
            default: 'blue darken-2',
        },
        itemCheckIconCheckedIconColorDisabled: {
            type: String,
            default: 'grey',
        },
        itemCheckIconUncheckedIcon: {
            type: String,
            default: mdiCheckboxBlankOutline,
        },
        itemCheckIconUncheckedIconColor: {
            type: String,
            default: 'blue darken-3',
        },
        itemCheckIconUncheckedIconColorHover: {
            type: String,
            default: 'blue darken-2',
        },
        itemCheckIconUncheckedIconColorActive: {
            type: String,
            default: 'blue darken-2',
        },
        itemCheckIconUncheckedIconColorDisabled: {
            type: String,
            default: 'grey',
        },
        enableQuery: {
            type: Boolean,
            default: false,
        },
        query: {
            type: String,
            default: '',
        },
        queryKeysPickForObjItem: {
            type: Array,
            default: () => ['text'],
        },
        queryPaddingStyle: {
            type: Object,
            default: () => {
                return {
                    v: 0,
                    h: 0,
                }
            },
        },
        queryBorderRadius: {
            type: Number,
            default: 30,
        },
        queryShadow: {
            type: Boolean,
            default: false,
        },
        queryTextFontSize: {
            type: String,
            default: '1.0rem',
        },
        queryTextColor: {
            type: String,
            default: 'black',
        },
        queryTextAlign: {
            type: String,
            default: 'left',
        },
        queryIcon: {
            type: String,
            default: mdiFilterOutline,
        },
        queryIconSize: {
            type: Number,
            default: 18,
        },
        queryIconColor: {
            type: String,
            default: 'blue',
        },
        queryIconColorHover: {
            type: String,
            default: 'blue darken-1',
        },
        queryIconColorFocus: {
            type: String,
            default: 'blue darken-1',
        },
        queryIconTooltip: {
            type: String,
            default: '',
        },
        queryIconShiftOuter: {
            type: Number,
            default: 0,
        },
        queryIconShiftInner: {
            type: Number,
            default: 5,
        },
        queryBackgroundColor: {
            type: String,
            default: 'transparent',
        },
        queryBackgroundColorHover: {
            type: String,
            default: 'transparent',
        },
        queryBackgroundColorFocus: {
            type: String,
            default: 'transparent',
        },
        queryBorderColor: {
            type: String,
            default: 'transparent',
        },
        queryBorderColorHover: {
            type: String,
            default: 'transparent',
        },
        queryBorderColorFocus: {
            type: String,
            default: 'transparent',
        },
        queryBottomLineBorderColor: {
            type: String,
            default: 'grey lighten-1', //'transparent',
        },
        queryBottomLineBorderColorHover: {
            type: String,
            default: 'grey', //'transparent',
        },
        queryBottomLineBorderColorFocus: {
            type: String,
            default: 'blue darken-1', //'transparent',
        },
        queryBottomLineBorderWidth: {
            type: Number,
            default: 1,
        },
        queryBottomLineBorderWidthHover: {
            type: Number,
            default: 1,
        },
        queryBottomLineBorderWidthFocus: {
            type: Number,
            default: 2,
        },
        queryPlaceholder: {
            type: String,
            default: 'Keywords',
        },
        queryHeight: {
            type: Number,
            default: 28,
        },
        queryFocused: {
            type: Boolean,
            default: false,
        },
        queryPanelPaddingStyle: {
            type: Object,
            default: () => {
                return {
                    v: 10,
                    h: 10,
                }
            },
        },
        querySepLineColor: {
            type: String,
            default: '#ddd',
        },
        querySepLineWidth: {
            type: Number,
            default: 1,
        },
        // editable: {
        //     type: Boolean,
        //     default: true,
        // },
    },
    data: function() {
        return {

            panelHeight: 0,

            itemsTrans: [],
            kpCheck: {},

            queryTrans: '',
            queryFocusedTrans: false,

        }
    },
    computed: {

        changeValue: function () {
            // console.log('computed changeValue')

            let vo = this

            //modifyItems
            vo.modifyItems(vo.value)

            return ''
        },

        changeQuery: function () {
            // console.log('computed changeQuery')

            let vo = this

            //save
            vo.queryTrans = vo.query
            vo.queryFocusedTrans = vo.queryFocused

            return ''
        },

        isObjValue: function() {
            //console.log('computed isObjValue')

            let vo = this

            //check, 因every([])=true
            if (size(vo.items) === 0) {
                return false
            }
            return every(vo.items, (v) => {
                return isobj(v)
            })
        },

        useQueryPanelPaddingStyle: function() {
            //console.log('computed useQueryPanelPaddingStyle')

            let vo = this

            //parseSpace
            let cs = parseSpace(vo.queryPanelPaddingStyle)

            //padding
            let padding = `padding:${cs};`

            return padding
        },

        effSepLineColor: function() {
            let vo = this
            return convertColor(vo.querySepLineColor)
        },

    },
    methods: {

        resize: function(msg) {
            // console.log('methods resize', msg)

            let vo = this

            //panelHeight
            vo.panelHeight = msg.snew.offsetHeight

        },

        getItem: function(v) {
            // console.log('getItem', v)
            let vo = this
            let r = null
            if (vo.isObjValue && isestr(vo.keyPickForObjItem)) {
                r = get(v, vo.keyPickForObjItem)
            }
            else {
                r = v
            }
            return r
        },

        getKeyFromItemAndInd: function(v, k) {
            // console.log('getKeyFromItemAndInd', v, k)
            let vo = this
            let vt = vo.getItem(v)
            if (iseobj(vt)) {
                vt = JSON.stringify(vt)
                vt = strleft(vt, 20)
            }
            let r = `${k}|${vt}`
            return r
        },

        getKeyFromItem: function(v) {
            // console.log('getKeyFromItem', v)
            let vo = this
            let vk = null
            each(vo.items, (_v, k) => {
                if (isEqual(_v, v)) {
                    vk = vo.getKeyFromItemAndInd(v, k)
                    return false //跳出
                }
            })
            return vk
        },

        judgeItem: function (v, value) {
            // console.log('judgeItem', v, value)

            let vo = this

            //vt
            let vt = vo.getItem(v)

            //check
            let check = null
            if (vo.multiCheck) {
                check = arrHas(value, vt)
            }
            else {
                check = isEqual(value, vt)
            }

            return check
        },

        queryFunFilter: function(v, k) {
            // console.log('queryFunFilter', v, k)

            let vo = this

            //check
            if (!isestr(vo.queryTrans)) {
                return true
            }

            //vt
            let vt = null
            if (vo.isObjValue) {
                if (isearr(vo.queryKeysPickForObjItem)) {
                    let ks = []
                    each(vo.queryKeysPickForObjItem, (k) => {
                        let kk = get(v, `data.${k}`)
                        ks.push(kk)
                    })
                    vt = join(ks, '|')
                }
                else {
                    vt = o2j(v)
                }
            }
            else {
                vt = cstr(v)
            }
            vt = vt.toLowerCase()
            // console.log('vt', vt)

            //kws
            let kws = sep(vo.queryTrans.toLowerCase(), ' ')
            // console.log('kws', kws)

            //b
            let b = false
            each(kws, (kw) => {
                if (vt.indexOf(kw) >= 0) {
                    b = true
                    return false //跳出
                }
            })
            // console.log('b', b)

            return b

        },

        modifyItems: function(value) {
            // console.log('modifyItems', value)

            let vo = this

            //kpCheck
            let kLast = null
            let kpCheck = {}
            each(vo.items, (v, k) => {
                let vk = vo.getKeyFromItemAndInd(v, k) //k為真實ind
                let check = vo.judgeItem(v, value)
                kpCheck[vk] = check
                if (check) {
                    kLast = vk
                }
            })
            // console.log('kpCheck', kpCheck)
            // console.log('kLast', kLast)

            //單選時僅允許最後核選為有效值
            if (!vo.multiCheck && kLast !== null) {
                each(kpCheck, (v, k) => {
                    kpCheck[k] = false
                })
                kpCheck[kLast] = true
                // console.log('kpCheck(single)', kpCheck)
            }

            //itemsTrans
            let itemsTrans = map(vo.items, (v, k) => {
                let text = v
                if (vo.isObjValue) {
                    text = get(v, vo.keyText, '')
                }
                let icon = ''
                if (vo.isObjValue) {
                    icon = get(v, vo.keyIcon, '')
                }
                let editable = true
                if (vo.isObjValue) {
                    editable = get(v, 'editable', true)
                }
                let item = {
                    [vo.keyText]: text,
                    [vo.keyIcon]: icon,
                    editable,
                    data: v,
                }
                return item
            })
            // console.log('itemsTrans', itemsTrans)

            //save
            vo.itemsTrans = itemsTrans
            vo.kpCheck = kpCheck

        },

        clickItem: function(item, kitem) {
            // console.log('clickItem', item, kitem)

            let vo = this

            //check
            if (!vo.getEditable(item)) {
                return
            }

            //cloneDeep
            let kpCheck = cloneDeep(vo.kpCheck)
            // console.log('kpCheck(cloneDeep)', kpCheck)

            //vk
            let vk = vo.getKeyFromItem(item) //kitem可能受list query影響, 為非真實ind
            // console.log('vk', vk)

            //modify
            if (vo.multiCheck) {
                //多選
                kpCheck[vk] = !kpCheck[vk]
            }
            else {
                //單選
                if (!kpCheck[kitem]) {
                    each(kpCheck, (v, k) => {
                        kpCheck[k] = false
                    })
                    kpCheck[vk] = true
                }
                // else { //不提供單選時點擊已勾選能取消機制
                //     kpCheck[kitem] = !kpCheck[kitem]
                // }
            }
            // console.log('kpCheck', kpCheck)

            //value
            let value = []
            each(vo.items, (v, k) => {

                //vk
                let vk = vo.getKeyFromItemAndInd(v, k)

                //check
                let check = kpCheck[vk]

                //check
                if (!check) {
                    return true //跳出換下一個
                }

                //vt
                let vt = vo.getItem(v)

                //push
                value.push(vt)

            })
            // console.log('value', value)
            if (!vo.multiCheck) {
                value = get(value, 0, null)
                // console.log('value(single)', value)
            }
            // console.log('value', value)

            //save
            vo.kpCheck = kpCheck
            // console.log('kpCheck', kpCheck)

            //emit
            vo.$emit('click', {
                check: kpCheck[vk],
                item: cloneDeep(vo.items[kitem]),
                kitem,
            })

            //emit
            vo.$emit('input', value)

        },

        modifyQuery: function() {
            // console.log('methods modifyQuery')

            let vo = this

            //modifyItems
            vo.modifyItems(vo.value)

            //emit
            vo.$emit('update:query', vo.queryTrans)

        },

        modifyQueryFocused: function(queryFocused) {
            //console.log('methods modifyQueryFocused', queryFocused)

            let vo = this

            // //$nextTick
            // vo.$nextTick(() => {

            // })

            //emit
            vo.$emit('update:queryFocused', queryFocused)

        },

        getCheck: function(item) {
            // console.log('methods getCheck', item)

            let vo = this

            //vk
            let vk = vo.getKeyFromItem(item)

            //b
            let b = vo.kpCheck[vk]

            return b
        },

        getEditable: function(item) {
            // console.log('methods getEditable', item)
            // let vo = this
            let b = get(item, 'editable', true)
            return b
        },

    }
}
</script>

<style scoped>
</style>
