<template>
    <div class="container">

        <div class="card">

            <searchForm :keys="['state']" ref="searchForm"
                        @on-search="handleSearch">
                <el-button type="primary" icon="el-icon-plus" plain size="small" @click="addVoteActivity" >新增</el-button>
            </searchForm>

            <RxTable
                    ref="rxTable"
                    @sizeChange="changePageSize"
                    @pageChange="changePage"

                    :currentPage="pageInfo.page"

                    :page-count="listData.pageQuantity"
                    :data="listData.list"
                    :blank-col="true"
                    :loading="loading"
            >
                <el-table-column
                        :align="item.align || 'left'"
                        :prop="item.prop"

                        :label="item.label"
                        :key="item.id"
                        v-for="(item) in tableHeader"
                        :show-overflow-tooltip="true"
                        :width="item.width"
                        :min-width="item.minWidth"
                >
                    <template slot-scope="scope">
                        <div v-if="item.prop == 'certificateUrl'">
                            <el-image fit="fill" :src="scope.row[item.prop]" style="height: 36px;width: 80px;"  :preview-src-list="[scope.row[item.prop]]"></el-image>
                        </div>
                        <div v-else-if="item.prop == 'state'">
                              <span  style="color:red" v-if="scope.row.state == 2">审核 </span>
                              <span style="color:green" v-if="scope.row.state == 1">审核通过 </span>
                        </div>

                        <span v-else>{{ scope.row[item.prop] || scope.row[item.prop] == 0 ? scope.row[item.prop] : '-' }} </span>


                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="left" width="200">
                    <template slot-scope="scope">
                        <el-button type="text" class="btn_text_edit" icon="el-icon-edit" @click="handleEdit(scope.row)" v-if="scope.row.state == 2">审核 </el-button>

                    </template>
                </el-table-column>
            </RxTable>
        </div>

        <el-dialog
                title="审核"
                :visible.sync="dialogVisible"
                width="800px"
                :lock-scroll="false">
            <verify ref="verify"></verify>
            <span slot="footer" class="dialog-footer">
                    <el-button type="success" icon="el-icon-check" @click="handleAduit(1)">通过</el-button>
                    <el-button type="danger" icon="el-icon-close" @click="handleAduit(2)">不通过</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
    import searchForm from "@/components/searchForm";
    import RxTable from "@/components/RxTable";
    import verify from "./verify";



    export default {
        name: "index",
        components: {
            searchForm,
            RxTable,
            verify

        },
        data() {
            return {

                searchParams: {},
                loading: false,
                dialogVisible: false,
                tableHeader: [
                    {
                        prop: "idNumber",
                        label: "身份证号码",
                        width: "300"
                    },
                    {
                        prop: "realName",
                        label: "业主姓名",
                        width: "300"
                    },
                    {
                        prop: "certificateUrl",
                        label: "图片",
                        width: "120"
                    },
                    {
                        prop: "state",
                        label: "状态",
                        width: "120"
                    },

                ],
                listData: {
                    list: [],
                    pageQuantity:0,
                },
                pageInfo: {
                    pageNum: 1,
                    pageCapacity: 10,
                },
                addVisible: false,
                dialogVisibleUpdate: false,
            }
        },
        methods: {
            handleAduit(state){
                let {passportId,houseId} = this.$refs.verify.form;

                let params = {
                    passportId,
                    houseId,
                    state
                }
                this.$api.verifyHouseRelation(params).then(res => {
                    console.log(res)
                    this.$message.success("处理成功！");
                    this.dialogVisible = false;
                    this.handleSearch()
                })
            },
            addVoteActivity(){
                this.dialogVisible = true;
            },
            handleInfo(row){
                console.log(row)
                // this.$router_({
                //     name:"voteActivityInfo",
                //     title:"活动详情",
                //     canClose:true,
                //     params:{
                //         ...row
                //     }
                // })
                // this.$router.push({
                //   name:"voteActivityInfo",
                //   params:{
                //     activityId:row.activityId
                //   }
                // })
            },
            handleEdit(row) {
                console.log(row)
                this.dialogVisible = true;

                this.$nextTick(() => {
                    this.$refs.verify.form = JSON.parse(JSON.stringify(row))
                })
                // this.$router_({
                //     name:"audio",
                //     title:"审核",
                //     canClose:true,
                //     params:{
                //         ...row
                //     }
                // })

            },

            handleDelete(row){
                this.$confirm('确认刪除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                })

            },

            onSubmit(type="add") {
                let form = this.$refs.activityForm.form;

                console.log(type)


                if(type =="add"){
                    this.$api.addVoteActivity(form).then(res => {
                        this.$message.success("新增成功！");
                        this.dialogVisible = false;
                        this.handleSearch();
                    })
                }else{
                    this.$api.editVoteActivity(form).then(res => {
                        this.$message.success("编辑成功！");
                        this.dialogVisibleUpdate = false;
                        this.handleSearch();
                    })
                }

            },

            goDeleteSelect() {

            },
            //搜索
            handleSearch() {
                this.pageInfo.pageNum = 1



                this.getHouseRelations()
            },


            getHouseRelations() {
                let state = this.$refs.searchForm.form.state;


                this.searchParams = {
                    ...this.pageInfo,
                    state
                }

                this.loading = true;

                this.$api.getHouseRelations(this.searchParams).then(res => {
                    this.loading = false;
                    console.log(res)
                    this.listData.list = res.content.list;

                    this.listData.pageQuantity = res.content.pageQuantity;

                })
            },


            changePageSize() {

            },
            changePage(page) {

                this.pageInfo.pageNum = page
                this.voteList()
            },

        },
        mounted() {
            this.handleSearch()
        }
    }
</script>

<style lang="less" scoped>
    .container {
        /*position: relative;*/

        .btnBox {
            margin-left: 20px;
        }
    }
</style>
