<template>
  <div class="table-box">
    <div class="max-w flex jc-sb">
      <div class="flex-1 mr-1 call-persondata flex">
        <div class="flex-1 flex ai-c jc-c">
          <img class="img" src="img/zcry.png" />
        </div>
        <div class="flex-1 flex column jc-c" @click="callUser">
          <div class="titles">注册人员</div>
          <div class="span">{{ listDataInfo.allcount }}</div>
        </div>
      </div>
      <div class="flex-1 call-persondata flex">
        <div class="flex-1 flex ai-c jc-c">
          <img class="img" src="img/zxry.png" />
        </div>
        <div class="flex-1 flex column jc-c" @click="$emit('getOnlineUser')">
          <div class="titles">在线人员</div>
          <div class="span">{{ listDataInfo.onlineCount }}</div>
        </div>
      </div>
    </div>
    <div class="call-line"></div>
    <div class="call-content flex column">
      <el-carousel height="150px" indicator-position="outside">
        <el-carousel-item v-for="(item, index) in BannersArr" :key="index">

         <div class="content-li flex">
            <div class="content-title flex ai-c">
              <span class="content-title-span"></span>
              <span class="fz-14 fw-b fc-w">防火片区</span>
            </div>
            <div class="flex-1 fz-14 fc-w" style="line-height: 28px">
              {{ item.xzqmc }}
            </div>
          </div>

          <div class="content-li flex">
            <div class="content-title flex ai-c">
              <span class="content-title-span"></span>
              <span class="fz-14 fw-b fc-w">督查长</span>
            </div>
            <div class="flex-1 fz-14 fc-w" style="line-height: 28px">
               <span v-for="(it,idx) in item.dcz" :key="'dcz'+idx">{{it.name}}</span>
            </div>
          </div>
          <div class="content-li flex">
            <div class="content-title flex ai-c">
              <span class="content-title-span"></span>
              <span class="fz-14 fw-b fc-w">副督查长</span>
            </div>
            <div class="flex-1 fz-14 fc-w" style="line-height: 28px">
              <span v-for="(it,idx) in item.fdcz" :key="(idx+10)">{{it.name}}&nbsp;</span>
            </div>
          </div>

          <div class="content-li flex">
            <div class="content-title flex ai-c">
              <span class="content-title-span"></span>
              <span class="fz-14 fw-b fc-w">县级包保领导</span>
            </div>
            <div class="flex-1 fz-14 fc-w" style="line-height: 28px">
                 <span v-for="(it,idx) in item.dcz" :key="'dcz1'+idx">{{it.name}}&nbsp;</span>
                  <span v-for="(it,idx) in item.fdcz" :key="idx">{{it.name}}&nbsp;</span>
            </div>
          </div>
          
        </el-carousel-item>
      </el-carousel>
    </div>
    <div v-if="false">
      <img
        class="call-phone cursor"
        src="img/callphone.png"
        @click="callUser"
      />
    </div>
  </div>
</template>

<script>
import { postMethodCommon, getMethodCommon } from "@/api/common.js";
export default {
  name: "setting",
  props: ["globalmap"],
  data() {
    return {
      allPersonArr: [],
      areaName: localStorage.getItem("areaName"),
      BannersArr: [],
      listDataInfo: [],
    };
  },
  watch: {},
  created() {
    
    // this.getListData();

    // 首次加载页面获取在线人数
    this.getOnLineInfo();

    this.getBannerArr();
  },
  mounted() {
    setInterval(() => {
      this.getOnLineInfo();
    }, 5000);
  },
  methods: {
    getBannerArr() {
      getMethodCommon("/FireGrid/GetTownInfos").then((res) => {
        if (res.code == 200) {
          this.BannersArr = res.result;
        }
      });
    },
    getOnLineInfo() {
      getMethodCommon("/FireManagement/GetOnOffLineInfo").then((res) => {
        this.listDataInfo = res.data;
      });
    },
    getListData() {
      let arr = [1, 2];
      let _this = this;
      postMethodCommon(
        "/FireCodePC/GetForestRangers?areaname=" + this.areaName,
        arr
      ).then((res) => {
        let rel = res.data;
        _this.allPersonArr = rel;
      });
    },
    callUser() {
      this.$emit("callUser");
    }
  },
};
</script>

<style scoped>
.table-box {
  width: 100%;
  height: 100%;
  padding: 10px 15px;
}
.call-persondata {
  height: 86px;
  border-image: linear-gradient(
      270deg,
      rgba(255, 223, 105, 0),
      rgba(255, 189, 56, 1)
    )
    1 1;
}
.call-persondata .img {
  width: 68px;
  height: 67px;
}
.call-persondata .titles {
  font-weight: bold;
  color: #ffa513;
  font-size: 18px;
}
.call-persondata .span {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #d0d0d0;
}
.call-line {
  width: 404px;
  height: 2px;
  margin-top: 25px;
}
.call-content {
  height: 185px;
  overflow:hidden;
}

::v-deep .el-carousel{
    overflow:hidden;
}
.content-li {
  width: 400px;
  height:24px;
  min-height: 24px;
  /* background: linear-gradient(270deg, rgba(121,74,14,0) 0%, #442406 100%); */
  background-image: url(/img/call-center-bar.png);
  background-size: 114% 100%;
  margin-top: 12px;
}
.content-title {
  width: 111px;
  height: 28px;
  /* background-image: url(/img/callleftbg.png); */
  background-size: 100% 28px;
  margin-right: 8px;
}
.content-title-span {
  width: 6px;
  height: 6px;
  background: #facd44;
  margin: 0 10px;
}

.call-phone {
  width: 360px;
  height: 78px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}

::-webkit-scrollbar {
  height: 10px;
  width: 10px;
  background: transparent;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  padding-top: 100px;
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
    inset -1px -1px 0 rgba(0, 0, 0, 0.07);
  background-color: #797979;
  min-height: 28px;
  border-radius: 4px;
  background-clip: padding-box;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}

::-webkit-scrollbar-thumb:hover {
  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-thumb:active {
  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
