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

watch(() => props.show, (newval) => {
  if (newval) {
    getTableData()
  }
})
const options = ref([
    {
        value: 'report',
        label: '报告'
    }, {
        value: 'audio',
        label: '音频'
    }, {
        value: 'video',
        label: '视频'
    }
])

import { ref, reactive } from 'vue'
import {apiOrderConfig} from '@/api/order'

const tableColumns = [
    {
        label:'订单编号',
        key:'OrderID',
        sortable:false
    },
    {
        label:'商品名称',
        key:'ProductName',
        sortable:false
    },{
        label:'商品类型',
        key:'ProductType',
        sortable:false,
        widthsty:100
    },{
        label:'有效期',
        key:'ReadCount',
        sortable:false
    },{
        label:'订单状态',
        key:'Status',
        sortable:false,
        widthsty:100
    },{
        label:'支付金额',
        key:'PaymentAmount',
        sortable:false,
        widthsty:100
    },{
        label:'下单时间',
        key:'RefundFinishTime',
        sortable:false
    },{
        label:'支付渠道',
        key:'PaymentWay',
        sortable:false,
        widthsty:90
    }
]

const tableQuery = reactive({
    sortParam:'',
    sortType:'',
    pageSize:10,
    currentPage:1,
    totals:0
})
const tableData = ref([])
function getTableData(){
    apiOrderConfig.getProductOrderList({
        TemplateUserId:props.userRow.TemplateUserId,
        CurrentIndex:tableQuery.currentPage,
        PageSize:tableQuery.pageSize,
    }).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"
    :modal-append-to-body="false"
    width="75%"
    draggable
    title="用户详情"
  >
    <div class="dialog-content">
        <div class="dialog-content-top">
            <div class="title">基本信息</div>
            <div class="info">{{ props.userRow.RealName }}  {{ props.userRow.Mobile }}</div>
            <div class="title">商品订单</div>
        </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 {
        // padding-bottom: 10px;
        color: #333;
        .title {
            font-size: 16px;
            padding-bottom: 10px;
        }
        .info {
            font-size: 14px;
            margin-bottom: 20px;
        }
    }
    .table {
        padding-bottom: 30px;
    }
}

</style>
