<template>
    <div id="UpdatePassword">
        <el-row>
            <el-col :span="24">
                <div class="container">
                    <div class="middle">
<!--                        <div class="w_1200">-->
<!--                            <span class="title">服务金融机构</span>-->
<!--                            <el-divider class="divider" content-position="right" ></el-divider>-->
<!--                        </div>-->
                        <div class="w_12001">
                            <el-row :span="24" style="margin-top: 30px" v-for="(item,index) in tableDatas" :key="index">
                                <el-col :span="4" class="left">
                                    <img :src="item.logo" class="image">
                                </el-col>
                                <el-col :span="14" class="left_left">
                                    <span class="red"></span><span
                                        style="font-size:16px;font-family:Source Han Sans SC;font-weight:bold;">{{item.name}}</span>
                                    <div class="content">{{item.introduction}}</div>
                                </el-col>
                                <el-col :span="4">
                                    <el-button class="change_button" @click="detail(item.id)">查看详情</el-button>
                                </el-col>
                                <el-divider></el-divider>
                            </el-row>

                        </div>
                        <div class="fenye">
                            <pagination :currentPage="fenye.pageNum" :rows="fenye.pageSize" :total="total"
                                        @handleCurrentChangeSub="handleCurrentChange"/>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import pagination from '@/components/pagination.vue';
    import {financialInstitutionResult} from '../../api';

    export default {
        name: 'UpdatePassword',
        props: {},
        components: {
            pagination
        },
        data: () => ({
            tableDatas: [],
            fenye: {
                pageNum: 1,
                pageSize: 2,
            },
            total: 0,
            formData: {
                skip: 0,
                limit: 2
            }
        }),
        created() {
        },
        computed: {},
        methods: {
            back() {
                this.$router.push({
                    path: '/',
                })
            },
            handleCurrentChange(row) {
                console.log(`当前页: ${row}`);
                this.formData.skip = (row - 1) * this.fenye.pageSize;
                this.all();
            },
            detail(id) {
                this.$router.push({
                    path: '/ServiceResultDetail',
                    query: {
                        id: id,
                    },
                });
            },
            async all() {
                console.log(this.formData, "传参")
                const result = await financialInstitutionResult(this.formData);
                console.log(result, "dayin")
                this.total = result.total;
                this.tableDatas = result.data;
            }
        },
        mounted() {
            this.all();
        }
    };
</script>

<style lang="less" scoped>
    #myChart10 {
        width: 100%;
        height: 700px;
        margin-left: 30px;
    }

    .container {
        /*width: 1920px;*/
        /*height: 1080px;*/
        /*margin: 0 auto;*/
        /*width: 1920px;*/
        /*margin: 0 auto;*/
        //height: 100vh;
        /*overflow-x: hidden;*/
    }
    .middle{
        background-color: #f0f6fb;
    }

    .header {
        /*height: 100px;*/
        /*width: 1920px;*/
        background: rgba(42, 46, 67, 1);
    }

    .w_1200 {
        width: 1200px;
        margin: 0 auto;
    }

    .w_12001 {
        width: 1200px;
        margin: 0 auto;
        background-color: white;
        box-sizing: border-box;
        margin-bottom: 30px;
    }
    .w_12001 div :first-child{
        margin-top: 30px;
    }

    /deep/ .el-divider--horizontal {
        display: inline-block;

    }
    .divider {
        display: inline-block;
        width: 80%
    }
    .title {
        position: relative;
        top: -20px;
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: rgba(0, 0, 0, 1);
    }

    /deep/ .el-divider__text {
        font-size: 14px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: rgba(233, 2, 29, 1);
        cursor: pointer;
    }

    .image {
        width: 152px;
        height: 50px;
        border: 1px black dashed;
    }

    .left {
        width: 200px;
        height: 100px;
        text-align: center;
        line-height: 150px;
    }

    .left_left {
        margin-left: 40px;
        width: 750px;
    }

    .content {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        overflow: hidden;
        margin-top: 5px;
    }
    .change_button {
        padding:18px 45px;
        background:#e9021d;
        color:white;
    }

    .footer {
        height: 323px;
    }

    .fenye {
        /*width: 430px;*/
        width: 1200px;
        height: 80px;
        margin: 40px auto !important;
        text-align: center;
    }

    .red {
        display: inline-block;
        width: 4px;
        height: 20px;
        background-color: #e9021d;
        vertical-align: text-bottom;
        margin-right: 10px;
    }

</style>
