<template>
    <!-- 初步设计 -->
    <div class="do-jump items bgc" id="page6">
        <!-- 标题 -->
        <div class="title">
            <span class="icon"></span>
            <span class="text">初步设计</span>
        </div>
        <!-- 详情 -->
        <div class="main-content" v-if="show">
            <el-table
                :data="data"
                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="establishmentApprovalUnit"
                    label="发证机关"
                    align="center"
                    :show-overflow-tooltip="true"
                    width="120"
                >
                    <template v-slot="{row}">
                        <a class="a-link">{{ row.establishmentApprovalUnit }}</a>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="establishmentDate"
                    label="批复日期"
                    width="100"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="totalEstimate"
                    label="概算总额(万元)"
                    align="center"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="类型"
                    align="center"
                    width="130"
                    :show-overflow-tooltip="true"
                >
                    <template v-slot="{row}">
                        {{ getDictName('xmgl-lxspjg', row.type) }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="proposedLocation"
                    label="建设位置"
                    align="center"
                    width="150"
                    :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 table-box" 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: 150px">发证机关</td>
                    <td>
                        {{ form.establishmentApprovalUnit }}
                    </td>
                    <td class="bgColor" style="width: 130px">批复日期</td>
                    <td style="width: 160px">{{ form.establishmentDate }}</td>
                </tr>
                <tr>
                    <td class="bgColor" style="width: 150px">概算总额(万元)</td>
                    <td>
                        {{ form.totalEstimate }}
                    </td>
                    <td class="bgColor">类型</td>
                    <td>{{ getDictName('gcgh-lx', form.type) }}</td>
                </tr>
                <tr>
                    <td class="bgColor" style="width: 150px">建设位置</td>
                    <td colspan="3">
                        {{ form.proposedLocation }}
                    </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">{{ form.remarks }}</td>
                </tr>
            </table>
            <dialog-accessory ref="accessory" :accessoryInfo="form.accessoryInfo" />
            <div class="flexEnd">
                <div class="end">
                    <!-- <span>项目名称：{{data.projectInfo && data.projectInfo.projectName}}</span> -->
                    <span>{{ form.projectInfo && form.projectInfo.projectManager }}</span>
                    <span>{{ form.projectInfo && form.projectInfo.commencementTime }}</span>
                </div>
            </div>
        </el-dialog>
        <!-- <dialog-accessory ref="accessory" /> -->
    </div>
</template>
<script>
import dialogAccessory from '../dialog/dialogAccessory.vue'
export default {
    name: 'preDesign',
    components: {
        dialogAccessory,
    },
    data() {
        return {
            data: [],
            show: true,
            dialogVisible: false,
            pageResult: {
                page: 1,
                pageSize: 5,
                total: 0,
            },
            form: {},
        }
    },
    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/preliminaryDesign/v1/page', param).then(
                (resp) => {
                    let data = resp.data.value.rows
                    if (data.length > 0) {
                        this.data = 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.form = data
        },
    },
}
</script>
<style lang="scss" scoped>
@import '../css/projectCommon.scss';
.page-footer {
    padding: 10px 0 20px 0;
    float: right;
    height: 38px;
}
.main-content {
    height: 368px;
}
</style>