<script setup>
const show = defineModel('show', { type: Boolean, default: false })
const props=defineProps({
    labelOptions:{
        type:Array,
        default:[]
    },
    userId:{
        type:String,
        default:''
    },
})
const emits = defineEmits(["success"])
emits("success")

watch(() => props.show, (newval) => {
  if (newval) {
    tableQuery.PermissionIds = null
    tableQuery.ProductType = ''
    tableQuery.currentPage = 1
    tableQuery.sortParam = '',
    tableQuery.sortType = '',
    getTableData()
  }
})
const options = ref([
    {
        value: 'report',
        label: '报告'
    }, {
        value: 'audio',
        label: '音频'
    }, {
        value: 'video',
        label: '视频'
    }
])

import { ref, reactive } from 'vue'
import {apiCustomerUser} from '@/api/customer'

const tableColumns = [
    {
        label:'标题',
        key:'SourceTitle',
        sortable:false
    },{
        label:'产品类型',
        key:'SourceName',
        sortable:false,
        widthsty:100
    },{
        label:'品种',
        key:'PermissionNames',
        sortable:false,
        minwidthsty:100
    },{
        label:'最近一次点击时间',
        key:'ClickTime',
        sortable:true,
        widthsty:180
    },{
        label:'停留时长',
        key:'ReadDurationMinutes',
        sortable:true,
        widthsty:140
    }
]

const tableQuery = reactive({
    currentPage:1,
    pageSize:10,
    totals:0,
    sortParam:'',
    sortType:'',
    PermissionIds:null,
    ProductType:'',
})
const tableData = ref([])
function getTableData(){
    apiCustomerUser.getUserReadRecordList({
        CurrentIndex:tableQuery.currentPage,
        PageSize:tableQuery.pageSize,
        SortParam:tableQuery.sortParam,
        SortType:tableQuery.sortType,
        ProductType:tableQuery.ProductType,
        PermissionIds:tableQuery.PermissionIds?.join(','),
        UserId:props.userId,
    }).then(res=>{
        if(res.Ret!==200) return
        tableData.value = res.Data.List||[]
        tableQuery.totals = res.Data.Paging && res.Data.Paging.Totals||0
    })
}
function handlePageChange(page){
    tableQuery.currentPage = page
    getTableData()
}
function handleSortChange({order,prop}){
    const propMap = {
        0:'ClickTime',
        1:'ReadDurationMinutes',
    }
    tableQuery.sortParam = propMap[prop]||2
    tableQuery.sortType = order==='ascending'?1:0
    getTableData()
}

function handleSelectChange(){
    getTableData()
}

</script>

<template>
  <el-dialog
    v-model="show"
    :close-on-click-modal="false"
    width="75%"
    draggable
    title="阅读详情"
  >
    <div class="dialog-content">
        <div class="dialog-content-top">
            <el-select v-model="tableQuery.ProductType" clearable @change="handleSelectChange()" placeholder="全部" style="width: 250px; margin-right: 20px;">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-cascader
                filterable
                :options="props.labelOptions"
                collapse-tags
                v-model="tableQuery.PermissionIds" 
                 @change="handleSelectChange()"
                :props="{
                    value:'id',
                    label:'name',
                    emitPath:false,
                    multiple:true
                }"
                placeholder="请选择品种"
                style="width: 250px;"
                clearable>
            </el-cascader>
        </div>
        <div class="table">
            <el-table :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":width="column.widthsty"
                    :min-width="column.minwidthsty">
                    <template #default="scope">
                        {{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: 10px;"
            />
        </div>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.dialog-content {
    // padding: 10px 50px 50px 50px;
    .dialog-content-top {
        display: flex;
        justify-content: flex-start;
        padding-bottom: 30px;
        :deep(.el-cascader-node__label) {
            max-width: 111px;
        }
    }
    .table {
        padding-bottom: 30px;
    }
}

</style>
