<template>
  <div class="info">
    <div class="info-header">新建展板</div>
    <div class="info-container">
      <div class="info-wrapper">
        <div class="pageTips">
          <strong>页面说明：</strong>
          可新建视频。“*”为必填项。若没有对应的视频版权方或视频分类可点击图标快速新建。
        </div>
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="展板基本信息" name="1">
            <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="w100">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>

              <el-form-item label="展板版权方" class="w50">
                <el-select
                  placeholder="请选择展板版权方"
                  @focus="getBoardCopyrightOwnerId"
                  v-model="ruleForm.boardCopyrightOwnerId"
                >
                  <el-option
                    v-for="item in boardCopyrightOwnerId"
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="展板分类">
                <el-select
                  placeholder="请选择展板分类"
                  @focus="getExhibitionBoardCatId"
                  v-model="ruleForm.exhibitionBoardCatId"
                >
                  <el-option
                    v-for="item in exhibitionBoardCatId"
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="展板图片" class="w50" prop="cover">
                <upload-img @imgUrl="imgUrl" ></upload-img>
              </el-form-item>
              <el-form-item label="展板二维码" class prop="qrcodeUrl">
                <upload-qrcode @qrcodeUrl="qrcodeUrl" ></upload-qrcode>
              </el-form-item>
              <el-form-item label="展板简介" style="width:640px" prop="introduction">
                <el-input type="textarea" v-model="ruleForm.remarks"></el-input>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="展板影音信息" name="2">
            <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="请选择视频版权方" class="w50">
                <el-select
                  placeholder="请选择视频版权方"
                  @focus="getAssetCopyrightData"
                  v-model="ruleForm.assetCopyrightOwnerId"
                >
                  <el-option
                    v-for="item in copyrightOwner"
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="请选择预设视频分类">
                <el-select
                  placeholder="请选择预设视频分类"
                  @focus="getAssetTypeData"
                  v-model="ruleForm.assetTypeId"
                  @change="getAssetType"
                >
                  <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="请选择视频">
                <el-select
                  placeholder="请选择视频"
                  @focus="getVideoData"
                  v-model="ruleForm.assetId"
                >
                  <el-option
                    v-for="item in assetId"
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="w50" prop="audioUrlList"></el-form-item>
              <el-form-item label="导览音频" class="w50">
                <!-- <upload-img @imgUrl="imgUrl"></upload-img> -->
                <upload-audio @audioList="audioList"></upload-audio>
              </el-form-item>
              <el-form-item label="参考资料" class prop="materialUrlList">
                  <upload-datum @datumList="datumList"></upload-datum>
              </el-form-item>
            </el-form>
          </el-collapse-item>
        </el-collapse>
      </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>
import uploadImg from "@/page/content/components/uploadVue/uploadImg";
import uploadQrcode from "@/page/content/components/uploadVue/uploadQrcode";
import uploadFile from "@/page/content/components/uploadVue/uploadFile";
import uploadDatum from "@/page/content/components/uploadVue/uploadDatum";
import uploadAudio from "@/page/content/components/uploadVue/uploadAudio";
import mulDisplay from "@/page/content/components/mulClassify/mulDisplay";
import addCopyright from "@/page/content/components/dialog/addCopyright";
export default {
  components: {
    uploadImg,
    uploadFile,
    uploadDatum,
    uploadAudio,
    mulDisplay,
    addCopyright,
    uploadQrcode
  },
  data() {
    return {
      type: this.$route.query.type,
      copyrightOwner: [],
      boardCopyrightOwnerId:[],
      exhibitionBoardCatId:[],
      assetId:[],
      type: this.$route.query.type,
      dialogVisible: false,
      formLabelWidth: "100px",
      form: {
        name: ""
      },
      classForm: {},
      value1: [],
      ruleForm: {
        name: "",
        boardCopyrightOwnerId:"",
        assetCopyrightOwnerId: "",
        assetTypeId: "",
        videoUrlList: []
      },
      videoContentCat: [
        {
          value: "Beijing",
          label: "北京"
        },
        {
          value: "Shanghai",
          label: "上海"
        }
      ],

      checkedThing: false,
      selfstyle: {
        textAlign: "right",
        width: "100%",
        paddingRight: "10px"
      },
      rules: {
        name: [
          { required: true, message: "请输入版权方名称", trigger: "blur" }
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],
      
      },
      activeNames: ["1", "2"]
    };
  },
  mounted(){
    this.init()
  },
  methods: {
      audioList(list){
          this.ruleForm.audioUrlList = list;
      },
      datumList(list){
        console.log(list,"122212fefe")
          this.ruleForm.materialUrlList = list;
      },
    // 视频版权方名称id
    videoCopyright(idlist) {
      this.ruleForm.assetCopyrightOwnerId = idlist;
    },
    // 缩略图地址
    imgUrl(url) {
      console.log(url, "图片服务器地址");
      this.ruleForm.cover = url;
    },
    // 二维码 
    qrcodeUrl(url){
      this.ruleForm.qrcodeUrl = url
    },
    // 视频列表地址
    videoList(list) {
      this.ruleForm.videoUrlList = list;
    },
     getAssetType(data) {
      console.log(data);
      console.log(this.ruleForm.assetTypeId);
    },
    init() {
      if (this.$route.query.type === "Update") {
        this.getInfo(this.$route.query.id);
        this.getAssetTypeData();
        this.getAssetCopyrightData();
        this.getExhibitionBoardCatId();
        this.getBoardCopyrightOwnerId();
        this.getVideoData();
      }
    },
    //  获取版权方详情
    getInfo(id) {
      let vm = this;
      vm.$https(
        {
          url: "exhibitionBoard/get/" + id,
          method: "get",
          authType: this.backToken
        }
        // param
      )
        .then(res => {
          let data = res.data.data;
          // this.ruleForm = data;
          console.log(this.ruleForm)
          this.ruleForm = {
            assetCopyrightOwnerId :data.assetCopyrightOwnerId,
            assetId:data.assetId,
            assetTypeId:data.assetTypeId,
            boardCopyrightOwnerId:data.boardCopyrightOwnerId,
            cover:data.cover,
            exhibitionBoardCatId:data.exhibitionBoardCatId,
            guideAudioUrl:data.guideAudioUrl,
            id:data.id,
            name:data.name,
            qrcodeUrl:data.qrcodeUrl,
            refMaterialUrl:data.refMaterialUrl,
            remarks:data.remarks,
            audioUrlList:data.audioUrlList,
            materialUrlList:data.materialUrlList
            // videoUrlList:data.videoUrlList
            // 字段对不上
          }
          
        })
        .catch(function(err) {
          console.log(err);
        });
    },

    // 新建视频分类
    addVideoClass() {
      this.dialogVisible = true;
    },
    // 弹窗保存
    save(formName) {
      this.$refs[formName].validate(valid => {
        this.ruleForm.expireDateEnd = this.value1[1];
        this.ruleForm.expireDateStart = this.value1[0];
        if (valid) {
          this.$https(
            {
              url: "videoContentCat/save",
              method: "post",
              // headers: {
              //   'Content-Type': 'application/json'
              // },
              authType: this.backToken
            },
            this.classForm
          )
            .then(res => {
              this.$message({ type: "success", message: "新增分类成功!" });
              this.dialogVisible = false;
            })
            .catch(function(err) {
              this.$message({
                type: "fail",
                message: "新增失败!" + err.response.data.msg
              });
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 新增
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
          console.log(this.ruleForm)
        if (valid) {
          this.$https(
            {
              url: "/exhibitionBoard/save",
              method: "post",
              authType: this.backToken
            },
            // this.ruleForm
            this.$qs.stringify(this.ruleForm)
          )
            .then(res => {
              this.$message({ type: "success", message: "新增成功!" });
              history.go(-1);
            })
            .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: "exhibitionBoard/update",
              method: "put",
              authType: this.backToken
            },
            this.$qs.stringify(this.ruleForm)
            // this.ruleForm
          )
            .then(res => {
              this.$message({ type: "success", message: "修改成功!" });
              history.go(-1);
            })
            .catch(function(err) {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      history.go(-1);
    },
    // 获取视频版权方
    getAssetCopyrightData() {
      let vm = this;
      vm.$https(
        {
          url: "copyrightOwner/getList",
          method: "get",
          authType: this.backToken
        },
        { copyrightOwnerType: "VIDEO_CONTENT" }
      )
        .then(res => {
          let data = res.data.data;
          this.copyrightOwner = data;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    // 获取展板版权方
    getBoardCopyrightOwnerId() {
      let vm = this;
      vm.$https(
        {
          url: "copyrightOwner/getList",
          method: "get",
          authType: this.backToken
        },
        { copyrightOwnerType: "EXHIBITION_BOARD" }
      )
        .then(res => {
          let data = res.data.data;
          this.boardCopyrightOwnerId = data;
          console.log(this.boardCopyrightOwnerId)
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    //获取展板分类
    getExhibitionBoardCatId(){
        let vm = this;
        vm.$https({
            url: "exhibitionBoardCat/getList",
            method: "get",
            authType: this.backToken
        })
            .then(res => {
            let data = res.data.data;
            this.exhibitionBoardCatId = data;
            })
            .catch(function(err) {
            console.log(err);
            }); 
    },
    // 获取视频分类列表
    getAssetTypeData() {
      let vm = this;
      vm.$https({
        url: "videoContentCat/getList",
        method: "get",
        authType: this.backToken
      })
        .then(res => {
          let data = res.data.data;
          this.videoContentCat = data;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
     // 获取视频列表
    getVideoData() {
      let vm = this;
      vm.$https({
        url: "videoContent/getList",
        method: "get",
        authType: this.backToken
      })
        .then(res => {
          let data = res.data.data;
          this.assetId = data;
        })
        .catch(function(err) {
          console.log(err);
        });
    },

    close() {
      history.go(-1);
    },
    handleChange(val) {
      console.log(val);
    }
  }
};
</script>

<style lang="less">
</style>