<template>
    <div class="y_cellSelect y_cellGroup_item">
        <div class="y_cellSelect_wrap" @click="fnClick">
            <y-cell :custom-class="classStr"
                    type="bodyMax"
                    :title="title"
                    isLink
                    :is-require="isRequire"
                    :dis-padding-horizontal="disPaddingHorizontal">
                <template slot="title" v-if="isSlotTitle && !title">
                    <slot name="title"></slot>
                </template>
                <div>
                    <div class="y_cellSelect_box" v-if="value">{{ value }}</div>
                    <div class="y_cellSelect_box" v-else-if="defaultValue">{{ defaultValue }}</div>
                    <div class="y_cellSelect_box y_cellSelect_box_placeholder" v-else-if="placeholder">
                        {{ placeholder }}
                    </div>
                </div>
                <template slot="rightIcon" v-if="isSlotRightIcon">
                    <slot name="rightIcon"></slot>
                </template>
            </y-cell>
        </div>

        <y-popup :show.sync="mobileListShow" :bottom="popBottom" :title="popupTitle">
            <div class="mobileListBox">
                <div style="display: none;">
                    兼容微信小程序错误绑定了第一个组件的时间
                    <y-button topic="gradient" size="large" width="100%" :text="langPackage.yCellSelect.enter"
                              @click=""></y-button>
                </div>
                <y-datetime-picker v-if="isDate && mobileListShowSync"
                                   :type="type"
                                   :date="selectKey"
                                   @update:date="val=>selectKey=val"
                                   v-model="selectKey"
                                   :dateFormat="dateFormat"
                                   :label-day="dateOption.labelDay"
                                   :label-month="dateOption.labelMonth"
                                   :label-year="dateOption.labelYear"
                                   :max-year="dateOption.maxYear"
                                   :hour-pools="dateOption.hourPools"
                                   :max-date="dateOption.maxDate"
                                   :min-date="dateOption.minDate"
                                   :min-year="dateOption.minYear"></y-datetime-picker>
                <y-picker v-else-if="mobileListShowSync"
                          :columns="list"
                          ref="picker"
                          :value-key="selectKey"></y-picker>
                <div class="y_cellSelect_areaCodeBtn">
                    <y-button topic="gradient"
                              size="large"
                              :radius="buttonRadius"
                              width="100%"
                              :text="langPackage.yCellSelect.enter"
                              @click="fnChooseCode"></y-button>
                </div>
            </div>
        </y-popup>
    </div>

</template>

<script>
import yCell from "./yCell";
import yPopup from "./yPopup";
import yButton from "./yButton";
import yPicker from "./yPicker";
import yDatetimePicker from "./yDatetimePicker";

import {getTime, isObject} from "../utils/utils";

export default {
    name: "yCellSelect",
    components: {
        yCell,
        yPopup,
        yButton,
        yPicker,
        yDatetimePicker,
    },
    computed: {
        classStr() {
            return (this.customClass ? " " + this.customClass : "");
        },
        isDate() {
            return this.type == "date" || this.type == 'dateHour';
        },
        isSlotRightIcon() {
            return !!(this.$slots && this.$slots.rightIcon);
        },
        isSlotTitle() {
            return !!(this.$slots && this.$slots.title);
        },
        popupTitle() {
            return this.title || this.popTitle;
        },
        value() {
            const self = this;
            let ret = "";
            if (self.isDate) {
                if (self.key !== "") {
                    ret = self.key;
                }
            } else if (self.list && self.list.forEach) {
                console.log("这是value")
                //多选
                if (isObject(self.key)) {
                    let retArr = [];
                    //[2022-06-09]修复如果为多列的时候，要使用value作为显示的值
                    if(self.list.forEach && self.list[0] && self.list[0].values && self.list[0].values.length>0){
                        let keyArr = [];
                        Object.keys(self.key).forEach(item => {
                            if (self.key[item]) {
                                keyArr.push(self.key[item])
                            }
                            //多行没有的话，等于空值
                            else{
                                keyArr.push("");
                            }
                        })
                        //循环结果
                        let currentItem = self.list[0].values;
                        keyArr.forEach(key=>{
                            currentItem = currentItem && currentItem.find ? currentItem.find(e=>e.key == key) : false;
                            if(currentItem){
                                retArr.push(currentItem.value);
                                currentItem = currentItem.children;
                            }
                            else if(self.disShowValueWithKey){
                                retArr.push("");
                            }
                            else{
                                retArr.push(key);
                            }
                        })
                    }
                    else{
                        Object.keys(self.key).forEach(item => {
                            if (self.key[item]) {
                                retArr.push(self.key[item])
                            }
                        })
                    }
                    ret = retArr.join("-");
                } else {
                    self.list.forEach(item => {
                        if (item.key == self.key) {
                            ret = item.value;
                            return false;
                        } else if (item == self.key) {
                            ret = item;
                            return false;
                        }
                    });
                }

            }
            return ret || "";
        }
    },
    data() {
        return {
            mobileListShow: false,
            mobileListShowSync: false,
            selectKey: this.outselectKey,
            key: this.outselectKey,
            pickerValue:"",
        }
    },
    methods: {
        fnSelectKeyChoose(val) {
            this.selectKey = val
        },
        fnClick() {
            if(isObject(this.key)){
                this.selectKey = Object.keys(this.key).length>0 ? this.key : (this.tipValue || []);
            }
            else{
                this.selectKey = (this.key && this.key.length) ? this.key : (this.tipValue || []);
            }
            
            this.mobileListShow = true;
        },
        fnChooseCode() {
            //如果是picker则稳picker取值
            //取代双向绑定
            if(!this.isDate && this.mobileListShowSync && this.$refs["picker"]?.fnChange){
                this.key = this.selectKey = this.$refs["picker"].fnChange();
                
            }
            
            this.key = this.selectKey;
            this.mobileListShow = false;
        }
    },
    model: {
        prop: "outselectKey",
        event: "update:outselectKey"
    },
    props: {
        buttonRadius: "",
        customClass: String,
        dateOption: {
            default: () => {
                return {}
            },
            type: Object,
        },
        dateFormat: {
            default: "YYYY-mm-dd",
            type: String,
        },
        defaultValue: "",
        disShowValueWithKey:Boolean,
        disPaddingHorizontal: Boolean,
        isRequire: Boolean,
        langPackage: {
            type: Object,
            default() {
                return {
                    yCellSelect: {
                        enter: "确定"
                    }
                }
            }
        },
        list: Array,
        outselectKey: "",
        placeholder: {
            type: String
        },
        popBottom: "",
        popTitle: String,
        title: "",
        type: {
            default: "normal"
        },
        tipValue: ""
    },
    watch: {
        mobileListShow() {
            const self = this;
            if (this.mobileListShow) {
                this.$emit('popShow')
            } else {
                this.$emit('popHide')
            }

            //兼容抖音小程序等一些端slot无法清除的BUG
            if (this.mobileListShow) {
                self.mobileListShowSync = self.mobileListShow;
            } else {
                setTimeout(time => {
                    self.mobileListShowSync = self.mobileListShow;
                }, 500)
            }
        },
        selectKey() {
            this.$emit('selectChange', this.selectKey);
        },
        outselectKey:{
            deep:1,
            handler(){
                this.key = this.outselectKey;
                this.selectKey = this.key;
            }
        },
        key() {
            this.$emit("update:outselectKey", this.key)
            this.$emit("outselectKey", this.key)
        }
    },
    mounted() {
        if (!this.selectKey.length && this.tipValue) {
            this.selectKey = this.tipValue
        }
    }
}
</script>

<style lang="scss">
@import "../css/var.scss";

.y_cellSelect_box {
    color: $font_color_title;
}

.y_cellSelect_box_placeholder {
    color: $font_color_contentSecondeary;
}

.y_cellSelect_areaCodeBtn {
    padding: 15px $popup_padding_horizantal;
}

.y_cellSelect_wrap {
    width: 100%;
}
</style>
