<template>
    <el-drawer append-to-body title="点评记录" :visible.sync="show" size="400px" direction="ltr"
        style="backdrop-filter: blur(4px);">
        <u-swipe-action>
            <u-swipe-action-item v-for="(item,index) in list" :key="item.id" class="ui-hover ui-flex-1"
                :options="options1" @click="itemClick(item,index)">
                <u-cell :title="item.student.student_name">
                    <view slot="icon" class="ui-mr10">
                        <image :src="item.stuSchool.student_photo"
                            style="width: 40px;height: 40px;border-radius: 20px;">
                        </image>
                    </view>
                    <!-- <view>{{}}</view> -->

                    <text slot="label" class="txt-muted">{{item.created_at}} </text>
                    <el-tag slot="value" plain :type="item.studentTab.type_text == '好评' ? '' : 'danger'">{{item.studentTab.tab_name}} {{item.score}}</el-tag>
                    <!-- <u-badge slot="value" value="+1" plain size="mini" type="success"></u-badge> -->
                    <!-- <view class="" slot="right-icon">
                        <i class="el-icon-delete ui-ml30 " style="font-size: 20px;" @click="itemClick(item,index)"></i>
                    </view> -->
                </u-cell>
            </u-swipe-action-item>
        </u-swipe-action>
        <view @click="getList" class="text-center ui-m ui-p" style="width: 100%;cursor: pointer;">
            {{ showTitle }}
        </view>

        <uni-popup ref="alertDialog" type="dialog">
            <uni-popup-dialog type="center" cancelText="关闭" confirmText="确认" title="确认撤销？" content="您确认撤销该条点评记录？"
                @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
        </uni-popup>
    </el-drawer>
</template>

<script>
    export default {
        props: {
            chooseClassId: {
                type: Number | String,
                default: ""
            },
        },
        data() {
            return {
                show: false,

                current_page: 1,
                list: [],
                options1: [{
                    text: '撤销',
                    style: {
                        backgroundColor: '#FF0C0C',
                    }
                }],
                last_page: 10,

                msgType: 'center',
                itemInfo: {},
                index: 0
            }
        },
        computed: {
            showTitle() {
                if (this.current_page > this.last_page) {
                    return '没有更多数据了。。。'
                } else {
                    return '加载更多'
                }
            },
        },
        mounted() {

        },
        methods: {
            open() {
                this.show = true;
                
                this.list = []
                this.current_page = 1
                this.getList()
            },
            getList() {
                if (this.showTitle == "没有更多数据了。。。") {
                    return
                }
                this.$api.sendRequest({
                    url: `/mobile/studentTab/getstudentTabLog`,
                    method: "post",
                    data: {
                        page: this.current_page,
                        class_id: this.chooseClassId
                    },
                    success: res => {
                        let arr = [...this.list, ...res.data.data]
                        this.current_page++
                        this.last_page = res.data.last_page
                        this.list = [...this.list, ...res.data.data]

                    }
                })
            },
            itemClick(item, index) {
                this.index = index
                this.itemInfo = item
                this.$refs.alertDialog.open('center')
            },
            dialogConfirm() {
                this.$api.sendRequest({
                    url: `/mobile/studentTab/delstudentTabLog`,
                    method: "post",
                    data: {
                        tab_log_id: this.itemInfo.id
                    },
                    success: res => {
                        console.log("aaaaaaaaaaa");
                        this.show = false
                        this.$emit('delSuccess')
                    },
                    complete: res => {
                        console.log(res, "resss");
                    }
                })

            },
            dialogClose() {

            }

        },

    }
</script>

<style>
</style>