<!--幼儿园端提交的玩具-->
<template>
  <div class="info-wrapper">
    <div class="electricPileDetails">
      <div class="electricPileDetails">
        <div class="basicInformation">
          <div class="title">标准识别码
            <div v-if="showBack" style="float: right">
              <el-button icon="el-icon-arrow-left" plain size="mini" type="primary"
                @click="$emit('changeBack')">返回</el-button>
            </div>
          </div>
          <div class="basicInformationContent">
            <el-row type="flex">
              <el-col :span="24">
                <div class="mustIcon">
                  <div class="textLabel">ISBN码:</div>
                  <TooltipOver class="textValue" :text="formState.isbn || '--'" />
                </div>
              </el-col>
            </el-row>
          </div>

          <el-divider class="mini-divider-table" />
          <div class="title">基本信息</div>
          <div class="basicInformationContent">
            <el-row type="flex">
              <el-col :span="12">
                <div class="mustIcon">
                  <div class="textLabel">中文名称:</div>
                  <TooltipOver class="textValue" :text="formState.chineseName || '--'" />
                </div>
              </el-col>
              <el-col :span="12">
                <div class="mustIcon">
                  <div class="textLabel">英文名称:</div>
                  <TooltipOver class="textValue" :text="formState.englishName || '--'" />
                </div>
              </el-col>
            </el-row>
            <!-- 封面部分 -->
            <el-row type="flex">
              <el-col :span="12">
                <div class="mustIcon">
                  <div class="textLabel">封面:</div>
                  <template v-if="formState.coverImg && formState.coverImg.length > 0">
                    <div v-for="(item, index) in formState.coverImg" :key="index" class="image-wrapper overflow">
                      <el-image class="img-station1" :src="item.fileUrl" :preview-src-list="srcList.imageCover"
                        :initial-index="5" fit="contain" @click="vbs('imageCover', item.fileUrl)">
                        <div slot="error" class="img-station1 img_error_ttx">
                          <span class="img_text">未上传封面</span>
                        </div>
                      </el-image>
                    </div>
                  </template>
                  <span v-else>--</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="mustIcon">
                  <div class="textLabel">封底:</div>
                  <template v-if="formState.backCoverImg && formState.backCoverImg.length > 0">
                    <div v-for="(item, index) in formState.backCoverImg" :key="index" class="image-wrapper overflow">
                      <el-image class="img-station1" :src="item.fileUrl" :preview-src-list="srcList.imageBackCover"
                        :initial-index="5" fit="contain" @click="vbs('imageBackCover', item.fileUrl)">
                        <div slot="error" class="img-station1 img_error_ttx">
                          <span class="img_text">未上传封底</span>
                        </div>
                      </el-image>
                    </div>
                  </template>
                  <span v-else>--</span>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="24">
                <div class="mustIcon">
                  <div class="textLabel">插页:</div>
                  <template v-if="formState.insertPageList && formState.insertPageList.length > 0">
                    <div v-for="(item, index) in formState.insertPageList" :key="index" class="image-wrapper overflow">
                      <el-image class="img-station1" :src="item.fileUrl" :preview-src-list="srcList.imageInsert"
                        :initial-index="5" fit="contain" @click="vbs('imageInsert', item.fileUrl)">
                        <div slot="error" class="img-station1 img_error_ttx">
                          <span class="img_text">未上传插页</span>
                        </div>
                      </el-image>
                    </div>
                  </template>
                  <span v-else>--</span>
                </div>
              </el-col>
            </el-row>
            <!-- 封面部分 -->
            <el-row type="flex">
              <el-col :span="12">
                <div class="mustIcon">
                  <div class="textLabel">文字作者:</div>
                  <TooltipOver class="textValue" :text="formState.author || '--'" />
                </div>
              </el-col>
              <el-col :span="12">
                <div class="mustIcon">
                  <div class="textLabel">图画作者:</div>
                  <TooltipOver class="textValue" :text="formState.pictureAuthor || '--'" />
                </div>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="24">
                <div class="mustIcon">
                  <div class="textLabel">译者:</div>
                  <TooltipOver class="textValue" :text="formState.translator || '--'" />
                </div>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="12">
                <div class="mustIcon">
                  <div class="textLabel">出版社:</div>
                  <TooltipOver class="textValue" :text="formState.publisherName || '--'" />
                </div>
              </el-col>
              <el-col :span="12">
                <div class="mustIcon">
                  <div class="textLabel">出版社年月:</div>
                  <TooltipOver class="textValue" :text="formState.publishDate || '--'" />
                </div>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="24">
                <div class="mustIcon">
                  <div class="textLabel">开本:</div>
                  <TooltipOver class="textValue"
                    :text="formState.formt == 3 ? !!formState.formtContent ? formState.formtContent : getDictLabel(dict.type['book_type_format'], formState.formt) : getDictLabel(dict.type['book_type_format'], formState.formt) || '--'" />
                </div>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="24">
                <div class="mustIcon">
                  <div class="textLabel">套装:</div>
                  <TooltipOver class="textValue"
                    :text="formState.series == 1 ? formState.seriesName : getDictLabel(dict.type['book_type_series'], formState.series) || '--'" />
                </div>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="24">
                <div class="mustIcon">
                  <div class="textLabel">包装:</div>
                  <TooltipOver class="textValue"
                    :text="getDictLabel(dict.type['book_type_package'], formState.binding) || '--'" />
                </div>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="24">
                <div class="mustIcon">
                  <div class="textLabel">图书介绍:</div>
                  <div v-if="!!formState.summary" class="warp_des" v-html="formState.summary"></div>
                  <template v-else>
                    <empty-info />
                  </template>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="24">
                <div class="mustIcon">
                  <div class="textLabel">附件:</div>
                  <template v-if="formState.attachmentList && formState.attachmentList.length > 0">
                    <div class="flex-warp">
                      <div v-for="(item, index) in formState.attachmentList" :key="index" style="cursor: pointer;">
                        <el-tag class="mr10 mb5 tag-no-border" @click="onPreview(item)">{{ item.fileFullName }}</el-tag>
                      </div>
                    </div>
                  </template>
                  <div v-else>--</div>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-divider class="mini-divider-table" />
          <div class="title">基础属性</div>
          <div class="basicInformationContent">
            <el-row type="flex">
              <el-col :span="24">
                <div class="mustIcon">
                  <div class="textLabel">领域:</div>
                  <TooltipOver class="textValue" :text="formState.fieldName || '--'" />
                </div>
              </el-col>
            </el-row><el-row type="flex">
              <el-col :span="24">
                <div class="mustIcon">
                  <div class="textLabel">班龄段:</div>
                  <TooltipOver class="textValue" :text="formState.classAgeName || '--'" />
                </div>
              </el-col>
            </el-row><el-row type="flex">
              <el-col :span="24">
                <div class="mustIcon">
                  <div class="textLabel">图书标签:</div>
                  <div class="flex-warp">
                    <div v-for="(item, index) in formState.profileLabelList" :key="index" style="margin-right:8px;">
                      <el-tag class="mr10 mb5 tag-no-border">{{ '#' + item.labelDesc
                        }}</el-tag>
                    </div>
                    <div v-if="!formState.profileLabelList || formState.profileLabelList.length <= 0">--</div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="24">
                <div class="mustIcon">
                  <div class="textLabel">核心经验:</div>
                  <div>
                    <div v-for="(item, index) in formState.bookReCoreInfo" :key="index">
                      <TooltipOver class="textValue" :text="item.coreName" />
                    </div>
                    <div v-if="!formState.bookReCoreInfo || formState.bookReCoreInfo.length <= 0">--</div>
                  </div>
                </div>
              </el-col>
            </el-row><el-row type="flex">
              <el-col :span="24">
                <div class="mustIcon">
                  <div class="textLabel">3-6指南:</div>
                  <div>
                    <div v-for="(item, index) in formState.bookReGuideInfo" :key="index">
                      <TooltipOver class="textValue" :text="item.guideName" />
                    </div>
                    <div v-if="!formState.bookReGuideInfo || formState.bookReGuideInfo.length <= 0">--</div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>

          <el-divider class="mini-divider-table" />
          <div class="title">状态</div>
          <div class="basicInformationContent">
            <el-row type="flex">
              <el-col :span="24">
                <div class="mustIcon">
                  <div class="textLabel">状态:</div>
                  <TooltipOver class="textValue"
                    :text="getDictLabel(dict.type['toy_sys_status'], formState.status) || '--'" />
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <preview-file ref="previewFileRef" />
  </div>
</template>

<script>
import { classFormatter, toyBrandFormatter } from '@/utils/formatter'
import options from '@/utils/dict/options'
import DictType from '@/utils/dict/DictType'
import TooltipOver from '@/views/components/TooltipOver/index.vue'
import { getDictLabel } from '@/utils/dict/config'
import EmptyInfo from '@/components/EmptyInfo.vue'
import PreviewFile from '@/views/components/PreviewFile'


export default {
  name: 'BasicInfo',
  components: { TooltipOver, EmptyInfo, PreviewFile },
  dicts: ['toy_sys_status', 'book_type_format', 'book_type_series', 'book_type_package'],
  props: {
    formState: {
      type: Object,
      default: () => ({
        coverImg: [],
        backCoverImg: [],
        insertPageList: [],
        attachmentList: [],
      })
    },
    improvedType: {
      type: String,
      default: '1'
    },
    showBack: {
      type: Boolean,
      default: false
    },
    deleteToyVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      options,
      DictType,
      fileList: [],
      srcList: {
        imageCover: [],//封面
        imageBackCover: [],//封底
        imageInsert: [],//插页（5张最多）
      },
      flag: true
    }
  },
  methods: {
    classFormatter,
    toyBrandFormatter,
    getDictLabel,
    vbs(obj, val) {
      this.srcList[obj] = []
      this.srcList[obj].push(val)
    },
    handleBack() {
      this.$emit('back')
    },
    //打开文件预览
    onPreview(row) {
      this.$refs.previewFileRef.previewFile(row)
    }
  }
}
</script>
<style scoped lang="scss">
.info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.center-wrapper {
  text-align: center;
}

.electricPileDetails {
  .basicInformation {
    .basicInformationContent {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.85);

      .el-row {
        margin-bottom: 15px;
      }

      .textValue {
        color: rgba(0, 0, 0, 0.65);
      }
    }
  }

  .title {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 900;
    line-height: 23px;
    color: rgba(0, 0, 0, 0.85);
    margin: 24px 0 19px;
    text-align: left !important;
  }
}

.mustIcon {
  display: flex !important;
  overflow: hidden;

  .textLabel {
    //width: 150px;
    //padding-left: 30px;
    display: inline-block;
    white-space: nowrap;
    padding-right: 13px;
    //text-align: right;
    box-sizing: border-box
  }

  .textValue {
    overflow: hidden;
    flex: 1;
  }
}

.overflow {
  width: 100px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  text-overflow: ellipsis;
  overflow: hidden;
}

.flex-warp {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

//.warp_des {
//  max-height: 400px;
//  overflow-y: auto;
//}</style>
