<template>
  <view class="container">
    <view class="title">培训名称</view>
    <input class="tui-input"
           placeholder-class="phcolor"
           :placeholder="请输入培训名称"
           v-model="name"
           maxlength="20"></input>
	<view class="title top64">班组名称</view>
	
	<as-tree-select class="tui-input" v-model="org_id"
	 title="班组名称" 
	 :placeholder="org_name"
	 :options="sortOptions" 
	 :checkStrictly="true">
	</as-tree-select>
	
    <view class="title top64">培训时间</view>
 
 
    <uni-datetime-picker type="datetime" v-model="train_time" />
 
    <view class="form-upload">
      <view class="form-upload-title">
        培训视频
      </view>

      <view class="form-upload-input">
         <uni-file-picker limit="1" file-mediatype="video" @select="upload" v-model="train_video" @delete="handleRemove"></uni-file-picker>
      </view>
    </view>

    <view class="tui-ptop">
      <button class="tui-button-primary tui-btn-submit"
              hover-class="tui-button-hover"
              @click="submit"
              style="background-color:#008782;">提交</button>
    </view>
    <tui-loading text="上传中..."
                 v-show="isLoading"></tui-loading>
    <tui-tips ref="toast"
              backgroundColor="#008782"
              color="#fff"></tui-tips>
  </view>

</template>

<script>
const form = require("@/components/common/tui-validation/tui-validation.js");
import tuiLoading from "@/components/thorui/tui-loading/tui-loading";
import tuiTips from "@/components/thorui/tui-tips/tui-tips";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
  components: {
    tuiLoading,
    tuiTips,
  },

  onLoad() {
	  let info = uni.getStorageSync('team_info')
	  this.id = info.id
	  this.name = info.name
	  this.org_id = info.org_id
	  this.org_name = info.org_name
	  this.train_time = info.train_time
	  this.train_video = info.train_video
	  this.getOrgInfo()
  },
  onShow() {
  	  if(!this.hasLogin)
  	  {
  	  	uni.redirectTo({
  	  		url: '/pages/common/login/login?href2=train/teams/edit'
  	  	});
  	  	return false;
  	  }
  },
	computed: {
	  ...mapState(["hasLogin", "userinfo"]),
	},
  data() {
    return {
	  id:0,
      name: "",
	  org_id:"",
	  org_name:"",
	  train_time:"",
      isLoading: false,
      uploadImg: [],
      train_video:[],
	  sortOptions:[],
    };
  },
  methods: {
	  getOrgInfo(){
	  	getApp().globalData.request.post(
	  	  "learn/train/getOrgInfo"
	  	).then(res=>{
	  		this.sortOptions = res.data
	  	})
	  },
	  handleRemove(data) {
	    this.train_video = this.train_video.filter(item => item.url !== data.tempFile.url);
	 },
    async upload(data){
		let res = await getApp().globalData.request.upload(
		  "https://anquansys.sxlq.com:37100/mobile/common/upload/uploadOtherFile",
		  data.tempFilePaths[0],
		  data.tempFiles[0]
		);
		this.train_video.push(res.data)
	},
    showTips(msg) {
      let options = {
        msg,
        duration: 3000,
      };
      this.$refs.toast.showTips(options);
    },
    async submit() {
      if(!this.name)
	  {
		 uni.showToast({
		   title:"请输入培训名称",
		   icon: "error",
		 });
	  }
	  
        var res = await getApp().globalData.request.post(
          "learn/train/editTeams",
          {
			id:this.id,
            name: this.name,
            org_id: this.org_id,
            train_time: this.train_time,
            train_video: this.train_video,
          }
        );
        if (res.code == 0) {
          uni.showToast({
            title: res.msg,
            icon: "success",
          });
          setTimeout(()=>{
			  uni.redirectTo({
			  	url: 'index'
			  });
		  },1500)
        } else {
          uni.showToast({
            title: res.msg,
            icon: "error",
          });
        }

    },
  },
};
</script>

<style>
.form-upload {
  height: 240rpx;
  margin-top: 40rpx;
}

.form-upload-title {
  font-size: 30rpx;
  color: #666;
  margin-bottom: 30rpx;
}

.form-upload-input {
  margin-left: 20rpx;
}

.tui-btn-submit {
  margin-top: 100rpx;
  background: #008681;
  font-size: 28rpx;
}

page {
  background: #fff;
}

.container {
  background-color: #fff;
  margin-top: 22rpx;
  padding: 30rpx;
  box-sizing: border-box;
  padding-bottom: 162rpx;
}

.title {
  font-size: 30rpx;
  color: #666;
  padding-bottom: 32rpx;
}

.tui-cells {
  border: 1rpx solid #e6e6e6;
  border-radius: 4rpx;
  height: 280rpx;
  box-sizing: border-box;
  padding: 20rpx 20rpx 0 20rpx;
}

.tui-textarea {
  height: 210rpx;
  width: 100%;
  color: #666;
  font-size: 28rpx;
}

.pholder {
  color: #ccc;
}

.textarea-counter {
  font-size: 24rpx;
  color: #999;
  text-align: right;
  height: 40rpx;
  line-height: 40rpx;
  padding-top: 4rpx;
}

.top64 {
  margin-top: 20rpx;
}

.tui-input {
  font-size: 30rpx;
  height: 88rpx;
  border: 1rpx solid #e6e6e6;
  border-radius: 4rpx;
  padding: 0 25rpx;
  box-sizing: border-box;
}

.tui-ptop {
  padding-top: 80rpx;
}

.submit {
  background: #008681;
}
</style>