<template>
  <div class="container-main" ref="main">
    <div class="search-hearder" ref="topSearch">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="名称" prop="noticeTitle">
          <el-input
            v-model="queryParams.noticeTitle"
            placeholder="请输入"
            clearable
            @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-form-item>
      </el-form>
    </div>

    <div class="layui-table-tool" ref="tableTool">
      <el-button type="primary" size="mini" @click="clickAdd()">新增</el-button>
      <el-button type="warning" size="mini" @click="handleExport()"
        >导出</el-button
      >
    </div>

    <el-table v-loading="loading" :data="tableList" :height="tableHeigth">
      <el-table-column label="序号" align="center" width="55" type="index" />
      <el-table-column
        label="园区名称"
        prop="parkName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="所属区域"
        prop="homeLocation"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="企业数量"
        prop="numberEnterprises"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="占地面积"
        prop="floorArea"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="占地面积"
        prop="floorAreaT"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="更新时间"
        prop="updateTime"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-view"
            @click="handleView(scope.row)"
            >查看</el-button
          >
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="handleUpdata(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</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"
    ></pagination>

    <el-dialog
      :visible.sync="open"
      width="1200px"
      append-to-body
      custom-class="dialog-box"
    >
      <div slot="title" class="dialog-title">{{ dialogTitle }}</div>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="130px"
        class="dialog-from"
        :show-message="false"
      >
        <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="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="form.numberEnterprises"
                placeholder="请输入企业数量(家)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工总人数" prop="totalEmployees">
              <el-input
                v-model="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="form.floorArea"
                placeholder="请输入占地面积(m²)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="占地面积" prop="floorAreaT">
              <el-input
                v-model="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="form.totalBuildingArea"
                placeholder="请输入总建筑面积(m²)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出租面积" prop="noticeTitle">
              <el-input
                v-model="form.noticeTitle"
                placeholder="请输入出租面积(m²)"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="自用面积" prop="noticeTitle">
              <el-input
                v-model="form.noticeTitle"
                placeholder="请输入自用面积(m²)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年租金总额" prop="noticeTitle">
              <el-input
                v-model="form.noticeTitle"
                placeholder="请输入年租金总额(万元)"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="平均月租金单价" prop="noticeTitle">
              <el-input
                v-model="form.noticeTitle"
                placeholder="请输入平均月租金单价(元/m²/月)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="土地证面积" prop="noticeTitle">
              <el-input
                v-model="form.noticeTitle"
                placeholder="请输入土地证面积(亩)"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="无证面积" prop="noticeTitle">
              <el-input
                v-model="form.noticeTitle"
                placeholder="请输入无证面积(亩)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房产证面积" prop="noticeTitle">
              <el-input
                v-model="form.noticeTitle"
                placeholder="请输入房产证面积(m²)"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="无证面积" prop="noticeTitle">
              <el-input
                v-model="form.noticeTitle"
                placeholder="请输入无证面积(m²)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年总税收" prop="noticeTitle">
              <el-input
                v-model="form.noticeTitle"
                placeholder="请输入年总税收(万元)"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini">提 交</el-button>
        <el-button size="mini">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="infoOpen"
      width="1200px"
      append-to-body
      custom-class="dialog-box"
    >
      <div slot="title" class="dialog-title">{{ infoTitel }}</div>
      <div class="Descriptions-box">
        <div class="row-item">
          <div class="row-lable">园区名称</div>
          <div class="row-value"></div>
          <div class="row-lable">归属地</div>
          <div class="row-value"></div>
        </div>
        <div class="row-item">
          <div class="row-lable">园区地址</div>
          <div class="row-value"></div>
        </div>
        <div class="row-item">
          <div class="row-lable">楼幢数量(幢)</div>
          <div class="row-value"></div>
          <div class="row-lable">企业数量(家)</div>
          <div class="row-value"></div>
        </div>
        <div class="row-item">
          <div class="row-lable">员工总人数(人)</div>
          <div class="row-value"></div>
          <div class="row-lable">占地面积(m²)</div>
          <div class="row-value"></div>
        </div>
        <div class="row-item">
          <div class="row-lable">占地面积(亩)</div>
          <div class="row-value"></div>
          <div class="row-lable">总建筑面积(m²)</div>
          <div class="row-value"></div>
        </div>
        <div class="row-item">
          <div class="row-lable">出租面积(m²)</div>
          <div class="row-value"></div>
          <div class="row-lable">自用面积(m²)</div>
          <div class="row-value"></div>
        </div>
        <div class="row-item">
          <div class="row-lable">年租金总额(万元)</div>
          <div class="row-value"></div>
          <div class="row-lable">平均月租金单价(元/m²/月)</div>
          <div class="row-value"></div>
        </div>
        <div class="row-item">
          <div class="row-lable">土地证面积(亩)</div>
          <div class="row-value"></div>
          <div class="row-lable">无证面积(亩)</div>
          <div class="row-value"></div>
        </div>
        <div class="row-item">
          <div class="row-lable">房产证面积(m²)</div>
          <div class="row-value"></div>
          <div class="row-lable">无证面积(m²)</div>
          <div class="row-value"></div>
        </div>
        <div class="row-item">
          <div class="row-lable">年总税收(万元)</div>
          <div class="row-value"></div>
          <div class="row-lable">亩均税收(万元/千m²)</div>
          <div class="row-value"></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import {
//   listProfile,
//   getProfile,
//   delProfile,
//   addProfile,
//   updateProfile,
//   exportProfile,
// } from "@/api/mudu/profile";
export default {
  data() {
    return {
      infoOpen: false, //详情弹窗
      infoTitel: "文章详情", //详情标题
      dialogTitle: "", //弹出层标题
      open: false, //弹出层状态
      tableHeigth: 0, //固定表头
      loading: false,
      total: 10,
      details: "",
      //查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      form: {
        annualGrossTaxRevenue: 0,
        averageMonthlyRentalUnitPrice: 0,
        floorArea: 0,
        floorAreaT: 0,
        homeLocation: "",
        landCertificateArea: 0,
        latlng: 0,
        numberBuildings: 0,
        numberEnterprises: 0,
        parkAddress: "",
        parkName: "",
        parkOrgId: "",
        realEstateCertificateArea: 0,
        remark: "",
        rentalArea: 0,
        selfArea: 0,
        taxPerMu: 0,
        totalAnnualRent: 0,
        totalBuildingArea: 0,
        totalEmployees: 0,
      },
      rules: {
        // noticeTitle: [
        //   { required: true, message: "请输入活动名称", trigger: "blur" },
        // ],
        content: [
          { required: true, message: "请输入发布内容", trigger: "blur" },
        ],
        cover: [
          { required: true, message: "请选择要发布的图片", trigger: "blur" },
        ],

        sort: [{ required: true, message: "请输入轮播顺序", trigger: "blur" }],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        type: [{ required: true, message: "请选择类型", trigger: "blur" }],
      },
      tableList: [],
    };
  },
  mounted() {
    //给表格一个固定值
    this.$nextTick(() => {
      this.tableHeigth =
        this.$refs.main.offsetHeight -
        (this.$refs.topSearch.offsetHeight +
          this.$refs.tableTool.offsetHeight) -
        46;
      console.log(this.tableHeigth);
    });
    this.getList();
  },
  methods: {
    /**新增 */
    clickAdd() {
      this.dialogTitle = "新增文章";
      this.resetQuery();
      this.open = true;
    },
    /**修改 */
    handleUpdata(row) {
      this.dialogTitle = "修改文章";
      this.open = true;
      this.$api.overview.info(row.id).then((response) => {
        console.log(response);
        this.form = response.data;
      });
    },
    /**删除 */
    handleDelete(row) {
      this.$modal
        .confirm("你确认要删除所选数据吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          this.$api.overview.delete(row.id).then((response) => {
            console.log(response);
          });
          this.getList();
        })
        .catch(() => {});
    },
    /**查看详情 */
    handleView(row) {
      this.infoTitel = "查看详情";
      this.infoOpen = true;
      getProfile(row.id).then((response) => {
        this.details = response.data;
      });
    },
    /**获取列表数据 */
    getList() {
      this.loading = true;
      listProfile().then((response) => {
        this.tableList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /**导出 */
    handleExport() {
      this.$modal
        .confirm("您确认要导出数据吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(function () {})
        .catch(() => {});
    },
    /*搜索 */
    handleQuery() {},
    /**重置 */
    resetQuery() {
      this.form = {
        content: "",
        cover: "",
        isCarousel: "",
        sort: "",
        title: "",
        type: 1,
      };
    },
    submint() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // console.log(this.form);
          if (this.dialogTitle == "修改文章") {
            this.$api.overview.updata(this.form).then((response) => {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.open = false;
            });
          } else if (this.dialogTitle == "新增文章") {
            this.$api.overview.add(this.form).then((response) => {
              this.$message({
                message: "新增成功",
                type: "success",
              });
              this.open = false;
            });
          }
          this.getList();
        }
      });
    },
    cancel() {
      this.open = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.container-main {
  height: calc(100vh - 84px);
  // height: 100%;
  overflow: hidden;
  padding: 0 10px;
}
</style>
