<template>
  <div class="m-subbox m-jdhx">
    <div class="m-jdhx-top">
      <div class="m-jdhx-card">
        <div class="m-jdhx-card-title">
          <div class="m-jdhx-card-title-icon">
            <img
                src="@/assets/images/shuju/overview/jumin-icon.png"
            />
          </div>
          <div class="m-jdhx-card-title-txt">主要居民类型</div>
        </div>
        <div class="m-jdhx-card-content">
          <div class="m-jdhx-card-content-item" v-for="(item,index) in categoryList" :key="index">
            <div class="m-jdhx-card-content-item-lable">{{item.categoryName}}</div>
            <div class="m-jdhx-card-content-item-value">{{item.categoryRatio?item.categoryRatio:'0%'}}</div>
          </div>
        </div>
      </div>
      <div class="m-jdhx-card m-jdhx-f m-jdhx-h">
        <div class="m-jdhx-card-title">
          <div class="m-jdhx-card-title-icon">
            <img
                src="@/assets/images/shuju/overview/fangwu-icon.png"
            />
          </div>
          <div class="m-jdhx-card-title-txt">房屋性质/用途</div>
        </div>
        <div class="m-jdhx-card-content">
          <div class="m-jdhx-card-content-item"  v-for="(item,index) in houseList" :key="index">
            <div class="m-jdhx-card-content-item-lable">{{item.name}}</div>
            <div class="m-jdhx-card-content-item-value">{{item.num}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="m-jdhx-center">
      <div class="m-jdhx-center-line"></div>
      <div class="m-jdhx-center-content">
        <div class="m-jdhx-center-content-item">
          <div class="m-jdhx-center-content-item-jumin">
            <div class="m-jdhx-center-content-item-jumin-icon">
              <img
                  src="@/assets/images/shuju/overview/renkou-icon.png"
              />
            </div>
            <div class="m-jdhx-center-content-item-jumin-txt">人口</div>
          </div>
          <div class="m-jdhx-center-content-item-fangwu">
            <div class="m-jdhx-center-content-item-fangwu-icon">
              <img
                  src="@/assets/images/shuju/overview/fangwu2-icon.png"
              />
            </div>
            <div class="m-jdhx-center-content-item-fangwu-txt">房屋</div>
          </div>
        </div>
        <div style="margin-top: 79px" class="m-jdhx-center-content-item">
          <div class="m-jdhx-center-content-item-manyi">
            <div class="m-jdhx-center-content-item-manyi-icon">
              <img
                  src="@/assets/images/shuju/overview/manyidu-icon.png"
              />
            </div>
            <div class="m-jdhx-center-content-item-manyi-txt">满意度</div>
          </div>
          <div class="m-jdhx-center-content-item-fengxian">
            <div class="m-jdhx-center-content-item-fengxian-icon">
              <img
                  src="@/assets/images/shuju/overview/fengxianry-icon.png"
              />
            </div>
            <div class="m-jdhx-center-content-item-fengxian-txt">风险人员</div>
          </div>
        </div>
      </div>
      <div class="m-jdhx-center-line"></div>
    </div>
    <div class="m-jdhx-top">
      <div class="m-jdhx-card">
        <div class="m-jdhx-card-title">
          <div class="m-jdhx-card-title-icon">
            <img
                src="@/assets/images/shuju/overview/manyi-icon.png"
            />
          </div>
          <div class="m-jdhx-card-title-txt">主要不满意事项</div>
        </div>
        <div class="m-jdhx-card-content">
          <div class="m-jdhx-card-content-item" v-for="(item,index) in notSatisfactionList" :key="index">
            <div class="m-jdhx-card-content-item-lable">{{item.name}}</div>
            <div class="m-jdhx-card-content-item-value">{{item.ratio?item.ratio:'0%'}}</div>
          </div>
        </div>
      </div>
      <div class="m-jdhx-card m-jdhx-f">
        <div class="m-jdhx-card-title">
          <div class="m-jdhx-card-title-icon">
            <img
                src="@/assets/images/shuju/overview/fengxian-icon.png"
            />
          </div>
          <div class="m-jdhx-card-title-txt">风险人员</div>
        </div>
        <div class="m-jdhx-card-content">
          <div class="m-jdhx-card-content-item" v-for="(item,index) in riskList" :key="index">
            <div class="m-jdhx-card-content-item-lable">{{item.riskName}}</div>
            <div class="m-jdhx-card-content-item-value">{{item.riskNum}}人</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "jdtphx",
  data() {
    return {
      org: this.$store.state.chooseArea.chooseName,
      categoryList: [],
      houseList: [],
      notSatisfactionList: [],
      riskList: [],
    }
  },
  watch: {
    "$store.state.chooseArea.chooseName"(val) {
      if(val.orgId) {
        this.getData(this.$store.state.chooseArea.chooseName)
      }
    }
  },
  mounted() {
    if (this.org.orgId) {
      this.getData(this.org)
    }
  },
  methods: {
    getData({orgId, level}) {
      this.$http.get('/actual/base/streetOverview/overviewPortrait?orgId=' + orgId + '&level=' + level).then(({data: {data}}) => {
        this.categoryList = data.categoryList
        this.houseList = data.houseList
        this.notSatisfactionList = data.notSatisfactionList
        this.riskList = data.riskList
      })
    }
  }
};
</script>
<style
    lang="scss"
    src="@/assets/scss/dataBoard/overview/index.scss"
    scoped
></style>
