<template>
  <div class="containers">
    <search @onSearch="onSearch" placeholder="请输入地址名称" />
    <div class="paddingB80">
      <div
        class="studentContainer"
        v-if="dataShow"
      >
        <!-- <div class="studentContainer" v-if="dataShow" key="data"> -->
        <van-radio-group v-model="radioSelect">
          <van-cell-group :border="false">
            <van-cell
              v-for="(item, index) in dataList"
              :key="index"
              @click="onRadioSelect(item)"
              class="input-cell"
              value-class="value-times"
              :center="true"
            >
              <template slot="title">
                {{ item.text }}
              </template>
              <template slot="extra">
                <van-radio :name="item.value">
                  <template #icon="props">
                    <img
                      v-if="!item.radioDisabled"
                      class="img-icon"
                      :src="
                        props.checked ? activeButtonIcon : inactiveButtonIcon
                      "
                    />
                  </template>
                </van-radio>
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <!-- </div> -->
      </div>
      <m-empty class="empty" msg="暂无地址" v-else key="data" />
    </div>
    <div class="button-group-popup">
      <span class="btn" @click="onPopupCancel">取消</span>
      <span class="btn primary" @click="onPopupSubmit">确定</span>
    </div>
    <div class="wall"></div>
  </div>
</template>

<script>
import MEmpty from "@/components/MEmpty";
import search from "@/components/Search";
import { findVipSchoolByTeacher2 } from "@/api/teacher";
export default {
  components: {
    MEmpty,
    search,
  },
  props: [
    "teacherId"
  ],
  data() {
    return {
      params: {
        search: null,
      },
      dataShow: true, // 是否有数据
      dataList: [],
      radioSelect: null,
      container: null,
    };
  },
  watch: {
    teacherId(newVal, oldVal) {
      if(newVal != oldVal) {
        this.getAddress();
      }
    }
  },
  mounted() {
    this.getAddress();
  },
  methods: {
    // 搜索
    onSearch(val) {
      this.params.search = val
      this.getAddress()
    },
    async getAddress() {
      let params = this.params;
      params.userId = this.teacherId
      // 教师教学点
      this.$toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: '加载中...',
      })
      await findVipSchoolByTeacher2(params).then((res) => {
          this.$toast.clear()
          let result = res.data;
          if (result.code == 200 && result.data.length > 0) {
              let tempArr = [];
              result.data.forEach((item) => {
                  item.value = item.id;
                  item.text = item.name;
                  tempArr.push(item);
              });
              this.dataList = tempArr
              this.dataShow = tempArr.length > 0 ? true : false
          } else {
            this.dataShow = false
          }
      });
      this.$toast.clear()
    },
    onRadioSelect(value) {
      this.radioSelect = value.value
    },
    onPopupCancel() {
      this.$listeners.close();
    },
    onPopupSubmit() {
      let dataList = this.dataList || []
      let selectItem = {}
      dataList.forEach(item => {
        if(item.id == this.radioSelect) {
          selectItem = item
        }
      })
      this.$emit("submit", selectItem);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../assets/commonLess/variable.less");
.containers {
  overflow: hidden;
}
.studentContainer {
  min-height: 3.78rem;
  height: 3.78rem;
  padding-top: 0.1rem;
  background-color: #fff;
  overflow-y: scroll;
  /deep/.van-cell__title {
    font-size: 0.16rem;
    color: @mFontColor;
    // flex: 1 auto;
  }

  .logo {
    width: 0.35rem;
    height: 0.35rem;
    margin-right: 0.12rem;
    border-radius: 100%;
  }

  .input-cell {
    padding: 0.12rem 0.16rem 0.2rem;

    .van-checkbox {
      justify-content: flex-end;
    }
  }

  /deep/.van-cell__value {
    height: 0.2rem;
  }

  /deep/.van-checkbox__icon .van-icon {
    border-color: @sFontColor;
  }
  /deep/.van-checkbox__icon--checked .van-icon {
    border-color: #01c1b5;
  }

  .van-tag {
    margin-left: 0.08rem;
  }
}
.value-times {
  display: flex;
  align-items: center;
  justify-content: center;
}
.paddingB80 {
  padding-bottom: 0.8rem;
  overflow: hidden;
}
.wall {
  content: "";
  height: 0.62rem;
  position: relative;
}
.button-group-popup {
  position: fixed;
  bottom: 0;
  padding: 0.1rem 0;
  width: 100%;
  text-align: center;
  background-color: #ffffff;
  .btn {
    padding: 0 0.45rem;
    line-height: 0.4rem;
    display: inline-block;
    border: 1px solid @mColor;
    border-radius: 1rem;
    color: @mColor;
    background: #fff;
    font-size: 0.18rem;
    &.primary {
      color: #fff;
      background: @mColor;
    }
  }
  .btn + .btn {
    margin-left: 0.1rem;
  }
}

.van-search--show-action {
  padding-right: 12px;
}
</style>
