<template>
  <el-drawer :size="800" @closed="$emit('closed', data)" :close-on-press-escape="false" :close-on-click-modal="false" destroy-on-close title="视频组" v-model="visible">
    <el-container v-loading="loading">
      <el-main style="padding:0 6px 6px 6px">
        <x-form-table :addtemplate="filtersAddTemplate" :hideAdd="true" class="videos" drag-sort="" placeholder="暂无数据" ref="videostable" v-model="data.videos">
          <el-table-column label="视频ID" prop="text" width="100">
            <template #default="scope">
              <el-input placeholder="视频ID" v-model="scope.row.videoid">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="视频链接" prop="text">
            <template #default="scope">
              <el-input placeholder="视频链接" v-model="scope.row.videourl">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="视频图片" prop="value" width="150">
            <template #default="scope">
              <el-input class="input-with-select" placeholder="视频图片" v-model="scope.row.imageid">
                <template v-slot:append="">
                  <x-upload :height="30" :multiple="false" :on-success="function(res){ scope.row.imageid = res.aid; scope.row.imageurl = res.url }" :showfilelist="0" :width="30" v-model="scope.row.imageurl">
                    <el-button icon="el-icon-upload" type="danger">
                    </el-button>
                  </x-upload>
                </template>
              </el-input>
            </template>
          </el-table-column>
        </x-form-table>
        <div style="padding:10px 0px 0 0px">
          <el-upload :action="fileConfig.api" :file-list="fileList" :on-success="pushRow" name="files">
            <slot>
              <el-button style="width: 100%;" type="danger">
                点击上传视频文件
              </el-button>
            </slot>
          </el-upload>
        </div>
      </el-main>
      <el-footer>
        <el-button @click="submit" type="primary">
          提交
        </el-button>
      </el-footer>
    </el-container>
  </el-drawer>
</template>
<style>
  .input-with-select .el-input-group__prepend {
    padding: 2px;
  }
  .videos .el-input-group__append{
  	padding: 0px;
  }
</style>
<script>
  import sysConfig from "@/config";
	import api from './api'

	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				visible: false,
				issave: false,
				data:[],
				filtersAddTemplate: {
					imageid: null,
					videoid: null,
					videourl: '',
					imageurl: '',
				},
				fileList:[],
				fileConfig:{
					api: sysConfig.API_URL + this.$api.common.upload.url,
				},
			}
		},
		mounted() {

		},
		methods: {
			pushRow(res){
				this.fileList = [];
				if (res.code==200) {
					this.$refs.videostable.pushRow({
						imageid: null,
						videoid: res.data.aid,
						videourl: res.data.url,
						imageurl: '',
					})
					return ;
				}
				this.$message.warning(res.message);
			},
			close(){
				this.visible = false;
			},
			//表单提交方法
			submit(){
				this.$emit('success', this.data, this)
			},
			//显示
			open(){
				this.visible = true;
				return this;
			},
			//表单注入数据
			setData(o){
				this.data = o
			},
			remoteData(o){
				setTimeout(async ()=>{
					var res = await api.get('getAttachment',{id:o.id})
					this.loading = false
					this.data = res.data;
					this.issave = true
				},400)
			}
		}
	}
</script>
<style>
</style>
