<!-- 102109 新增lc-swipe-cell滑动菜单组件 -->
<template>
    <div class="bui-list-swipe-menu">
        <div class="bui-cell-swipe-menu" :style="{'height': height}">
            <div class="bui-list-swipe" ref='swipeBox'>
                <slot name="action">
                    <div class="bui-list-swipe-btn" :style="{'background-color': item.bgcolor}" @click="_actionClick(index)" :key="index" v-for="(item, index) in items">
                        <text class="bui-list-swipe-btn-text">{{item.title}}</text>
                    </div>
                </slot>
            </div>
            <div @click="_click" @swipe="_swipe($event)" :style="cellMainStyle" class="bui-list-main bui-list-swipe-main" ref="swipedom">
                <div class="bui-list-main-left">
                    <slot name="content">
                        <text class="bui-list-title" v-if="title">{{title}}</text>
                    </slot>
                    <!-- 141671 【TS:201905220659-经纪业委会（云纪）-盛利强-【需求类型】	需求【需求描述】	2.lc-s】 -->
                    <image :src="arrowIcon" class="cell-arrow-icon" v-if="hasArrow"></image>
                </div>
            </div>

        </div>
    </div>
</template>
<style scoped>
  .cell-arrow-icon {
    width: 32px;
    height: 32px;
    margin-right: 10px;
  }
.bui-cell-swipe-menu{
  flex-direction: row;
  border-bottom-width: 1px;
  border-bottom-color: #999;
  border-bottom-style: solid;
}

.bui-list-main {
  padding-left: 20px;
  flex: 1;
  justify-content: center;
  background-color: #ffffff;
}

.bui-list-title {
  font-size: 34px;
  color: #000;
  text-overflow: ellipsis;
  lines: 1;
}
.bui-list-swipe{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  flex-direction: row;
  justify-content: flex-end;
}
.bui-list-swipe-btn{
  flex-direction: row;
  width: 120px;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #c6c7c8;
}
.bui-list-swipe-btn-text{
  font-size: 30px;
  color: #fff;
}
.bui-list-swipe-main{
  flex-direction: row;
  justify-content: flex-start
}
.bui-list-main-left{
  justify-content: space-between;
  flex: 1;
  flex-direction: row;
  align-items: center;
}
</style>
<script>
    const animation = weex.requireModule('animation');
    let defaultAction=[
        {
            'title': '取消',
            'bgcolor' : '#c6c7c8'
        },
        {
            'title': '删除',
            'bgcolor' : '#fa3300'
        }
    ];
    module.exports = {
	    data: function () {
            return {
                transformStyle: {}
            }
        },
        props: {
            items: {
                type: Array,
                default(){
                    return defaultAction;
                }
            },
            height: {
                type: String,
                default: '100px'
            },
            title: {
                type: String
            },
            // 141673 【TS:201905220660-经纪业委会（云纪）-盛利强-【需求类型】	需求【需求描述】	3.lc-s】
            index: {
                type: Number
            },
            // 141671 【TS:201905220659-经纪业委会（云纪）-盛利强-【需求类型】	需求【需求描述】	2.lc-s】
            hasArrow: {
                type: Boolean,
                default: false
            },
            arrowIcon: {
                type: String,
                default: 'data:image/png;base64,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'
            },
        },
        computed: {
            cellMainStyle() {
                return { ...this.transformStyle };
            }
        },
        methods: {
            //操作点击事件
            // 141673 【TS:201905220660-经纪业委会（云纪）-盛利强-【需求类型】	需求【需求描述】	3.lc-s】
            _actionClick (index){
                this.close(()=>{
                    this.$emit('actionClick', index, this.index);
                });
            },
            _swipe(e){
                switch (e.direction) {
                    case 'left':
                        this.open(()=>{
                            this.$emit('swipeleft');
                        });
                        break;
                    case 'right':
                        this.close(()=>{
                            this.$emit('swiperight');
                        });
                        break;
                }
            },
            _click(){
                this.$emit('wrapClick');
                this.close();
            },
            close(fn){
                let translate = 'translate(0px, 0px)';
                let el = this.$refs.swipedom;
                this._animationFn(el, 1, translate, 'ease-in',()=> {
                    fn && fn();
                });
            },
            open(fn){
                let swipeDom = this.$refs.swipeBox;
                let lenDom;
                if(swipeDom.hasOwnProperty('pureChildren')) lenDom = swipeDom.pureChildren;
                else lenDom = this.$refs.swipeBox.children;
                let len = (lenDom&&lenDom.length)||0;
                let translate = 'translate(-'+120*len+'px, 0px)';
                let el = this.$refs.swipedom;
                this._animationFn(el, 1, translate, 'ease-in',()=>{
                    fn && fn();
                });
            },
            _animationFn (el, opacity, translate, timing, fn){
                animation.transition(el, {
                    styles: {
                        opacity: opacity,
                        transform: translate,
                        transformOrigin: 'center center'
                    },
                    duration: 200,
                    timingFunction: timing,
                    delay: 0
                }, () => {
                    this.transformStyle = {
                        opacity: opacity,
                        transform: translate,
                        transformOrigin: 'center center'
                    };
                    fn && fn();
                });
            }
        }
    }
</script>