<template>
    <!-- 规划许可 -->
    <div class="items bgc" id="page5">
        <!-- 标题 -->
        <div class="title">
            <span class="icon"></span>
            <span class="text">土地手续</span>
        </div>
        <!-- 详情 -->
        <!-- tabs切换 -->
        <div style="height: 100%">
            <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
                <!-- 选址 -->
                <el-tab-pane label="选址" name="siteSelection">
                    <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"
                            >
                                <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="proposedLocation"
                                label="拟选位置"
                                align="center"
                                :show-overflow-tooltip="true"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="proposedLandArea"
                                label="拟用地面积(平方米)"
                                align="center"
                                width="160"
                                :show-overflow-tooltip="true"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="establishmentScale"
                                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="
                                    (newSize) =>
                                        handleSizeChange(
                                            newSize,
                                            '${cqxy}/biz/feasiblePlan/planningApproval/site/v1/page'
                                        )
                                "
                                @current-change="
                                    (currPage) =>
                                        handleCurrentChange(
                                            currPage,
                                            '${cqxy}/biz/feasiblePlan/planningApproval/site/v1/page'
                                        )
                                "
                                :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 -->
                    <el-dialog
                        title="土地手续选址-详情"
                        :visible.sync="locationDialogVisible"
                        width="1000px"
                    >
                        <table align="center">
                            <tr>
                                <td class="bgColor" style="width: 130px">核发机关</td>
                                <td>
                                    <el-tooltip
                                        :content="locationForm.establishmentApprovalUnit"
                                        placement="top"
                                    >
                                        <p class="descStyle">
                                            {{ locationForm.establishmentApprovalUnit }}
                                        </p>
                                    </el-tooltip>
                                </td>
                                <td class="bgColor" style="width: 140px">核发日期</td>
                                <td style="width: 200px">{{ locationForm.establishmentDate }}</td>
                            </tr>
                            <tr>
                                <td class="bgColor">拟选位置</td>
                                <td>{{ locationForm.proposedLocation }}</td>
                                <td class="bgColor">拟用地面积(平方米)</td>
                                <td>{{ locationForm.proposedLandArea }}</td>
                            </tr>
                            <tr>
                                <td class="bgColor">拟建设规模</td>
                                <td colspan="3">{{ locationForm.establishmentScale }}</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">{{ locationForm.remarks }}</td>
                            </tr>
                        </table>
                        <dialog-accessory
                            ref="accessory"
                            :accessoryInfo="locationForm.accessoryInfo"
                        />
                        <div class="flexEnd">
                            <div class="end">
                                <!-- <span>项目名称：{{data.projectInfo && data.projectInfo.projectName}}</span> -->
                                <span>{{
                                    locationForm.projectInfo &&
                                    locationForm.projectInfo.projectManager
                                }}</span>
                                <span>{{
                                    locationForm.projectInfo &&
                                    locationForm.projectInfo.commencementTime
                                }}</span>
                            </div>
                        </div>
                    </el-dialog>
                </el-tab-pane>
                <!-- 土地 -->
                <el-tab-pane label="土地" name="land">
                    <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="handleRowLandClick"
                        >
                            <el-table-column type="index" label="序号" width="60" align="center">
                            </el-table-column>
                            <!-- <el-table-column
          prop="projectInfo.projectName"
          label="项目名称"
          align="center"
          :show-overflow-tooltip="true"
        > 
        </el-table-column>-->
                            <el-table-column
                                prop="establishmentApprovalUnit"
                                label="批准机关"
                                width="120"
                                align="center"
                                :show-overflow-tooltip="true"
                            >
                                <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="code"
                                label="编号"
                                align="center"
                                :show-overflow-tooltip="true"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="constructionUnit"
                                label="划拨用地使用权人"
                                align="center"
                                width="180"
                                :show-overflow-tooltip="true"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="parcelNumber"
                                label="宗地编号"
                                align="center"
                                width="150"
                                :show-overflow-tooltip="true"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="parcelPurpose"
                                label="宗地用途"
                                align="center"
                                width="100"
                                :show-overflow-tooltip="true"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="proposedLandArea"
                                label="宗地总面积(平方米)"
                                align="center"
                                width="180"
                                :show-overflow-tooltip="true"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="proposedLocation"
                                label="宗地位置"
                                align="center"
                                width="100"
                                :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="
                                    (newSize) =>
                                        handleSizeChange(
                                            newSize,
                                            '${cqxy}/biz/feasiblePlan/planningApproval/land/v1/page'
                                        )
                                "
                                @current-change="
                                    (currPage) =>
                                        handleCurrentChange(
                                            currPage,
                                            '${cqxy}/biz/feasiblePlan/planningApproval/land/v1/page'
                                        )
                                "
                                :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="landDialogVisible"
                        width="1000px"
                    >
                        <table align="center">
                            <tr>
                                <td class="bgColor" style="width: 140px">批准机关</td>
                                <td style="width: 300px">
                                    <el-tooltip
                                        :content="landForm.establishmentApprovalUnit"
                                        placement="top"
                                    >
                                        <p class="descStyle">
                                            {{ landForm.establishmentApprovalUnit }}
                                        </p>
                                    </el-tooltip>
                                </td>
                                <td class="bgColor" style="width: 140px">核发日期</td>
                                <td>{{ landForm.establishmentDate }}</td>
                            </tr>
                            <tr>
                                <td class="bgColor">编号</td>
                                <td>
                                    <el-tooltip :content="landForm.code" placement="top">
                                        <p class="descStyle">{{ landForm.code }}</p>
                                    </el-tooltip>
                                </td>
                                <td class="bgColor">划拨用地使用权人</td>
                                <td>
                                    <el-tooltip
                                        :content="landForm.constructionUnit"
                                        placement="top"
                                    >
                                        <p class="descStyle">{{ landForm.constructionUnit }}</p>
                                    </el-tooltip>
                                </td>
                            </tr>
                            <tr>
                                <td class="bgColor">宗地编号</td>
                                <td>{{ landForm.parcelNumber }}</td>
                                <td class="bgColor">宗地用途</td>
                                <td>{{ landForm.parcelPurpose }}</td>
                            </tr>
                            <tr>
                                <td class="bgColor">宗地总面积(平方米)</td>
                                <td>{{ landForm.proposedLandArea }}</td>
                            </tr>
                            <tr>
                                <td class="bgColor">宗地位置</td>
                                <td colspan="3">{{ landForm.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">{{ landForm.remarks }}</td>
                            </tr>
                        </table>
                        <dialog-accessory ref="accessory" :accessoryInfo="landForm.accessoryInfo" />
                        <div class="flexEnd">
                            <div class="end">
                                <!-- <span>项目名称：{{data.projectInfo && data.projectInfo.projectName}}</span> -->
                                <span>{{
                                    landForm.projectInfo && landForm.projectInfo.projectManager
                                }}</span>
                                <span>{{
                                    landForm.projectInfo && landForm.projectInfo.commencementTime
                                }}</span>
                            </div>
                        </div>
                    </el-dialog>
                </el-tab-pane>
                <!-- 用地 -->
                <el-tab-pane label="用地" name="useLand">
                    <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="handleRowUseLandClick"
                        >
                            <el-table-column type="index" label="序号" width="60" align="center">
                            </el-table-column>
                            <!-- <el-table-column
          prop="projectInfo.projectName"
          label="项目名称"
          align="center"
          :show-overflow-tooltip="true"
        > 
        </el-table-column>-->
                            <el-table-column
                                prop="establishmentApprovalUnit"
                                label="批准机关"
                                align="center"
                                width="120"
                                :show-overflow-tooltip="true"
                            >
                                <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="code"
                                label="编号"
                                align="center"
                                :show-overflow-tooltip="true"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="effectiveStartTime"
                                label="有效期开始时间"
                                align="center"
                                width="130"
                                :show-overflow-tooltip="true"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="effectiveEndTime"
                                label="有效期结束时间"
                                align="center"
                                width="150"
                                :show-overflow-tooltip="true"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="establishmentRemarks"
                                label="取得使用权方式"
                                align="center"
                                width="150"
                                :show-overflow-tooltip="true"
                            >
                                <template v-slot="{row}">
                                    {{
                                        getDictName('ydgl-qdtdsyqfs', row.landRightAcquisitionMode)
                                    }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="parcelPurpose"
                                label="土地用途"
                                align="center"
                                width="150"
                                :show-overflow-tooltip="true"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="proposedLandArea"
                                label="用地总面积(平方米)"
                                align="center"
                                width="180"
                                :show-overflow-tooltip="true"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="buildingFloorAreaRatio"
                                label="用地容积率"
                                align="center"
                                width="150"
                                :show-overflow-tooltip="true"
                            >
                            </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="150"
                                :show-overflow-tooltip="true"
                            >
                            </el-table-column>
                        </el-table>
                        <div class="page-footer">
                            <el-pagination
                                @size-change="
                                    (newSize) =>
                                        handleSizeChange(
                                            newSize,
                                            '${cqxy}/biz/feasiblePlan/planningApproval/useLand/v1/page'
                                        )
                                "
                                @current-change="
                                    (currPage) =>
                                        handleCurrentChange(
                                            currPage,
                                            '${cqxy}/biz/feasiblePlan/planningApproval/useLand/v1/page'
                                        )
                                "
                                :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="useLandDialogVisible"
                        width="1000px"
                    >
                        <table align="center">
                            <tr>
                                <td class="bgColor" style="width: 130px">批准机关</td>
                                <td>
                                    <el-tooltip
                                        :content="useLandForm.establishmentApprovalUnit"
                                        placement="top"
                                    >
                                        <p class="descStyle">
                                            {{ useLandForm.establishmentApprovalUnit }}
                                        </p>
                                    </el-tooltip>
                                </td>
                                <td class="bgColor" style="width: 140px">批准日期</td>
                                <td style="width: 200px">{{ useLandForm.establishmentDate }}</td>
                            </tr>
                            <tr>
                                <td class="bgColor">编号</td>
                                <td>
                                    <el-tooltip :content="useLandForm.code" placement="top">
                                        <p class="descStyle">{{ useLandForm.code }}</p>
                                    </el-tooltip>
                                </td>
                                <td class="bgColor">有效期开始时间</td>
                                <td>
                                    {{ useLandForm.effectiveStartTime }}
                                </td>
                            </tr>
                            <tr>
                                <td class="bgColor">有效期结束时间</td>
                                <td>{{ useLandForm.effectiveEndTime }}</td>
                                <td class="bgColor">取得使用权方式</td>
                                <td>
                                    {{
                                        getDictName(
                                            'ydgl-qdtdsyqfs',
                                            useLandForm.landRightAcquisitionMode
                                        )
                                    }}
                                </td>
                                <!-- <td class="bgColor">开工时间</td>
                <td>{{ data.commencementTime }}</td> -->
                            </tr>
                            <!-- <tr>
                <td class="bgColor">竣工时间</td>
                <td>{{ data.completionTime }}</td>
               
              </tr> -->
                            <tr>
                                <td class="bgColor">土地用途</td>
                                <td>{{ useLandForm.parcelPurpose }}</td>
                                <td class="bgColor">用地总面积(平方米)</td>
                                <td>{{ useLandForm.proposedLandArea }}</td>
                            </tr>
                            <tr>
                                <td class="bgColor">用地容积率</td>
                                <td>{{ useLandForm.buildingFloorAreaRatio }}</td>
                                <td class="bgColor">土地位置</td>
                                <td>
                                    <el-tooltip
                                        :content="useLandForm.proposedLocation"
                                        placement="top"
                                    >
                                        <p class="descStyle">{{ useLandForm.proposedLocation }}</p>
                                    </el-tooltip>
                                </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">{{ useLandForm.remarks }}</td>
                            </tr>
                        </table>
                        <dialog-accessory
                            ref="accessory"
                            :accessoryInfo="useLandForm.accessoryInfo"
                        />
                        <div class="flexEnd">
                            <div class="end">
                                <!-- <span>项目名称：{{data.projectInfo && data.projectInfo.projectName}}</span> -->
                                <span>{{
                                    useLandForm.projectInfo &&
                                    useLandForm.projectInfo.projectManager
                                }}</span>
                                <span>{{
                                    useLandForm.projectInfo &&
                                    useLandForm.projectInfo.commencementTime
                                }}</span>
                            </div>
                        </div>
                    </el-dialog>
                </el-tab-pane>
                <!-- 工程规划 -->
                <!-- <el-tab-pane label="工程规划" name="porjectPlanning">
          <planning :projectId="projectId" ref="planning" />
        </el-tab-pane> -->
            </el-tabs>
        </div>
        <!-- <dialog-accessory ref="accessory" /> -->
    </div>
</template>
<script>
import dialogAccessory from '../dialog/dialogAccessory.vue'
import planning from './planning.vue'
export default {
    name: 'planPermission',
    components: {
        dialogAccessory,
        // planning,
    },
    data() {
        return {
            data: [],
            show: true,
            activeName: 'siteSelection',
            projectId: '',
            locationDialogVisible: false, //选址弹窗
            locationForm: {}, //选址弹窗数据
            landForm: {}, //土地弹窗数据,
            landDialogVisible: false, //土地弹窗展示
            useLandForm: {}, //用地数据展示
            useLandDialogVisible: false, //用地弹窗展示
            pageResult: {
                page: 1,
                pageSize: 5,
                total: 0,
            },
        }
    },
    mounted() {
        this.loadData()
    },
    methods: {
        //附件
        handleLook(obj) {
            this.$refs.accessory.open(obj)
        },
        //点击tabs
        handleClick(tab, event) {
            this.pageResult = {
                page: 1,
                pageSize: 5,
                total: 0,
            }
            switch (tab.paneName) {
                case 'siteSelection':
                    let site = '${cqxy}/biz/feasiblePlan/planningApproval/site/v1/page'
                    this.loadData(site)
                    break
                case 'land':
                    let land = '${cqxy}/biz/feasiblePlan/planningApproval/land/v1/page'
                    this.loadData(land)
                    break
                case 'useLand':
                    let useLand = '${cqxy}/biz/feasiblePlan/planningApproval/useLand/v1/page'
                    this.loadData(useLand)
                    break
                default:
                    this.$refs.planning.loadData()
            }
        },
        loadData(url) {
            this.projectId = this.$route.params.id
            let param = {
                pageBean: {
                    ...this.pageResult,
                },
                querys: [
                    {
                        group: 'main',
                        operation: 'EQUAL',
                        parentGroup: '',
                        property: 'PROJECT_ID_ ',
                        relation: 'AND',
                        value: this.$route.params.id,
                    },
                ],
            }
            if (url) {
                this.$http.post(url, param).then(
                    (resp) => {
                        let data = resp.data.value.rows
                        if (data.length > 0) {
                            this.pageResult = {
                                page: resp.data.value.page,
                                pageSize: resp.data.value.pageSize,
                                total: resp.data.value.total,
                            }
                            this.data = data
                            this.show = true
                        } else {
                            this.show = false
                        }
                    },
                    (error) => {
                        reject(error)
                    }
                )
            } else {
                this.$http
                    .post('${cqxy}/biz/feasiblePlan/planningApproval/site/v1/page', param)
                    .then(
                        (resp) => {
                            let data = resp.data.value.rows
                            if (data.length > 0) {
                                this.data = 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)
                        }
                    )
            }
        },
        handleRowDBClick(data) {
            this.locationForm = data
            this.locationDialogVisible = true
        },
        //土地弹窗
        handleRowLandClick(data) {
            this.landDialogVisible = true
            this.landForm = data
        },
        //用地弹窗
        handleRowUseLandClick(data) {
            this.useLandForm = data
            this.useLandDialogVisible = true
        },
        handleSizeChange(val, url) {
            this.pageResult.pageSize = val
            this.loadData(url)
        },
        handleCurrentChange(val) {
            this.pageResult.page = val
            this.loadData(url)
        },
    },
}
</script>
<style lang="scss" scoped>
@import '../css/projectCommon.scss';
.main-content {
    padding: 10px;
    height: 100%;
}

/deep/ .el-tabs__item {
    font-size: 18px !important;
}
/deep/ .el-tabs__content {
    background: #fff !important;
    padding: 0 !important;
    height: calc(100% - 50px);
}
/deep/ .el-tabs {
    height: 100%;
}
/deep/ .content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/deep/ .el-pagination {
    height: 30px;
}
.el-tab-pane {
    // border: 1px solid blue;
    height: 100%;
}
.page-footer {
    padding: 10px 0 20px 0;
    float: right;
    height: 38px;
}
</style>