<template>
    <div class="app-container organization-index">
        <div class="title-container">
            <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
        </div>
        <div>
            <y-page-list-layout :get-page-list="getAssetsSate" :page-list="pageData" :page-para="listQuery">
                <template slot="left">
                    <el-input v-model="listQuery.keyword" placeholder="项目编号、产品号" clearable
                    style="width: 300px;float: left;">
                    </el-input>
                    <el-date-picker style="margin-left: 20px;float: left;" v-model="selectDate" type="daterange"
                        :picker-options="pickerOptions" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                    </el-date-picker>
                    <el-date-picker  clearable v-model="paymentDate" type="daterange" align="center" unlink-panels
                        range-separator="至" start-placeholder="到账日期（开始）" end-placeholder="到账日期（结束）" :picker-options="pickerOptions"
                        value-format="yyyy-MM-dd" style="margin-left: 20px;float: left;">
                    </el-date-picker>
                    <!-- <el-input v-model="listQuery.orderId" placeholder="项目编号" clearable style="width: 200px;margin-right: 20px;float: left;">
                    </el-input>
                    <el-input v-model="listQuery.reportNo" placeholder="报告号" clearable style="width: 200px;margin-right: 20px;float: left;">
                    </el-input>
                    <el-select v-model="listQuery.principalId" placeholder="项目负责人" clearable
                        style="width: 200px;margin-right: 20px;float: left;">
                        <el-option v-for="(u, id) in allUsers" :label="u.name" :value="u.id"></el-option>
                    </el-select>
                    <el-select v-model="listQuery.claimUserId" placeholder="认领人" clearable
                        style="width: 200px;margin-right: 20px;float: left;">
                        <el-option v-for="(u, id) in allUsers" :label="u.name" :value="u.id"></el-option>
                    </el-select>
                    <el-input v-model="listQuery.claimAmount" placeholder="认领金额" clearable
                        style="width: 200px;margin-right: 20px;float: left;">
                    </el-input> -->
                    <el-select v-model="listQuery.assetsBusinessGener" placeholder="资产业务类型" clearable
                        style="width: 100px;margin-left: 20px;float: left;">
                        <el-option v-for="(s, value) in assetsBusinessGeners" :label="s.label" :value="s.value"></el-option>
                    </el-select> 
                    <el-select v-model="listQuery.ifSaveFile" placeholder="是否归档" clearable style="width: 100px;margin-left: 20px;float: left;">
                        <el-option label="已归档" value="true"></el-option>
                        <el-option label="未归档" value="false"></el-option>
                    </el-select>
                    <el-button class="filter-item" type="primary" @click="searchList()" round style="margin-left: 20px;">搜索
                    </el-button>
                    <el-button class="filter-item" round type="success" @click="resetParams()">重置
                    </el-button>
                    <el-button class="filter-item" round type="info" @click="exportAssetsStat()" :disabled="exportStatus">导出
                    </el-button>
                </template>
                <el-table size="medium" slot="table" row-key="id" :data="pageData.records" fit highlight-current-row
                    :header-row-style="{ color: '#333333' }"
                    style="border-left: 1px solid #EBECED;border-right: 1px solid #EBECED;color: #333333;">
                    <el-table-column label="是否归档" width="80" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.saveFileDate }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="报告号" width="200" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.reportNo }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="项目编号" width="120" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.orderId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="项目名称" width="200" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.orderName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="市场部门" width="100" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.marketDepartment }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="评估部门" width="120" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.evaluateDepartment }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="客户经理" width="100" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.clientManagerName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="项目负责人" width="100" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.principalName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="付款方" width="150" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.payer }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="到账时间" width="120" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.payDateTime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="认领时间" width="120" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.claimDatetime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单应收款（元）" width="120" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.orderShouldAmount }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="产品应收款（元）" width="120" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.prodShouldAmount }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="认领金额（元）" width="120" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.claimAmount }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="认领人" width="100" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.claimUser }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="资产业务类型" width="120" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.assetsBusinessGener }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="客户名称" width="100" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.clientName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="业务来源" width="100" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.clientSubName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="委托人" width="100" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.bailor }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="评估价值(万元)" width="120" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.evaluateAmount }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="产品类型" width="100" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.saveFileDate }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="分类" width="100" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.productionType }}</span>
                        </template>
                    </el-table-column>

                </el-table>
            </y-page-list-layout>
        </div>
    </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import YPageListLayout from '@/components/YPageListLayout'

export default {
    name: 'realFundStat',
    components: {
        Breadcrumb,
        YPageListLayout
    },
    data() {
        return {
            pageData: { records: [] },
            listLoading: false,
            // 时间
            selectDate: '',
            paymentDate: '',
            listQuery: {
                page: 1,
                size: 10,
                current: 1,
                // 开始时间
                startTime: null,
                // 结束时间
                endTime: null,
                orderId: null,
                reportNo: null,
                principalId: null,
                claimUserId: null,
                claimAmount: null,
                assetsBusinessGener: null,
                ifSaveFile: null,
                keyword:null,
                payStartTime:null,
                payEndTime:null
            },
            // 用户下拉列表
            allUsers: [],
            // 业务类型下拉列表
            assetsBusinessGeners: [
                {
                    value: '单项资产',
                    label: '单项资产'
                }, {
                    value: '整体资产',
                    label: '整体资产'
                }, {
                    value: '无形资产',
                    label: '无形资产'
                }, {
                    value: '债权',
                    label: '债权'
                }, {
                    value: '其他',
                    label: '其他'
                }
            ],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            exportStatus: true
        }
    },
    created() {
        this.getAllUser();
        this.getAssetsSate();
    },
    methods: {
        handleClick(tab, event) {

        },
        // 获取所有用户下拉列表
        getAllUser() {
            this.$api.user.simpleAll().then(res => {
                if (res.code === 200) {
                    this.allUsers = res.data;
                }
            })
        },
        // 条件查询
        searchList() {
            // 重置分页
            this.listQuery.page = 1
            this.listQuery.size = 10
            this.getAssetsSate()
        },
        // 重置搜索条件
        resetParams() {
            this.exportStatus = true;
            this.selectDate = '';
            this.paymentDate = '' ;
            this.$router.push({ query: {} });
            this.listQuery = {
                current: 1,
                size: 10,
            }
            this.getAssetsSate();
        },
        getAssetsSate() {
            if (this.selectDate) {
                this.listQuery.startTime = this.selectDate[0] + ' 00:00:00';
                this.listQuery.endTime = this.selectDate[1] + ' 23:59:59';
            }
            if (this.paymentDate) {
                this.listQuery.payStartTime = this.paymentDate[0] + ' 00:00:00';
                this.listQuery.payEndTime = this.paymentDate[1] + ' 23:59:59';
            }
            this.$api.financeClaim.getAssetsSate(this.listQuery).then(res => {
                if (res.code === 200) {
                    this.pageData = res.data;
                    if (this.listQuery.startTime !== null && this.listQuery.endTime !== null && res.data.records.length > 0) {
                        this.exportStatus = false;
                    }else {
                        this.exportStatus = true;
                    }
                }
            })
        },
        exportAssetsStat() {
            this.$utils.exportUtil(
                "/financeClaim/assets/stat/export", this.listQuery,
                "导出"
            );
        }
    }
}
</script>
<style scoped lang="scss"></style>