<script setup>
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { apiAuthor } from '@/api/author';
import {cloneDeep} from 'lodash'

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

const tableColumns = [
    {label:'研究员名称',key:'Name',},
    {label:'职位',key:'Position',},
    {label:'简介',key:'Introduction'},
    {label:'照片',key:'HeadImgURL',},
    {label:'从业资格号',key:'ProfessionalCertificate',},
    {label:'投资咨询号',key:'InvestmentCertificate',},
    {label:'添加时间',key:'CreatedTime',width:250},
]
let modifyAuthorShow = ref(false)
let curAuthorData = ref({})
function handleModifyAuthorShow(data){
    curAuthorData.value = cloneDeep(data)
    formRef.value?.clearValidate()
    modifyAuthorShow.value = true
}
const tableLoading = ref(false)
const tableData = ref([])
function getTableData(){
    tableLoading.value = true
    apiAuthor.getAuthorList({
        PageSize:tableQuery.pageSize,
        CurrentIndex:tableQuery.currentPage,
        KeyWord:tableQuery.keyWord
    }).then(res=>{
        tableLoading.value = false
        if(res.Ret!==200) return 
        tableData.value = res.Data.List||[]
        tableQuery.totals = res.Data.Paging.Totals||0
    })
}
getTableData()
function handlePageChange(page){
    tableQuery.currentPage = page
    getTableData()
}

function handleUploadImg(file){
    //图片大小和格式限制
    const {size,type} = file.file
    const sizeLimit = 5*1024*1024
    if(!['image/png','image/jpeg'].includes(type)){
        ElMessage.warning('仅支持png、jpg格式的图片')
        return
    }
    if(size>sizeLimit){
        ElMessage.warning('研究员头像不能超过5M')
        return
    }
    let form = new FormData();
    form.append('File',file.file);
    apiAuthor.uploadAuthorPic(form).then(res=>{
        if(res.Ret!==200) return 
        curAuthorData.value.HeadImgURL = res.Data?.Url||''
    })
}
const rules = {
    //Introduction:[{required:true,message:'请输入简介'}],
    HeadImgURL:[{required:true,message:'请上传头像'}]
}
const formRef = ref(null)
async function handleSaveAuthor(){
    try{
        await formRef.value?.validate()
    }catch(e){ return }
    const {Id,HeadImgURL,Introduction,Name,ProfessionalCertificate,Position,InvestmentCertificate} = curAuthorData.value
    apiAuthor.editAuthor({
        Id,HeadImgUrl:HeadImgURL,Introduction,Name,ProfessionalCertificate,Position,InvestmentCertificate
    }).then(res=>{
        if(res.Ret!==200) return 
        ElMessage.success('配置成功')
        getTableData()
        modifyAuthorShow.value = false
    })
}

</script>

<template>
    <div class="author-list-wrap">
        <div class="top-box">
            <el-input 
                v-model="tableQuery.keyWord"
                :prefix-icon="Search" 
                clearable 
                style="width:426px;" 
                placeholder="研究员名称" 
                @input="handlePageChange(1)"/>
        </div>
        <div class="table-box">
            <el-table stripe border :data="tableData" element-loading-text="数据加载中..." v-loading="tableLoading">
                <el-table-column 
                    v-for="column in tableColumns" :key="column.key"
                    :prop="column.key" :label="column.label" :sortable="column.sortable" :width="column.width">
                    <template #default="{row}">
                        <div v-if="column.key==='HeadImgURL'" style="color:#086CE0;cursor: pointer;">
                            <el-image 
                                v-if="row[column.key]"
                                fit="cover"
                                :src="row[column.key]||''" 
                                :preview-src-list="[row[column.key]||'']" 
                                style="display: inline-block;width:60px;height: 60px;" preview-teleported/>
                            <span v-else style="display: inline-block;width:60px;height: 60px;line-height: 60px;">-</span> 
                        </div>
                        <span v-else>{{ row[column.key]||'-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{row}">
                        <el-link type="primary" :underline="false" @click="handleModifyAuthorShow(row)" v-permission="'analyst:config'">配置</el-link>
                    </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;border:1px solid #ebeef5;border-top: none;"
            />
        </div>
    </div>
    <el-dialog v-model="modifyAuthorShow" title="配置作者" width="60%" draggable>
        <div class="content-wrap">
            <el-form label-width="95px" label-position="left" :rules="rules" ref="formRef" :model="curAuthorData">
                <el-form-item label="研究员名称">
                    {{ curAuthorData.Name||'-' }}
                </el-form-item>
                <div class="content-box">
                    <div class="content-item">
                        <el-form-item label="简介" prop="Introduction" class="form-item">
                            <el-input type="textarea" placeholder="请输入作者简介" :rows="5" v-model="curAuthorData.Introduction"></el-input>
                        </el-form-item>
                        <el-form-item label="从业资格号" class="form-item">
                            <el-input placeholder="请输入作者从业资格号" :rows="5" v-model="curAuthorData.ProfessionalCertificate"></el-input>
                        </el-form-item>
                        <el-form-item label="照片" prop="HeadImgURL" class="form-item">
                            <ImageUpload
                                :imgUrl="curAuthorData.HeadImgURL"
                                uploadHint="支持jpg、jpeg、png等格式，建议上传宽高比例为1:1的图片"
                                width="120px"
                                height="120px"
                                @upload="handleUploadImg"
                                @remove="curAuthorData.HeadImgURL=''"
                            ></ImageUpload>
                        </el-form-item>                 
                    </div>
                    <div class="content-item">
                        <el-form-item label="职位" class="form-item">
                            <el-input placeholder="请输入作者职位" :rows="5" v-model="curAuthorData.Position"></el-input>
                        </el-form-item>
                        <el-form-item label="投资咨询号" class="form-item">
                            <el-input placeholder="请输入作者投资咨询号" :rows="5" v-model="curAuthorData.InvestmentCertificate"></el-input>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </div>
        <template #footer>
            <div class="footer-wrap">
                <el-button type="primary" plain size="large" @click="modifyAuthorShow = false">取消</el-button>
                <el-button type="primary" size="large" @click="handleSaveAuthor">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped lang="scss">
.author-list-wrap{
    .top-box{
        text-align: right;
    }
    .table-box{
        margin-top: 25px;
    }
}
.content-box {
    display: flex;
    justify-content: space-between;
    .content-item {
        width: 49%;
        .form-item {
            margin-bottom: 15px;
            :deep(.el-input__wrapper){ 
            padding:5px 10px;
        }
        }
    }
}
</style>
