<template>
  <div>
    <el-card>
      <div style="display: inline;float: left">
        <h1>{{ resourceBaseInfo.name }}</h1>
        <h3>资源类型:{{ resourceBaseInfo.typeName }}</h3>
      </div>
      <div style="float: right">
        <el-button type="primary" :loading="uploadLoading" @click="importResource()"
                   v-if="checkPermission(RESOURCE_PERMS.importResource)">保存并退出
        </el-button>
        <el-button @click="cancel(true)" :loading="uploadLoading">返回上一步</el-button>
      </div>
    </el-card>
    <el-card>
      <el-form label-position="right" label-width="300px" style="height: 400px;" id="importForm">
        <el-form-item label="上传文件:">
          <el-upload
            ref="upload"
            :disabled="uploadLoading"
            action=""
            :http-request="uploadResource"
            :show-file-list="false"
            :auto-upload="true"
            :multiple="false">
            <el-button v-if="checkPermission(RESOURCE_PERMS.analyseResource)" :loading="uploadLoading" size="small">
              点击上传
            </el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="上传进度:">
          <el-progress style="width: 400px" :percentage="percent"></el-progress>
        </el-form-item>
        <el-form-item label="本次上传资源个数:"><span style="font-size: 20px">{{ importResult.resourceCount }}</span>
        </el-form-item>
        <el-form-item label="解析失败资源个数:"><span style="font-size: 20px">{{ importResult.failedCount }}</span>
        </el-form-item>
        <!--        <el-form-item label="数据预览:">-->
        <!--          <el-button type="primary" @click="showVisible=true">点击预览</el-button>-->
        <!--        </el-form-item>-->
      </el-form>
      <HR/>
      <div>
        <h4>说明:</h4>
        <div style="margin-left: 200px" v-if="resourceBaseInfo.type==0">
          <div style="color: black"><strong>上传格式说明：</strong></div>
          <br/>
          <div>上传格式为json 格式</div>
          <div>{"data":{"txtsource":"文本内容","hint":"这是一段注释或参考文本内容"}}}</div>
          <div style="color: black"><strong>例如：</strong></div>
          <br/>
          <div>{"data":{"txtsource":"NBA篮球赛场馆广告","hint":"参考标注 篮球"}}</div>
          <div>{"data":{"txtsource":"CBA篮球赛场馆广告","hint":"参考标注 篮球"}}</div>
        </div>
        <div style="margin-left: 200px" v-if="resourceBaseInfo.type==1">
          <div style="color: black"><strong>上传格式说明：</strong></div>
          <br/>
          <div>上传格式为json 格式</div>
          <div>文件内容格式为：</div>
          <div>{"data":{"picsource":"图片URL","hint":"这是一段注释或参考文本内容"}}</div>
          <div style="color: black"><strong>例如：</strong></div>
          <br/>
          <div>{"data":{"picsource":"oss://****.oss-cn-hangzhou.aliyuncs.com/iTAG/pic/1.jpg","hint":"参考标注 篮球"}}</div>
          <div>{"data":{"picsource":"oss://****.oss-cn-hangzhou.aliyuncs.com/iTAG/pic/10.jpg","hint":"参考标注 篮球"}}</div>
        </div>
        <div style="margin-left: 200px" v-if="resourceBaseInfo.type==2">
          <div style="color: black"><strong>上传格式说明：</strong></div>
          <br/>
          <div>上传格式为json 格式</div>
          <div>文件内容格式为：</div>
          <div>{"data":{"movsource":"视频URL","hint":"这是一段注释或参考文本内容"}}}</div>
          <div style="color: black"><strong>例如：</strong></div>
          <br/>
          <div>{"data":{"movsource":"oss://****.oss-cn-hangzhou.aliyuncs.com/iTAG/pic/1.mp4","hint":"参考标注 篮球"}}</div>
          <div>{"data":{"movsource":"oss://****.oss-cn-hangzhou.aliyuncs.com/iTAG/pic/10.avi","hint":"参考标注 篮球"}}</div>
        </div>
      </div>
    </el-card>
    <el-dialog :close-on-click-modal="false" title="预览结果" :visible.sync="showVisible" width="800px"
               style="height: 600px">
      <el-form>
        <el-form-item>
          <el-input type="textarea" :rows="14" readonly v-model="importResult.effectiveResourceStr"></el-input>
          <div class="block" style="height: 200px;text-align: center">
            <el-button @click="showVisible=false">关闭预览</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {getBaseInfo, analyseResource, importResource, analyseAndImport, editDraft} from "@/api/resource";
import {RESOURCE_PERMS} from "@/permission/permission-resource";
import permissionMixin from '../../mixins/permission-mixin'

export default {
  name: "AddResourcePage",
  mixins: [permissionMixin],
  data() {
    return {
      RESOURCE_PERMS,
      resourceId: null,
      //解析返回结果
      importResult: {},
      //资源详情
      resourceBaseInfo: {},
      //上传表单
      importForm: {
        resourceId: null,
        dataList: [],
        resourceStr: ''
      },
      uploadLoading: false,
      showVisible: false,
      percent: 0
    }
  },
  mounted() {
    this.resourceId = this.$route.params.resourceId
    this.fetchResourceBaseInfo(this.resourceId)
  },
  methods: {
    //查询资源基础信息
    fetchResourceBaseInfo(resourceId) {
      getBaseInfo(resourceId).then(res => {
        this.resourceBaseInfo = res.result
      })
    },
    uploadResource(file) {
      this.uploadLoading = true
      this.$message.success('文件解析上传中,请等候...')
      let data = new FormData();
      data.append('uploadFile', file.file);
      analyseAndImport(data, this.resourceId).then(res => {
        this.percent = 100
        this.importResult = res.result
        // this.importForm.resourceStr = this.importResult.effectiveResourceStr
        // this.importForm.dataList = this.importResult.dataList
        this.uploadLoading = false
        this.$message.success('上传文件成功')
      }, err => {
        this.uploadLoading = false

      })
    },
    cancel(val) {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$router.push({name: 'ResourceManagement', params: {flush: val}})
      })
    },
    importResource() {
      this.uploadLoading = true
      this.importForm.resourceId = this.resourceId
      editDraft(this.importForm).then(res => {
        this.$message.success('资源文件添加成功')
        this.uploadLoading = false;
        this.cancel(true)
      }, err => {
        this.uploadLoading = false
      })
    }
  },

}
</script>

<style scoped>
#importForm >>> .el-form-item__label {
  font-size: 20px;
}
</style>
