<template>
    <div>
      <el-dialog :title="title" :visible.sync="uploadOpen" width="800px" append-to-body destroy-on-close :close-on-click-modal="false">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row class="el-row-table">
            <el-col :span="24" v-if="uploadType == 'video'">
              <el-form-item
                label="装配视频"
                :rules="[{ required: true, message: '装配视频不能为空', trigger: 'blur' }]"
                prop="videoUrl"
              >
                <FileUpload
                  listType="picture"
                  @resFun="getFileInfoVideo"
                  @remove="listRemoveVideo"
                  :fileArr="fileListVideo"
                  :fileSize="50"
                  :fileType="['mp4']"
                />
                <el-input v-show="false" disabled v-model="form.videoUrl"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24" v-if="uploadType == 'img'">
              <el-form-item
                :rules="[{ required: true, message: '装配图片不能为空', trigger: 'blur' }]"
                label="装配图片"
                prop="imgUrl"
              >
                <imageUpload v-model="form.imgUrl"/>
              </el-form-item>
            </el-col>


          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import ImageUpload from '@/components/ImageUpload';
  import FileUpload from "@/components/FileUpload";
  import uploadfile from "@/assets/uploadfile.png";
  import { addMark, updateMark } from "@/api/track/deviceMark";
  export default {
    name: "upload",
    components:{
      ImageUpload,
      FileUpload
    },
    data(){
        return{
          uploadOpen: false,
          title: "上传图片",
          form: {},
          fileListVideo: [],
          uploadType: "img"
        }
    },
    methods:{
      initUploadInfo(row,uploadType){
        this.uploadType = uploadType;
        this.form = {...row};
        this.title = this.uploadType == "img" ? "上传图片" : "上传视频";
        this.fileListVideo = [];
        this.uploadOpen = true;
      },
      submitForm(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            if(this.form.id){
              updateMark(this.form).then(res => {
                this.msgSuccess("上传成功");
                this.uploadOpen = false;
                this.$parent.getExecuteDetailInfo();
              })
            }else{
              this.form.markId = this.form.preMarkId;
              this.form.detailId = this.form.markDetailId;
              addMark(this.form).then(res =>{
                this.msgSuccess("上传成功");
                this.uploadOpen = false;
                this.$parent.getExecuteDetailInfo();
              })
            }
          }
        })
      },
      cancel(){
        this.uploadOpen = false;
        this.form = {};
      },
      getFileInfoVideo(res) {
        this.form.videoUrl = res.url;
        this.fileListVideo = [
          {
            name: res.fileName,
            url: uploadfile,
          },
        ];
      },
      listRemoveVideo(e) {
        this.fileListVideo = [];
        this.form.videoUrl = "";
      },
    }
  }
</script>

<style scoped>

</style>
