<template>
  <div class="containerbox">
    <div class="flextwo sharetopk" @click="back">
      <div class="leftrow leftrowkimg">
        <img src="../../../assets/leftrow.png" alt />
      </div>
      <div class="sharemiddle">去开课</div>
      <div class="sharebtn">
        <!-- <img src="../../../assets/sharebtn.png" alt /> -->
      </div>
    </div>
    <div class="opencoursetop flexone">
      <div
        class="zhibo flexone"
        :class="selcourse == 1 ? 'courseactive' : ''"
        @click="chosecourse(1)"
      >
        <img
          src="../../../assets/zhibocourse.png"
          alt
          class="zhiboimg"
          v-if="selcourse == 1"
        />
        <img src="../../../assets/zhibogray.png" alt class="zhiboimg" v-else />

        <div class="zhiboname">直播课</div>
      </div>
      <div
        class="zhibo lubo flexone"
        :class="selcourse == 2 ? 'courseactive' : ''"
        :data-id="2"
        @click="chosecourse(2)"
      >
        <img
          src="../../../assets/lubowhite.png"
          alt
          class="zhiboimg"
          v-if="selcourse == 2"
        />
        <img src="../../../assets/lubo.png" alt class="zhiboimg" v-else />
        <div class="zhiboname">录播课</div>
      </div>
    </div>
    <!-- 直播课程 -->
    <!--  -->
    <div class="zhibotextbox" v-if="selcourse == 1">
      <div class="coursetitle flexone">
        <div class="coursenamek">课程分类</div>
        <div class="coursenameright" @click="showcoursekind">
          {{ coursekind }}
          <!-- <input type="text" placeholder="开课时间" /> -->
        </div>
      </div>
      <div class="coursetitle flexone">
        <div class="coursenamek">开课时间</div>
        <div class="coursenameright" @click="showdate">
          {{ start_time }}
          <!-- <input type="text" placeholder="开课时间" /> -->
        </div>
      </div>
      <div class="coursetitle flexone">
        <div class="coursenamek">
          直播标题
          <img src="../../../assets/xuehua.png" alt class="xuehuaimg" />
        </div>
        <div class="coursenameright">
          <input type="text" placeholder="直播标题" v-model="title" />
        </div>
      </div>
      <div class="zhibocontent">
        <div class="flexone zhibojianjie">直播简介</div>
        <div class="zhibotextbox">
          <textarea
            name
            id
            cols="30"
            rows="10"
            placeholder="预设内容"
            v-model="description"
          ></textarea>
        </div>
      </div>
      <div class="coursetitle flexone">
        <div class="coursenamek">
          直播封面图
          <img src="../../../assets/xuehua.png" alt class="xuehuaimg" />
          <!-- <div class="xuehuaimg">
            <van-uploader
              v-model="fileList"
              multiple="true"
              :after-read="afterRead"
              :max-count="1"
            />
          </div>-->
        </div>
      </div>
      <div class="courseimgbox">
        <!-- <img src="../../../assets/addpub.png" alt class="addcourseimg" /> -->
        <van-uploader
          v-model="fileList"
          multiple="true"
          :after-read="afterRead"
          :max-count="1"
          @delete="deleftimg"
        />
      </div>
    </div>

    <!-- 录播课程 -->

    <div class="zhibotextbox" v-if="selcourse == 2">
      <div class="coursetitle flexone">
        <div class="coursenamek">课程分类</div>
        <div class="coursenameright" @click="showcoursekind">
          {{ coursekind }}
        </div>
      </div>
      <div class="coursetitle flexone">
        <div class="coursenamek">
          录播时间标题
          <img src="../../../assets/xuehua.png" alt class="xuehuaimg" />
        </div>
        <div class="coursenameright">
          <input type="text" placeholder="录播时间标题" v-model="title" />
        </div>
      </div>

      <div class="zhibocontent">
        <div class="flexone zhibojianjie">录播简介</div>
        <div class="zhibotextbox">
          <textarea
            name
            id
            cols="30"
            rows="10"
            placeholder="预设内容"
            v-model="description"
          ></textarea>
        </div>
      </div>

      <div class="coursetitle flexone">
        <div class="coursenamek">
          录播封面图
          <img src="../../../assets/xuehua.png" alt class="xuehuaimg" />
        </div>
      </div>
      <div class="courseimgbox">
        <van-uploader
          v-model="fileList"
          multiple="true"
          :after-read="afterRead"
          :max-count="1"
          @delete="deleftimg"
        />
      </div>
    </div>

    <!-- 直播时间 -->
    <div class="register" v-if="zhibodate">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        title="选择完整时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="sure"
        @cancel="cancel"
      />
    </div>

    <van-picker
      title
      show-toolbar
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onCancel"
      v-if="showcolom"
    />
    <van-loading type="spinner" color="#1989fa" v-if="cardzheng" />
    <!-- 开始录制 -->
    <div class="kaishilu" v-if="selcourse == 2" @click="opencourse">
      开始录制
    </div>
    <div class="kaishilu" v-else @click="opencourse">开启</div>
  </div>
</template>

<script>
import Vue from "vue";
import { DatetimePicker, Uploader, Toast, Loading } from "vant";
Vue.use(Loading);
Vue.use(Toast);
Vue.use(Uploader);

Vue.use(DatetimePicker);
export default {
  data() {
    return {
      selcourse: 1,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      zhibodate: false,
      fileList: [],
      type: "",
      title: "",
      description: "",
      images: "",
      chuanimage: "",
      start_time: "开播时间",
      cardzheng: false,
      columns: [],
      showcolom: false,
      coursekind: "请选择课程分类",
      cursekindlist: [],
      sort_id: ''

    };
  },
  created() {
    document.title = "唐元集";
    this.getcourselist()
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    afterRead(file) {
      let that = this;
      that.cardzheng = true
      console.log(file);
      console.log(file.length);
      if (file.length == undefined) {
        var formdata = new FormData();
        formdata.append("file", file.file);

        var url = "/api/common/upload";
        let param = {
          id: 1
        };

        that.$uploadFile
          .post(url, formdata)
          .then(function (res) {
            console.log(res);
            that.cardzheng = false;
            let url = "http://ht.tayoji-health.com" + res.data.url;
            that.images = url;
            that.chuanimage = res.data.url;
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    // 获取课程分类
    getcourselist() {
      let that = this;
      let url = '/api/index/sort'
      let param = {

      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          res.data.forEach(function (value, index, array) {
            that.columns.push(value.name)
          })
          that.cursekindlist = res.data

        })
        .catch(function (err) {
          console.log(err);

        });
    },
    // 显示课程分类
    showcoursekind() {
      this.showcolom = true
    },
    onConfirm(value, index) {
      let that = this;
      console.log(value, index);
      this.cursekindlist.forEach(function (valuek, indexk, array) {
        if (valuek.name == value) {
          console.log(8934893489)
          that.coursekind = valuek.name;
          that.sort_id = valuek.id;
        }
      })

      this.showcolom = false
    },
    //取消课程分类
    onCancel() {
      this.showcolom = false
    },
    deleftimg(e) {
      console.log(3494389);
      this.images = "";
      this.chuanimage = "";

      this.$forceUpdate();
    },
    opencourse() {
      let that = this;

      var url = "/api/user/add_lesson";
      if (that.sort_id == '') {
        Toast("请选择课程分类");
        return false;
      }
      if (that.selcourse == 1) {
        if (that.start_time == "开播时间") {
          Toast("请选择开播时间");
          return false;
        }
      }

      if (that.title == "") {
        if (that.selcourse == 1) {
          Toast("请输入直播标题");
        } else {
          Toast("请输入录播标题");
        }

        return false;
      }

      if (that.description == "") {
        if (that.selcourse == 1) {
          Toast("请输入直播简介");
        } else {
          Toast("请输入录播简介");
        }

        return false;
      }
      if (that.chuanimage == "" && that.cardzheng == false) {
        if (that.selcourse == 1) {
          Toast("请上传直播封面");
        } else {
          Toast("请上传录播封面");
        }

        return false;
      }

      if (that.chuanimage == "" && that.cardzheng == true) {
        if (that.selcourse == 1) {
          Toast("封面正在上传中");
        } else {
          Toast("封面正在上传中");
        }

        return false;
      }
      let param = {
        sort_id: that.sort_id,
        type: that.selcourse,
        title: that.title,
        description: that.description,
        image: that.chuanimage,
        start_time: that.start_time
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);

          Toast("提交成功");
          that.$router.go(-1);
        })
        .catch(function (err) {
          console.log(err);
          Toast(err.msg)
        });
    },
    chosecourse(event) {
      console.log(event);
      this.selcourse = event;
      this.fileList = [];
      this.sort_id = '';
      this.coursekind = "请选择课程分类";
      this.showcolom = false
    },
    cancel() {
      this.zhibodate = false;
    },
    // 确定选择时间
    sure(e) {
      console.log(e);
      var date = new Date();
      // var hour=date.getHour()

      let year = e.getFullYear();
      var month = e.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      var date = e.getDate();
      if (date < 10) {
        date = "0" + date;
      }
      var hour = e.getHours();
      var minute = e.getMinutes();
      console.log(hour);
      this.zhibodate = false;
      this.start_time =
        year + "-" + month + "-" + date + " " + hour + ":" + minute;
      console.log(this.start_time);
    },
    showdate() {
      this.zhibodate = true;
    }
  }
};
</script>

<style scoped>
@import "../../../style/usercenter.css";
.containerbox {
  margin-top: 0.8rem;
}
.van-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}
.coursenamek {
  color: #02170b;
  font-size: 0.28rem;
}
</style>