<template>
    <div class="demo-wrap min-flex-right">
        <div class="flex-between">
            <h2>总利润 - 年排行</h2>
            <CustomDropdown :placeholder="text" width="280px">
                <DateSelect slot="normal" :view="view" v-model="selectedDate" @update-count="handleUpdateView" @change="handleDateChange" />
            </CustomDropdown>
        </div>
        <div class=" flex-common" id="">
            <el-form>
                <el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange"
                    @cell-mouse-enter="handleRowHover">
                    <el-table-column prop="sort" label="排序" width="100">
                    </el-table-column>
                    <!-- 其他列 -->
                    <el-table-column prop="value_1" label="年份" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="value_2" label="总利润/元" sortable="custom">
                    </el-table-column>

                    <el-table-column label="代理商排行">
                        <template v-slot="{ row, $index }">
                            <el-popover v-model="row.id_popover" placement="top" trigger="manual"
                                :ref="`popover-${$index}`" @show="popshow">
                                <div class="pop-wrap">
                                    <div class="flex-between flex pop-top">
                                        <h3>{{ row.id }} <span @click="goLookMoreData">查看更多</span></h3>
                                        <span class="flex point" @click="closePop(row,'id')">关闭 <img src="@/assets/register/close.svg" alt=""></span>
                                    </div>
                                    <el-table :data="tableData1" style="width: 100%" @sort-change="handleSortChange"
                                        @cell-mouse-enter="handleRowHover">
                                        <el-table-column prop="value_1" width="208" label="日期/月"></el-table-column>
                                        <el-table-column prop="value_2" width="348" label="毛利润/元"
                                            sortable="custom"></el-table-column>
                                    </el-table>
                                </div>
                                <!-- 触发弹框的按钮 -->
                                <span v-if="profit_top_list[row.id]['name']" slot="reference"
                                    @click="handleClick(row, $index, 'id')">
                                    No.1 {{ profit_top_list[row.id]['name'] }} <img v-if="show_detail_index == row.sort"
                                        class="detail_icon" src="@/assets/super/list-detail.svg" alt="">
                                </span>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
                    :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
                    :total="tableData.length">
                </el-pagination>
            </el-form>
        </div>
    </div>
</template>
<script>
// import GuipForm from '@/components/GuipForm.vue'
import DateSelect from '@/components/super/DateSelect.vue';
import CustomDropdown from '@/components/CustomDropdown.vue';

export default {
    // 站点设置
    name: '',
    props: [''],
    components: {
        DateSelect,
        CustomDropdown
    },
    data() {
        return {
            viewDesc:{
                'month':'月份',
                'monthTwo':'月份',
                'year':'年份',
            },
            view:'month',
            currentPage: 1,    //当前页
            pageSize: 20,   //每页的容量
            total: 0,   //列表总数
            text:'',//下拉框显示具体文案
            selectedDate:new Date(),//默认当天日期
            options_payword: [
                {
                    label: '按篇', value: '0'
                },
                {
                    label: '按字符', value: '1'
                },
            ],
            options: [
                { label: '选项1', value: '1' },
                { label: '选项2', value: '2' },
                { label: '选项3', value: '3' },
                // 更多选项...
            ],
            filteredOptions: this.options,
            tableData: [
            ],
            tableData1: [],
            profit_top_list: {
            },
            show_detail_index: 0,
            form: {
                payword: '0',
            }
        }
    },
    mounted() {
        this.text = this.getNowDate()//初始赋值
        this.getRankingData()
    },
    computed: {
    },
    methods: {
        handleUpdateView(newView) {
            this.view = newView;
        },
        getNowDate(){
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，补零
            const currentYearMonth = `(${this.viewDesc[this.view]})${year}年${month}月`;
            return `${currentYearMonth}`
        },
        getDate(dateStr){
            const date = new Date(dateStr);
            const year = date.getFullYear(); // 2025
            const month = date.getMonth() + 1; // 3 (表示3月)
            if(this.view == 'year'){
                return `(${this.viewDesc[this.view]})${year}年`
            }else{
                return `(${this.viewDesc[this.view]})${year}年${month}月`
            }
        },
        handleDateChange(date) {
            this.text = this.getDate(date)
            this.selectedDate = date;
            localStorage.setItem('date',JSON.stringify(date))
            // 更新数据
            // this.getRankingData()
            console.log('日期已更改:', date);
        },
        goLookMoreData() {
            this.$router.push('/')
        },
        closePop(row,type){
            row[type + '_popover'] = false; // 关闭弹框

        },
        handleClick(row, index, type) {
            // 关闭其他行的弹框
            this.tableData.forEach((item, i) => {
                if (i !== index) {
                    item[type + '_popover'] = false;
                }
            });
            // 打开当前行的弹框
            row[type + '_popover'] = true;
            console.log(this.tableData,'this.tableData');
        },
        popshow() {
            var ariaEls = document.querySelectorAll('.el-popover')
            ariaEls.forEach((item) => {
                item.removeAttribute('aria-hidden')
            })

            ariaEls = document.querySelectorAll('.el-radio__original')
            ariaEls.forEach((item) => {
                item.removeAttribute('aria-hidden')
            })
        },
        handleSortChange({ prop, order }) {
            this.currentPage = 1;

            let sortBy = 0;
            let sortOrder = 0;
            if (order == 'ascending') {
                sortBy = prop;
                sortOrder = 1;
            }
            if (order == 'descending') {
                sortBy = prop;
                sortOrder = 2;
            }
            this.getRankingData({ sortBy: sortBy, sortOrder: sortOrder })
        },
        handleRowHover(row) {
            this.show_detail_index = row.sort
        },
        getRankingData(obj) {
            const that = this
            this.$http('POST', this.reqUri + '/super/ajax_get_rank_detail', {
                rank_type: 1,
                cur_page: that.currentPage,
                page_size: that.pageSize,
                ...obj
            }).then(response => {
                this.$nextTick(() => {
                    that.tableData = response.data.list
                    that.profit_top_list = response.data.top_list
                    that.total = response.data.total
                })
            })
                .catch(error => {
                    console.error(error, 'error')
                })
        },
        // 列筛选
        filterHandler(value, row, column) {
            //  console.log(value, row, column,'======');
            const property = column['property'];
            if (value == 0) {
                return row[property] != value
            }
            return row[property] === value;
        },
        // 自定义搜索筛选
        customFilter(keyword, options) {
            if (!keyword) return options
            return options.filter(item => {
                // 自定义筛选逻辑
                return item.label.includes(keyword) || item.value.includes(keyword)
            })
        },
        handleSizeChange(val) {
            this.pageSize = val
        },
        handleCurrentChange(val) {
            this.currentPage = val
        },
    }
}
</script>
<style scoped lang="scss">
.demo-wrap {
    width: 100%;
    letter-spacing: 0.08em;
}

.detail_icon {
    vertical-align: text-top;
}

::v-deep .el-popover.el-popper {
    padding: 20px;
}
.pop-wrap {
    // width: 596px;
    // height: 320px;
    /* 自动布局 */
    display: flex;
    flex-direction: column;
    // padding: 20px;
    gap: 20px;
    box-sizing: border-box;

    // background: #FFFFFF;
    /* 阴影/常规阴影 */
    // box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
    .pop-top {
        h3 {
            /* body/body 1_bold */
            font-family: Microsoft YaHei UI;
            font-size: 16px;
            font-weight: bold;
            line-height: 18px;
            letter-spacing: 0.08em;
            color: #1D2129;
            margin: 0;

            span {
                display: inline-block;
                margin-left: 12px;
                font-size: 14px;
                line-height: 18px;
                color: #006AFF;
            }
        }
        img{
            width: 20px;
            height: 20px;
        }
    }
}
</style>