<script setup>
import { ref, reactive } from 'vue'
import { QuestionFilled } from '@element-plus/icons-vue'
import { interactiveInterface,customInterence } from '@/api/api'
import { ElMessage } from 'element-plus'

const tableColumns = [
    {label:'版块名称',key:'SectionName'},
    {label:'品种',key:'VarietyName'},
    {label:'状态',key:'Status',width:'200'},
]
let tableData = ref([{}])
let tableParams = reactive({
    pageNo:1,
    pageSize:10,
    totals:0
})
function handleCurrentChange(page){
    tableParams.pageNo = page
    getTableData()
}
async function getTableData(){
    const res = await interactiveInterface.voiceList({
        CurrentIndex: tableParams.pageNo,
        PageSize:tableParams.pageSize
    })
    if(res.Ret!==200) return
    const { List,Paging } = res.Data;

    tableData.value = List || [];
    tableParams.totals = Paging.Totals;
}
getTableData()

let isEdit = ref(false)
let showAdd = ref(false)
let formData = reactive({
    name:'',
    classify:'',
    shareImg:'',
    id:''
})
function handelShowAdd(data){
    isEdit.value = data.SectionId?true:false
    formData.name = data.SectionName||''
    formData.classify = data.VarietyId||''
    formData.shareImg = data.ImgUrl||''
    formData.id = data.SectionId||''
    showAdd.value = true
}
let classifyArr = ref([])
let cascaderRef = ref(null)
async function getClassifyList(){
    const res = await customInterence.getvariety({CompanyType:"ficc"})
    if(res.Ret!==200) return 
    classifyArr.value = res.Data.List||[]
}
getClassifyList()
function handleUpload(e){
    let form = new FormData();
    form.append('file',e.file);
    customInterence.upload(form).then(res=>{
        if(res.Ret===200){
            formData.shareImg=res.Data.ResourceUrl
        }
    })
}
//编辑/保存板块
async function handleAdd(){
    if(!formData.name){
        ElMessage.warning('请输入板块名称')
        return
    }
    if(!formData.classify){
        ElMessage.warning('请选择品种')
        return
    }
    if(!formData.shareImg){
        ElMessage.warning('请上传分享图片')
        return
    }
    const params = formData.id
        ?{
            SectionId:Number(formData.id),
            SectionName:formData.name,
            ImgUrl:formData.shareImg
        }
        :{
            SectionName:formData.name,
            VarietyId:Number(formData.classify),
            VarietyName:cascaderRef.value.getCheckedNodes()[0].label||'',
            ImgUrl:formData.shareImg
        }
    const apiName = formData.id?'editVoiceSection':'addVoiceSection'
    const res = await interactiveInterface[apiName](params)
    if(res.Ret!==200) return
    ElMessage.success(formData.id?'编辑成功':'添加成功')
    handleCurrentChange(1)
    showAdd.value = false
}
//启用/禁用
async function handleOptItem(data){
    const res = await interactiveInterface.editVoiceSection({
        SectionId:Number(data.SectionId),
        Enable:data.Status==1?0:1
    })
    if(res.Ret===200){
        ElMessage.success(`${data.Status==1?'禁用':'启用'}成功`)
        getTableData()
    }
}
</script>

<template>
    <div class="voice-plate-wrap">
        <div>
            <el-button type="primary" @click="handelShowAdd({})">新建板块</el-button>
        </div>
        <div style="margin-top:30px">
            <el-table
                :data="tableData"
                border
                style="width: 100%"
            >
                <el-table-column v-for="column in tableColumns" :key="column.key"
                    :prop="column.key"
                    :label="column.label"
                    :width="column.width"
                    align="center"
                >
                    <template #default="{row}">
                        <span v-if="column.key==='Status'" :style="{color:row.Status===1?'':'#ef0000'}">{{row.Status===1?'启用':'禁用'}}</span>
                        <span v-else>{{ row[column.key] }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="200"
                    align="center"
                >
                    <template #header>
                        <el-tooltip 
                            effect="dark" 
                            content="禁用后不可选择该版块新增语音播报，不影响历史数据；" 
                            placement="top-start"
                        >   
                            <div style="display: flex;align-items: center;justify-content: center;">
                                <span>操作</span>
                                <el-icon><QuestionFilled /></el-icon>
                            </div>
                        </el-tooltip>
                    </template>
                    <template #default="{row}">
                        <span style="color:#409EFF;cursor:pointer;margin-right:5px" @click="handelShowAdd(row)">编辑</span>
                        <span :style="{color:row.Status===1?'#ef0000':'#409EFF',cursor:'pointer'}" @click="handleOptItem(row)">{{row.Status===1?'禁用':'启用'}}</span>
                    </template>
                </el-table-column>
                <template slot="empty">
                    <div style="margin:50px 0">
                        <img style="width:150px" src="~@/assets/img/cus_m/nodata.png" alt="">
                        <div>暂无数据~</div>
                    </div>
                </template>
            </el-table>
            <el-pagination
                layout="total,prev,pager,next,jumper" 
                background
                :current-page="tableParams.pageNo"
                @current-change="handleCurrentChange"
                :page-size="tableParams.pageSize" 
                :total="tableParams.totals"
                style="float:right;margin-top:20px">
            </el-pagination>
        </div>
        <!-- 新增板块弹窗 -->
        <el-dialog
            v-model="showAdd"
            :close-on-click-modal="false"
            :modal-append-to-body='false'
            custom-class="dialog"
            center
            width="700px"
            :title="isEdit?'编辑板块':'新建版块'"
            @close="showAdd=false"
        >
            <div class="dialog-container">
                <el-form
                    ref="formRef"
                    label-position="left"
                    hide-required-asterisk
                    label-width="80px"
                    :model="formData"
                >
                    <el-form-item 
                        label="版块名称" 
                        prop="name"
                    >
                        <el-input
                            style="width:400px"
                            v-model="formData.name"
                            placeholder="请输入板块名称"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="品种" 
                        prop="classify"
                    >
                        <el-cascader 
                            class="voice-plate-cascader"
                            v-model="formData.classify"
                            placeholder="请选择品种"
                            :options="classifyArr" 
                            :props="{value:'ChartPermissionId',label:'ClassifyName',children:'Items',emitPath:false}"
                            :show-all-levels="false"
                            ref="cascaderRef"
                            :disabled="isEdit"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item 
                        label="分享图片" 
                        prop="shareImg"
                    >
                        <el-input
                            style="width:400px"
                            v-model="formData.shareImg"
                            placeholder="请上传分享图片"
                            readonly
                        />
                        <el-upload
                            style="display: inline-block;margin-left:5px"
                            action=""
                            accept="image/*"
                            :http-request="handleUpload"
                            :show-file-list="false"
                        >
                            <el-button type="primary">选择图片</el-button>
                        </el-upload>
                    </el-form-item>
                    <div style="text-align:center;margin:30px 0">
                        <el-button type="primary" plain style="width:100px" @click="showAdd=false">取消</el-button>
                        <el-button type="primary" style="margin-left:30px;width:100px" @click="handleAdd">保存</el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">

</style>
