<script setup>
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import {apiCustomerUser} from '@/api/customer'
import { apiMediaCommon } from '@/api/media'
import ReadDialog from './components/ReadDialog.vue'
import UserDialog from './components/UserDialog.vue'

const tableColumns = [
    {
        label:'姓名',
        key:'RealName',
        sortable:false
    },
    {
        label:'手机号',
        key:'Mobile',
        sortable:false
    },
    {
        label:'公司名称',
        key:'CompanyName',
        sortable:false
    },
    {
        label:'注册时间',
        key:'CreatedTime',
        sortable:false
    },{
        label:'是否关注公众号',
        key:'FollowingGzh',
        sortable:false,
    },{
        label:'最近一次阅读时间',
        key:'LastReadTime',
        sortable:false
    },{
        label:'累计阅读次数',
        key:'ReadCount',
        sortable:false
    }
]

const tableQuery = reactive({
    keyWord:'',
    currentPage:1,
    pageSize:10,
    totals:0,
    sortParam:'',
    sortType:'',
    FollowingGzh:'',
    RegisterBeginDate:'',
    RegisterEndDate:'',
})

const tableData = ref([])
const show = ref(false)
const showUserDialog = ref(false)
function getTableData(){
    apiCustomerUser.getOfficialList({
        Keyword:tableQuery.keyWord,
        CurrentIndex:tableQuery.currentPage,
        PageSize:tableQuery.pageSize,
        SortParam:tableQuery.sortParam,
        SortType:tableQuery.sortType,
        FollowingGzh:tableQuery.FollowingGzh,
        RegisterBeginDate:tableQuery.RegisterBeginDate,
        RegisterEndDate:tableQuery.RegisterEndDate,
    }).then(res=>{
        if(res.Ret!==200) return 

        tableData.value = res.Data.List||[]
        tableQuery.totals = res.Data.Paging.Totals||0
    })
}
getTableData()
getLableList()
const labelOptions = ref([])
const userId = ref('')
const userRow = ref({})
const value1 = ref(['',''])
function getLableList(){
    apiMediaCommon.getPermissionList().then(res=>{
        if(res.Ret!==200) return
        labelOptions.value = res.Data.List||[]
    })
}

function handlePageChange(page){
    tableQuery.currentPage = page
    getTableData()
}
function handleSortChange({order,prop}){
    // ascending 
    const propMap = {
        0:'CreatedTime',
        1:'ReadCount',
        2:'LastReadTime',
    }
    tableQuery.sortParam = propMap[prop]||2
    tableQuery.sortType = order==='ascending'?1:0
    getTableData()
}

// 查看用户详情
function Details(row) {
    if (row.ReadCount <= 0) return;
    show.value = true;
    userId.value = row.TemplateUserId + '';
}
function handleSelectChange() {
    getTableData();
}
function changeDatePicker(val) {
    if (!val) {
        tableQuery.RegisterBeginDate = '';
        tableQuery.RegisterEndDate = '';
    } else {
        tableQuery.RegisterBeginDate = val[0];
        tableQuery.RegisterEndDate = val[1];
    }
    getTableData();
}
function userDetails(row) {
    userRow.value = row
    showUserDialog.value = true;
}

/* 下载数据 */
async function downloadExcel() {
    const res = await apiCustomerUser.getOfficialExport(
        {
            Keyword:tableQuery.keyWord,
            SortParam:tableQuery.sortParam,
            SortType:tableQuery.sortType,
        }
    )
    const blob = new Blob([res], {
        type: "application/vnd.ms-excel;charset=utf-8",
    });
    let fileName = res.fileName;
    const elink = document.createElement("a");
    elink.download = fileName; //命名下载名称
    elink.style.display = "none";
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click(); // 点击下载
    URL.revokeObjectURL(elink.href); // 释放URL 对象
    document.body.removeChild(elink); // 释放标
}
</script>

<template>
    <el-card class="box-card">
        <div class="temp-user-list-wrap">
            <div class="top-box">
                <div>
                    <el-select v-model="tableQuery.FollowingGzh" clearable @change="handleSelectChange()" placeholder="是否关注公众号" style="width: 150px; margin-right: 20px;">
                        <el-option label="是" :value="true"></el-option>
                        <el-option label="否" :value="false"></el-option>
                    </el-select>
                    <el-date-picker
                        v-model="value1"
                        value-format="YYYY-MM-DD"
                        type="daterange"
                        @change="changeDatePicker"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div class="search-box">
                    <el-button type="primary" style="margin-right: 20px;" @click="downloadExcel" v-permission="'user:export'">导出表格</el-button>
                    <el-input 
                        v-model="tableQuery.keyWord"
                        :prefix-icon="Search" clearable
                        style="width:400px"
                        placeholder="请输入手机号" 
                        @input="handlePageChange(1)"
                        />
                </div>
            </div>
            <div class="table-box">
                <el-table stripe border :data="tableData" @sort-change="handleSortChange">
                    <el-table-column 
                        v-for="column in tableColumns" :key="column.key"
                        :prop="column.key" :label="column.label" :sortable="column.sortable">
                        <template #default="scope" v-if="column.key === 'FollowingGzh'">
                            <span>{{ scope.row.FollowingGzh ? '是' : '否' }}</span>
                        </template>
                        <template #default="scope" v-else-if="column.key === 'ReadCount'">
                            <span class="ReadCount" @click="Details(scope.row)" v-permission="'user:count'">
                                {{ scope.row[column.key] }}
                            </span>
                        </template>
                        <template #default="scope" v-else-if="column.key === 'RealName'">
                            <span class="ReadCount" @click="userDetails(scope.row)" v-permission="'user:details'">
                                {{ scope.row[column.key] }}
                            </span>
                        </template>
                        <template #default="scope" v-else>
                            {{scope.row[column.key]}}
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    layout="total,prev,pager,next,jumper"
                    :current-page="tableQuery.currentPage"
                    :page-size="tableQuery.pageSize"
                    :total="tableQuery.totals"
                    @current-change="handlePageChange"
                    style=" justify-content: flex-end;margin-top: 50px;"
                />
            </div>
        </div>
        <ReadDialog v-model:show="show" :labelOptions="labelOptions" :userId="userId"></ReadDialog>
        <UserDialog v-model:show="showUserDialog" :userRow="userRow"></UserDialog>
    </el-card>
</template>

<style scoped lang="scss">
.temp-user-list-wrap{
    height: calc(100vh - 208px); //layout padding 30*2 headHeight 48
    .top-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .search-box{
            text-align: right;
            margin: 20px 0 40px 0;
        }
    }
    .table-box{
       .ReadCount {
        color: rgba(8, 108, 224, 1);
        cursor: pointer;
       }
    }
}
</style>
