<template>
  <!--新增弹框-->
  <el-dialog
    custom-class="party-dialog"
    title="新建视频版权方"
    width="468px"
    :visible.sync="dialogVisible"
    :before-close="close"
    
  >
    <div class="dialog-content">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="140px"
        class="party-form form-inline"
        label-position="top"
      >
        <el-form-item label="版权方名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="版权方有效期" prop="value1">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="ruleForm.value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item class="selectH100" label="请选择预设视频分类" prop="videoContentCatIdList">
          <el-select
            placeholder="请选择预设视频分类"
            @focus="getAssetTypeData"
            multiple
            v-model="ruleForm.videoContentCatIdList"
            @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-input type="textarea" v-model="ruleForm.remarks"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer btn-group">
      <el-button size="mini" type="primary" @click="submitForm('ruleForm')">确定</el-button>
      <el-button size="mini" @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      value1:[],
      dialogVisible:false,
      ruleForm: {
        videoContentCatIdList: [],
        name: "",
        ownerType: "VIDEO_CONTENT"
      },
      
      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" }
        ],
        videoContentCatIdList:[
          {required: true, message: "请选择视频分类", trigger: "change" }
        ],
        value1:[
          { required: true, message: "请填写版权方有效期", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    // 弹窗保存
    submitForm(formName) {
       this.ruleForm.expireDateEnd = this.ruleForm.value1[1];
        this.ruleForm.expireDateStart = this.ruleForm.value1[0];
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$https(
            {
              url: "copyrightOwner/save",
              method: "post",
              authType: this.backToken
            },
            // this.ruleForm
            this.$qs.stringify(this.ruleForm)
          )
            .then(res => {
              if(res.data.resultCode === "200"){
                this.$message({ type: "success", message: "新建视频版权方成功!" });
                this.dialogVisible = false
              }else{
                this.$message({ type: "error", message: res.message });
              }
              
              
            })
            .catch(function(err) {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    save(formName) {
      const _this = this
       _this.ruleForm.expireDateEnd = this.ruleForm.value1[1];
        _this.ruleForm.expireDateStart = this.ruleForm.value1[0];
     this.$refs[formName].validate(valid => {
        if (valid) {
          this.$https(
            {
              url: "copyrightOwner/save",
              method: "post",
              authType: this.backToken
            },
            // this.ruleForm
            _this.$qs.stringify(this.ruleForm)
          )
            .then(res => {
              console.log(res)
              // if(res.data.resultCode === "200"){
              //   _this.$message({ type: "success", message: "新增成功!" });
              //   _this.dialogVisible =false
              // }else{
              //   _this.$message({ type: "error", message: res.data.message });
              // }
              
              
            })
            .catch(function(err) {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 新增关闭
    close() {
      this.dialogVisible = false;
      for (let key in this.ruleForm) {
        this.ruleForm[key] = null;
      }
      this.$refs["ruleForm"].resetFields();
    },
     // 获取视频分类列表
    getAssetTypeData() {
      let vm = this;
      vm.$https({
        url: "videoContentCat/getList",
        method: "get",
        authType: this.backToken
      })
        .then(res => {
          let data = res.data.data;
          this.videoContentCat = data;
          // this.value1[0]=data.expireDateEnd
          //this.value1[1]=data.expireDateStart
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    getSelectDep(videoContentCatIdList) {
      if (videoContentCatIdList.length === this.videoContentCat.length) {
        this.checkedThing = true;
      } else {
        this.checkedThing = false;
      }
    },
    selectAllThing() {
      // debugger
      this.ruleForm.videoContentCatIdList = [];
      if (this.checkedThing) {
        this.videoContentCat.map(item => {
          this.ruleForm.videoContentCatIdList.push(item.id);
        });
      } else {
        this.ruleForm.videoContentCatIdList = [];
      }
    }
  }
};
</script>

<style>
</style>