<template>
    <el-drawer
      :title="detailDrawer.title"
      :visible="true"
      direction="rtl"
      size="85%"
      :before-close="handleClose"
      >
      <div class="">
        
        <div class="" >
            <div class="height-56 flex-row align-items-center justify-content-between p-h-24">
                <div class="f22 color-text-primary">“{{detailDrawer.data.row.mediatorName}}”调解员业绩统计</div>
                <el-button size="medium" @click="handleExport">导出数据</el-button>
            </div>
            <div class="p-h-24">
                <el-table :data="tableData" :height="`${contentHeight}`">
                    <el-table-column
                        v-for="(item, i) in tableHead"
                        :key="i"
                        :prop="item.prop"
                        :label="item.label"
                        :show-overflow-tooltip="item.showOverflowTooltip"
                        :width="item.width"
                        :sortable="item.sortable"
                        :formatter="item.formatter"
                    ></el-table-column>
                </el-table>
            </div> 
        </div>
        
        <div class="border-t-solid-lighter-1 text-center p-v-16">
           
            <el-pagination
                @size-change="getMediateById"
                @current-change="getMediateById"
                :current-page="questParam.current"
                :page-size="questParam.size"
                layout="total, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
           
        </div>
      </div>
    </el-drawer>
</template>
<script>
import api from "@/services/caseManagement";
  import statisticalAnalysisApi from "@/services/statisticalAnalysisApi";
    export default {
        props: {
            detailDrawer: {
                type: Object,
                default: () => {
                    return {}
                },
            },
            queryParam: {
                type: Object,
                default: () => {
                    return {}
                },
            },
        },
        data() {
            return {
                mediateStatusData:[],
                caseStatusData:[],
                 questParam: {
                    mediatorId: '',//
                    creatStarTime:'',
                    creatEndTime:'',
                    current:1,
                    size:10
                },
                total:0,
                tableHead: [
                    // {
                    //     prop: "mediatorName",
                    //     label: "调解员名称",
                    //     showOverflowTooltip: true,
                    //     formatter: this.formatTable,
                    // },
                    {
                        prop: "caseName",
                        label: "案件名称",
                        showOverflowTooltip: true,
                        formatter: this.formatTable,
                    },
                    {
                        prop: "caseNo",
                        label: "案件编号",
                        showOverflowTooltip: true,
                        formatter: this.formatTable,    
                    },
                    {
                        prop: "financialOrgName",
                        label: "金融机构名称",
                        showOverflowTooltip: true,
                        formatter:this.formatTable,
                    },
                    {
                        prop: "financialOrgCode",
                        label: "社会信用代码",
                        showOverflowTooltip: true,
                        formatter: this.formatTable,
                    },
                    {
                        prop: "moneyAmount",
                        label: "标的金额",
                        showOverflowTooltip: true,
                        formatter: this.formatTable,
                    },
                    {
                        prop: "createAt",
                        label: "立案时间",
                        showOverflowTooltip: true,
                        formatter: this.formatTable,
                    },
                    {
                        prop: "caseStatus",
                        label: "调解状态",
                        showOverflowTooltip: true,
                        formatter: this.formatMediateStatusEnum,
                    },
                    {
                        prop: "resultStatus",
                        label: "案件状态",
                        showOverflowTooltip: true,
                        formatter: this.formatResultStatusEnum,
                    },
                    {
                        prop: "verifyStatus",
                        label: "对账状态",
                        showOverflowTooltip: true,
                        formatter: this.formatReconStatusEnum,
                    },
                    {
                        prop: "verifyTime",
                        label: "对账时间",
                        showOverflowTooltip: true,
                        formatter: this.formatTable,
                    },
                ],
               tableData: [], 
            };
        },
        async created() {
            this.getCaseStatusEnum()
            this.getMediateStatusEnum()
            this.getMediateById(1);//获取机构详情
        },
        computed:{
            // 获取抽屉drawer的内容高度
            contentHeight(){
                let oh = document.documentElement.clientHeight;
                return oh-64-56-34-32
            }
        },
        methods: {
            // 获取详情
            getMediateById(val){ 
                this.questParam.current = val
                this.questParam.mediatorId = this.detailDrawer.data.row.mediatorId
                if(this.queryParam != {})
                {
                    this.questParam.creatStarTime = this.queryParam.starTime
                    this.questParam.creatEndTime = this.queryParam.endTime
                }
                statisticalAnalysisApi.reconciliationList(this.questParam).then(res => {
                    if (!res.code) {
                        this.tableData = res.records;
                        this.total = res.total;
                    }
                })
            },
            
            handleClose() {
                this.$emit('update:detailDrawer', null)
            },
            formatTable(row, column, cellValue, index) {
                return cellValue || "-";
            },
            
            // 导出
            handleExport(){     
                if(!this.$clickThrottle()) { return }//防止重复点击        
                statisticalAnalysisApi.exportReconciliationList(this.questParam).then(res => {
                    this.$util.downloadFileByBlob(res.data, this.detailDrawer.data.row.mediatorName+'个人业绩统计.xlsx')
                })
            },
            // 获取调解中案件状态枚举
            getCaseStatusEnum(){
                api.getCaseStatusEnum({}).then(res => {
                    if (!res.code) {
                        this.caseStatusData = res;
                    }
                })
            },
            // 获取案件状态枚举-调解状态
            getMediateStatusEnum(){
                api.getMediateStatusEnum({}).then(res => {
                    if (!res.code) {
                        this.mediateStatusData = res;
                    }
                })
            },
            // 调解状态
            formatMediateStatusEnum(row, column, cellValue, index){
                // console.log('row',row)
                let className = `status-btn case-status${row.caseStatus}`
                let obj = this.mediateStatusData.find((item) => {
                    return item.code == row.caseStatus
                })
                return row.caseStatus != null ? <div class={className}>{obj.desc}</div> : '-'
            },
            // 对账状态
            formatReconStatusEnum(row, column, cellValue, index){
                let ReconMsg = "失败"
                if(row.verifyStatus == 1){ReconMsg = "成功"}
                return row.verifyStatus != null ? <el-tag  size="small" type="className" >{ReconMsg}</el-tag> : '-'
            },
            formatResultStatusEnum(row, column, cellValue, index){
                // console.log('row',row)
                let className = `status-btn result-status${row.resultStatus}`
                let obj = this.caseStatusData.find((item) => {
                    return item.code == row.resultStatus
                })
                return row.resultStatus != null ? <div class={className}>{obj.desc}</div> : '-'
            },
        }
    };
</script>
<style scoped>

.logo-wrap{
    padding: 24px 120px;
}
</style>