<template>
  <div v-if="modalFlag" @mousewheel="mousewheel">
    <div class="group_member_modal">
      <div class="modal_content">
        <div class="addByArea">
          <span>按区域添加</span>
          <div v-for="(item, index) in areaList" :key="index">
            <input
              type="checkbox"
              :value="item"
              v-model="checkedBoxList"
              @click="clickCheckbox(index)"
            /><span>{{ item }}</span>
          </div>
          <button @click.prevent="addByArea">添加</button>
        </div>
        <div class="addByCustomize">
          <span>自定义添加</span>
          <input
            id="drl"
            list="drls"
            class="inputStyle focusStyle"
            v-model="addByCustomize"
            placeholder="DLR Code / 经销商"
          />
          <datalist id="drls">
            <option v-for="(item, index) in dlrList" :key="index" :value="item">
              {{ item }}
            </option>
          </datalist>
          <button @click.prevent="addBySelf">添加</button>
        </div>
        <div class="count">
          <Count :sum="sum" />
        </div>
        <div class="table">
          <Table
            :tableData="tableData"
            :currentPage="currentPage"
            :pageSize="pageSize"
            @change_icon="changeIcon"
          >
          </Table>
                  <div class="page" v-if="sum > 0">
          <Tablepage
            :totalPage="totalPage"
            :currentPage="currentPage"
            @change_page="changePage"
            @jump_page="jumpPage"
          />
        </div>
        </div>
        <div class="btn">
          <div
            class="current_button"
            style="width: 120px; margin: 0"
            @click="submit"
          >
            保存
          </div>
          <div
            class="current_button"
            style="width: 120px; margin: 0"
            @click="hideModal"
          >
            取消
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Count from "../../../../components/Count";
import Tablepage from "../../../../components/TablePage";
import Table from "./ModalTable";
export default {
  props: {
    modalFlag: {
      type: Boolean,
      default: false,
    },
    tableList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  components: {
    Table,
    Count,
    Tablepage,
  },
  computed: {
    // 表格总页数
    totalPage() {
      return Math.ceil(this.sum / this.pageSize);
    },
  },
  data() {
    return {
      sum: 0,
      pageSize: 10,
      currentPage: 1,
      areaList: [], // 按区域添加
      checkedBoxList: [],
      addByCustomize: "",
      tableData: [],
      dlrList: [],
      allDlr: [],
      idList: [],
    };
  },
  methods: {
    submit: function () {
      this.dlrIdList();
      this.$emit("submit", this.idList);
    },
    hideModal: function () {
      this.$emit("hide_modal");
    },
    // 保证多选框全区和其他的多选框互斥
    clickCheckbox(i) {
      let list = this.checkedBoxList;
      let include = list.indexOf("全区");
      console.log(include, i);
      // if (i === 0) {
      //   this.checkedBoxList = [];
      //   return;
      // }
      // if (include >= 0) {
      //   this.checkedBoxList.splice(0, 1);
      // }
    },
    // 点击按区域添加button
    addByArea: function () {
      if (this.checkedBoxList.length !== 0) {
        let strReq = this.checkedBoxList.join(",");
        let req = {
          localArea: strReq,
        };
        this.getDlrData(req);
      }
    },
    // 自定义添加
    addBySelf: function () {
      if (this.addByCustomize) {
        let req = {
          queryParams: this.addByCustomize,
        };
        this.getDlrData(req, false, true);
      }
    },
    // 筛选
    changeIcon: function (i) {
      let index = (this.currentPage - 1) * this.pageSize + i;
      this.allDlr[index].flag = !this.allDlr[index].flag;
    },
    // 获取某一页面的数据，展示在表格
    changePage: function (page) {
      this.currentPage = page;
      this.tableData = this.allDlr.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    // 点击上一页，下一页，首页，尾页
    jumpPage: function (item) {
      switch (item) {
        case 1:
          this.currentPage = 1;
          break;
        case 2:
          this.currentPage = this.currentPage - 1;
          break;
        case 3:
          this.currentPage = this.currentPage + 1;
          break;
        case 4:
          this.currentPage = this.totalPage;
          break;
      }
      this.tableData = this.allDlr.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    mousewheel: function (e) {
      e.preventDefault();
    },
    // 选中经销商的id 组成列表
    dlrIdList: function () {
      this.idList = [];
      this.allDlr.forEach((element) => {
        if (element.flag) {
          this.idList.push(element.id);
        }
      });
    },
    // 获取经销商信息接口
    getDlrData: function (data = {}, flag, addBySelfFlag) {
      this.$http({
        method: "post",
        url: "/sys/agent/selectAgentInfoPage",
        data: data,
      })
        .then((res) => {
          console.log(res);
          let nowSum = this.sum;
          if (res.data && res.data.code === 200) {
            // created时，获取自定义添加datalist下拉框的值
            if (flag) {
              this.dlrList = [];
              let allDlrList = res.data.data;
              allDlrList.forEach((item) => {
                this.dlrList.push(item.dlrName);
                this.dlrList.push(item.dlrCode);
              });
            } else {
              // 整合数据， 主要目的是加一个 flag，在用户点击筛选的时候，好判断
              this.tableData = [];
              res.data.data.forEach((item) => {
                this.allDlr.push({
                  id: item.id,
                  dlrCode: item.dlrCode,
                  dlrName: item.dlrName,
                  localArea: item.localArea,
                  flag: true,
                });
              });
              // 去重
              let hash = {};
              this.allDlr = this.allDlr.reduce(function (item, next) {
                hash[next.id] ? "" : (hash[next.id] = true && item.push(next));
                return item;
              }, []);
              this.sum = this.allDlr.length;
              // 添加以后跳到最后一页
              this.currentPage = this.totalPage;
              let startData = (this.currentPage - 1) * this.pageSize;
              let endData = this.currentPage * this.pageSize;
              this.tableData = this.allDlr.slice(startData, endData);
              // 自定义添加  提示
              if (this.sum === nowSum && addBySelfFlag) {
                alert("该小组已在列表中，不用重复添加");
              }
            }
          } else {
            console.log(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 按区域查找进销商信息  接口
    getAreaList: function (data) {
      this.$http({
        method: "post",
        url: "/sys/agent/selectAgentAreaInfoList",
        data: data,
      })
        .then((res) => {
          console.log(res, 11);
          if (res.data && res.data.code === 200) {
            this.areaList = res.data.data;
          } else {
            console.log(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.getDlrData({}, true);
    this.tableData = this.tableList;
    this.getAreaList();
  },
};
</script>

<style scoped lang="less">
.group_member_modal {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(127, 127, 127, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  .modal_content {
    width: 700px;
    height: 600px;
    background-color: #fff;
    padding: 30px 60px;
    position: relative;
    .addByArea {
      display: flex;
      height: 28px;
      align-items: center;
      span {
        margin-right: 10px;
      }
      div {
        margin-right: 18px;
        height: 18px;
        input {
          width: 12px;
          height: 12px;
          vertical-align: middle;
          margin-top: -2px;
          border: 1px solid #ccc;
        }
        span {
          margin-left: 2px;
          height: 18px;
          line-height: 18px;
        }
        button {
          height: 28px;
        }
      }
    }
    .addByCustomize {
      margin: 20px 0 0 0;
      button {
        height: 28px;
      }
      input {
        // background: url('../../img/search.svg') no-repeat center left;
        // background-size: 21px 25px;
        background-color: #fff;
      }
    }
    .count {
      display: flex;
      justify-content: flex-end;
    }
    .table {
      height: 400px;
      overflow: auto;
    }
    .btn {
      padding: 0 180px;
      margin-top: 20px;
      display: flex;
      justify-content: space-around;
    }
  }
}
.inputStyle {
  margin-left: 17px;
  width: 130px;
  height: 18px;
  line-height: 18px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  color: #555555;
  font-size: 12px;
}
.focusStyle {
  border: 1px solid #ccc;
  line-height: 20px;
  color: #555555;
  outline: none;
}
.focusStyle:focus {
  animation: shadowAni 200ms linear forwards;
}
@keyframes shadowAni {
  0% {
    border-color: #cccccc;
    box-shadow: inset 0px 0px 0 #ccc;
  }
  100% {
    border-color: #75b9f0;
    box-shadow: 0px 0px 10px #75b9f0;
  }
}
</style>
