<template>
  <view :class="['schoolDetail', isEdit ? '' : 'schoolDetailLong']">
    <view
      class="schoolBGI"
      :style="{
        backgroundImage: `url(${
          schoolDetail && schoolDetail.schoolImg
            ? staticImg.defaultSchoolDetail
            : staticImg.defaultSchoolDetail
        })`,
      }"
    >
      <image class="schoolInfoBGI" :src="staticImg.schoolInfoBGI" alt="" />
      <view class="schoolName">{{ schoolDetail.schoolName }}</view>
      <view class="address">
        <text v-for="txt in schoolDetail.regionList" :key="txt.code">{{
          txt.name
        }}</text>
        <text>{{ schoolDetail.address.address }}</text>
      </view>
    </view>
    <view class="schoolInfo">
      <view class="infoItem" v-for="item in fieldList" :key="item.id">
        <view :class="['label', isEdit ? 'editLabel' : '']"
          >{{ item.label }}：</view
        >
        <view :class="['value', isEdit ? 'editValue' : '']">{{
          schoolDetail[item.key]
        }}</view>
      </view>
      <view class="infoItem productInfo">
        <view class="label">使用产品：</view>
        <!-- <template v-if="!isEdit">
          <view class="value productList" v-if="productIsNull">
            <template v-for="pro in schoolDetail.courseNames">
              <view v-if="pro.use" class="product" :key="pro.cardId">{{
                pro.cardName
              }}</view>
            </template>
          </view>
          <view v-else class="value productList">
            <view class="product">无</view>
          </view>
        </template> -->
      </view>

      <!-- 使用产品列表 -->
      <view class="cardList">
        <view
          class="card"
          v-for="item in schoolDetail.courseNames"
          :key="item.cardId"
          @click="selectCard(item)"
        >
          <image
            v-if="isEdit"
            :src="item.use ? staticImg.selectBtn : staticImg.noSelectBtn"
            class="allSelectBtn"
          />
          <text>{{ item.cardName }}</text>
        </view>
      </view>
    </view>

    <view
      :class="['btn', 'editBtn', isEdit ? 'saveBtn' : '']"
      @click="handleClick"
    >
      {{ isEdit ? "保存" : "编辑" }}
    </view>
    <view v-if="!isEdit" class="btn cancelBtn" @click="show = true">
      取消合作
    </view>

    <popup :show="show" @close="show = false">
      <view class="popupBox">
        <image
          :src="staticImg.closeBtnImg"
          class="closeBtn"
          @click="show = false"
        ></image>
        <h1 class="title">取消合作</h1>
        <view class="remind firstLine">确认取消合作？取消合作后，</view>
        <view class="remind secondLine">该园所不再享有家园共育服务特权。</view>
        <view class="btn">
          <button class="cancel" @click="show = false">取消</button>
          <button class="confirm" @click="confirmDeleteSchoolRelation">
            确定
          </button>
        </view>
      </view>
    </popup>
  </view>
</template>

<script>
import Popup from "@/components/popup/index";
import Tip from "@/utils/tip.js";
import {
  querySchoolDetail,
  deleteSchoolRelation,
  updateSchoolRelation,
} from "@/api/districtGarden";
const fieldList = [
  {
    id: 1,
    label: "园长",
    key: "principalName",
  },
  {
    id: 2,
    label: "手机号",
    key: "phone",
  },
  {
    id: 3,
    label: "班级数量",
    key: "classCount",
  },
  {
    id: 4,
    label: "教职工数量",
    key: "teachUserCount",
  },
  {
    id: 5,
    label: "学生数量",
    key: "studentCount",
  },
];

const staticImg = {
  defaultSchoolDetail: require("@/static/image/defaultSchoolDetail.png"),
  schoolInfoBGI: require("@/static/image/schoolInfoBGI.png"),
  closeBtnImg: require("@/static/image/closeBtn.png"),
  selectBtn: require("@/static/image/selectBtn.png"),
  noSelectBtn: require("@/static/image/noSelectBtn.png"),
};

export default {
  name: "detail",
  data() {
    return {
      staticImg,
      fieldList,
      schoolDetail: {},
      isEdit: false, // 是否是编辑状态
      show: false,
      id: "",
    };
  },
  components: {
    Popup,
  },
  computed: {
    // 有无正在使用的合作产品
    productIsNull() {
      if (
        this.schoolDetail &&
        Array.isArray(this.schoolDetail.courseNames) &&
        this.schoolDetail.courseNames.length !== 0
      ) {
        return this.schoolDetail.courseNames.filter((i) => i.use).length !== 0;
      } else {
        return false;
      }
    },
  },
  async onLoad(options) {
    const { id } = options;
    this.id = id;
    await this.querySchoolDetail(id);
  },
  methods: {
    async updateSchoolRelation() {
      let arr = [];
      this.schoolDetail.courseNames.map((item) => {
        if (item.use) arr.push(item.cardId);
      });
      const params = {
        id: this.schoolDetail.id,
        cardIds: arr,
      };
      Tip.loading("加载中");
      const { data, msg, status } = await updateSchoolRelation(params);
      Tip.loaded();
      if (status === 200) {
        Tip.success(msg);
        this.querySchoolDetail(this.id);
      } else {
        Tip.error(msg);
      }
    },
    // 切换合作课程选中状态
    selectCard(val) {
      val.use = !val.use;
    },
    handleClick() {
      this.isEdit = !this.isEdit;
      if (!this.isEdit) {
        // 保存操作
        console.log("保存操作");
        this.updateSchoolRelation();
      }
    },
    // 取消合作
    async confirmDeleteSchoolRelation() {
      await this.deleteSchoolRelation(this.schoolDetail.id);
      this.show = false;
      uni.navigateBack({
        delta: 1,
      });
    },
    async deleteSchoolRelation(schoolId) {
      Tip.loading("加载中");
      const { data, msg, status } = await deleteSchoolRelation(schoolId);
      Tip.loaded();
      if (status === 200) {
        Tip.success(msg);
      } else {
        Tip.error(msg);
      }
    },
    // 获取园所详情
    async querySchoolDetail(id) {
      Tip.loading("加载中");
      const { data, msg, status } = await querySchoolDetail(id);
      Tip.loaded();
      if (status === 200) {
        // console.log(data, "querySchoolDetail");
        this.schoolDetail = data;
        uni.setNavigationBarTitle({
          title: data.schoolName,
        });
      } else {
        Tip.error(msg);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.schoolDetail {
  min-height: 100vh;
  background-color: #f5f6fa;
  box-sizing: border-box;
  overflow: hidden;
  .schoolBGI {
    position: relative;
    margin: 52rpx auto 30rpx;
    width: 686rpx;
    height: 346rpx;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 40rpx;
    overflow: hidden;

    .schoolInfoBGI {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .schoolName {
      position: relative;
      z-index: 3;
      margin: 32rpx;
      margin-bottom: 18rpx;
      height: 60rpx;
      font-size: 44rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      line-height: 60rpx;
      text-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.16);
    }

    .address {
      position: relative;
      z-index: 3;
      margin-left: 32rpx;
      height: 28rpx;
      font-size: 30rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 550;
      color: #ffffff;
      line-height: 28rpx;
      text-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.16);
    }
  }

  .schoolInfo {
    margin: 0 auto;
    padding: 50rpx 36rpx 50rpx 40rpx;
    width: 686rpx;
    background: #ffffff;
    box-shadow: 0 6rpx 20rpx 0 rgba(235, 235, 235, 0.5);
    border-radius: 20rpx;
    box-sizing: border-box;

    .infoItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 56rpx;
      .label {
        height: 28rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 28rpx;
      }
      .editLabel {
        font-weight: 550;
        color: #333333;
      }
      .value {
        width: 400rpx;
        height: 28rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 550;
        color: #333333;
        line-height: 28rpx;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .editValue {
        color: #666666;
        font-weight: 400;
      }
    }

    .infoItem:last-child {
      margin-bottom: 0;
    }

    .productInfo {
      align-items: flex-start;

      .productList {
        width: 400rpx;
        height: auto;
        text-overflow: none;
        white-space: normal;

        .product {
          margin-bottom: 24rpx;
          height: auto;
          line-height: 42rpx;
        }

        .product:last-child {
          margin-bottom: 0;
        }
      }
    }

    .cardList {
      margin-top: -4rpx;
      .card {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;

        .allSelectBtn {
          margin-right: 10rpx;
          display: block;
          width: 32rpx;
          height: 32rpx;
          object-fit: cover;
        }
        text {
          height: 42rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 42rpx;
        }
      }

      .card:last-child {
        margin-bottom: 0;
      }
    }
  }

  .btn {
    position: fixed;
    left: 50%;
    width: 586rpx;
    height: 84rpx;
    line-height: 84rpx;
    transform: translateX(-50%);
    font-size: 32rpx;
    text-align: center;
    border-radius: 84rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
  }

  .editBtn {
    bottom: 212rpx;
    color: #ffffff;
    background: #1228b9;
  }

  .saveBtn {
    bottom: 96rpx;
  }

  .cancelBtn {
    bottom: 108rpx;
    color: #ff5556;
    border: 1px solid #ff5556;
  }

  .popupBox {
    position: relative;
    top: -50rpx;
    width: 686rpx;
    height: 542rpx;
    background: #ffffff;
    border-radius: 24rpx;
    overflow: hidden;

    .closeBtn {
      position: absolute;
      top: 40rpx;
      right: 40rpx;
      display: block;
      width: 26rpx;
      height: 26rpx;
      object-fit: cover;
    }

    .title {
      margin-top: 60rpx;
      height: 52rpx;
      font-size: 38rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 550;
      color: #333333;
      line-height: 52rpx;
      text-align: center;
    }

    .remind {
      height: 44rpx;
      font-size: 32rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 44rpx;
      text-align: center;
    }

    .firstLine {
      margin-top: 74rpx;
    }

    .secondLine {
      margin-top: 12rpx;
    }

    .btn {
      position: absolute;
      bottom: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .cancel {
        width: 264rpx;
        height: 84rpx;
        line-height: 84rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1228b9;
        border-radius: 84rpx;
        border: 2rpx solid #1228b9;
        text-align: center;
      }

      .confirm {
        width: 264rpx;
        height: 84rpx;
        line-height: 84rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        background: #1228b9;
        text-align: center;
        border-radius: 84rpx;
      }
    }
  }
}

.schoolDetailLong {
  padding-bottom: 316rpx;
}
</style>