<template>
  <div style="width:50%;">
    <el-form-item label="藏品名称：" prop="name">
      <el-input v-model="form.name" :maxlength="INPUTLENGTH*5" show-word-limit></el-input>
    </el-form-item>

    <el-form-item label="藏品类型：">
      <el-radio v-model="radio" label="选中且禁用">音频</el-radio>
    </el-form-item>

    <el-form-item label="藏品年代：">
      <el-input v-model="form.ageId" class="fadeDom"></el-input>
      <el-select v-model="form.ageId" placeholder="请选择" style="width:100%">
        <el-option v-for="item in ageList" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="藏品种类：">
      <el-input v-model="form.textureId" class="fadeDom"></el-input>
      <el-select v-model="form.textureId" placeholder="请选择" style="width:100%">
        <el-option v-for="item in textureList" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="所属博物馆：">
      <el-input v-model="form.museumId" class="fadeDom"></el-input>
      <el-select v-model="form.museumId" placeholder="请选择" style="width:100%">
        <el-option v-for="item in museumList" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="是否显示：">
      <el-switch v-model="form.display"> </el-switch>
    </el-form-item>
    <el-form-item label="描述：">
      <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="form.description"></el-input>
    </el-form-item>

    <el-form-item label="封面图片：" prop="thumb">
      <div v-if="!form.museumId">请选择所属博物馆</div>
      <uploadThumb v-else :data="{'type':'thumb','museumId':form.museumId}" :url="fileUrl"
        @update="data=>{form.thumb = data}" :thumb="form.thumb" />
    </el-form-item>


    <el-form-item label="音频文件：" prop="filePath">
      <div v-if="!form.museumId">请选择所属博物馆</div>
      <template v-else>
        <uploadFile :data="{'type':'audio','museumId':form.museumId}" :url="fileUrl"
          @update="data=>{form.fileName = data.fileName,form.filePath = data.filePath}" :filePath="form.filePath"
          :desc="'支持mp3等格式的音频文件，大小不超过100MB'" />
        <audio class="svideo" v-if="form.filePath" controls :src="form.filePath">
        </audio>
      </template>

    </el-form-item>

  </div>
</template>

<script>
import uploadThumb from "@/components/uploadThumb";
import uploadFile from "@/components/uploadFile";

export default {
  props: ["data", 'rule', 'ageList', 'textureList', 'museumList'],
  components: { uploadThumb, uploadFile },
  data() {
    return {
      form: this.data,
      radio: "选中且禁用",
      fileUrl: this.$serverName + "cms/goods/upload",
    };
  },
};
</script>

<style lang="less" scoped>
.svideo {
  max-width: 50%;
  pointer-events: auto !important;
  opacity: 1 !important;
}
</style>