<template>
  <div class="search-box">
    <div class="select-search">
      <el-select
        v-model="queryParmas.color"
        placeholder="选择分色"
        clearable
        multiple
        collapse-tags
        :popper-append-to-body="false"
        @change="changeColor"
      >
        <el-option
          v-for="dict in dict.type.b_color_type"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="queryParmas.parentid"
        placeholder="选择网格"
        clearable
        :popper-append-to-body="false"
        @change="handleNetwork"
      >
        <el-option
          v-for="dict in networkOption"
          :key="dict.dept_id"
          :label="dict.dept_name"
          :value="dict.dept_id"
        ></el-option>
      </el-select>
    </div>
    <el-checkbox-group v-model="checkList" @change="change">
      <el-checkbox
        :label="item.label"
        v-for="(item, index) in multipleList"
        :key="index"
        :disabled="filterDisabled(item.label)"
      ></el-checkbox>
      <!-- disabled -->
    </el-checkbox-group>
    <el-checkbox label="三维图层" @change="handleMapLayer"></el-checkbox>
  </div>
</template>

<script>
import { getNetWorkId, getNectWorkOffice } from "@/api/home/index.js";
import { mapGetters } from "vuex";
export default {
  dicts: ["b_color_type"],
  computed: {
    ...mapGetters(["mapParmas", "queryParamsXiaoqu"]),
  },
  data() {
    return {
      checkList: [],
      networkOption: [],
      multipleList: [
        { key: "type", label: "户籍", value: 1 },
        { key: "type", label: "流动", value: 2 },
        { key: "isd", label: "中共党员", value: 1 },
        { key: "isk", label: "帮扶对象", value: 1 },
        { key: "isx", label: "重点人群", value: 1 },
        { key: "isj", label: "退伍军人", value: 1 },
      ],
      queryParmas: {
        parentid: undefined,
        color: undefined,
        type: undefined,
        isd: undefined,
        isk: undefined,
        isx: undefined,
        isj: undefined,
      },
    };
  },
  created() {
    this.getNetworkList();
  },
  methods: {
    changeColor(e) {
      this.$store.commit("CHANGE_QUERY", {
        color: e.length > 0 ? e.toString() : undefined,
      });
    },
    async getNetworkList() {
      let res = await getNetWorkId({
        xiaoquId: this.queryParamsXiaoqu.xiaoquId,
      });

      this.networkOption = res.data["网格list"];
    },
    async handleNetwork(e) {
      let networkName = "";
      if (e) {
        let item = this.networkOption.filter((item) => item.dept_id == e)[0];
        networkName = item.dept_name;
        this.$store.commit("SET_NETWORK_INTRODUCE", {
          intro: JSON.parse(item.intro).kaiguo.text,
          list: await this.getNetworkIntro(e),
        });
      }

      this.fromReset();
      this.$store.commit("CHANGE_QUERY", {
        parentid: e,
        color: undefined,
        type: undefined,
        isd: undefined,
        isk: undefined,
        isx: undefined,
        isj: undefined,
        buildingId: undefined,
      });
      this.$store.commit("CHANGE_QUERY_MAP", { networkName: networkName });
    },

    async getNetworkIntro(deptid) {
      let res = await getNectWorkOffice({ deptid: deptid });
      return res.data;
    },

    handleMapLayer(e) {
      this.$store.commit("CHANGE_QUERY_MAP", { sd: e });
    },
    change(e) {
      this.reset();
      e.map((item) => {
        let itemData = this.multipleList.filter((it) => it.label == item)[0];
        this.queryParmas[itemData.key] = itemData.value;
      });
      this.$store.commit("CHANGE_QUERY", {
        type: this.queryParmas.type,
        isd: this.queryParmas.isd,
        isk: this.queryParmas.isk,
        isx: this.queryParmas.isx,
        isj: this.queryParmas.isj,
      });
    },
    filterDisabled(label) {
      if (label == "户籍" || label == "流动") {
        let letisTrue = this.checkList.some((item) => {
          let text = label == "户籍" ? "流动" : "户籍";
          return item == text;
        });
        return letisTrue;
      } else {
        return false;
      }
    },
    reset() {
      this.queryParmas.type = undefined;
      this.queryParmas.isd = undefined;
      this.queryParmas.isk = undefined;
      this.queryParmas.isx = undefined;
      this.queryParmas.isj = undefined;
    },
    fromReset() {
      this.queryParmas.color = undefined;
      this.checkList = [];
      this.reset();
    },
  },
};
</script>

<style lang="scss" scoped>
.search-box {
  position: absolute;
  z-index: 20;
  left: 400px;
  top: 115px;
  display: flex;
  align-items: center;
}
::v-deep .el-checkbox {
  margin-right: 4px;
  font-size: 14px;
  color: #cdfbff;
  background: url("~@/assets/images/ui/btn_bg.png");
  background-size: 100% 100%;
  padding: 9px 15px 10px 15px;
  .el-checkbox__label {
    padding-left: 3px;
  }
}

::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #cdfbff;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background: #fff;
}
::v-deep .el-checkbox__inner::after {
  border-color: #16aa2d;
}

::v-deep .select-search {
  .el-select {
    width: 130px;
    .el-input {
      background: transparent;
    }
    .el-input__inner {
      height: 38px;
      line-height: 30px;
      color: #fff;
      background: url("~@/assets/images/ui/img_btn_search.png");
      background-size: 100% 100%;
      border: 0px !important;
    }
    .el-input__inner::placeholder,
    .el-select__caret {
      color: #fff;
    }
  }
}

::v-deep .el-select__tags {
  padding-left: 6px;
  .el-tag--small {
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
  }
}
</style>
