<template>
  <view class="selectSchool">
    <view class="schoolList">
      <view class="schoolItem" v-for="item in schoolList" :key="item.id">
        <image
          :src="item.isSelect ? staticImg.selectBtn : staticImg.noSelectBtn"
          class="selectBtn"
          @click="changeSelectState(item)"
        />
        <view class="schoolItemContent">
          <view class="schoolItemName">
            <view class="label">园所名称</view>
            <view class="value">{{ item.schoolName }}</view>
          </view>
          <view class="schoolItemName">
            <view class="label">园长姓名</view>
            <view class="value">{{ item.principalName }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="selectSchoolFooter">
      <div class="footerContent">
        <image
          :src="allIsSelect ? staticImg.allSelectBtn : staticImg.allNoSelectBtn"
          class="allSelectBtn"
          @click="allSelect"
        />
        <view class="allSelectText" @click="allSelect">全选</view>
        <view class="toInvite" @click="toInvite">邀请幼儿园加入</view>
        <view class="confirmBtn" @click="confirm">
          <view>确定</view>
          <view v-if="selectNum > 0" class="selectNum">
            （已选择：{{ selectNum }}）
          </view>
        </view>
      </div>
    </view>
  </view>
</template>

<script>
import Tip from "@/utils/tip.js";
import { getDistrictGarden } from "@/api/districtGarden.js";
const staticImg = {
  selectBtn: require("@/static/competitionRegister/index/selectBtn.png"),
  noSelectBtn: require("@/static/competitionRegister/index/noSelectBtn.png"),
  allNoSelectBtn: require("@/static/competitionRegister/index/allNoSelectBtn.png"),
  allSelectBtn: require("@/static/competitionRegister/index/allSelectBtn.png"),
};
export default {
  name: "SelectSchool", // 选择幼儿L园
  data() {
    return {
      staticImg,
      schoolList: [],
      allIsSelect: false,
      selectNum: 0,
      selectSchoolList: [],
    };
  },
  async onLoad(options) {
    await this.getDistrictGarden();
    if (options.schoolList) {
      const schoolList = JSON.parse(decodeURIComponent(options.schoolList));
      schoolList.map((item) => {
        const index = this.schoolList.findIndex((i) => i.id === item.schoolId);
        this.changeSelectState(this.schoolList[index]);
      });
      this.selectSchoolList = schoolList;
    }
  },
  methods: {
    toInvite() {
      uni.reLaunch({
        url: "/pages/invitePage/index",
      });
    },
    confirm() {
      uni.redirectTo({
        url: `/pages/competitionRegister/addSchool?schoolList=${encodeURIComponent(
          JSON.stringify(this.selectSchoolList)
        )}`,
      });
    },
    setSelectSchoolList() {
      let list = this.schoolList.map((item) => {
        if (item.isSelect)
          return {
            schoolId: item.id,
            schoolName: item.schoolName,
          };
      });
      list = list.filter((item) => item);
      list.forEach((item) => {
        const index = this.selectSchoolList.findIndex(
          (i) => i.schoolId === item.schoolId
        );
        if (index !== -1) {
          item.totalPerson = this.selectSchoolList[index].totalPerson;
        }
      });
      this.selectSchoolList = list;
    },
    // 全选
    allSelect() {
      this.allIsSelect = !this.allIsSelect;
      this.addSchoolIsSelect(this.allIsSelect);
      if (this.allIsSelect) {
        this.selectNum = this.schoolList.length;
      } else {
        this.selectNum = 0;
      }
    },
    // 改变选中状态
    changeSelectState(val) {
      val.isSelect = !val.isSelect;
      if (val.isSelect) {
        this.selectNum++;
      } else {
        this.selectNum--;
      }
      if (this.selectNum === this.schoolList.length) {
        this.allIsSelect = true;
      } else {
        this.allIsSelect = false;
      }
      this.setSelectSchoolList();
      this.$forceUpdate();
    },
    // 给每个幼儿园添加选中状态
    addSchoolIsSelect(state) {
      this.schoolList.forEach((item) => {
        item.isSelect = state;
      });
      this.setSelectSchoolList();
      this.$forceUpdate();
    },
    // 获取幼儿园列表
    async getDistrictGarden() {
      Tip.loading("加载中");
      const params = {
        page: 1,
        pageSize: 10000,
      };
      const { data, status, msg } = await getDistrictGarden(params);
      Tip.loaded();
      if (status === 200) {
        const { entityList } = data;
        this.schoolList = entityList;
        this.addSchoolIsSelect(false);
      } else {
        Tip.error(msg);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.selectSchool {
  min-height: 100vh;
  .schoolList {
    padding-bottom: 240rpx;
    .schoolItem {
      display: flex;
      align-items: center;
      padding: 0 36rpx;
      margin: 28rpx auto 0;
      width: 686rpx;
      height: 198rpx;
      background: #ffffff;
      box-shadow: 0px 0px 44rpx 0px rgba(226, 226, 226, 0.58);
      border-radius: 20rpx;
      box-sizing: border-box;
      .selectBtn {
        display: block;
        width: 44rpx;
        height: 44rpx;
        object-fit: cover;
      }
      .schoolItemContent {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 38rpx;
        height: 118rpx;
        .schoolItemName {
          display: flex;
          .label {
            width: 120rpx;
            height: 44rpx;
            font-size: 30rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #777777;
            line-height: 44rpx;
          }
          .value {
            margin-left: 48rpx;
            height: 44rpx;
            font-size: 30rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 44rpx;
          }
        }
      }
    }
  }
  .selectSchoolFooter {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 212rpx;
    background: #ffffff;
    box-shadow: 0px -14rpx 20rpx 0px rgba(152, 152, 152, 0.05);
    border-radius: 40rpx 40rpx 0px 0px;
    .footerContent {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 146rpx;
      .allSelectBtn {
        display: block;
        width: 38rpx;
        height: 38rpx;
        object-fit: cover;
      }
      .allSelectText {
        padding-left: 12rpx;
        margin-right: 24rpx;
        width: 72rpx;
        height: 42rpx;
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 42rpx;
        box-sizing: border-box;
      }
      .toInvite {
        width: 260rpx;
        height: 90rpx;
        line-height: 90rpx;
        border-radius: 46rpx;
        border: 2rpx solid #507bfc;
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #507bfc;
        text-align: center;
      }
      .confirmBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 20rpx;
        width: 260rpx;
        height: 90rpx;
        background: #507bfc;
        border-radius: 46rpx;
        font-size: 30rpx;
        color: #ffffff;
        text-align: center;
        .selectNum {
          font-size: 22rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
