<!--幼儿园端提交的玩具-->
<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="12">
                <div class="mustIcon">
                  <div class="textLabel">玩具名称:</div>
                  <TooltipOver class="textValue" :text="formState.toyName || '--'" />
                </div>
              </el-col>
              <el-col :span="12">
                <div class="mustIcon">
                  <div class="textLabel">计数单位:</div>
                  <TooltipOver
                    class="textValue"
                    :text="getDictLabel(dict.type[DictType.toy_unit], formState.toyUnit) || '--'"
                  />
                </div>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="24">
                <div class="mustIcon">
                  <div class="textLabel">玩具图片:</div>
                  <template v-if="fileList && fileList.length > 0">
                    <div v-for="(item, index) in fileList" :key="index" class="image-wrapper overflow">
                      <el-image
                        class="img-station1"
                        :src="item.url"
                        :preview-src-list="srcList"
                        :initial-index="5"
                        fit="contain"
                        @click="vbs(item.url)"
                      >
                        <div slot="error" class="img-station1 img_error_ttx">
                          <span class="img_text">未上传照片</span>
                        </div>
                      </el-image>
                      <div v-show="item.isPrimary">
                        <div class="image-tag" />
                        <div class="image-tag-tips">主图</div>
                      </div>
                    </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>
                  <TooltipOver class="textValue" :text="formState.toyBrandName || '--'" />
                </div>
              </el-col>
            </el-row>
          </div>
          <el-divider class="mini-divider-table" />
          <div class="title">投放信息</div>
          <div class="basicInformationContent">
            <advertise-info :advertisting-dtos="formState.advertistingDtos" :style="{width: (improvedType === '1' && !showBack) || (improvedType === '0' && !formState.toyBaseInfoId && !showBack) ? '80%' : '100%' }" />
          </div>
          <div class="title">核对信息</div>
          <div class="basicInformationContent">
            <category-item-card
              :style="{width: (improvedType === '1' && !showBack) || (improvedType === '0' && !formState.toyBaseInfoId) ? '80%' : '100%' }"
              :toy-sort-relation-list="formState.toySortRelationList"
              :improved-type="improvedType"
              :delete-toy-visible="deleteToyVisible"
              :show-lable="flag"
              :toy-base-info-id="formState.toyBaseInfoId"
            />
          </div>

          <div class="title">详情信息</div>
          <div class="basicInformationContent">
            <div
              class="mustIcon"
              :style="{width: (improvedType === '1' && !showBack) || (improvedType === '0' && !formState.toyBaseInfoId && !showBack) ? '80%' : '100%' }"
            >
              <div
                v-if="formState.toyDescription"
                class="warp_des"
                v-html="formState.toyDescription"
              />
              <template v-else>
                <empty-info />
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { classFormatter, toyBrandFormatter } from '@/utils/formatter'
import { fetchFileUrl } from '@/utils'
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 AdvertiseInfo from '@/components/ToyInfo/advertiseInfo.vue'
import CategoryItemCard from '@/views/toy/improved/modules/CategoryItemCard.vue'
import EmptyInfo from '@/components/EmptyInfo.vue'

export default {
  name: 'BasicInfo',
  components: { CategoryItemCard, AdvertiseInfo, TooltipOver, EmptyInfo },
  dicts: [DictType.toy_yes_no, DictType.toy_unit],
  props: {
    formState: {
      type: Object,
      required: () => ({
        toyName: '',
        toyDescription: '',
        isSpecialToy: '',
        releaseClassAge: [],
        toySortRelationList: [],
        // releaseClassAge: '',
        // releaseClassArr: '',
        releaseClass: ''
      })
    },
    improvedType: {
      type: String,
      default: '1'
    },
    showBack: {
      type: Boolean,
      default: false
    },
    deleteToyVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      options,
      DictType,
      fileList: [],
      srcList: [],
      flag: true
    }
  },
  computed: {
    ...mapGetters(['brandList'])
    // localBaseInfo() {
    //   return this.baseInfo
    // },
    // toyCategoryList() {
    //   const { toySortRelationList } = this.baseInfo
    //   return toySortRelationList
    // },
    // releaseClassList() {
    //   const { releaseClassArr, releaseClass, releaseClassAge } = this.baseInfo
    //   const e = releaseClassArr || releaseClass || releaseClassAge || ''
    //   return e
    // }
  },
  watch: {
    'formState.fileId': {
      handler(val) {
        if (val) {
          fetchFileUrl(val, this.formState.toyCoverUrl).then(data => {
            this.fileList = data
          })
        }
      },
      immediate: true
    }
  },
  created() {
    this.GetBrandList()
  },
  methods: {
    ...mapActions(['GetBrandList']),
    classFormatter,
    toyBrandFormatter,
    getDictLabel,
    vbs(val) {
      this.srcList = []
      this.srcList.push(val)
    },
    handleBack() {
      this.$emit('back')
    }
  }
}
</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;
}

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

