<template>
    <div class="wrapper" >
        <we-dropdown class="dropdown" status-id="{{status}}">
            <div style="height: {{screenHeight}}">
                <list class="list"  if={{list.length}}>
                    <cell repeat="{{list}}" class="cell"  append="tree" vid="{{vid}}" index="{{vid}}" >
                        <text class="title">{{title}}</text>
                        <div class="info">
                            <text class="txt status status-{{questionStatus}}">{{questionStatusValue}}</text>
                            <text class="txt"> , id: {{vid}} , </text>
                            <text class="txt"> time: {{addTime}}</text>
                        </div>
                    </cell>
                </list>
            </div>
        </we-dropdown>
    </div>

</template>

<style>
    .dropdown{
        justify-content: center;
        align-content: stretch;
        position: relative;
        z-index: 100;
    }
    .wrapper{
        justify-content:flex-start;
        flex-direction: column;
        position: relative;
    }
    .list {
        flex: 1;
        width: 750;
    }
    .refresh-view {
        height: 120;
        width: 750;
        margin-top: 10;
        margin-bottom: 10;
        align-items: center;
        justify-content: center;
     }
     .refresh-arrow {
        font-size: 30px;
        color: #45b5f0;
     }
     .indicator {
        height: 40px;
        width: 40px;
        color:#45b5f0;
     }
    .cell {
        width: 750;
        padding-top: 15;
        padding-bottom: 5;
        padding-left:20;
        padding-right:20;
        border-bottom-width: 1;
        border-style: solid;
        border-color: #999;
    }
    .title{
        font-size:32;
        padding-top:5 ;
        padding-bottom: 5;
        color:#333;
    }
    .info {
        flex-direction: row;
        justify-content: flex-start;
        align-items:stretch;
    }
    .txt {
        font-size:28;
         padding-top:5;
         padding-bottom:5;
         color: #999;
     }
    .status {   }

    .status-1 { color: #090; }
    .status-2 { color: #f00; }

</style>

<script>
    require('./we-dropdown.we');

    var initData = '[{\"addTime\":\"2016-07-14\",\"questionStatus\":\"2\",\"questionStatusValue\":\"Closed\",\"title\":\"This is a demo\",\"vid\":\"AW5PMSC\"},{\"addTime\":\"2016-07-14\",\"questionStatus\":\"1\",\"questionStatusValue\":\"Waiting\",\"title\":\"This is a demo\",\"vid\":\"AW5PMSM\"},{\"addTime\":\"2016-07-14\",\"questionStatus\":\"2\",\"questionStatusValue\":\"Confirmed\",\"title\":\"This is a demo\",\"vid\":\"AW5PMSA\"}]';

    module.exports = {
        data: {
            screenHeight: 0,
            // biz
            status: '1',
            list: []
        },
        ready: function () {
            this.screenHeight = this.$getConfig().env.deviceHeight ;
            this.$on('statuschange', function (e) {
                var detail = e.detail;
                this.toast({
                    message: JSON.stringify(detail)
                });
                this.status = detail.id;
                this.filter();
            }.bind(this));
            this.filter();
        },

        methods: {
            toast: function (params) {
                var modal = require('@weex-module/modal');
                modal.toast(params);
            },

            filter: function () {
                var status = this.status;
                this.list = [];
                var allList = JSON.parse(initData);
                if(status == '0') {
                    this.list = allList;
                }else {
                    this.list = allList.filter(function(item){
                        return item.questionStatus == status;
                    });
                }
            }
        }
    }
</script>