<template>
    <!-- 概算批复 -->
    <div class="do-jump items bgc" id="page7">
        <!-- 标题 -->
        <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="sourceFunds"
                    label="资金来源"
                    width="100"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                    <template v-slot="{row}">
                        <a class="a-link">{{ row.sourceFunds }}</a>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="establishmentApprovalUnit"
                    label="审核单位"
                    align="center"
                    :show-overflow-tooltip="true"
                    width="120"
                >
                </el-table-column>

                <el-table-column
                    prop="totalEstimate"
                    label="审定概算总投资(万元)"
                    align="center"
                    width="180"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="engineeringCost"
                    label="建安工程费用(万元)"
                    align="center"
                    width="180"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="engineeringOtherCost"
                    label="工程建设其他费用(万元)"
                    align="center"
                    width="200"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="readyCost"
                    label="预备费用(万元)"
                    align="center"
                    width="180"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="designSpeed"
                    label="土地费用(万元)"
                    align="center"
                    width="180"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="remarks"
                    label="备注"
                    align="center"
                    width="100"
                    :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" v-else>
            <el-empty description="暂无数据" :image-size="100"></el-empty>
        </div>
        <el-dialog title="概算批复-详情" :visible.sync="dialogVisible" width="1000px">
            <table align="center">
                <tr>
                    <td class="bgColor" style="width: 180px">审核单位</td>
                    <td>
                        <el-tooltip :content="data.establishmentApprovalUnit" placement="top">
                            <p class="descStyle">{{ data.establishmentApprovalUnit }}</p>
                        </el-tooltip>
                    </td>
                    <td class="bgColor" style="width: 150px">资金来源</td>
                    <td style="width: 220px">{{ data.sourceFunds }}</td>
                </tr>
                <tr>
                    <td class="bgColor">审定概算总投资(万元)</td>
                    <td>{{ data.totalEstimate }}</td>
                    <td class="bgColor">建安工程费用(万元)</td>
                    <td>{{ data.engineeringCost }}</td>
                </tr>
                <tr>
                    <td class="bgColor">工程建设其他费用(万元)</td>
                    <td>{{ data.engineeringOtherCost }}</td>
                    <td class="bgColor">预备费用(万元)</td>
                    <td>{{ data.readyCost }}</td>
                </tr>
                <tr>
                    <td class="bgColor">土地费用(万元)</td>
                    <td>{{ data.designSpeed }}</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>
        <!-- <dialog-accessory ref="accessory" /> -->
    </div>
</template>
<script>
import dialogAccessory from '../dialog/dialogAccessory.vue'
export default {
    name: 'estimate',
    components: {
        dialogAccessory,
    },
    data() {
        return {
            data: {},
            show: true,
            listData: [],
            pageResult: {
                page: 1,
                pageSize: 5,
                total: 0,
            },
            dialogVisible: false,
        }
    },
    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/designEstimate/estimate/v1/page', param).then(
                (resp) => {
                    let data = resp.data.value.rows
                    if (data.length > 0) {
                        this.listData = data
                        this.pageResult = {
                            page: resp.data.value.page,
                            pageSize: resp.data.value.pageSize,
                            total: resp.data.value.total,
                        }
                        this.show = true
                    } 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';
.page-footer {
    padding-top: 10px;
    float: right;
    height: 38px;
}
.main-content {
    height: 368px;
}
</style>