<template>
    <view class="container">
        <uni-search-bar class="uni-mt-10" radius="5" placeholder="点击快速搜索标题" clearButton="auto" cancelButton="none"
            @clear="clearSearch" @confirm="search" />

        <view class="uni-padding-wrap uni-common-mt">
            <uni-segmented-control :current="current" :values="catsArr" style-type="button" @clickItem="changeCat" />
        </view>

        <view class="content">
            <view class="nodata" v-if="!totalCount">
                没有相关的内容
            </view>

            <view v-else :id="'newsCar-'+detail.id" v-for="(detail,index) in news" :data-id="detail.id"
                :data-cid="detail.cid" :key="detail.id" :index="index">

                <uni-card padding="10px 0">
                    <template v-if="detail.thumb" v-slot:cover :isFull="true">
                        <view class="custom-cover">
                            <image class="cover-image" mode="aspectFill" :src="detail.thumb">
                            </image>
                            <view class="cover-content">
                                <text class="uni-subtitle uni-white">{{detail.title}}</text>
                            </view>
                        </view>
                    </template>
                    <template v-else v-slot:title>
                        <uni-list>
                            <uni-list-item :show-switch="false" :title="detail.title" />
                        </uni-list>
                    </template>
                    <view class="uni-body">
                        <view>
                            <text>{{detail.des}}</text>
                        </view>
                    </view>
                    <view slot="actions" class="card-actions">

                        <view class="card-actions-item" @click="showCheck(detail.id)">
                            <uni-icons type="heart" size="18" color="#999"></uni-icons>
                            <text class="card-actions-item-text">{{detail.liked}}</text>
                        </view>

                        <view class="card-actions-item" @click="actionsRemark(detail.id)">
                            <uni-icons type="fire" size="18" color="#999"></uni-icons>
                            <text class="card-actions-item-text">{{detail.reading}}</text>
                        </view>

                        <view class="card-actions-item" @click="actionsDetail(detail.id)">
                            <uni-icons type="link" size="18" color="#999"></uni-icons>
                            <text class="card-actions-item-text">详情</text>
                        </view>
                    </view>
                </uni-card>
            </view>
        </view>

        <view class="pagination">
            <uni-pagination :show-icon="false" :total="totalCount" :pageSize='psize' v-model='page' title="分页栏"
                @change="newPage" />
        </view>

        <uni-fab ref="fab" :pattern="fabs.pattern" :content="fabs.content" :horizontal="fabs.horizontal"
            :vertical="fabs.vertical" :direction="fabs.direction" @trigger="fabTrigger" @fabClick="fabClick" />
    </view>
</template>

<script>
    import utils from "@/utils/common.js";
    import config from "@/config/ctms.config.js";
    import ctms from '@/apis/ctms/index.js';

    export default {
        data() {
            return {
                userinfo: {},
                cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
                news: {},
                cats: {},
                catsArr: ['全部'],
                catIds: {
                    '0': {
                        id: 0
                    }
                }, //与catsArr键对应的,单条完整cat的数据集
                catid: 0, //当前分类ID
                current: 0, //分段器对应当前分类

                stitle: '',
                totalCount: 0, //一共多少条数据
                psize: 10,
                page: 1,

                //悬浮按钮
                fabs: {
                    horizontal: 'left',
                    vertical: 'bottom',
                    direction: 'horizontal', //horizontal水平展开；vertical垂直展开
                    pattern: {
                        color: '#7A7E83',
                        backgroundColor: '#fff',
                        selectedColor: '#007AFF',
                        buttonColor: '#fff',
                        iconColor: '#aaa'
                    },
                    content: [{
                            iconPath: '/static/fab/home.png',
                            selectedIconPath: '/static/fab/homeactive.png',
                            text: '首页',
                            active: false,
                            diyfn: 'home'
                        },
                        {
                            iconPath: '/static/fab/guanzhu.png',
                            selectedIconPath: '/static/fab/guanzhuactive.png',
                            text: '关注',
                            active: false,
                            diyfn: 'news'
                        },
                        {
                            iconPath: '/static/fab/me.png',
                            selectedIconPath: '/static/fab/meactive.png',
                            text: '用户',
                            active: false,
                            diyfn: 'user'
                        },

                        {
                            iconPath: '/static/fab/news.png',
                            selectedIconPath: '/static/fab/newsactive.png',
                            text: '公告',
                            active: false,
                            diyfn: 'notice'
                        }
                    ]
                }
            }
        },
        methods: {
            //搜索框响应
            search(res) {
                this.stitle = res.value;
                this.getNews();
            },
            clearSearch() {
                this.stitle = '';
                this.getNews();
            },
            //切换分类
            changeCat(e) {
                var i = e.currentIndex;
                this.catid = this.catIds[i].id;
                this.getNews();
            },
            actionsDetail(e) {
                uni.navigateTo({
                    url: '../detail/detail?id=' + e
                })
            },
            //分页器动作
            newPage(e) {
                var page = e.current;
                this.page = page;
                var res = ctms.news.list(this.page);
                if (res) {
                    this.news = res.news;
                } else {
                    this.getNews();
                }
            },
            getCats: function() {
                var _that = this;
                ctms.news.cats().then(
                    (res) => {
                        _that.cats = res;
                        for (var i in res) {
                            var r = res[i];
                            if (r.is_show) {
                                _that.catsArr.push(r.title);
                                _that.catIds[Number(i) + 1] = r;
                            }
                        }
                    }
                );
            },
            //刷新列表
            getNews() {
                var _that = this;
                var searchData = {
                    title: this.stitle,
                    cid: this.catid
                };

                ctms.news.search(searchData, this.page, this.psize).then(
                    function(res) {
                        if (res) {
                            _that.news = res.news;
                            _that.totalCount = res.total;
                        } else {
                            _that.news = {}
                            _that.totalCount = 0;
                        }
                    }
                );
            },

            //浮窗按钮相关操作
            fabClick(e) {
                // utils.debug('点击了悬浮按钮')
            },
            fabTrigger(e) {
                var eindex = e.index;
                this.fabs.content[e.index].active = !e.item.active;

                if (!e.item.diyfn) {
                    //未设置这个difyfn字段的，无操作
                    return false;
                }
                var diyfn = e.item.diyfn,
                    dir = config.pageDir,
                    page;
                switch (diyfn) {
                    case 'home':
                        page = 'tabbar/index/index';
                        return uni.reLaunch({
                            url: dir + page
                        })
                        break;
                    case 'news':
                        page = 'news/list/list';
                        break;
                    case 'user':
                        page = 'me/index';
                        break;
                    case 'notice':
                        page = 'tabbar/notice/index';
                        return uni.reLaunch({
                            url: dir + page
                        })
                        break;
                }
                return uni.navigateTo({
                    url: dir + page
                })
            }
        },

        onLoad() {
            // utils.debug('运单列表页启动')
            var res = ctms.news.list(this.page);
            if (res) {
                this.news = res.news;
                this.totalCount = res.total;
            } else {
                this.getNews();
            }
            this.getCats();
        },
        onShow() {

        },

        onPullDownRefresh() {
            this.page = 1;
            this.getNews();
            setTimeout(() => {
                uni.stopPullDownRefresh();
            }, 3000);
        }
    }
</script>

<style lang="scss">
    @import url("list.css");

    .content {
        text-align: center;
    }

    .nodata {
        padding: 2rem 1rem;
    }

    .uni-body,
    .uni-list-item {
        text-align: left;
    }

    .custom-cover {
        flex: 1;
        flex-direction: row;
        position: relative;
    }

    .cover-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        background-color: rgba($color: #000000, $alpha: 0.4);
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-left: 15px;
        font-size: 14px;
        color: #fff;
    }
</style>