<template>
  <div class="warning-box">
    <cpt-card class="card-wr">
      <div class="card-title">
        <img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
        <div class="title-label">
          区域化党建
        </div>
      </div>
      <div class="second-title">
        <div class="second-title-label">党建单位分类统计</div>
        <div class="second-select">
          <el-select v-model="value2" clearable placeholder="请选择">
            <el-option
              v-for="item in headerList"
              :key="item.coulmn"
              :label="item.title"
              :value="item.coulmn">
            </el-option>
          </el-select>
        </div>
        <div class="second-select">
          <el-date-picker
            v-model="value2"
            type="date"
            prefix-icon="el-icon-caret-bottom"
            placeholder="选择日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </div>
      </div>
      <div class="box-wr box-wr-400">
        <div class="box-left">
          <div class="box-left-item">
            <div class="box-label">组织单位</div>
            <div class="box-num">1233</div>
          </div>
          <div class="box-left-item">
            <div class="box-label">组织活动</div>
            <div class="box-num">1233</div>
          </div>
        </div>
        <div class="box-right">
          <div class="warning-box-bottom">
            <screen-table
              :headerList="headerList"
              :tableData="tableData"
              :visibleLoading="visibleLoading"
              :operate="false"
            ></screen-table>
            <div class="pagination">
              <el-pagination
                :current-page="pageNo"
                :page-size="pageSize"
                background
                layout="prev, pager, next"
                @size-change="pageSizeChangeHandleNew"
                @current-change="pageCurrentChangeHandleNew"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <div class="second-title">
        <div class="second-title-label">党建单位分类统计</div>
      </div>

      <div class="box-wr">
        <div class="box-left box-left-w400">
          <div v-for="item in partyItem" :key="item.value" class="box-left-item">
            <div class="box-label">{{ item.name }}</div>
            <div class="box-num" :style="'color:' + item.color">{{ item.value }}</div>
          </div>
          
        </div>
        <div class="box-right">
         <div class="box-map">这是地图容器</div>
         <div class="map-tips">
            <div v-for="item in partyItem" :key="item.value" class="map-tips-item">
              <div class="map-tips-icon">
                <img :src="item.icon" />
              </div>
              <div class="map-tips-label">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>

    </cpt-card>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import screenTable from "../components/screen-table/index";
import cptCard from "@/views/modules/visual/cpts/card";
import nextTick from "dai-js/tools/nextTick";

export default {
  name: "warning-box",
  components: {
    cptCard,
    screenTable,
  },
  data() {
    return {
      warningList: [],
      headerList: [
        { title: "序号", coulmn: 'index' },
        { title: "需求类型", coulmn: 'gridName' },
        { title: "具体内容", coulmn: 'buildingName' },
        { title: "上报情况", coulmn: 'neighborhoodName' },
        { title: "上报人", coulmn: 'residentNames' },
        { title: "上报时间", coulmn: 'residentNames' },
        { title: "是否认领", coulmn: 'residentNames' },
        { title: "认领方", coulmn: 'residentNames' },
        { title: "认领时间", coulmn: 'residentNames' }
      ],
      tableData: [
        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
      ],
      value2: '',
      visibleLoading: true,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      activeIndex: 0,
      activeLevel: "1",
      partyItem: [
        {
          name: '楼宇党建',
          value: 1,
          color: 'rgba(250, 32, 10, 1)',
          icon: require('../../../../assets/img/shuju/measure/ly@2x.png')
        }, {
          name: '机关直属部门',
          value: 2,
          color: 'rgba(65, 181, 104, 1)',
          icon: require('../../../../assets/img/shuju/measure/jgzs@2x.png')
        }, {
          name: '两新党建',
          value: 3,
          color: 'rgba(251, 177, 4, 1)',
          icon: require('../../../../assets/img/shuju/measure/lxdj@2x.png')
        }, {
          name: '辖区单位',
          value: 4,
          color: 'rgba(80, 194, 237, 1)',
          icon: require('../../../../assets/img/shuju/measure/xq@2x.png')
        }, {
          name: '其他',
          value: 5,
          color: 'rgba(192, 21, 195, 1)',
          icon: require('../../../../assets/img/shuju/measure/qita.png')
        }
      ],
    };
  },
  async mounted() {
    await nextTick(100);
    this.getBuildingwarnlist();
  },
  methods: {
    
    
    onClickList(index, level) {
      this.activeIndex = index;
      this.activeLevel = level;
      this.pageNo = 1;
      this.getUserwarnlist();
    },
    //具体人员列表
    async getUserwarnlist() {
      const { activeIndex, activeLevel, warningList } = this;
      const reqItem = warningList[activeIndex];
      let tableData = [];
      const url = "/epmetuser/statsresiwarn/userwarnlist";
      let params = {
        configId: reqItem.configId,
        buildingIdList: reqItem["buildingIdList" + activeLevel],
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        tableData = data.list.map((item, index) => {
          return {
            ...item,
            index: index + 1,
            residentNames: item.residentNames || "暂无"
          }
        });
        this.tableData = tableData;
        this.total = data.total;
      } else {
      }
    },
    // 【人员预警】 楼宇预警数量列表
    async getBuildingwarnlist() {
      const url = "/epmetuser/statsresiwarn/buildingwarnlist";
      let params = {
        agencyId: this.$store.state.user.agencyId,
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        this.warningList = data;
        this.visibleLoading = false;
        this.getUserwarnlist();
      } else {
      }
    },
    pageSizeChangeHandleNew(val) {
      this.pageNo = 1;
      this.pageSize = val;
    },
    pageCurrentChangeHandleNew(val) {
      this.pageNo = val;
      this.getUserwarnlist();
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/warning.scss"
  scoped
></style>
<style lang="scss" scoped>
.warning-box {
  display: flex;
  .card-wr {
    flex: 1;
  }
  .card-wr:last-child {
    margin-left: 20px;
  }
}
.card-title {
  display: flex;
  align-items: center;
  cursor: pointer;
  .title-icon {
    display: block;
    width: 46px;
    height: 34px;
    box-sizing: border-box;
    margin-right: 6px;
  }
  .title-label {
    font-size: 16px;
    font-weight: 800;
  }
  ::v-deep .el-dropdown {
    font-size: 16px;
    color: #fff;
    font-weight: 800;
  }
  
}
.second-title {
  display: flex;
  align-items: center;
  margin-top: 20px;
  .second-title-label {
    position: relative;
    padding-left: 40px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
  }
  .second-title-label::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 20px;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    margin-top: -6px;
    background: #2865FA;
    border-radius: 50%;
  }
  .second-select {
    margin: 0 10px 0 40px;
    ::v-deep .el-input {
      width: 120px;
      height: 36px;
      .el-input__inner {
        height: 100%;
        padding: 0 10px;
        color: #fff;
        line-height: 36px;
        background: #06186D;
        border: 1px solid #1A64CC;
      }
      
      .el-icon-arrow-up:before {
        content: "\e78f"
      }
      // .el-select__caret:before {
      //   content: '\E790'
      // }
    }
    ::v-deep .el-date-editor {
      .el-input__prefix {
        left: unset;
        right: 5px;
      }
    }
  }
  .second-select:last-child {
    margin-left: 0;
  }
}

.box-wr {
  display: flex;
  box-sizing: border-box;
  .box-left {
    flex-shrink: 0;
    display: flex;
    .box-left-item {
      .box-label {
        font-size: 16px;
        color: rgba(255, 255, 255, .72);
      }
      .box-num {
        font-size: 32px;
        font-weight: bold;
        color: #fff;
      }
    }
  }
  .box-right {
    flex: 1;
    .box-map {
      height: 400px;
      border: 1px solid #2865FA;
    }
  }
  .box-left-w400 {
    flex-wrap: wrap;
    width: 400px;
    box-sizing: border-box;
    padding-top: 60px;
    padding-left: 100px;
    .box-left-item {
      width: 50%;
    }
  }
}
.box-wr-400 {
  height: 400px;
  .box-left {
    width: 300px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .box-left-item:last-child {
      margin-top: 100px;
    }
  }
}


.map-tips {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 20px;
  .map-tips-item {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-right: 40px;
    .map-tips-icon {
      width: 32px;
      height: 32px;
      box-sizing: border-box;
      margin-right: 10px;
      // background: #DD2719;
      // border-radius: 2px;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .map-tips-label {
      font-size: 16px;
      color: #fff;
    }
  }
}

</style>
