<template>
  <div class="info">
    <div class="info-header">新建视频</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="party-form form-inline"
        >
          <el-form-item label="视频名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <!-- <el-form-item label="版权方">
            <mul-display @videoCopyright="videoCopyright"></mul-display>
          </el-form-item> -->
          <!-- <el-form-item class="addTip">
            <span>若没有相应的视频分类，请点击</span>
            <el-button type="text" @click="addVideoClass">新建视频分类</el-button>
          </el-form-item>
          <el-form-item class="selectH100" label="请选择预设视频分类">
            <el-select
              placeholder="请选择预设视频分类"
              @focus="getAssetTypeData"
              multiple
              v-model="ruleForm.assetTypeIdList"
              @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="请选择视频版权方">
            <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 class="addTip">
            <span>若没有相应的视频分类，请点击</span>
            <el-button type="text" @click="addVideoClass">新建视频分类</el-button>
          </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="视频缩略图">
            <upload-img @imgUrl="imgUrl"></upload-img>
          </el-form-item>
          <el-form-item label="上传视频">
            <upload-file @videoList="videoList"></upload-file>
          </el-form-item>
        </el-form>
        <!--新增弹框-->
        <el-dialog
          custom-class="party-dialog"
          title="新建视频分类"
          width="468px"
          :visible.sync="dialogVisible"
          :before-close="close"
        >
          <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="视频分类名称" prop="name">
                <el-input v-model="classForm.name"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input type="textarea" v-model="classForm.remarks"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer btn-group">
            <el-button size="mini" type="primary" @click="save('classForm')">确定</el-button>
            <el-button size="mini" @click="close">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <div class="info-footer">
      <div class="btn-group">
        <div class="btn-group">
          <el-button
            type="primary"
            v-show="type === 'add'"
            class="btn_form_search"
            @click="submitForm('ruleForm')"
          >确定</el-button>
          <el-button
            type="primary"
            v-show="type === 'Update'"
            class="btn_form_search"
            @click="updateForm('ruleForm')"
          >确定</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import uploadImg from '@/page/content/components/uploadVue/uploadImg'
import uploadFile from '@/page/content/components/uploadVue/uploadFile'
import uploadDatum from '@/page/content/components/uploadVue/uploadDatum'
import mulDisplay from '@/page/content/components/mulClassify/mulDisplay'
import addCopyright from '@/page/content/components/dialog/addCopyright'
export default {
     components:{
    uploadImg,
    uploadFile,
    uploadDatum,
    mulDisplay,
    addCopyright
  },
  data() {
    return {
      copyrightOwner:[],
      type: this.$route.query.type,
      dialogVisible: false,
      formLabelWidth: "100px",
      form: {
        name: ""
      },
      classForm: {},
      value1: [],
      ruleForm: {
        name: "",
        assetCopyrightOwnerId:"",
        assetTypeId: "",
        thumbnail:"",
        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"
          }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change"
          }
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 视频版权方名称id
    videoCopyright(idlist){
      this.ruleForm.assetCopyrightOwnerId = idlist
    },
    // 缩略图地址
    imgUrl(url){
      console.log(url,'图片服务器地址')
      this.ruleForm.thumbnail = url
    },
    // 视频列表地址
    videoList(list){
      this.ruleForm.videoUrlList = list
    },
    init() {
      if (this.$route.query.type === "Update") {
        this.getInfo(this.$route.query.id);
        this.getAssetTypeData()
        this.getAssetCopyrightData()
      }
    },
    getAssetType(data){
      console.log(data)
      console.log(this.ruleForm.assetTypeId)
    },
    //  获取版权方详情
    getInfo(id) {
       let vm = this;
      vm.$https(
        {
          url: "videoContent/get/" + id,
          method: "get",
          authType: this.backToken
        }
        // param
      )
        .then(res => {
          let data = res.data.data;
          // this.ruleForm = data;
          this.ruleForm.id = data.id
          this.ruleForm.name = data.name
          this.ruleForm.assetCopyrightOwnerId = data.assetCopyrightOwnerId
          this.ruleForm.assetTypeId = data.assetTypeId
          this.ruleForm.thumbnail = data.thumbnail
          this.ruleForm.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;
        }
      });
    },
    // 新增关闭
    close() {
      this.dialogVisible = false;
      for (let key in this.classForm) {
        this.classForm[key] = null;
      }
      this.$refs["classForm"].resetFields();
    },
    // 新增
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        // this.ruleForm.assetCopyrightOwnerId = ["1373225989501456385"]
        // this.ruleForm.assetTypeIdList = []
      //   this.ruleForm.videoUrlList = [
      //   "http://111.203.232.175:8085/group1/M00/00/39/wKhuVWBgIvaANgtZAAAAAAAAAAA947.mp4"
      //  ]
        if (valid) {
          this.$https(
            {
              url: "/videoContent/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: "videoContent/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);
        });
    },
    // 获取视频分类列表
    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);
        });
    },
    getSelectDep(assetTypeIdList) {
      if (assetTypeIdList.length === this.videoContentCat.length) {
        this.checkedThing = true;
      } else {
        this.checkedThing = false;
      }
    },
    selectAllThing() {
      // debugger
      this.ruleForm.assetTypeIdList = [];
      if (this.checkedThing) {
        this.videoContentCat.map(item => {
          this.ruleForm.assetTypeIdList.push(item.id);
        });
      } else {
        this.ruleForm.assetTypeIdList = [];
      }
    }
  }
};
</script>

<style lang="less">
@import "../../../../style/dialog";
</style>