<template>
  <div class="bindFrom" v-loading="loading">
    <bar @cutPage="cutPage" :tit="'绑定表单'" :backPage="0"></bar>
    <div style="height: 55px;width: 100%;"></div>
    <div class="selectInp">
      <van-search shape="round" v-model="selectValue" placeholder="搜索表单" />
      <span @click.stop="search()">搜索</span>
    </div>
    <div class="con"  ref="listRef" @scroll="handlerScroll($event)">
      <div class="conBlock" v-for="(item, index) in dataList" :key="index" @click.stop="choice(item)">
        <fromList :data="item" :index="index + 1" :isChoice="choiceCourseId ? choiceCourseId : testData.testId" />
      </div>
    </div>
    <div class="bot" v-loading="loading">
      <div :class="['botBtn', choiceCourseId ? '' : 'botBtnDisabled']" @click.stop="bindFrom()">确认绑定</div>
    </div>
    <!-- <div style="height: 50px;width: 100%;"></div> -->
  </div>
</template>

<script>
import bar from './components/bar.vue'
import fromList from './components/fromList'
import { getBindFormDataRequest } from '../../api/classObserve'

export default {
  components: {
    bar,
    fromList
  },
  props: {
    tid: {
      type: String,
      default: ''
    },
    page: {
      type: Number,
      default: 1
    },
    testData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      selectValue: '',
      dataList: [],
      loading: false,
      choiceCourseId: '',
      oid: this.$store.state.user.userinfo.organizeid,
      org: this.$store.state.user.userinfo.org,
      userId: this.$store.state.user.userinfo.userid,
      PageData: {
        page: 1,
        pageSize: 10
      }
    }
  },
  watch: {
    selectValue(newValue) {
      this.flag = false
    }
  },
  methods: {
    choice(item) {
      this.choiceCourseId = item.courseId
    },
    cutPage() {
      this.$emit('cutPage', 1)
    },
    search() {
      this.PageData.page = 1
      this.flag = true
      this.dataList = []
      this.getData()
    },
    bindFrom() {
      if (!this.choiceCourseId || this.loading) return
      let data = this.dataList.find(i => i.courseId == this.choiceCourseId)
      if (!data) return
      if (data.courseId == this.testData.testId) {
        return this.$toast.fail('该课堂已绑定该表单')
      }
      let _result = {
        testId: data.courseId,
        checkUrl: `https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/#/checkToTest?cid=${data.courseId}&userid=${this.userId}&oid=${this.oid}&org=${this.org}&tcid=${this.tid}&isN=1&role=0&type=2,`,
        doUrl: `https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/#/doTest?cid=${data.courseId}&userid=${this.userId}&oid=${this.oid}&org=${this.org}&tcid=${this.tid}&isN=1&role=0&type=2`
      }
      this.loading = true
      this.$parent.bmData.jsonData.testData = _result
      this.$parent.saveData(this.$parent.bmData).then(_ => {
        this.$toast.success('绑定表单成功')
        this.loading = false
      })
    },
    getData(type = 0) {
      if (this.loading) return
      if (type == 1) {
        this.PageData.page += 1
      }
      let params = {
        ype: 4,
        uid: this.userId,
        oid: this.oid,
        org: this.org,
        typea: '',
        typeb: '',
        typec: '',
        typed: '',
        typef: '',
        typeE: '',
        cu: '',
        cn: this.flag ? this.selectValue : '',
        page: this.PageData.page,
        pageSize: this.PageData.pageSize
      }
      this.loading = true
      getBindFormDataRequest(params)
        .then(res => {
          let _data = res[0]
          if (_data.length > 0) {
            this.dataList.push(..._data)
          } else {
            this.PageData.page -= 1
          }
          this.loading = false
        })
        .catch(e => {
          this.$toast.fail('获取表单失败')
          this.loading = false
        })
    },
    handlerScroll(e) {
      const dom = e.target
      var scrollTop = dom.scrollTop //滑入屏幕上方的高度
      var windowHeitht = dom.clientHeight //能看到的页面的高度
      var scrollHeight = dom.scrollHeight //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
      let total = scrollTop + windowHeitht + 1
      if (total >= scrollHeight) {
        this.getData(1)
      }
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
.bindFrom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100%);
}
.selectInp {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  // height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .van-search {
    width: 100%;
    .van-search__content {
      height: 45px;
      align-items: center;
    }
  }
  span {
    color: rgba(54, 129, 252, 1);
    font-size: 16px;
    font-weight: 600;
    display: block;
    width: 40px;
  }
}
.con {
  flex: 1;
  overflow: auto;
  background-image: linear-gradient(to bottom, #fff 0%, #ebf1fd 100%);
  .conBlock {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
  }
}
.bot {
  height: 60px;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  box-sizing: border-box;
  .botBtn {
    background-color: rgba(54, 129, 252, 1);
    width: 85%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    transition: 0.3s;
  }

  .botBtnDisabled {
    background-color: rgb(172, 172, 172);
    color: #fff;
  }
}
</style>
