<template>
  <div class="container-main" ref="main">
    <div class="search-hearder" ref="topSearch">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="auto"
      >
        <el-form-item label="园区名称" prop="parkName">
          <el-input
            v-model="queryParams.parkName"
            placeholder="请输入园区名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="layui-table-tool" ref="tableTool">
      <el-button
        type="primary"
        size="mini"
        @click="handleAdd"
        v-hasPermi="['mudu:profile:add']"
        >新增</el-button
      >
      <el-button
        type="warning"
        size="mini"
        :loading="exportLoading"
        @click="handleExport"
        v-hasPermi="['mudu:profile:export']"
        >导出</el-button
      >
    </div>

    <el-table
      v-loading="loading"
      :data="profileList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" />
      <el-table-column label="编号" align="center" prop="id" width="55">
        <template slot-scope="scop">
          {{
            scop.$index + 1 + (queryParams.pageNum - 1) * queryParams.pageSize
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="园区名称"
        align="center"
        prop="parkName"
        width="200"
      />
      <el-table-column label="归属地" align="center" prop="homeLocation" />
      <el-table-column
        label="企业数量"
        align="center"
        prop="numberEnterprises"
      />
      <el-table-column label="占地面积" align="center" prop="floorArea" />
      <el-table-column label="占地面积" align="center" prop="floorAreaT" />
      <!-- <el-table-column label="更新时间" align="center" prop="updateTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column> -->
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-view"
            @click="handleInfo(scope.row)"
            v-hasPermi="['mudu:profile:list']"
          >
            查看
          </el-button>
          <el-button
            size="mini"
            icon="el-icon-edit"
            type="primary"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['mudu:profile:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            icon="el-icon-delete"
            type="danger"
            @click="handleDelete(scope.row)"
            v-hasPermi="['mudu:profile:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改园区概况对话框 -->
    <el-dialog
      :visible.sync="open"
      width="1200px"
      append-to-body
      custom-class="dialog-box"
      :before-close="handleClose"
    >
      <div slot="title" class="dialog-title">
        {{ title }}
      </div>

      <el-steps :active="active" finish-status="success" align-center>
        <el-step
          :title="title.slice(0, 2) + '园区概括'"
          @click.native="elTabSwitch2(0)"
        >
        </el-step>
        <el-step
          :title="title.slice(0, 2) + '负责人'"
          @click.native="elTabSwitch2(1)"
        ></el-step>
        <el-step
          :title="title.slice(0, 2) + '园内专有物资'"
          @click.native="elTabSwitch2(2)"
        ></el-step>
        <el-step
          :title="title.slice(0, 2) + '园内监控'"
          @click.native="elTabSwitch2(3)"
        ></el-step>
        <el-step
          :title="title.slice(0, 2) + '园内风险企业'"
          @click.native="elTabSwitch2(4)"
        ></el-step>
      </el-steps>
      <div style="height: 440px; overflow: auto" v-loading="loadS">
        <!-- 园区概括 -->
        <div v-if="active == 0">
          <header class="tops">
            <span>园区概括</span>
          </header>
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="130px"
            custom-class="dialog-from"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="园区名称" prop="parkName">
                  <el-input
                    v-model="form.parkName"
                    placeholder="请输入园区名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="园区地址" prop="parkAddress">
                  <el-input
                    v-model="form.parkAddress"
                    placeholder="请输入园区地址"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="归属地" prop="homeLocation">
                  <el-input
                    v-model="form.homeLocation"
                    placeholder="请输入归属地"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="楼幢数量" prop="numberBuildings">
                  <el-input
                    v-model.number="form.numberBuildings"
                    placeholder="请输入楼幢数量(幢)"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="企业数量" prop="numberEnterprises">
                  <el-input
                    v-model.number="form.numberEnterprises"
                    placeholder="请输入企业数量(家)"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="员工总人数" prop="totalEmployees">
                  <el-input
                    v-model.number="form.totalEmployees"
                    placeholder="请输入员工总人数(人)"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="占地面积" prop="floorArea">
                  <el-input
                    v-model.number="form.floorArea"
                    placeholder="请输入占地面积(m²)"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="占地面积" prop="floorAreaT">
                  <el-input
                    v-model.number="form.floorAreaT"
                    placeholder="请输入占地面积(亩)"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="总建筑面积" prop="totalBuildingArea">
                  <el-input
                    v-model.number="form.totalBuildingArea"
                    placeholder="请输入总建筑面积(m²)"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="出租面积" prop="rentalArea">
                  <el-input
                    v-model.number="form.rentalArea"
                    placeholder="请输入出租面积(m²)"
                  /> </el-form-item
              ></el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="自用面积" prop="selfArea">
                  <el-input
                    v-model.number="form.selfArea"
                    placeholder="请输入自用面积(m²)"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="年租金总额" prop="totalAnnualRent">
                  <el-input
                    v-model.number="form.totalAnnualRent"
                    placeholder="请输入年租金总额(万元)"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="平均月租金单价"
                  prop="averageMonthlyRentalUnitPrice"
                >
                  <el-input
                    v-model.number="form.averageMonthlyRentalUnitPrice"
                    placeholder="请输入平均月租金单价(元/m²/月)"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="土地证面积" prop="landCertificateArea">
                  <el-input
                    v-model.number="form.landCertificateArea"
                    placeholder="请输入土地证面积(亩)"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="无证面积" prop="unlicensedArea">
                  <el-input
                    v-model.number="form.unlicensedArea"
                    placeholder="请输入无证面积(m²)"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="无证面积" prop="unlicensedAreaT">
                  <el-input
                    v-model.number="form.unlicensedAreaT"
                    placeholder="请输入无证面积(亩)"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="房产证面积"
                  prop="realEstateCertificateArea"
                >
                  <el-input
                    v-model.number="form.realEstateCertificateArea"
                    placeholder="请输入房产证面积(m²)"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="年总税收" prop="annualGrossTaxRevenue">
                  <el-input
                    v-model.number="form.annualGrossTaxRevenue"
                    placeholder="请输入年总税收(万元)"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="亩均税收" prop="taxPerMu">
                  <el-input
                    v-model.number="form.taxPerMu"
                    placeholder="请输入亩均税收(万元/千平方米)"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="层级" prop="zoom">
                  <el-input
                    v-model.number="form.zoom"
                    placeholder="请输入层级"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="经纬度" prop="latlng">
              <el-input v-model.number="form.latlng" placeholder="请输入经纬度" />
            </el-form-item>
            <el-form-item label="园区原始ID" prop="parkOrgId">
              <el-input v-model.number="form.parkOrgId" placeholder="请输入园区原始ID" />
            </el-form-item>
          </el-form>
          <!-- <div class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div> -->
        </div>
        <!-- 负责人 -->
        <div v-if="active == 1">
          <header class="tops">
            <span>负责人管理</span>
          </header>
          <principal :addId="addId" :addName="addName"></principal>
        </div>
        <!-- 园内专有物资管理 -->
        <div v-if="active == 2">
          <header class="tops">
            <span>园内专有物资管理</span>
          </header>
          <materials :addId="addId" :addName="addName"></materials>
        </div>
        <!-- 园内监控管理 -->
        <div v-if="active == 3">
          <header class="tops">
            <span>园内监控管理</span>
          </header>
          <monitor :addId="addId" :addName="addName"></monitor>
        </div>
        <!-- 风险企业管理 -->
        <div v-if="active == 4">
          <header class="tops">
            <span>风险企业管理 </span>
          </header>
          <management :addId="addId" :addName="addName"></management>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="stepAdd()"
          v-if="active >= 1 && active <= 4"
          >上一步</el-button
        >
        <el-button type="primary" @click="nextPage()">{{
          titleName
        }}</el-button>
      </div>

      <!-- <div slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button>取 消</el-button>
      </div> -->
    </el-dialog>
    <!--查看园区概况详情页-->
    <el-dialog
      :visible.sync="infoOpen"
      width="1200px"
      custom-class="dialog-box"
      :before-close="detailClose"
    >
      <div slot="title" class="dialog-title">{{ infoTitle }}</div>

      <div class="info_box">
        <el-steps :active="activeLook" finish-status="success" align-center>
          <el-step
            :title="title.slice(0, 2) + '园区概括'"
            @click.native="elTabSwitch(0)"
          >
          </el-step>
          <el-step
            :title="title.slice(0, 2) + '负责人'"
            @click.native="elTabSwitch(1)"
          ></el-step>
          <el-step
            :title="title.slice(0, 2) + '园内专有物资'"
            @click.native="elTabSwitch(2)"
          ></el-step>
          <el-step
            :title="title.slice(0, 2) + '园内监控'"
            @click.native="elTabSwitch(3)"
          ></el-step>
          <el-step
            :title="title.slice(0, 2) + '园内风险企业'"
            @click.native="elTabSwitch(4)"
          ></el-step>
        </el-steps>
        <div style="height: 440px; overflow: auto">
          <!-- 园区概括 -->
          <div v-if="activeLook == 0">
            <header class="tops">
              <span>园区概括</span>
            </header>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="园区名称">{{
                one.parkName
              }}</el-descriptions-item>
              <el-descriptions-item label="园区地址">{{
                one.parkAddress
              }}</el-descriptions-item>
              <el-descriptions-item label="归属地">{{
                one.homeLocation
              }}</el-descriptions-item>
              <el-descriptions-item label="楼幢数量(幢)">{{
                one.numberBuildings
              }}</el-descriptions-item>
              <el-descriptions-item label="企业数量(家)">{{
                one.numberEnterprises
              }}</el-descriptions-item>
              <el-descriptions-item label="员工总人数(人)">{{
                one.totalEmployees
              }}</el-descriptions-item>
              <el-descriptions-item label="占地面积(m²)">{{
                one.floorArea
              }}</el-descriptions-item>
              <el-descriptions-item label="占地面积(亩)">{{
                one.floorAreaT
              }}</el-descriptions-item>
              <el-descriptions-item label="总建筑面积(m²)">{{
                one.totalBuildingArea
              }}</el-descriptions-item>
              <el-descriptions-item label="出租面积(m²)">{{
                one.rentalArea
              }}</el-descriptions-item>
              <el-descriptions-item label="自用面积(m²)">{{
                one.selfArea
              }}</el-descriptions-item>
              <el-descriptions-item label="年租金总额(万元)">{{
                one.totalAnnualRent
              }}</el-descriptions-item>
              <el-descriptions-item label="平均月租金单价(元/m²/月)">{{
                one.averageMonthlyRentalUnitPrice
              }}</el-descriptions-item>
              <el-descriptions-item label="土地证面积(亩)">{{
                one.landCertificateArea
              }}</el-descriptions-item>
              <el-descriptions-item label="无证面积(m²)">{{
                one.unlicensedArea
              }}</el-descriptions-item>
              <el-descriptions-item label="无证面积(亩)">{{
                one.unlicensedAreaT
              }}</el-descriptions-item>
              <el-descriptions-item label="房产证面积(m²)">{{
                one.realEstateCertificateArea
              }}</el-descriptions-item>
              <el-descriptions-item label="年总税收(万元)">{{
                one.annualGrossTaxRevenue
              }}</el-descriptions-item>
              <el-descriptions-item label="亩均税收(万元/千平方米)">{{
                one.taxPerMu
              }}</el-descriptions-item>
              <el-descriptions-item label="层级">{{
                one.zoom
              }}</el-descriptions-item>
              <el-descriptions-item label="经纬度">{{
                one.latlng
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <!-- 负责人 -->
          <div v-if="activeLook == 1">
            <header class="tops">
              <span>负责人管理</span>
            </header>
            <principal
              :addId="addId"
              :addName="addName"
              :isLook="isLook"
            ></principal>
          </div>
          <!-- 园内专有物资管理 -->
          <div v-if="activeLook == 2">
            <header class="tops">
              <span>园内专有物资管理</span>
            </header>
            <materials :addId="addId" :addName="addName" :isLook="isLook">
            </materials>
          </div>
          <!-- 园内监控管理 -->
          <div v-if="activeLook == 3">
            <header class="tops">
              <span>园内监控管理</span>
            </header>
            <monitor
              :addId="addId"
              :addName="addName"
              :isLook="isLook"
            ></monitor>
          </div>
          <!-- 风险企业管理 -->
          <div v-if="activeLook == 4">
            <header class="tops">
              <span>风险企业管理 </span>
            </header>
            <management
              :addId="addId"
              :addName="addName"
              :isLook="isLook"
            ></management>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="stepMsg()"
          v-if="activeLook >= 1 && activeLook <= 4"
          >上一步</el-button
        >
        <el-button type="primary" @click="nextInfo()">{{
          titleName
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listProfile,
  getProfile,
  delProfile,
  addProfile,
  updateProfile,
  exportProfile,
} from "@/api/mudu/profile";

//引入负责人管理
import principal from "./components/principal.vue";
//引入园内专有物资管理
import materials from "./components/materials.vue";
//添加园内监控
import monitor from "./components/monitor.vue";
//添加园内风险企业
import management from "./components/management.vue";
export default {
  name: "Profile",
  //注释字典
  data() {
    return {
      //查看详情
      infoOpen: false,
      //详情标题
      infoTitle: "",
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 园区概况表格数据
      profileList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        parkName: null,
      },
      // 表单参数
      form: {},
      titleName: "下一步",
      //索引
      active: 0,
      //新增后的id
      addId: null,
      //新增之后要返回给各个组件的园区名字
      addName: "",
      //是否是通过查看进去的页面
      isLook: false,
      one: {
        id: null,
        parkOrgId: null,
        parkName: null,
        parkAddress: null,
        homeLocation: null,
        numberBuildings: null,
        numberEnterprises: null,
        totalEmployees: null,
        floorArea: null,
        floorAreaT: null,
        totalBuildingArea: null,
        rentalArea: null,
        selfArea: null,
        totalAnnualRent: null,
        averageMonthlyRentalUnitPrice: null,
        landCertificateArea: null,
        unlicensedArea: null,
        unlicensedAreaT: null,
        realEstateCertificateArea: null,
        annualGrossTaxRevenue: null,
        taxPerMu: null,
        latlng: null,
        zoom: null,
        createId: null,
        createBy: null,
        createTime: null,
        updateId: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        userId: null,
        deptId: null,
      },
      activeLook: 0,
      // 表单校验
      rules: {
        parkName: [
          { required: true, message: "园区名称不能为空", trigger: "change" },
        ],
        parkAddress: [
          { required: true, message: "园区地址不能为空", trigger: "change" },
        ],
        homeLocation: [
          { required: true, message: "归属地不能为空", trigger: "change" },
        ],
        numberBuildings: [
          { required: true, message: "楼幢数量不能为空", trigger: "change" },
          {
            type: "number",
            message: "请输入正确的楼幢数量(幢)",
            trigger: "change",
          },
        ],
        numberEnterprises: [
          { required: true, message: "企业数量不能为空", trigger: "change" },
          {
            type: "number",
            message: "请输入正确的企业数量(家)",
            trigger: "change",
          },
        ],
        totalEmployees: [
          { required: true, message: "员工总人数不能为空", trigger: "change" },
          {
            type: "number",
            message: "请输入正确的员工总人数(人)",
            trigger: "change",
          },
        ],
        floorArea: [
          { required: true, message: "占地面积不能为空", trigger: "change" },
          {
            type: "number",
            message: "请输入正确的占地面积(m²)",
            trigger: "change",
          },
        ],
        floorAreaT: [
          { required: true, message: "占地面积不能为空", trigger: "change" },
          {
            type: "number",
            message: "请输入正确的占地面积(亩)",
            trigger: "change",
          },
        ],
        totalBuildingArea: [
          { required: true, message: "总建筑面积不能为空", trigger: "change" },
          {
            type: "number",
            message: "请输入正确的总建筑面积(m²)",
            trigger: "change",
          },
        ],
        rentalArea: [
          { required: true, message: "出租面积不能为空", trigger: "change" },
          {
            type: "number",
            message: "请输入正确的出租面积(m²)",
            trigger: "change",
          },
        ],
        selfArea: [
          { required: true, message: "自用面积不能为空", trigger: "change" },
          {
            type: "number",
            message: "请输入正确的自用面积(m²)",
            trigger: "change",
          },
        ],
        totalAnnualRent: [
          { required: true, message: "年租金总额不能为空", trigger: "change" },
          {
            type: "number",
            message: "请输入正确的年租金总额(万元)",
            trigger: "change",
          },
        ],
        averageMonthlyRentalUnitPrice: [
          {
            required: true,
            message: "平均月租金单价不能为空",
            trigger: "change",
          },
          {
            type: "number",
            message: "请输入正确的平均月租金单价(元/m²/月)",
            trigger: "change",
          },
        ],
        landCertificateArea: [
          { required: true, message: "土地证面积不能为空", trigger: "change" },
          {
            type: "number",
            message: "请输入正确的土地证面积(亩)",
            trigger: "change",
          },
        ],
        unlicensedArea: [
          { required: true, message: "无证面积不能为空", trigger: "change" },
          {
            type: "number",
            message: "请输入正确的无证面积(m²)",
            trigger: "change",
          },
        ],
        unlicensedAreaT: [
          { required: true, message: "无证面积不能为空", trigger: "change" },
          {
            type: "number",
            message: "请输入正确的无证面积(亩)",
            trigger: "change",
          },
        ],
        realEstateCertificateArea: [
          { required: true, message: "房产证面积不能为空", trigger: "change" },
          {
            type: "number",
            message: "请输入正确的房产证面积(m²)",
            trigger: "change",
          },
        ],
        annualGrossTaxRevenue: [
          { required: true, message: "年总税收不能为空", trigger: "change" },
          {
            type: "number",
            message: "请输入正确的年总税收(万元)",
            trigger: "change",
          },
        ],
        taxPerMu: [
          { required: true, message: "亩均税收不能为空", trigger: "change" },
          {
            type: "number",
            message: "请输入正确的亩均税收(万元/千平方米)",
            trigger: "change",
          },
        ],
        zoom: [
          { required: true, message: "层级不能为空", trigger: "change" },
          {
            type: "number",
            message: "请输入正确的层级",
            trigger: "change",
          },
        ],
        latlng: [
          { required: true, message: "经纬度不能为空", trigger: "change" },
          {
            type: "number",
            message: "请输入正确的经纬度",
            trigger: "change",
          },
        ],
      },
      loadS: false,
    };
  },
  components: {
    principal,
    materials,
    monitor,
    management,
  },
  created() {
    this.getList();
  },
  methods: {
    // 查看e-tabs切换
    elTabSwitch(ind) {
      this.activeLook = ind;
    },
    elTabSwitch2(ind) {
      // 修改
      if (this.form.id != null) {
        this.active = ind;
      }
      // 新增
      else if (ind >= 0 && !this.form.id) {
      }
    },
    // 添加修改e-tabs切换
    stepAdd() {
      this.active -= 1;
      if (this.active == 3) {
        this.titleName = "下一步";
      } else if (this.active == 0) {
        this.loadS = true;
        getProfile(this.addId).then((response) => {
          this.form = response.data;
          this.loadS = false;
        });
      }
    },
    handleClose() {
      this.active = 0;
      this.open = false;
      this.titleName = "下一步";
      this.getList()
    },
    nextPage() {
      if (this.active == 0) {
        this.submitForm();
      } else if (this.active >= 4) {
        this.active = 0;
        this.open = false;
        this.getList();
      } else if (this.active == 3) {
        this.titleName = "关闭";
        this.active += 1;
      } else {
        this.active += 1;
      }
    },
    stepMsg() {
      this.activeLook -= 1;
      if (this.activeLook < 4) {
        this.titleName = "下一步";
      }
    },
    detailClose() {
      this.activeLook = 0;
      this.infoOpen = false;
      this.titleName = "下一步";
    },
    nextInfo() {
      if (this.activeLook >= 4) {
        this.activeLook = 0;
        this.infoOpen = false;
      } else if (this.activeLook == 3) {
        this.titleName = "关闭";
        this.activeLook += 1;
      } else {
        this.activeLook += 1;
      }
    },
    /** 查询园区概况列表 */
    getList() {
      this.loading = true;
      listProfile(this.queryParams).then((response) => {
        this.profileList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
      this.getList();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        parkOrgId: null,
        parkName: null,
        parkAddress: null,
        homeLocation: null,
        numberBuildings: null,
        numberEnterprises: null,
        totalEmployees: null,
        floorArea: null,
        floorAreaT: null,
        totalBuildingArea: null,
        rentalArea: null,
        selfArea: null,
        totalAnnualRent: null,
        averageMonthlyRentalUnitPrice: null,
        landCertificateArea: null,
        unlicensedArea: null,
        unlicensedAreaT: null,
        realEstateCertificateArea: null,
        annualGrossTaxRevenue: null,
        taxPerMu: null,
        latlng: null,
        zoom: null,
        createId: null,
        createBy: null,
        createTime: null,
        updateId: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        userId: null,
        deptId: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /**查看按钮操作 */
    handleInfo(row) {
      const id = row.id || this.ids;
      this.infoTitle = "查看园区概况详情";
      this.titleName = "下一步";
      this.isLook = true;
      this.addId = id;
      this.addName = row.parkName;
      this.infoOpen = true;
      getProfile(id).then((response) => {
        this.one = response.data;
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加园区概况";
      this.titleName = "下一步";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      this.loadS = true;
      getProfile(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改园区概况";
        this.titleName = "下一步";
        this.loadS = false;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            this.$confirm("确定修改该条园区概括并且进行下一步吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                updateProfile(this.form).then((response) => {
                  this.$model.msgSuccess("修改成功");
                  this.addId = this.form.id;
                  getProfile(this.form.id).then((res) => {
                    this.addName = res.data.parkName;
                  });
                  this.active += 1;
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "取消添加",
                });
              });
          } else {
            this.$confirm("确定添加该条园区概括并且进行下一步吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                addProfile(this.form).then((response) => {
                  this.$model.msgSuccess("新增成功");
                  this.addId = response.data;
                  this.form.id = response.data;
                  getProfile(response.data).then((res) => {
                    this.addName = res.data.parkName;
                  });
                  this.active += 1;
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "取消添加",
                });
              });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm(
        '是否确认删除园区概况编号为"' + ids + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delProfile(ids);
        })
        .then(() => {
          this.getList();
          this.$model.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有园区概况数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.download(
            "/mudu/profile/export",
            {
              ...this.queryParams,
            },
            "园区概况_" + new Date().getTime() + ".xlsx"
          );
          this.exportLoading = false;
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-descriptions {
  margin: 10px 0;
}
.tops {
  font-size: 22px;
  font-weight: bold;
  border-bottom: 1px solid #e2e2e2;
  color: #000000d9;
  padding-left: 10px;
  height: 40px;
  margin-bottom: 30px;
  margin-top: 8px;
  span {
    padding: 8px;
    border-bottom: 3px solid #549bfd;
  }
}
.container-main {
  height: calc(100vh - 84px);
  // height: 100%;
  overflow: hidden;
  padding: 0 10px;
}
::v-deep .el-descriptions-row th {
  background: #f5f5f5;
  color: #333;
  font-weight: bold !important;
  width: 16% !important;
}
::v-deep .el-descriptions-row td {
  width: 34% !important;
}
</style>
