<template>
<van-dropdown-menu active-color="#323233" :class="showTitle === title?'':'dropdown-menu-ative'" class="dropdown-menu">
  <van-dropdown-item :title="showTitle" ref="item" >
      <div class="dropdown-box">
      <div v-for="(item,index) in items" :key="index" class="dropdown-item" @click="itemClick(item)">
          <div v-show="selectItem == item" class="dropdown-item-icon"><van-icon name="success" /></div>
          <div  class="dropdown-item-text">{{item.label}}</div>
      </div>
      </div>
    <van-button  class="dropdown-btn" @click="onReset" >重置</van-button>
    <van-button  class="dropdown-btn" type="info" @click="onConfirm">确定</van-button>
  </van-dropdown-item>
</van-dropdown-menu>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Provide,
  Emit,
  Watch
} from "vue-property-decorator";

@Component({
  components: {}
})
export default class AppVanSelect extends Vue {

   /**
     * 数据集
     *
     * @type {any}
     * @memberof AppVanMenu
     */
    @Prop() public items?: any;

    /**
     * 名称
     *
     * @type {any}
     * @memberof AppVanMenu
     */
    @Prop() public title?: any;

    /**
     * 展示信息
     *
     * @type {any}
     * @memberof AppVanMenu
     */
    public showTitle :any = "";

    /**
     * 重置按钮
     *
     * @type {string}
     * @memberof AppVanMenu
     */
    public onReset(){
        this.selectItem = {};
        this.showTitle = this.title;
        this.closeDropdown();
    }

    /**
     * 当前选中数据
     *
     * @type {any}
     * @memberof AppVanMenu
     */
    public selectItem: any ={};

    /**
     * 数据点击事件
     *
     * @type {any}
     * @memberof AppVanMenu
     */
    public itemClick(item:any){
        this.selectItem = item;
    }

    /**
     * 生命周期
     *
     * @memberof AppVanMenu
     */
    created(){
        this.showTitle =  this.title ;
    }

    /**
     * 收起数据
     *
     * @type {any}
     * @memberof AppVanMenu
     */
    public closeDropdown() {
        let dropdown: any =this.$refs.item;
        if(dropdown.toggle &&  dropdown.toggle instanceof Function){
            dropdown.toggle();
        }
         
    }
    /**
     * 提交事件
     *
     * @type {any}
     * @memberof AppVanMenu
     */
    public onConfirm() {
        if(this.selectItem.label){
         this.showTitle = this.selectItem.label;
        }
         this.closeDropdown();
    }

}
</script>
<style lang="less">
.dropdown-box {
    display: flex;
    flex-wrap: wrap;
    padding: 15px 0;
    background: #f4f4f4;
    .dropdown-item {
    width: 50%;
    display: flex;
    padding: 8px 12px;
    .dropdown-item-icon {
    color: #e2676d;
    padding: 0 5px;
    position: absolute;
}
.dropdown-item-text {
    margin-left: 35px;
}
}
}
.dropdown-btn{
    width: 50%;
}
.dropdown-menu{
    min-width: 100px;
    max-width: 100px;
    height: 30px;
    border: solid #ccc 1px;
    border-radius: 30px;
    margin: 5px;
    background: #f2f2f2;
    .van-ellipsis {
    padding-right: 15px;
}
.van-dropdown-menu__title::after {
    right: 6px;
}
}
.van-dropdown-item__content {
    border-radius: 0 0 15px 15px;
}
.dropdown-menu-ative{
    border-color: #ee0a24;
    background: #ffe9ec;
    .van-ellipsis{
    color: #ee0a24;
}
.van-dropdown-menu__title::after {

    color: #ee0a24;
}
}
</style>