<template>
    <div class="suggestions container">
        <div class="card">
            <voteChart ref="voteChart"></voteChart>

            <RxTable
                    ref="rxTable"


                    :data="listData.list"
                    :blank-col="true"
                    :loading="loading"
                    :page-count="listData.pageQuantity"
                    :currentPage="pageInfo.page"
            >


                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="top" class="demo-table-expand">
                            <el-form-item  label="意见详情："  style="margin-left: 10px;">
                                <div style="width: calc(100% - 30px); margin: 0 auto; word-break:break-all" >{{ props.row .suggestion}}</div>
                            </el-form-item>

                        </el-form>
                    </template>
                </el-table-column>

                <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 == 'flag'" style="height: 36px;">
                            <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 == 'tvCounts'">
                            <el-tag size="small" style="width: 50px;text-align: center;" @click="goTvList(scope.row)">{{scope.row[item.prop]}}</el-tag>
                        </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" icon="el-icon-search" @click="handleChart(scope.row)">查看结果</el-button>-->
                <!--              <el-button type="text" class="btn_text_edit" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑-->
                <!--              </el-button>-->

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

<script>
    import RxTable from "../../components/RxTable";
    export default {
        name: "index",
        data(){
            return {
                loading:false,
                pageInfo: {
                    page: 1,
                    pageCapacity: 10,
                },
                listData:{
                    list:[]
                },
                tableHeader: [
                    {
                        prop: "passportName",
                        label: "意见人",
                        width: "120"
                    },

                    {
                        prop: "suggestion",
                        label: "意见",

                    },

                ],
            }
        },
        components:{
          RxTable
        },
        methods:{
            init(){
                this.suggestion()
            },
            suggestion(){
                this.loading = true;
                this.$api.suggestion({
                    ...this.pageInfo
                }).then(res => {
                    console.log(res)
                    this.loading = false;
                    this.listData.list = res.content.suggestions
                    this.listData.pageQuantity = parseInt(res.content.pageQuantity)
                })
            },
            changePage(page) {

                this.pageInfo.page = page
                // this.init()
            },
        },
        mounted() {
            this.init()
        }
    }
</script>

<style scoped>

</style>
