<script>
import { area } from "@/api/area";
import { getGcjztjTc, getGcjztjNdTc, getGcjztjGdTc } from "@/api/basicInfor.js";
import { Loading } from "element-ui";
export default {
  data() {
    return {
      options: [],
      gdList: [],
      ndList: [],
      tableData: [],
      unitList: [],
      value: "重庆市",
      params: {
        pageSize: 10,
        pageNum: 1,
      },
      params2: {
        pageSize: 10,
        pageNum: 1,
      },
      params3: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 0,
      total2: 0,
      total3: 0,
      showFlag: 1,
      Loading3: false,
    };
  },
  props: {
    qy: String,
	flagVal:Number
  },
  watch: {
    qy: {
      handler(val) {
        this.value = val;
        //   this.handUnitList();
      },
      immediate: true,
      deep: true,
    },
	flagVal:{
		handler(nv) {
        this.showFlag = nv;
        //   this.handUnitList();
      },
      immediate: true,
      deep: true,
	}
  },
  methods: {
    resetForm() {
      this.value = "";
	  this.search()
    //   this.params = {
    //     pageSize: 10,
    //     pageNum: 1,
    //   };
    },
    //建筑统计
    funUnitList() {
      getGcjztjTc({
        ...this.params,
        qx: this.value === "重庆市" ? "" : this.value,
      }).then((res) => {
        this.tableData = res.data.rows;
        this.total = res.data.total;
      });
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.funUnitList();
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.funUnitList();
    },
    handleSizeChange2(val) {
      this.params2.pageSize = val;
      this.funHigthList();
    },
    handleCurrentChange2(val) {
      this.params2.pageNum = val;
      this.funHigthList();
    },
    handleSizeChange3(val) {
      this.params3.pageSize = val;
      this.funYearList();
    },
    handleCurrentChange3(val) {
      this.params3.pageNum = val;
      this.funYearList();
    },
    // 高度
    funYearList() {
      this.Loading3 = true;
      getGcjztjNdTc({
        ...this.params3,
        qx: this.value === "重庆市" ? "" : this.value,
      }).then((res) => {
        this.gdList = res.data.rows;
        this.Loading3 = false;
        this.total3 = res.data.total;
      });
    },
    // 年代
    funHigthList() {
      getGcjztjGdTc({
        ...this.params2,
        qx: this.value === "重庆市" ? "" : this.value,
      }).then((res) => {
        this.ndList = res.data.rows;
        this.total2 = res.data.total;
      });
    },
    changeList(val) {
      this.showFlag = val;
      this.search();
    },
    addClass(i) {
      return this.showFlag === i ? "active" : "tab-item";
    },
    // 搜索
    search() {
      if (this.showFlag == 1) {
        this.params.pageNum = 1;
        this.funUnitList();
      }
      if (this.showFlag == 2) {
        this.params2.pageNum = 1;
        this.funHigthList();
      }
      if (this.showFlag == 3) {
        this.params3.pageNum = 1;
        this.funYearList();
      }
    },
  },
  created() {
    this.funUnitList();
    this.funYearList();
    this.funHigthList();
    area({
      pageNum: 1,
      pageSize: 100,
    }).then((res) => {
      this.options = res.data.rows;
    });
  },
};
</script>

<template>
  <div>
    <!-- 搜索 -->
    <div class="maintenance-supervision">
      <div class="tab">
        <span class="tab-item" @click="changeList(1)" :class="addClass(1)"
          >建筑类型</span
        >
        <span class="tab-item" @click="changeList(2)" :class="addClass(2)"
          >年代</span
        >
        <span class="tab-item" @click="changeList(3)" :class="addClass(3)"
          >高度</span
        >
      </div>
      <div class="maintenance-supervision_header">
        <div class="select-item">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              :value="item.areaTitle"
              :label="item.areaTitle"
              v-for="(item, index) in options"
              :key="index"
            >
            </el-option>
          </el-select>
        </div>
        <div class="btn-item">
          <el-button @click="search">搜索</el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
      </div>
    </div>
    <!-- 高度 -->
    <div v-if="showFlag === 3">
      <basic-table :data="gdList" style="text-align: center">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="qx" label="区县" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="type30m及以下"
          label="30米及以下（栋）"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="type30_50"
          label="30-50米（含）（栋）"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="type50_80"
          label="50-80米（含）（栋）"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="type80_100"
          label="80-100米（含）"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="type100m以上"
          label="100米以上"
          show-overflow-tooltip
        >
        </el-table-column>
      </basic-table>
    </div>
    <!-- 建筑类型 -->
    <div v-if="showFlag === 1">
      <basic-table :data="tableData" style="text-align: center">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="qx" label="区县" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="高层建筑" label="高层建筑(栋)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="超高层建筑"
          label="超高层建筑"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="高层公共建筑"
          label="高层公共建筑"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="高层住宅建筑"
          label="高层住宅建筑"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="一类高层公共建筑"
          label="一类高层公共建筑"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="二类高层公共建筑"
          label="二类高层公共建筑"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="一类高层居住建筑"
          label="一类高层住宅建筑"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="二类高层住宅建筑"
          label="二类高层住宅建筑"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="高层工业建筑"
          label="高层工业建筑"
          show-overflow-tooltip
        >
        </el-table-column>
      </basic-table>
    </div>
    <!-- 年代 -->
    <div v-if="showFlag === 2">
      <basic-table :data="ndList" style="text-align: center">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="qx" label="区县" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="2000年前"
          label="2000年前（栋）"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="2001_2010年"
          label="2001-2010年（栋）"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="2011_2020年"
          label="2011-2020年（栋）"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="2021年后"
          label="2021年后（栋）"
          show-overflow-tooltip
        >
        </el-table-column>
      </basic-table>
    </div>
    <br />
    <!--  -->
    <div v-if="showFlag === 1">
      <basic-pagination
        layout="->,prev, pager, next, sizes,jumper"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="params.pageSize"
        :current-page="params.PageNum"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div v-if="showFlag === 2">
      <basic-pagination
        layout="->,prev, pager, next, sizes,jumper"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="params2.pageSize"
        :current-page="params2.PageNum"
        :total="total2"
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
      />
    </div>
    <div v-if="showFlag === 3">
      <basic-pagination
        layout="->,prev, pager, next, sizes,jumper"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="params3.pageSize"
        :current-page="params3.PageNum"
        :total="total3"
        @size-change="handleSizeChange3"
        @current-change="handleCurrentChange3"
      />
    </div>
  </div>
</template>

<style scoped lang="less">
.maintenance-supervision {
  display: flex;
  align-items: center;
  cursor: pointer;
  // padding: 10px 10px 0px 20px;
  ::v-deep(.el-input__inner) {
    border: none;
    background: linear-gradient(
      360deg,
      rgba(0, 148, 255, 0.5) 0%,
      rgba(0, 148, 255, 0.31) 100%
    );
    color: #fff;
  }

  ::v-deep(.el-button) {
    border: none;
    background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
    color: #fff;
  }

  .maintenance-supervision_header {
    display: flex;
    // flex-wrap: wrap;
    justify-content: space-around;
    // border-bottom: 1px solid #154956;
    padding-bottom: 10px;
    font-size: 12px;
    color: rgb(79, 149, 186);
    // .select-item{
    //   margin-right: 20px;
    // }
  }

  .btn-item {
    margin-bottom: 10px;
  }

  .warp {
    height: 520px;
    margin: 0 auto;
    overflow: hidden;

    .item {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      cursor: pointer;
    }
  }

  /deep/.el-input__inner {
    background-color: #184254;
    width: 150px;
    height: 43px;
    margin-bottom: 5px;
    font-size: 16px;
  }

  /deep/.el-button {
    width: 100px;
    height: 32px;
    font-size: 14px;
    line-height: 2px;
    // margin: 0 20px 0 30px;
    color: #fff;
    border-radius: 5px;
    border: none;
    margin-left: 20px;
  }

  /deep/.el-button:hover {
    color: rgb(80, 147, 224);
  }

  /deep/.select_btn {
    position: absolute;
    top: 225px;
    right: 320px;
    //下拉框
  }

  /deep/.el-input {
    width: 150px;
    // margin-left: 20px;
  }

  .header {
    color: #fff;
    height: 33px !important;
    line-height: 33px !important;
    background-color: rgba(0, 163, 255, 0.3) !important;
    color: #61dbff;
    margin-top: 15px;
    margin-bottom: 6px;
  }

  .row,
  li,
  a {
    display: block;
    height: 39px;
    line-height: 39px;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.2);

    .time,
    .num,
    .person,
    .result {
      flex: 0.33;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .num {
      flex: 0.15;
    }
  }

  .inp {
    margin-left: 20px;
  }
}

.unit-bulid {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 18px;
}

.unit-num {
  width: 200px;
  height: 109px;
  border: 1px solid #0463a7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  line-height: 59px;
}

.tab {
  display: flex;
}

.active {
  background: #0463a7 !important;
}

.tab-item {
  display: inline-block;
  width: 120px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  margin-right: 15px;
  margin-bottom: 15px;
}
</style>
