<script>
import FirstHight from "./FirstHight.vue";
import BasicTotal from "@/components/BasicTotal.vue";
import { getInfo } from "@/api/index.js";
export default {
  name: "BasicInfo",
  props: {
    qy: String,
  },
  components: {
    FirstHight,
    BasicTotal,
  },
  data() {
    return {
      list: [],
      BasicLsit: [],
      listGids:{},
      // 传参
      params: {
        pageSize: 100,
        pageNum: 1,
      },
      unitcNum: "",
      unitgNum: "",
      unitjNum: "",
      allNum: 0,
    };
  },
  watch: {
    qy() {
      this.BasicInfo();
    },
  },
  methods: {
    // 基础信息
    BasicInfo() {
      getInfo({ ...this.params, qy: this.qy === "重庆市" ? "" : this.qy }).then(
        (res) => {
          if (res.data.code == 200) {
            this.BasicLsit = res.data.rows;
            res.data.rows.map((item) => {
              this.unitcNum = item.cggjz;
              this.unitgNum = item.ljzzgc;
              this.unitjNum = item.ljgcszhht;
              this.allNum = item.gyjz + item.zzjz + item.ggjz;
            });
            this.listGids=res.data.rows[0]
       
          }
        }
      );
    },
    ToType(val) {
      this.$emit("UnitType", val);
    },
    showModlus(name) {
      this.$emit("showTc", name);
    },
  },
  created() {
    this.BasicInfo();
  },
};
</script>

<template>
  <div class="basic-info">
    <div class="__left">
      <FirstHight :BasicLsit="BasicLsit" :allNum="allNum" />
      <ul style="display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 14px;">
        <li @click="showModlus('住宅建筑')">
          <span
            style="
              display: inline-block;
              width: 10px;
              height: 10px;
              background: #6dd400;
              margin: 0 4px;
            "
          ></span>
          <span>住宅建筑
            <span style="color: rgb(68, 241, 255);">
            {{ listGids.zzjz }}
            </span>
          </span>
        </li>
        <li @click="showModlus('公共建筑')" >
          <span
            style="
              display: inline-block;
              width: 10px;
              height: 10px;
              background: #0060ff;
              margin: 0 4px;
            "
          ></span>
          <span>公共建筑
            <span style="color: rgb(68, 241, 255);">
            {{ listGids.ggjz }}
            </span>
          </span>
        </li>
        <li @click="showModlus('工业建筑')" style="margin-top: 8px;">
          <span
            style="
              display: inline-block;
              width: 10px;
              height: 10px;
              background: #ffa600;
              margin: 0 4px;
            "
          ></span>
          <span>工业建筑
            <span style="color: rgb(68, 241, 255);">
            {{ listGids.gyjz}}
            </span>
          </span>
        </li>
      </ul>
    </div>

    <div class="__right">
      <linear-text
        startColor="#00FFE0"
        endColor="#00D1FF"
        text="治理重点"
        fontSize="16px"
      />
      <div class="basic-total">
        <div   @click="ToType('超高层建筑总数（栋）')">
          <BasicTotal
            style="width: 187px"
            :number="Number(this.unitcNum)"
            label="超高层建筑"
            unit="栋"
          
          />
        </div>
        <div @click="ToType('2000年底前老旧住宅建筑总数（栋）')">
          <BasicTotal
            style="width: 187px"
            :number="Number(this.unitgNum)"
            label=""
            unit="栋"
          >
            <template #label>
              <span class="label">
                <span class="sub-label">2000年底前</span>
                老旧住宅建筑
              </span>
            </template>
          </BasicTotal>
        </div>
        <div @click="ToType('2000年底前老旧商业混合体建筑总数（栋）')">
          <BasicTotal
            style="width: 187px"
            :number="Number(this.unitjNum)"
            label="老旧商业混合体"
            unit="栋"
          >
            <template #label>
              <span class="label">
                <span class="sub-label">2000年底前</span>
                老旧商业混合体
              </span>
            </template>
          </BasicTotal>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.basic-info {
  padding: 4px;
  display: flex;
  .__left {
    display: flex;
    flex-direction: column;
  }
  .__right {
    margin-top: 20px;
    margin-left: 5px;
    font-size: 14px;
    .basic-total {
      margin-top: 17px;
      display: flex;
      flex-direction: column;
      gap: 17px;
      .label {
        font-size: 12px;
        display: flex;
        line-height: 12px;
        flex-direction: column;
        justify-content: center;
        .sub-label {
          font-size: 10px;
        }
      }
    }
  }
}
</style>
