<template>
  <div>
    <yd-navbar title="课程视频" bgcolor="#2196f3" color="#fff">
      <router-link to="/study_lesson" slot="left">
        <yd-navbar-back-icon color="#fff"></yd-navbar-back-icon>
      </router-link>
    </yd-navbar>
    <!-- 这里可选1/2/3/4/5五种样式 -->
    <yd-list theme="5"> 
        <yd-list-item v-for="item, key in list" :key="key" type="link" :href="item.key">
            <img slot="img" :src="item.img">
            <span slot="title">{{item.title}}</span>
            <yd-list-other slot="other">
                <div>
                    <span class="demo-list-price"><em>¥</em>{{item.price}}</span>
                    <span class="demo-list-del-price">¥{{item.w_price}}</span>
                </div>
                <div>content</div>
            </yd-list-other>
        </yd-list-item>
    </yd-list>
    <div v-if="list.length">
        
    </div>
    <div class="tips" v-else>暂无数据</div>

    <div class="fl-buttomright-button" @click="gotoBindStu">
      <span>关联</span>
    </div>
    <!-- 菜单 -->
    <van-action-sheet 
      v-model="showActions" 
      :actions="actions" 
      @select="onSelect" 
      close-on-click-action
    />
  </div>
</template>

<script type="text/babel">
import Vue from 'vue';
import { ActionSheet, Notify } from 'vant';

Vue.use(ActionSheet);

export default {
  data() {
    return {
      showActions: false,
      checkedStudentId: null,
      userid: null,
      actions: [{ 
          name: '紧急联系人', 
          action: 'urgent',
        },
        { 
          name: '取消关联',
          action: 'unbind',
        },
        { 
          name: '补卡',
          action: 'makeupCard',
        }],
        list: [
                    {img: "//img1.shikee.com/try/2016/06/23/14381920926024616259.jpg", title: "标题111标题标题标题标题", price: 156.23, w_price: 89.36},
                    {img: "//img1.shikee.com/try/2016/06/21/10172020923917672923.jpg", title: "标题222标题标题标题标题", price: 256.23, w_price: 89.36},
                    {img: "//img1.shikee.com/try/2016/06/23/15395220917905380014.jpg", title: "标题333标题标题标题标题", price: 356.23, w_price: 89.36},
                    {img: "//img1.shikee.com/try/2016/06/25/14244120933639105658.jpg", title: "标题444标题标题标题标题", price: 456.23, w_price: 89.36},
                    {img: "//img1.shikee.com/try/2016/06/26/12365720933909085511.jpg", title: "标题555标题标题标题标题", price: 556.23, w_price: 89.36},
                    {img: "//img1.shikee.com/try/2016/06/19/09430120929215230041.jpg", title: "标题666标题标题标题标题", price: 656.23, w_price: 89.36}
                ]
    };
  },
  created() {
    this.userid = localStorage.getItem("userid")
    if (!this.userid) {
      this.$dialog.toast({
        mes: '获取不到您的用户标识，请重新登陆',
      });
      return;
    }
    this.getStuList();
  },
  methods: {
    getStuList() {
      this.$dialog.loading.open("努力加载中...");
      this.$http
        .get("/stu_list&userid=" + this.userid)
        .then(res => {
        //   this.list = res.data.data;
          this.$dialog.loading.close();
        })
        .catch(res => {
          console.log(res);
          this.$dialog.loading.close();
        });
    },
    gotoBindStu(){
      this.$router.push({ path: "/add_student"});
    },
    gogogo(id) {
      this.showActions = true;
      this.checkedStudentId = id;
    },
    repairCard(id){
      var openid = localStorage.getItem('openid'),
          mobile = localStorage.getItem('mobile'),
          userid = localStorage.getItem('userid')

      this.$http.get("/save_repair_card_records&userid=" + userid + "&mobile=" + mobile + "&studentid=" + id)
        .then(res => {
          this.$dialog.toast({
            mes:res.data.message
          })
          if(res.data.success){
           this.$router.push('/repair_list')
          }
        })
        .catch(res => {
          console.log(res);
        });
    },
    // 选中
    onSelect(item) {
      let action = item.action
      let that = this
      
      if (action == 'urgent') { // 紧急联系人
        this.$router.push({ path: "/urgent?sid=" + this.checkedStudentId});
      } else if (action == 'unbind') { // 解绑
        this.$dialog.confirm({
          title: "解除绑定",
          color: '#ff0000',
          mes: "确定要解除与该学生卡的绑定关系吗？<br/>解除绑定后，同时会删除您添加的紧急联系人，请谨慎操作！",
          opts: [
            {
              txt: "取消",
              color: false,
              callback: () => {}
            },
            {
              txt: "确定",
              color: true,
              callback: () => {
                that.$http.get('unbindStudent&userid=' + this.userid +'&sid=' + that.checkedStudentId)
                    .then(resp => {
                      if (resp.status === 200 && resp.data && resp.data.success) {
                        Notify({ type: "success", message: resp.data.message });
                      } else {
                        Notify({ message: resp.data.message });
                      }
                      this.getStuList()
                    })
              }
            }
          ]
        });
      } else if (action == 'makeupCard') { // 补卡
        this.$dialog.confirm({
          title: "申请补卡",
          mes: "确定申请补卡吗？",
          opts: [
            {
              txt: "取消",
              color: false,
              callback: () => {}
            },
            {
              txt: "确定",
              color: true,
              callback: () => {
                that.repairCard(that.checkedStudentId)
              }
            }
          ]
        });
      }
      
    },
  }
};
</script>
<style scoped="less">


</style>