<!--关联平台玩具详情 通过 formState.toyBaseInfoId 获取玩具详情信息-->
<template>
  <div v-loading="infoLoading" class="info-wrapper">
    <template v-if="!noData">
      <template v-if="showTitle">
        <div class="d-flex">
          <p class="info-title">{{ title }}</p>
          <slot name="headerOptions" />
        </div>
        <el-divider class="mini-divider-table" />
      </template>
      <div class="electricPileDetails">
        <div class="basicInformation">
          <div style="position: relative">
            <div class="title">基础信息
              <el-button v-if="showBtn" type="primary" plain class="link_title" @click="handleViewInfo">查看关联信息</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="baseInfo.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], baseInfo.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="baseInfo.toyBrandName || '--'" />
                </div>
              </el-col>
            </el-row>
          </div>
          <el-divider class="mini-divider-table" />
          <div class="title">分类信息</div>
          <div class="basicInformationContent">
            <category-item-card
              :form-state="formState"
              :toy-sort-relation-list="baseInfo.toySortRelationList"
              :toy-base-info-id="formState.toyBaseInfoId"
              :show-lable="flag"
              :improved-type="improvedType"
              :is-detail="isDetail"
            />
          </div>
          <el-divider class="mini-divider-table" />
          <div class="title">详情信息</div>
          <div class="basicInformationContent">
            <div class="mustIcon">
              <div
                v-if="baseInfo.toyDescription"
                style="width: 100%;"
                class="warp_des"
                v-html="baseInfo.toyDescription"
              />
              <template v-else>
                <empty-info />
              </template>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <empty-info :empty-text="'暂无关联玩具'" />
    </template>
  </div>
</template>

<script >
import TooltipOver from '@/views/components/TooltipOver/index.vue'
import { getDictLabel } from '@/utils/dict/config'
import DictType from '@/utils/dict/DictType'
import { getInfo } from '@/api/toy/info'
import { fetchFileUrl } from '@/utils'
import CategoryItemCard from '@/views/toy/improved/modules/CategoryItemCard.vue'
import EmptyInfo from '@/components/EmptyInfo.vue'

export default {
  components: { EmptyInfo, CategoryItemCard, TooltipOver },
  dicts: [DictType.toy_yes_no, DictType.toy_unit],
  props: {
    title: {
      type: String,
      default: '关联玩具'
    },
    // toyBaseInfoId: {
    //   type: String,
    //   required: true
    // },
    formState: {
      type: Object
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    showBtn: {
      type: Boolean,
      default: false
    },
    improvedType: {
      type: String,
      default: '2'
    },
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      DictType, infoLoading: false,
      fileList: [],
      baseInfo: {},
      srcList: [],
      noData: false,
      flag: false
    }
  },
  computed: {

  },
  watch: {
    'formState.toyBaseInfoId': {
      handler(val) {
        if (val) {
          this.getAssociateInfo(val)
        } else {
          this.noData = true
        }
      },
      immediate: true
    }
  },
  activated() {
    this.getAssociateInfo(this.formState.toyBaseInfoId)
  },
  mounted() {

  },
  methods: {
    getDictLabel,
    vbs(val) {
      this.srcList = []
      this.srcList.push(val)
    },
    getAssociateInfo(val) {
      this.infoLoading = true
      getInfo(val).then(({ data, code }) => {
        if (!!data && code === 200) {
          this.noData = false
          this.baseInfo = data
          const { fileId, toyCoverUrl } = this.baseInfo
          this.fetchFileUrl(fileId, toyCoverUrl)
        } else {
          this.noData = true
          this.$emit('deleteToy')
        }
      }).finally(() => {
        this.infoLoading = false
      })
    },
    fetchFileUrl(id, url) {
      fetchFileUrl(id, url).then(data => {
        this.fileList = data
      })
    },
    handleViewInfo() {
      this.$emit('showVisible')
    }

  }
}
</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;
}
.info-wrapper {
  min-height: 500px;
}
.link_title {
  position: fixed;
  right: 50px;
}
</style>
