<template>
  <div class="info-wrapper">
    <div class="electricPileDetails">
      <div class="basicInformation">
        <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="localBaseInfo.kindergartenToyName || '--'" />
              </div>
            </el-col>
            <el-col :span="12">
              <div class="mustIcon">
                <div class="textLabel">计数单位:</div>
                <TooltipOver class="textValue" :text="getDictLabel(dict.type[DictType.toy_unit],localBaseInfo.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="overflow image-wrapper">
                    <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="getBrandName()" />
              </div>
            </el-col>
          </el-row>
          <!--          <el-row type="flex">-->
          <!--            <el-col :span="24">-->
          <!--              <div class="mustIcon">-->
          <!--                <div class="textLabel">玩具分类:</div>-->
          <!--                <BasicToyCategory v-if="toyCategoryList && toyCategoryList.length > 0" :toy-sort-relation-list="toyCategoryList" />-->
          <!--                <span v-else>&#45;&#45;</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="classFormatter(releaseClassList) || '&#45;&#45;'" />-->
          <!--              </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="warp_des" v-html="localBaseInfo.toyDescription || '--'" />
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { fetchFileUrl } from '@/utils'
import { classFormatter, toyBrandFormatter } from '@/utils/formatter'
import DictType from '@/utils/dict/DictType'
import options from '@/utils/dict/options'
import BasicToyCategory from '@/components/ToyInfo/BasicToyCategory.vue'
import TooltipOver from '@/views/components/TooltipOver/index.vue'
import { getDictLabel } from '@/utils/dict/config'

export default {
  name: 'BasicInfoKindergarten',
  components: { TooltipOver, BasicToyCategory },
  dicts: [DictType.toy_unit],
  props: {
    baseInfo: {
      type: Object,
      default: () => ({
        kindergartenToyName: '',
        kindergartenFileId: '',
        kindergartenToyCoverUrl: '',
        kindergartenToyBrandId: '',
        toyDescription: ''
      })
    }
  },
  data() {
    return {
      DictType,
      options,
      fileList: [],
      allBrandList: [],
      srcList: []
    }
  },
  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: {
    baseInfo: {
      handler(val) {
        if (val && JSON.stringify(val) !== '{}') {
          fetchFileUrl(val.kindergartenFileId, val.kindergartenToyCoverUrl).then(data => {
            this.fileList = data
          })
        }
      },
      immediate: true
    }
  },
  created() {
    this.getBrandList()
  },
  methods: {
    getDictLabel,
    ...mapActions(['GetBrandList']),
    toyBrandFormatter,
    classFormatter,
    getBrandList() {
      this.allBrandList = this.brandList
      this.GetBrandList().then(data => {
        this.allBrandList = data && data.length > 0 ? data : []
      })
    },
    vbs(val) {
      this.srcList = []
      this.srcList.push(val)
    },
    getBrandName() {
      const brand = this.allBrandList.find(item => item.id === this.baseInfo.kindergartenToyBrandId)
      return brand && brand.name || ' -- '
    }
  }
}
</script>

<style scoped lang="scss">
.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;
                         }

                         ::v-deep {
                           .el-descriptions-item__container {
                             display: flex;
                             align-items: center;
                             justify-content: center;
                           }
                         }

</style>
