<template>
  <div>

    <div style="overflow-x:hidden">
      <el-row :gutter="16">
        <el-col :span="12">
          <!-- 表单 -->
          <div class="container normal-panel normal-margin">
            <p class="normal-title normal-margin" style="line-height:32px">课程设置</p>
            <el-row :gutter="20">
              <el-form :model="form" disabled :rules="rules" ref="form" size="small" status-icon label-position="left" label-width="100px" class="demo-ruleForm">
                <el-col :span="24">
                  <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title" placeholder="请输入标题"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label="开始时间" prop="begdate">
                  <el-date-picker
                    style="width:100%"
                    v-model="form.begdate"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="开始日期">
                  </el-date-picker>                  
                </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="下架时间" prop="enddate">
                    <el-date-picker
                      style="width:100%"
                      v-model="form.enddate"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="下架日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="一级分类" prop="sat_courseware_classid_1">
                    <el-select style="width:100%;margin-right:16px" size="small" v-model="form.sat_courseware_classid_1" clearable>
                      <el-option v-for="item in options1" :key="item.index" :value="item.sat_courseware_classid" :label="item.classname" @click.native="handelSelectClick(item)"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="二级分类" prop="sat_courseware_classid_2">
                    <el-select style="width:100%;margin-right:16px" size="small" v-model="form.sat_courseware_classid_2" clearable>
                      <el-option v-for="item in options2" :key="item.index" :value="item.sat_courseware_classid" :label="item.classname"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注">
                    <el-input v-model="form.notes" placeholder="请输入标备注"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="封面" prop="cover">
                    <previewImage v-if="form.cover" style="width:386px" :image="image" @onSuccess="clearCover"></previewImage>
                    <upload v-else btntype="limage" :folderid="folderid" accept=".JPG,.PNG" :bindData="{ownertable:'SAT_COURSEWARE',ownerid:form.sat_coursewareid,usetype:'cover'}" @onSuccess="onCoverSubmit"></upload>
                    <p class="info">注：建议上传图片大小210*120px像素，大小不超过2M，格式为JPG/PNG</p>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
          </div>
          <!-- 附件列表 -->
          <div class="container normal-panel">
            <attachmentList :attinfos="form.attinfos" @onSuccess="selectDetail" :onlyread="true">
              <!-- <upload slot="upload" :folderid="folderid" :bindData="{ownertable:'SAT_COURSEWARE',ownerid:form.sat_coursewareid,usetype:'default'}" @onSuccess="onSubmit"></upload> -->
            </attachmentList>
          </div>
        </el-col>
        <el-col :span="12">
          <scopeOfauth :onlyread="true" :defaultData="defaultData" obiectName="sat_courseware" appidname="sat_coursewareid" :dataid="$route.query.id" @onChecked="onChecked"></scopeOfauth>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import upload from '@/components/upload/hw_obs_upload.vue'
import previewImage from '@/components/previewImage/index.vue'
import attachmentList from '@/components/attachment_list/index.vue'
import scopeOfauth from '@/components/scopeOfAuthority/index.vue'
import store from '@/store'
export default {
  components:{
    upload,
    previewImage,
    attachmentList,
    scopeOfauth
  },
  data () {
    return {
      rules:{
        title: [
          { required: true, message: '请输入课程名称', trigger: 'blur' },
        ],
        begdate: [
          {  required: true, message: '请选择开始日期', trigger: 'change' }
        ],
        enddate: [
          {  required: true, message: '请选择下架时间', trigger: 'change' }
        ],
        sat_courseware_classid_1: [
          {  required: true, message: '请选择一级分类', trigger: 'change' }
        ],
        sat_courseware_classid_2: [
          {  required: true, message: '请选择二级分类', trigger: 'change' }
        ],
        cover:[
          { required: true, message: '请上传封面', trigger: 'blur' },
        ],
      },
      options1:[],
      options2:[],
      form:{},
      image:{},
      authData:{},
      defaultData:{},
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
    }
  },
  methods:{
    onSubmit () {
      this.form.sat_courseware_classid = this.form.sat_courseware_classid_2
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false;
        const res = await this.$api.requested({
          "classname": "webmanage.saletool.courseware.courseware",
          "method": "insertOrUpdate",
          "content": this.form
        })
        this.tool.showMessage(res)
        this.selectDetail()
        this.insertCoursewareauth()
      });
    },
    async selectDetail () {
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.courseware.courseware",
        "method": "selectDetail",
        "content": {
          "sat_coursewareid":this.$route.query.id
        }
      })
      this.form = Object.assign({},this.form,res.data)
      this.options1.forEach(e=>{
        e.sat_courseware_classid === res.data.sat_courseware_classid_1?this.options2 = e.children:''
      })
      this.queryFileLink()
    },
    // 分类查询
    async coursewareclass () {
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.courseware.coursewareclass",
        "method": "select",
        "content": {
            "parentid": 0
        }
      })
      this.options1 = res.data
    },
    handelSelectClick (val) {
      this.options2 = val.children
      this.form.sat_courseware_classid_2 = ''
    },
    // 获取附件信息
    async queryFileLink () {
      this.dialogEditVisible = true
      const res = await this.$api.requested({
        "classname": "system.attachment.Attachment",
        "method": "queryFileLink",
        "content": {
          "ownertable": 'SAT_COURSEWARE',
          "ownerid": this.form.sat_coursewareid,
          "usetype":'cover'//传空返回有所
        }
      })
      res.data[0]?this.image = res.data[0]:this.image = {url:''}
    },
    onCoverSubmit (res) {
      this.form.cover = JSON.parse(res.attinfos).data[0].url
      this.image = JSON.parse(res.attinfos).data[0]
    },
    // 删除封面
    clearCover () {
      this.form.cover = null
      this.image = {}
    },

    // 获取保存授权范围数据
    onChecked (param) {
      this.authData = param
    },
    // 新增授权范围
    async insertCoursewareauth () {
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.courseware.coursewareauth",
        "method": "insert",
        "content": this.authData
      })
      res.code === 0?this.$notify({
        title:'失败',
        message:res.data,
        type:'error'
      }):''
    },
    // 查询授权信息
    async query_auth () {
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.courseware.coursewareauth",
        "method": "selectList",
        "content": {
          "sat_coursewareid": this.$route.query.id,
        }
      })
      this.defaultData = res.data
    },
  },
  created () {
    this.tool.checkAuth(this.$route.name,'data_analysis')?'':this.$router.go(-1)
    //详情页禁用操作
    store.state.pageOnlyRead = true
  },
  mounted () {
    this.coursewareclass()
    this.selectDetail()
    this.query_auth()
  }
}

</script>
<style>

</style>
<style scoped>
.disable{
  pointer-events: none;
}
</style>