<template>
    <div class="layout-tabs-content-box">
        <div class="pt-8 border-b-solid-lighter-1">
            <div class="height-30 flex-row align-items-center justify-content-between mb-24">
                <div class="f22 color-text-primary">筛选</div>
                <div class="flex-row align-items-center color-text-regular cursor-pointer"
                     @click="handleToggleSearch">
                    <span class="f14 pr-8">{{showSearch?'展开':'收起'}}</span>
                    <i :class="['f14 el-icon-arrow-down transform-time-default', {
                        'rotate--180': showSearch
                    }]"></i>
                </div>
            </div>
            <el-collapse-transition>
                <div v-show="showSearch" class="">
                    <el-row :gutter="56">
                        <el-col :span="8">
                            <div class="flex-row-center align-items-center height-40 mb-24">
                                <span class="tabs__search-criteria-title flex-shrink-0 pr-16">金融机构名称</span>
                                <el-input v-model.trim="queryParam.financialOrgName"
                                          clearable placeholder="请输入内容"
                                          @keydown.enter.native="handleSearch" maxlength="30">
                                </el-input>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="flex-row-center align-items-center height-40 mb-24">
                                <span class="tabs__search-criteria-title flex-shrink-0 pr-16">社会信用代码</span>
                                <el-input v-model.trim="queryParam.financialOrgCode"
                                          clearable placeholder="请输入内容"
                                          @keydown.enter.native="handleSearch" maxlength="30">
                                </el-input>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="flex-row-center align-items-center height-40 mb-24">
                                <span class="tabs__search-criteria-title flex-shrink-0 pr-16">立案时间</span>
                                <el-date-picker
                                        v-model="queryCreatDate"
                                        type="daterange"
                                        clearable
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        @change="handleChangeCreatDate">
                                </el-date-picker>  
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="56">
                        <el-col :span="8">
                            <div class="flex-row-center align-items-center height-40 mb-24">
                                <span class="tabs__search-criteria-title flex-shrink-0 pr-16">调解员姓名</span>
                                <el-select v-model="queryParam.mediatorId" clearable placeholder="请选择" class="width100">
                                    <el-option
                                    v-for="item in UserData"
                                    :key="item.id"
                                    :label="item.realName"
                                    :value="item.id" >
                                    </el-option>
                                </el-select>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="flex-row-center align-items-center height-40 mb-24">
                                <span class="tabs__search-criteria-title flex-shrink-0 pr-16">案件编号</span>
                                <el-input v-model.trim="queryParam.caseNo"
                                          clearable placeholder="请输入内容"
                                          @keydown.enter.native="handleSearch" maxlength="30">
                                </el-input>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="flex-row-center align-items-center height-40 mb-24">
                                <span class="tabs__search-criteria-title flex-shrink-0 pr-16">对账时间</span>
                                <el-date-picker
                                        v-model="queryReconDate"
                                        type="daterange"
                                        clearable
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        @change="handleChangeReconDate">
                                </el-date-picker>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="56">
                        <el-col :span="24">
                            <div class="flex-row align-items-center justify-content-end mb-24">
                                <el-button @click="hanldeReset">重置</el-button>
                                <el-button type="primary" @click="handleSearch">筛选</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-collapse-transition>
        </div>

        <div class="pt-8">
            <div class="height-56 flex-row align-items-center justify-content-between">
                <div class="f22 color-text-primary">对账报表统计</div>
                <div>
                    <input type="file" accept=".xlsx,.xls" name="image" class="inputFile" hidden ref="reconciliationimport" :multiple="false" @change="didChooseImage($event)"/>
                    <el-button size="medium" type="primary" @click="handleImport">导入数据</el-button>
                    <el-button size="medium" @click="handleExport">导出数据</el-button>
                </div>
                
            </div>
            <div>
                <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-column prop="platformPermission" label="案件状态">
                        <template slot-scope="scope">
                            {{ formatMediateStatusEnum(scope.row) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="platformPermission" label="对账状态">
                        <template slot-scope="scope">
                            {{scope.row.verifyStatus}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="verifyTime" label="对账时间"></el-table-column> -->

                </el-table>
            </div> 
            <div class="text-center pt-16" v-if="tableData.length>0">
                <el-pagination
                    @size-change="getReconciliationList"
                    @current-change="getReconciliationList"
                    :current-page="queryParam.current"
                    :page-size="queryParam.size"
                    layout="total, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import api from "@/services/caseManagement";
  import systemManageApi from "@/services/systemManage";
  import statisticalAnalysisApi from "@/services/statisticalAnalysisApi";
    export default {
        data() {
            return {
                queryCreatDate: '',
                queryReconDate: '',
                showSearch: true,
                queryParam: {
                    financialOrgName: '',//机构名称
                    financialOrgCode: '',//社会信用代码
                    mediatorId:'',
                    creatStarTime:'',
                    creatEndTime:'',
                    verifyStarTime:'',
                    verifyEndTime:'',
                    current:1,
                    size:10,
                    caseNo:'',
                },
                caseStatusData:[],
                mediateStatusData:[],
                tableHead: [
                    {
                        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: "mediatorName",
                        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: [],
                UserData:[]
            }
        },
        created() {
            this.getCaseStatusEnum()
            this.getMediateStatusEnum()
            this.getUserList();
            this.getReconciliationList(1)
        },
        computed:{
            // 获取抽屉drawer的内容高度
            contentHeight(){
                let oh = document.documentElement.clientHeight;
                if(this.showSearch){
                    return oh-56-48-368-32
                }else{
                    return oh-56-48-175-32
                }
                
            }  
        },
        methods: {
            getUserList(val){
                systemManageApi.getUserList({current: 1,size: 100,type: 2}).then(res => {
                    if (!res.code) {
                        this.UserData = res.records;
                    }
                })
            },
            getReconciliationList(val){
                this.queryParam.current = val
                statisticalAnalysisApi.reconciliationList(this.queryParam).then(res => {
                    if (!res.code) {
                        this.tableData = res.records;
                        this.total = res.total;
                    }
                })
            },
            handleToggleSearch() {
                this.showSearch = !this.showSearch
            },
            handleSearch() {
                this.queryParam.current = 1
                this.queryParam.size = 10
                this.getReconciliationList(1)
            },
            handleChangeCreatDate() {
                if(this.queryCreatDate === null) {
                    this.queryParam.creatStarTime = ''
                    this.queryParam.creatEndTime = ''
                }else {
                    this.queryParam.creatStarTime = this.$util.getDayStart(this.queryCreatDate[0])
                    this.queryParam.creatEndTime = this.$util.getDayEnd(this.queryCreatDate[1])
                }
            },
            handleChangeReconDate() {
                if(this.queryReconDate === null) {
                    this.queryParam.verifyStarTime = ''
                    this.queryParam.verifyEndTime = ''
                }else {
                    this.queryParam.verifyStarTime = this.$util.getDayStart(this.queryReconDate[0])
                    this.queryParam.verifyEndTime = this.$util.getDayEnd(this.queryReconDate[1])
                }
            },
            
            handleTableSortChange(data) {
                console.log(data)
            },
            // 取消
            hanldeReset() {
                for (let key in this.queryParam) {
                    this.queryParam[key] = ''
                }
                this.queryParam.current = 1
                this.queryParam.size = 10
                this.queryCreatDate = ''
                this.queryReconDate = ''
            },
            handleImport(){ 
                if(!this.$clickThrottle()) { return }//防止重复点击      
                this.$refs.reconciliationimport.click();
            },
            // 导入
            async didChooseImage(param){ 
                try{
                    let formData = new FormData()
                    formData.append('file', param.target.files[0])
                    statisticalAnalysisApi.uploadReconciliation(formData).then(res => {
                        this.$refs.reconciliationimport.value =''
                        this.$message.success('对账文件导入成功')
                        this.getReconciliationList(1)
                    })
                    
                }catch (e) {
                    this.$message.error(e.msg)
                }
            },
            // 导出
            handleExport(){ 
                if(!this.$clickThrottle()) { return }//防止重复点击               
                statisticalAnalysisApi.exportReconciliationList(this.queryParam).then(res => {
                    this.$util.downloadFileByBlob(res.data, '对账报表统计.xlsx')
                })
            },
            formatTable(row, column, cellValue, index) {
                return cellValue || "-";
            },
            // 获取调解中案件状态枚举
            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>
