<script setup>
import { ref, reactive } from 'vue'
import {apiProductsConfig} from '@/api/products'
import { apiMediaCommon } from '@/api/media'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router=useRouter()
const tableColumns = [
    {
        label:'产品名称',
        key:'ProductName',
        sortable:false,
        align:'center',
        minwidthsty:150
    },{
        label:'发布时间',
        key:'PublishedTime',
        sortable:false,
        align:'center',
        widthsty:200
    },{
        label:'产品类型',
        key:'ProductType',
        sortable:false,
        align:'center',
        widthsty:100
    },{
        label:'品种',
        key:'PermissionNames',
        sortable:false,
        align:'center'
    },{
        label:'风险等级',
        key:'RiskLevel',
        sortable:false,
        align:'center',
        widthsty:100
    },
    {
        label:'商品价格（元）',
        key:'Price',
        sortable:false,
        align:'center'
    },
    {
        label:'操作',
        key:'handle',
        align:'center'
    },
]
const tableData = ref([])
const labelOptions = ref([])
const tableQuery = reactive({
    keyWord:'',
    currentPage:1,
    pageSize:10,
    totals:0,
    ProductType:'report',
    PermissionIds:null,
})

getTableData()
getLableList()
function getTableData(){
    apiProductsConfig.getUnSetProductList({
        KeyWord:tableQuery.keyWord,
        CurrentIndex:tableQuery.currentPage,
        PageSize:tableQuery.pageSize,
        ProductType:tableQuery.ProductType,
        PermissionIds:tableQuery.PermissionIds?.join(','),
    }).then(res=>{
        if(res.Ret!==200) return 
        tableData.value = res.Data.List||[]
        tableQuery.totals = res.Data.Paging.Totals||0
    })
}
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}){
    const propMap = {
        0:'ClickTime',
        1:'Price',
    }
    tableQuery.sortParam = propMap[prop]||2
    tableQuery.sortType = order==='ascending'?1:0
    getTableData()
}
function handleSelectType(type){
    tableQuery.keyWord = ''
    tableQuery.currentPage = 1
    tableQuery.PermissionIds = []
    getTableData()
}
function handleSelectChange(){
    getTableData()
}
function close() {
    router.push('/products/singleConfigList')
}
function stockProducts(row){
    if(!row.Price) return ElMessage.warning('请输入价格')
    apiProductsConfig.postAddProduct({
        SourceId:row.SourceId,
        Type:row.ProductType === '报告'?'report': row.ProductType === '视频'?'video':'audio',
        // ProductName:,
        // CoverSrc:,
        // ValidDays:,
        Price:row.Price,
        // Description:,
    }).then(res=>{
        if(res.Ret!==200) return 
        ElMessage.success('保存并上架成功')
        getTableData()
    })
}
</script>

<template>
    <el-card>
        <div class="dialog-content">
            <div>
                <el-radio-group v-model="tableQuery.ProductType" size="large" @change="handleSelectType()">
                    <el-radio-button label="报告" value="report" />
                    <el-radio-button label="音视频" value="media" />
                </el-radio-group>
            </div>
            <div class="top-box">
                <div>
                    <!-- <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="labelOptions"
                        collapse-tags
                        placeholder="请选择品种"
                        v-model="tableQuery.PermissionIds" 
                        @change="handleSelectChange()"
                        :props="{
                            value:'id',
                            label:'name',
                            emitPath:false,
                            multiple:true
                        }"
                        style="width: 250px; margin-right: 20px;"
                        clearable>
                    </el-cascader>
                    <el-input 
                        v-model="tableQuery.keyWord"
                        :prefix-icon="Search" clearable
                        style="width:250px"
                        placeholder="产品名称" 
                        @input="handlePageChange(1)"
                    />
                </div>
                <div>
                    <el-button type="primary" plain @click="close">返回</el-button>
                </div>
            </div>
            <div class="table">
                <el-table :data="tableData" @sort-change="handleSortChange" border>
                    <el-table-column 
                        v-for="column in tableColumns" :key="column.key"
                        :prop="column.key" :label="column.label" :sortable="column.sortable" :align="column.align" :width="column.widthsty"
                        :min-width="column.minwidthsty || ''">
                        <template #default="scope" v-if="column.key==='Price'">
                            <el-input v-model="scope.row[column.key]" placeholder="请输入数字" />
                        </template>
                        <template #default="scope" v-else-if="column.key==='handle'">
                            <span class="stock" @click="stockProducts(scope.row)">保存并上架</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>
    </el-card>
</template>

<style scoped lang="scss">
.dialog-content {
    padding: 20px;
    .top-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0 20px 0;
    }
    .table {
        padding-bottom: 30px;
        .stock {
            cursor:pointer;
            color: rgba(8, 108, 224, 1);
        }
    }
}
</style>
