<template>
  <div class="info">
    <video-dialog ref="videoDialog"></video-dialog>
    <!-- <div class="info-header">新建学习内容</div> -->
    <div class="info-header">{{ type === 'Update'?'修改':'新建'}}学习项目</div>
    <div class="info-container">
      <div class="info-wrapper">
        <div class="pageTips">
              <strong>页面说明：</strong>
              “*”为必填项。展板类别及版权方支持多选。展板备选清单中可预览备选展板详情及展板内包含的视频。
           </div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="140px"
          class="demo-form-inline party-form"
          :inline="true"
          label-position="top"
        >
        <el-form-item label="学习项目名称" prop="name" class="w50" style="padding-right: 100px">
            <el-input oninput="value = value.trim()" v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="学习项目备注" prop="remarks" class="w50" style="padding-right: 100px">
            <el-input type="textarea" v-model="ruleForm.remarks" style="min-height: 33px;width: 280px;"></el-input>
          </el-form-item>
          <el-form-item label="主学习内容名称" prop="major" class="w50" style="padding-right: 100px">
            <el-input oninput="value = value.trim()" v-model="ruleForm.major"></el-input>
          </el-form-item>
          <!-- <el-form-item label="适用范围">
            <span v-show="userType === '1'">全平台</span>
            <el-radio-group v-show="userType !== '1'" v-model="ruleForm.applicableScope">
              <el-radio label="THIS_ORGAN">仅本单位</el-radio>
              <el-radio label="THIS_ORGAN_SUB">本单位及下属单位</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="所属学习项目" class="w50" prop="learningProjectId">
            <el-select placeholder="请选择所属学习项目" v-model="ruleForm.learningProjectId">
              <el-option
                v-for="item in learningProjectIdList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="学习内容宣传图" prop="cover" class="w100">
            <upload-img ref="uploadImg" @imgUrl="imgUrl"></upload-img>
          </el-form-item>
           <el-form-item label="展板版权方" class="w50" prop="copyrightOwnerIdList">
            <el-select
              placeholder="请选择版权方"
              multiple
              v-model="ruleForm.copyrightOwnerIdList"
              @change="getSelectDep2"
            >
              <el-checkbox :style="selfstyle" v-model="checkedThing2" @change="selectAllThing2">全选</el-checkbox>
              <el-option
                v-for="item in assetType2"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item  label="展板类别" prop="exhibitionBoardCatIdList">
            <el-select
              placeholder="请选择展板类别"
              multiple
              v-model="ruleForm.exhibitionBoardCatIdList"
              @focus="getAssetTypeData"
              @change="getSelectDep"
            >
              <el-checkbox :style="selfstyle" v-model="checkedThing" @change="selectAllThing">全选</el-checkbox>
              <el-option
                v-for="item in videoContentCat"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
         
          <el-form-item label="展板备选清单" class="w100" prop="exhibitionBoardIdList">
                    <div class="party-table">
            <el-table
              border
              @selection-change="handleSelectionChange"
              style="width: 100%"
              max-height="400"
              ref="multipleTable"
              :data="tableData"
            >
              <el-table-column type="selection" width="55"></el-table-column>
               <el-table-column type="index" width="120" label="序号">
          </el-table-column>
              <el-table-column show-overflow-tooltip label="展板名称" prop="name"></el-table-column>
              <el-table-column show-overflow-tooltip label="展板类别" prop="exhibitionBoardCatName"></el-table-column>
              <el-table-column show-overflow-tooltip label="展板版权方" prop="boardCopyrightOwnerName"></el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <div class="table-btn-group">
                    <el-tooltip content="视频预览" placement="top">
                      <el-button circle @click="videoPreview(scope.row)">
                        <i class="icon-table icon-video"></i>
                      </el-button>
                    </el-tooltip>
                    <el-tooltip content="展板预览" placement="top">
                      <el-button circle @click="displayPreview(scope.row)">
                        <i class="icon-table icon-board"></i>
                      </el-button>
                    </el-tooltip>
                  </div>

                  <!-- <el-button
                    type="text"
                    style="padding: 0"
                    @click="videoPreview(scope.row)"
                    >视频预览</el-button
                  >
                  <el-button
                    type="text"
                    style="padding: 0"
                    @click="displayPreview(scope.row)"
                    >展板预览</el-button
                  >-->
                </template>
              </el-table-column>
            </el-table>
          </div>
          </el-form-item>
         
        </el-form>
 
        <!--新增弹框-->
        <el-dialog
          custom-class="party-dialog"
          title="展板预览区"
          width="468px"
          :visible.sync="dialogVisible"
          :before-close="closeDialog"
        >
          <div class="dialog-content">
            <el-form
              :model="classForm"
              ref="classForm"
              label-width="80px"
              label-position="top"
              :rules="rules"
              id="ruleo"
              class="party-form"
            >
              <el-form-item label="展板名称">
                <el-input v-model="classForm.name" readonly></el-input>
              </el-form-item>
              <el-form-item label="版权方">
                <el-input v-model="classForm.boardCopyrightOwnerName" readonly></el-input>
              </el-form-item>
              <el-form-item label="展板分类">
                <el-input v-model="classForm.exhibitionBoardCatName" readonly></el-input>
              </el-form-item>
              <el-form-item label="展板宣传图">
                <img class="imgSize" :src="classForm.cover" alt />
              </el-form-item>
              <el-form-item label="简介">
                <el-input type="textarea" v-model="classForm.remarks" readonly></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
      </div>
    </div>
    <div class="info-footer">
      <div class="btn-group">
        <!-- 确定、取消 -->

        <el-button
          v-show="type === 'add'"
          size="mini"
          type="primary"
          class="btn_form_search"
          @click="submitForm('ruleForm')"
        >提交审核</el-button>
        <el-button
          v-show="type === 'Update'"
          size="mini"
          type="primary"
          class="btn_form_search"
          @click="updateForm('ruleForm')"
        >提交审核</el-button>
        <el-button size="mini" class="btn_form_search" @click="close">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>

let Base64 = require('js-base64').Base64
import uploadImg from "@/page/content/components/uploadVue/uploadImg";
import videoDialog from "@/page/content/components/dialog/videoDialog";
import audioPlay from "@/page/content/components/audioPlay";
export default {
  components: {
    uploadImg,
    videoDialog,
    audioPlay
  },
  data() {
    return {
      selectedFood: [], // 已有值，打开编辑页面调接口时拿到
      selectedFood1:[],
      dialogVisible: false,
      classForm: {},
      type: this.$route.query.type,
      learningProjectIdList: "",
      videoContentCat: [],
      assetType2: [], // 版权方列表
      checkedThing: false,
      checkedThing2: false,
      selfstyle: {
        textAlign: "right",
        width: "100%",
        paddingRight: "10px"
      },
      tableData: [],
      ruleForm: {
        name: '',
        remarks: '',
        major: "", //主学习内容名称
        // applicableScope: "ALL_PLAT", //适用范围
        cover: "", //宣传图
        // learningProjectId: "", //所属学习项目
        exhibitionBoardCatIdList: [], //展板类别
        copyrightOwnerIdList: [], //版权方
        exhibitionBoardIdList: [] // 展板备选
      },
      minorLearningContentBoard: [],
      rules: {
        name: [
          { required: true, message: "请输入学习项目名称", trigger: "blur" },
          { min: 1, max: 20, message: "请输入1到20个字" },
        ],
        cover: [
          {
            required: true,
            message: "请选择学习内容宣传图"
          }
        ],
        major: [
          { required: true, message: "请输入主学习内容名称", trigger: "blur" },
          { min: 1, max: 20, message: "请输入1到20个字" }
        ],
        learningProjectId: [
          { required: true, message: "请选择所属学习项目", trigger: "change" }
        ],
        exhibitionBoardCatIdList: [
          {
            required: true,
            type: "array",
            message: "请选择展板类别",
            trigger: "change"
          }
        ],
        copyrightOwnerIdList: [
          {
            required: true,
            type: "array",
            message: "请选择版权方",
            trigger: "change"
          }
        ],
        exhibitionBoardIdList: [
          {
            required: true,
            type: "array",
            message: "请选择展板",
            trigger: "change"
          }
        ]
      },
      multipleSelection: [],
      userType: ""
    };
  },
  mounted() {
    this.userType = localStorage.getItem("userType");
    this.init();
  },
  methods: {
    // selectInit (row) {
    //  if(this.minorLearningContentBoard.some(el=>{return el===row.id})){
    //        return false;
    //    }else{
    //        return true;
    //    }
    // },
    // 视频预览
    videoPreview(row) {
      this.$refs.videoDialog.dialogVisible = true;
        const videos = row.videoList
        for(var i=0;i<videos.length;i++){
          videos[i].fileUrl = Base64.decode(videos[i].intro)
        }
        this.$refs.videoDialog.videoList = videos
    },
    // 展板预览
    displayPreview(row) {
      this.dialogVisible = true;
      this.classForm = row;
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false;
    },
    init() {
      this.getLearnProject();
      // this.getAssetTypeData();
      this.getAssetTypeData2();
      if (this.$route.query.type === "Update") {
        this.getInfo(this.$route.query.id);
      }
    },
    //  获取版权方详情
    getInfo(id) {
      let vm = this;
      vm.$https({
        url: "learningProject/get/" + id,
        method: "get",
        authType: this.backToken
      })
        .then(res => {
          let data = res.data.data;
          this.ruleForm = data;
          this.ruleForm = {
            name: data.name,
            remarks:data.remarks,
            major: data.majorLearning.name,
            applicableScope: data.majorLearning.applicableScope,
            copyrightOwnerIdList: data.majorLearning.copyrightOwnerIdList,
            cover: data.majorLearning.cover,
            learningProjectId: data.majorLearning.learningProjectId,
            exhibitionBoardCatIdList: data.majorLearning.exhibitionBoardCatIdList,
            id: data.id,
            exhibitionBoardIdList: data.majorLearning.exhibitionBoardIdList
          };
          // this.tableData = data.exhibitionBoardList;
          this.multipleSelection = data.majorLearning.exhibitionBoardList
          this.minorLearningContentBoard = data.minorLearningContentBoard
          this.selectedFood = data.minorLearningContentCopyright
          this.selectedFood1 = data.minorLearningContentCatBoard
          this.$refs.uploadImg.showImg(this.ruleForm.cover);
          this.getExhibitionBoardTable();
          this.getAssetTypeData()
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    getExhibitionBoardTable() {
      const param = {
        boardCopyrightOwnerIdList: this.ruleForm.copyrightOwnerIdList,
        exhibitionBoardCatIdList: this.ruleForm.exhibitionBoardCatIdList
      };
      this.getTableData(param, "update");
    },
    setSelctTable() {
      if (!this.multipleSelection.length) {
        return false;
      }
      let _this = this;
      let tableData = this.tableData;
      let multipleSelection = this.multipleSelection;
      tableData.forEach(v => {
        multipleSelection.forEach(m => {
          if (v.id == m.id) {
            _this.$refs.multipleTable.toggleRowSelection(v);
          }
        });
      });
    },
    // 获取展板类别列表
    getAssetTypeData() {
      let vm = this;
      if(this.ruleForm.copyrightOwnerIdList.length>0){
         vm.$https({
        url: "exhibitionBoardCat/getList",
        method: "post",
        authType: this.backToken
      },this.$qs.stringify({copyrightOwnerId:this.ruleForm.copyrightOwnerIdList.toString()}))
        .then(res => {
          let data = res.data.data;
          vm.videoContentCat = data;
        })
        .catch(function(err) {
          console.log(err);
        });
      }else{
        this.$message.warning("请先选择展板版权方！")
      }
     
    },
    // 获取版权方列表
    getAssetTypeData2() {
      let vm = this;
      vm.$https(
        {
          url: "copyrightOwner/getList",
          method: "get",
          authType: this.backToken
        },
        { copyrightOwnerType: "EXHIBITION_BOARD" }
      )
        .then(res => {
          let data = res.data.data;
          // console.log(data,"dhwdhwid")
          vm.assetType2 = data;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    // 获取学习项目列表
    getLearnProject() {
      let vm = this;
      vm.$https({
        url: "learningProject/getList",
        method: "get",
        authType: this.backToken
      })
        .then(res => {
          let data = res.data.data;
          vm.learningProjectIdList = data;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    // 获取获取学习内容展板全部列表
    getLearnContentBoard() {
      let vm = this;
      vm.$https(
        {
          url: "learningContentBoard/getList",
          method: "get",
          authType: this.backToken
        },
        { learningContentId: this.$route.query.id }
      )
        .then(res => {
          let data = res.data.data;
          console.log(data);
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    // 多选赋值
    handleSelectionChange(val) {
      this.multipleSelection = val;
      let newArray = val.map(item => {
        return item.id;
      });
      this.ruleForm.exhibitionBoardIdList = newArray;
    },
    // 新增
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        // console.log(this.ruleForm);
        if (valid) {
          this.$https(
            {
              url: "/learningProject/save",
              method: "post",
              authType: this.backToken
            },
            // this.ruleForm
            this.$qs.stringify(this.ruleForm)
          )
            .then(res => {
               if(res.data.resultCode === "200"){
                 if(this.userType === '1'){
                this.$message({ type: "success", message: "新增学习内容申请已提交,待审核！" });
                 }else{
                   this.$message({ type: "success", message: "新增成功！" });
                 }
                history.go(-1);
              }else{
                this.$message({ type: "error", message: res.data.message });
              }
            })
            .catch(function(err) {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 修改版权方
    updateForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$https(
            {
              url: "learningProject/update",
              method: "put",
              authType: this.backToken
            },
            this.$qs.stringify(this.ruleForm)
            // this.ruleForm
          )
            .then(res => {
              if(res.data.resultCode === "200"){
                if(this.userType === '1'){
                  this.$message({ type: "success", message: "修改学习内容申请已提交,待审核！" });
                }else{
                  this.$message({ type: "success", message: "修改成功！" });
                }
                
                history.go(-1);
              }else{
                this.$message({ type: "error", message: res.data.message });
              }
            })
            .catch(function(err) {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    imgUrl(url) {
      this.ruleForm.cover = url;
      this.$refs.ruleForm.validateField("cover");
    },
    // 展板类别发生变化
    getSelectDep(exhibitionBoardCatIdList) {
      if (exhibitionBoardCatIdList.length === this.videoContentCat.length) {
        this.checkedThing = true;
      } else {
        this.checkedThing = false;
      }
      this.getTableParam()
    },
    clearData(list) {
      // console.log(list)
    },
    //
    getSelectDep2(exhibitionBoardCatIdList) {
      if (exhibitionBoardCatIdList.length === this.assetType2.length) {
        this.checkedThing2 = true;
      } else {
        this.checkedThing2 = false;
      }
      // this.getTableParam()
    },
    // 筛选展板备选清单选项条件
    getTableParam(){
      // debugger
       const param = {
        boardCopyrightOwnerIdList: this.ruleForm.copyrightOwnerIdList.toString(),
        exhibitionBoardCatIdList: this.ruleForm.exhibitionBoardCatIdList.toString()
      };
      if((param.boardCopyrightOwnerIdList.length>0)&&(param.exhibitionBoardCatIdList.length>0)){
        this.getTableData(param);
      }else{
        this.tableData = []
      }
    },
    // 根据展板类别，版权方获取展板备选清单
    getTableData(param, type) {
     
      let vm = this;
      vm.$https(
        {
          url: "exhibitionBoard/getList",
          method: "post",
          authType: this.backToken
        },
        vm.$qs.stringify(param)
      )
        .then(res => {
          //  alert(1)
          // console.log(res)
          let data = res.data.data;
          vm.tableData = data;
          // console.log(222222222222,vm.tableData)
          if (type) {
            // 选中表格数据
            setTimeout(() => {
              vm.setSelctTable();
            }, 1000);
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },

    selectAllThing() {
      // debugger
      
      this.ruleForm.exhibitionBoardCatIdList = [];
      if (this.checkedThing) {
        this.videoContentCat.map(item => {
          this.ruleForm.exhibitionBoardCatIdList.push(item.id);
        });
      } else {
        this.ruleForm.exhibitionBoardCatIdList = [];
      }
      this.getTableParam()
    },
    selectAllThing2() {
      // debugger
      this.ruleForm.copyrightOwnerIdList = [];
      if (this.checkedThing2) {
        this.assetType2.map(item => {
          this.ruleForm.copyrightOwnerIdList.push(item.id);
        });
      } else {
        this.ruleForm.copyrightOwnerIdList = [];
      }
    },

    // 新增
    addSubmit() {
      // 至少选一个备选清单 提示
      alert("请先至少选择一个展板备选清单");
    },
    close() {
      history.go(-1);
    },
    moveUpward(row, index) {
      if (index > 0) {
        let upData = this.tableData[index - 1];
        this.tableData.splice(index - 1, 1);
        this.tableData.splice(index, 0, upData);
      } else {
        this.$message({
          message: "已经是第一条，上移失败",
          type: "warning"
        });
      }
    },
    moveDown(row, index) {
      if (index + 1 == this.tableData.length) {
        this.$message({
          message: "已经是最后一条，下移失败",
          type: "warning"
        });
      } else {
        let downData = this.tableData[index + 1];
        this.tableData.splice(index + 1, 1);
        this.tableData.splice(index, 0, downData);
      }
    }
  }
};
</script>

<style lang="less">
.none {
  display: none !important;
}
@import "../../../../style/table.less";
</style>
