<template>
    <!-- 可研批复 -->
    <div class="items bgc" id="page4">
        <!-- 标题 -->
        <div class="title">
            <span class="icon"></span>
            <span class="text">可研批复</span>
        </div>
        <!-- 详情 -->
        <div class="main-content" v-if="show">
            <el-table
                :data="listData"
                height="300"
                border
                style="width: 100%"
                :header-cell-style="{background: '#f2f2f2', color: '#000'}"
                @row-click="handleRowDBClick"
            >
                <el-table-column type="index" label="序号" width="60" align="center">
                </el-table-column>

                <el-table-column
                    prop="landCost"
                    label="土地成本(万元)"
                    align="center"
                    :show-overflow-tooltip="true"
                    width="150"
                >
                    <template v-slot="{row}">
                        <a class="a-link">{{ row.landCost }}</a>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="engineeringCost"
                    label="工程费用(万元)"
                    width="150"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="reserveCost"
                    label="预备费用(万元)"
                    align="center"
                    width="180"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="engineeringOtherCost"
                    label="建设其他费用(万元)"
                    align="center"
                    width="180"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="establishmentInvestmentAmount"
                    label="总投资(万元)"
                    align="center"
                    width="200"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="remarks"
                    label="备注"
                    align="center"
                    width="180"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
            </el-table>
            <div class="page-footer">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageResult.page"
                    :page-sizes="[5, 10, 20, 30, 50]"
                    :page-size="pageResult.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageResult.total"
                >
                </el-pagination>
            </div>
        </div>
        <div class="main-content table-box" v-else>
            <el-empty description="暂无数据" :image-size="100"></el-empty>
        </div>
        <!-- <dialog-accessory ref="accessory" /> -->
        <el-dialog title="可研批复-详情" :visible.sync="dialogVisible" width="1000px">
            <table align="center">
                <tr>
                    <td class="bgColor" style="width: 130px">土地成本(万元)</td>
                    <td>{{ data.landCost }}</td>
                    <td class="bgColor" style="width: 150px">工程费用(万元)</td>
                    <td>{{ data.engineeringCost }}</td>
                </tr>
                <tr>
                    <td class="bgColor">预备费用(万元)</td>
                    <td>{{ data.reserveCost }}</td>
                    <td class="bgColor">建设其他费用(万元)</td>
                    <td>{{ data.engineeringOtherCost }}</td>
                </tr>
                <tr>
                    <td class="bgColor">总投资(万元)</td>
                    <td>{{ data.establishmentInvestmentAmount }}</td>
                    <td class="bgColor"></td>
                    <td></td>
                </tr>
                <!-- <tr>
            <td  class="bgColor">附件信息</td>
            <td colspan="3">
            <el-link type="primary" @click="handleLook(data.accessoryInfo)" v-if="data.accessoryInfo && data.accessoryInfo.length>0">查看附件({{data.accessoryInfo.length}}个)</el-link>
            <span v-else>无</span>
            </td>
          </tr> -->
                <tr>
                    <td class="bgColor">备注</td>
                    <td colspan="3">{{ data.remarks }}</td>
                </tr>
            </table>
            <dialog-accessory ref="accessory" :accessoryInfo="data.accessoryInfo" />
            <div class="flexEnd">
                <div class="end">
                    <!-- <span>项目名称：{{data.projectInfo && data.projectInfo.projectName}}</span> -->
                    <span>{{ data.projectInfo && data.projectInfo.projectManager }}</span>
                    <span>{{ data.projectInfo && data.projectInfo.commencementTime }}</span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import dialogAccessory from '../dialog/dialogAccessory.vue'
export default {
    name: 'feasibleReply',
    components: {
        dialogAccessory,
    },
    data() {
        return {
            data: {},
            show: true,
            dialogVisible: false,
            listData: [],
            pageResult: {
                page: 1,
                pageSize: 5,
                total: 0,
            },
        }
    },
    mounted() {
        this.loadData()
    },
    methods: {
        //附件
        handleLook(obj) {
            this.$refs.accessory.open(obj)
        },
        loadData() {
            let param = {
                pageBean: {
                    ...this.pageResult,
                },
                querys: [
                    {
                        group: 'main',
                        operation: 'EQUAL',
                        parentGroup: '',
                        property: 'PROJECT_ID_ ',
                        relation: 'AND',
                        value: this.$route.params.id,
                    },
                ],
            }
            this.$http.post('${cqxy}/biz/feasiblePlan/feasibilityStudyReply/v1/page', param).then(
                (resp) => {
                    let data = resp.data.value.rows
                    if (data.length > 0) {
                        this.listData = data
                        this.show = true
                        this.pageResult = {
                            page: resp.data.value.page,
                            pageSize: resp.data.value.pageSize,
                            total: resp.data.value.total,
                        }
                    } else {
                        this.show = false
                    }
                },
                (error) => {
                    reject(error)
                }
            )
        },
        handleSizeChange(val) {
            this.pageResult.pageSize = val
            this.loadData()
        },
        handleCurrentChange(val) {
            this.pageResult.page = val
            this.loadData()
        },
        handleRowDBClick(data) {
            this.dialogVisible = true
            this.data = data
        },
    },
}
</script>
<style lang="scss" scoped>
@import '../css/projectCommon.scss';
.main-content {
    height: 368px;
}
.page-footer {
    padding-top: 10px;
    float: right;
    height: 38px;
}
</style>