<template>
  <div class="container">
    <div class="town">
      沂水县
    </div>

    <!-- 乡镇网格 -->
    <div class="street-container xiangzhen">
      <div class="street-container-title">
        <span style="background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">乡镇网格</span>
      </div>

      <div class="container-box">
        <div class="item" v-for="(item,index) in towns" :key="index" @click="townChange(item)" :style="{'border-color':currentTown==item.xzqmc ? '#a51748':'#1A4E90'}">
          <div class="item-title">{{item.xzqmc}}</div>
          <div class="item-info"> <span>督察长</span>     <span v-for="(it,idx) in item.dcz" :key="idx" >{{it.name}}</span></div>
          <div class="item-info"> <span>副督察长</span>    <span v-for="(it,idx) in item.fdcz" :key="idx" >{{it.name}}</span></div>
          <div class="item-info"> <span>防火职务</span>      县级包领导</div>
        </div>
      </div>
    </div>
    <!-- 消防 -->
    <div class="street-container xiaofang" style="width:315px;">
      <div class="street-container-title">
        <span style="background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">消防员</span>
      </div>

      <div class="container-box">
        <div class="item" v-for="(item,index) in firefighter" :key="index">
            <div class="item-name">
              {{item.name}}
            </div>
            <div class="item-sex-phone">
              <div class="item-sex">性别：{{item.gender}}</div>
              <div class="item-phone">电话：{{item.phone}}</div>
            </div>
        </div>
      </div>

    </div>

    <!-- 自然村落 -->
    <div class="street-container cun">
      <div class="street-container-title">
        <span style="background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">自然村落</span>
      </div>

      <div class="container-box">
        <div class="item" v-for="(item,index) in villages" :key="index" @click="currentVillage=item.AreaName;getGrids(item.Id);getTrees(item.Id);" :style="{'border-color':currentVillage==item.AreaName ? '#a51748':'#1A4E90'}">
          <div class="item-title">{{item.AreaName}}</div>
          <div class="item-village-info">
            <div class="item-info">户数  {{item.Households}}</div>
            <div class="item-info">人数  {{item.PeopleNum}}</div>
          </div>
          <div class="item-grid-count">
            <p style="font-weight:bold;font-size:20px;">{{item.count}}</p>
            <p >网格数</p>
          </div>
        </div>
      </div>

    </div>

    <!-- 护林员 -->
    <div class="street-container hulinyuan">
      <div class="street-container-title">
        <span style="background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">护林员</span>
      </div>

      <div class="container-box">
        <div class="item" v-for="(item,index) in trees" :key="index">
          <div class="item-title">{{currentVillage}}</div>
          <div class="item-info">姓名   {{item.Name}}</div>
          <div class="item-info">电话  {{item.Account}}</div>
        </div>
      </div>

    </div>

    <!-- 网格 -->
    <div class="street-container wangge">
      <div class="street-container-title">
        <span style="background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">网格</span>
      </div>

      <div class="container-box">
        <div class="item" v-for="(item,index) in grids" :key="index">
          <div class="item-title">{{item.AreaName}}</div>
          <div class="item-info">户数   {{item.Households}}</div>
          <div class="item-info">网格员  {{item.UserName}}</div>
          <div class="item-info">身份  {{item.PoliticalOutlook}}</div>
          <div class="item-info">类型  {{item.UserType}}</div>
          <div class="item-info">电话  {{item.Phone}}</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { getMethodCommon } from '../../../api/common'
  export default {
    name: 'index',
    data(){
      return {
        towns:[],
        firefighter:[],
        villages:[],
        trees:[],
        grids:[],
        currentTown:null,
        currentVillage:null,
      }
    },
    created(){
      this.getTownsList();
    },
    methods:{
      townChange(item){
        if(this.currentTown == item.xzqmc){
          
        }else{
          this.currentTown = item.xzqmc;
          this.trees = [];
          this.grids = [];
          this.getFireFighters(item.gid);
          this.getVillages(item.gid)
        }
        
      },
      getTownsList(){
        getMethodCommon("/FireGrid/GetTownInfos").then(res=>{
          if(res.code == 200){
            this.towns = res.result;
            let currentTown = this.towns.find((item,index)=>{
              return item.xzqmc == '东蒙镇'
            })
            this.currentTown = currentTown.xzqmc
            this.getFireFighters(currentTown.gid);
            this.getVillages(currentTown.gid);
          }
        })
      },
      getFireFighters(id){
        getMethodCommon("/FireGrid/GetFireFighterById",{streetid:id}).then(res=>{
          if(res.code == 200){
            this.firefighter = res.result;
          }
        })
      },
      getVillages(id){
        getMethodCommon("/FireGrid/GetVillageByTownId",{id:id}).then(res=>{
          if(res.code == 200){
            this.villages = res.result;
            if(this.villages.length>0){
              this.currentVillage = this.villages[0].AreaName;
              this.getGrids(this.villages[0].Id);
              this.getTrees(this.villages[0].Id);
            }
          }
        })
      },
      getGrids(id){
        getMethodCommon("/FireGrid/GetGridInfoByVillageId",{id:id}).then(res=>{
          if(res.code == 200){
            this.grids = res.result;
          }
        })
      },
      getTrees(id){
        getMethodCommon("/FireGrid/GetUserByVillageId",{id:id}).then(res=>{
          if(res.code == 200){
            this.trees = res.result;
          }
        })
      }
    }
  }
</script>

<style scoped>
  .container{
    width:100%;
    height:100%;
    padding:30px 0px;
    position:relative;
    background-image:url(/img/gridman/yizhangtu-bg.png);
    background-size:100% 100%;

  }

  .container-box{
    width:100%;
    height: calc( 100% - 100px);
    overflow: auto;
  }

  .container-box::-webkit-scrollbar{
    display:none;
  }
  .town{
    width:88px;
    height: 100%;
    background: linear-gradient(270deg, #1A5093 0%, #051836 100%);
    border-radius: 0px 30px 30px 0px;
    border-image: linear-gradient(270deg, rgba(37, 112, 206, 1), rgba(25, 77, 141, 0)) 1 1;
    color:#fff;
    text-align: center;
    line-height: calc( 100vh - 300px);
    font-size:18px;
    float:left;
  }

  /* 乡镇 */
  .street-container{
    width:388px;
    height:100%;
    margin:0px 10px;
    float:left;
  }

  .street-container .street-container-title{
    width:100%;
    height:70px;
    background-image:url(/img/gridman/xiangzhen.png);
    background-size:100% 100%;
    line-height:70px;
    color:#fff;
    text-indent:20px;
    font-size:20px;
    font-weight: bold;
  }

  .item{
    width:100%;
    height:200px;
    background: linear-gradient(180deg, rgba(7,27,67,0.1) 0%, #0F315F 100%);
    margin:10px 0px;
    border-top:2px solid #1A4E90;
    padding:15px;
    cursor:pointer;
  }

  .item-title{
    font-size:16px;
    color:#fff;
    text-indent:20px;
    height:30px;
    width:100%;
    position:relative;
  }
  .item-title::after{
    content:"";
    width:3px;
    height:22px;
    background:#1A4E90;
    position:absolute;
    top:2px;
    left:0px;
  }

  .item-info{
    width:100%;
    height:30px;
    color:#fff;
    line-height:30px;
    margin-top:10px;
    border: 1px solid #11376A;
    padding-left:25px;
    background-image:url(/img/gridman/wenan.png);
    background-size:100% 100%;
    position:relative;
  }

  .item-info::after{
    width:5px;
    height:5px;
    background:#FACD44;
    border-radius: 50%;
    content:"";
    position:absolute;
    top:12.5px;
    left:12.5px;
  }

  .item-info span{
    display:block;
    float:left;
    width:110px;
  }
  .xiaofang .street-container-title{
    background-image:url(/img/gridman/xiangfangyuan.png);
  }
  .xiaofang .item{
    width:100%;
    height:105px;
    /* border-left:9px solid #E00266; */
    background: linear-gradient(145deg, #670D2C 0%, #250C2F 100%);
    background-image:url(/img/gridman/xiaofangyuan-1.png);
    background-size:100% 100%;
    border-top:0px;
  }
  .xiaofang .item-name{
    width: 66px;
    height: 66px;
    background-image:url(/img/gridman/item-name.png);
    background-size:100% 100%;
    line-height:66px;
    text-align:center;
    color:#fff;
    float:left;
  }

  .xiaofang .item-sex-phone{
    float:left;
    color:#fff;
    margin-left:15px;
    line-height:30px;
  }

  .xiaofang .item-sex-phone .item-sex{
    border-radius: 15px;
    padding:0px 12px;
    border: 1px solid #720A3C;
    margin-bottom:6px;
  }

    .xiaofang .item-sex-phone .item-phone{
    border-radius: 15px;
    padding:0px 12px;
    border: 1px solid #720A3C;
  }

  .cun .item{
    height:130px;
    background: linear-gradient(180deg, rgba(7,27,67,0.1) 0%, #0F315F 100%);

  }

  .cun .item-title::after{
    display: none;
  }

  .cun .item-village-info{
    float:left;
    width:50%;
    height:80px;
  }

  .cun .item-grid-count{
    float:left;
    height:40px;
    padding-top:10px;
    color:#fff;
    line-height:20px;
  }
    .cun .item-village-info .item-info{
      width:100%;
      height:20px;
      background-image:none;
      border:none;
    }



  .hulinyuan{
    width:250px;
  }

.hulinyuan .street-container-title{
    height:60px;
    line-height:60px;
    background-image:url(/img/gridman/hulinyuan.png);
  }
.hulinyuan .item{
  border-top:0px;
  padding:0px;
  height:238px;
  background: linear-gradient(180deg, rgba(51,52,36,0.23) 0%, #B67F10 100%);
}
.hulinyuan .item-title{
  background: linear-gradient(270deg, rgba(51,51,36,0) 0%, #EAC63C 100%);
}
.hulinyuan .item-title::after{
  display:none;
}
.hulinyuan .item-info{
  width: calc( 100% - 30px);
  margin:0 15px;
  margin-top:10px;
  background-image: none;
  border: 1px solid;
border-image: linear-gradient(270deg, rgba(233, 197, 60, 0), rgba(233, 197, 60, 1)) 1 1;
}

.hulinyuan .item-info::after{
  width:2px;
  height:12px;
  top:8px;
  left:0px;
}
  .wangge{
    width:329px;
  }

  .wangge .street-container-title{
    height:60px;
    line-height:60px;
    background-image:url(/img/gridman/wangge.png);
  }

 .wangge .item{
  border-top:0px;
  padding:0px;
  height:238px;
  background: linear-gradient(180deg, rgba(51,52,36,0.23) 0%, #B67F10 100%);
}
.wangge .item-title{
  background: linear-gradient(270deg, rgba(51,51,36,0) 0%, #EAC63C 100%);
}
.wangge .item-title::after{
  display:none;
}
.wangge .item-info{
  width: calc( 100% - 30px);
  margin:0 15px;
  margin-top:10px;
  background-image: none;
  border: 1px solid;
border-image: linear-gradient(270deg, rgba(233, 197, 60, 0), rgba(233, 197, 60, 1)) 1 1;
}

.wangge .item-info::after{
  width:2px;
  height:12px;
  top:8px;
  left:0px;
}
  .wangge{
    width:329px;
  }
  
</style>