<template>
  <view class="add-school">
    <!-- 顶部的邀请入园 -->
    <view class="toInvite">
      <view class="toInviteContent">
        *未加入我的地区幼儿园，可【分享专属邀请-园长注册-地区负责人审核通过】
      </view>
      <view class="toInviteBtn" @click="toInvite">去邀请</view>
    </view>

    <view class="selectSchoolBtn" @click="selectMySchool">
      <image class="selectBtn" :src="staticImg.selectBtn" />
      <text>选择我的地区幼儿园</text>
    </view>

    <view class="school-card-list">
      <view
        class="school-card"
        v-for="(item, index) in schoolList"
        :key="item.code"
      >
        <view
          class="card-header"
          v-if="isEdit"
          :style="{ marginTop: isEdit ? '-40rpx' : '0' }"
        >
          <image
            class="delete-icon"
            :src="staticImg.deleteIcon"
            @click="handleDelete(index)"
          />
        </view>
        <view class="school-information">
          <view class="school-information-item">
            <view class="school-label">参赛园所名称</view>
            <view class="school-content">
              <text class="school-content-school-name">{{
                item.schoolName
              }}</text>
            </view>
          </view>
          <view class="school-information-item">
            <view class="school-label">初赛人数预估</view>
            <view class="school-content">
              <text v-if="!isEdit" class="school-content-school-name">{{
                item.totalPerson
              }}</text>
              <input
                v-else
                type="number"
                class="school-content-input"
                :value="item.totalPerson"
                @input="changeForm($event, index, 'totalPerson')"
              />
              <text
                :class="['endText', isEdit ? '' : 'school-content-school-name']"
                >人</text
              >
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="add-school-button" v-if="isEdit" @click="addSchool">
      <view class="school-add-button">
        <image class="plus-icon" :src="staticImg.plusIcon" />
        <text>添加参赛园所</text>
        <van-icon color="#4679FF" name="arrow" />
      </view>
    </view> -->

    <!-- 编辑与保存按钮 -->
    <view class="opration-buttons">
      <view class="cancel-button" @click="cancelOpration">返回</view>
      <view
        :class="['opration-button', isEdit ? 'bg-b' : 'bg-r']"
        @click="changeOprationState"
      >
        {{ isEdit ? "保存" : "编辑" }}
      </view>
    </view>
  </view>
</template>

<script>
import Tip from "@/utils/tip.js";

const staticImg = {
  closeIcon: require("@/static/competitionRegister/common/close-icon.png"),
  deleteIcon: require("@/static/competitionRegister/common/delete-icon.png"),
  plusIcon: require("@/static/competitionRegister/common/plus-icon.png"),
  selectBtn: require("@/static/competitionRegister/common/selectBtn.png"),
};
export default {
  name: "add-school",
  computed: {
    placeholderStyle() {
      return `font-size: 30rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #D1D1D1;`;
    },
  },
  data() {
    return {
      staticImg,
      isEdit: true, //是否是编辑状态
      schoolList: [],
      form: {
        schoolName: "",
        totalPerson: "",
      },
      formData: {},
    };
  },
  onLoad(options) {
    uni.getStorage({
      key: "formData",
      success: (res) => {
        this.formData = res.data;
        this.schoolList = res.data.schoolList;
      },
      fail: (res) => {
        console.log(res, "fail");
      },
    });
    this.$nextTick(() => {
      if (options.schoolList) {
        const schoolList = JSON.parse(decodeURIComponent(options.schoolList));
        schoolList.forEach((item) => {
          if (
            this.schoolList.findIndex((i) => i.schoolId === item.schoolId) !==
            -1
          ) {
            item.totalPerson = this.schoolList.filter(
              (i) => i.schoolId === item.schoolId
            )[0].totalPerson;
          }
        });
        this.schoolList = schoolList;
      }
    });
  },
  methods: {
    toInvite() {
      uni.navigateTo({
        url: "/pages/invitePage/index",
      });
    },
    selectMySchool() {
      uni.redirectTo({
        url: `/pages/competitionRegister/selectSchool?schoolList=${encodeURIComponent(
          JSON.stringify(this.schoolList)
        )}`,
      });
    },
    handleDelete(index) {
      this.schoolList.splice(index, 1);
    },
    cancelOpration() {
      uni.redirectTo({
        url: `/pages/competitionRegister/collectInformation`,
      });
    },
    changeOprationState() {
      if (
        this.schoolList.findIndex(
          (item) => item.totalPerson === undefined || item.totalPerson * 1 < 1
        ) !== -1
      ) {
        Tip.error("请填写初赛预估人数!");
        return;
      }
      this.isEdit = !this.isEdit;
      if (!this.isEdit) {
        uni.setStorage({
          key: "formData",
          data: { ...this.formData, schoolList: this.schoolList },
          success: () => {
            console.log("formData保存成功");
          },
        });
      }
    },
    restForm(index, key) {
      this.schoolList[index][key] = "";
    },
    changeForm(e, index, key) {
      const value = e.detail.value;
      this.schoolList[index][key] = value;
    },
  },
};
</script>

<style lang="less" scoped>
.add-school {
  min-height: 100vh;
  background-color: #fff;
  box-sizing: border-box;
  overflow: hidden;

  .toInvite {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32rpx;
    height: 88rpx;
    background: #ffe7e9;
    .toInviteContent {
      width: 514rpx;
      height: 64rpx;
      font-size: 22rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ff808c;
      line-height: 32rpx;
    }
    .toInviteBtn {
      width: 152rpx;
      height: 60rpx;
      line-height: 60rpx;
      background: #ff7e8a;
      border-radius: 30rpx;
      font-size: 26rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
      box-sizing: border-box;
    }
  }

  .selectSchoolBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40rpx auto 0;
    width: 686rpx;
    height: 108rpx;
    background: #507bfc;
    box-shadow: 0px 0px 44rpx 0px rgba(226, 226, 226, 0.58);
    border-radius: 20rpx;
    .selectBtn {
      display: block;
      width: 40rpx;
      height: 40rpx;
      object-fit: cover;
    }
    text {
      margin-left: 22rpx;
      width: 308rpx;
      height: 48rpx;
      font-size: 34rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 48rpx;
    }
  }
  .school-card-list {
    padding: 0 32rpx 258rpx;
    box-sizing: border-box;
    .school-card {
      margin-top: 48rpx;
      padding: 40rpx 32rpx;
      width: 686rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 44rpx 0rpx rgba(226, 226, 226, 0.58);
      border-radius: 20rpx;
      box-sizing: border-box;
      .card-header {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 24rpx;
        width: 100%;
        height: 68rpx;
        border-bottom: 2rpx solid #eee;
        .delete-icon {
          display: block;
          width: 24rpx;
          height: 24rpx;
        }
      }
      .school-information {
        .school-information-item:last-child {
          margin-bottom: 0;
        }

        .school-information-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 24rpx;
          .school-label {
            font-size: 30rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #777777;
          }
          .school-content {
            width: 393rpx;
            display: flex;
            align-items: center;
            .school-content-school-name {
              color: #999999 !important;
            }
            .school-content-input {
              width: 124rpx;
              height: 64rpx;
              border-radius: 10rpx;
              border: 2rpx solid #e3e3e3;
              text-align: center;
            }
            .endText {
              margin-left: 20rpx;
              font-size: 30rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
            }
          }
        }
      }
    }
  }

  .add-school-button {
    .school-add-button {
      width: 686rpx;
      height: 108rpx;
      border-radius: 20rpx;
      border: 4rpx dashed rgba(0, 91, 255, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      .plus-icon {
        width: 42rpx;
        height: 40rpx;
      }
      text {
        font-size: 34rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #4679ff;
        margin-left: 20rpx;
        margin-right: 12rpx;
      }
    }
  }

  .opration-buttons {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 120rpx;
    padding: 0 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    .cancel-button {
      width: 318rpx;
      height: 90rpx;
      border-radius: 84rpx;
      border: 2rpx solid #b4b4b4;
      background-color: #fbfcfe;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;
    }

    .opration-button {
      width: 318rpx;
      height: 90rpx;
      border-radius: 84rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }

    .bg-b {
      background: #507bfc;
    }

    .bg-r {
      background: #ff7e8a;
    }
  }
}
</style>
