<script setup>
import RPC from '@/utils/rpc'
import MapSelector from '@/components/MapSelector.vue'
import UploadFile from '@/components/UploadFile.vue'
const props = defineProps({
  type: {
    type: String,
    required: true,
  },
  row: [Object],
  categoryList: {
    type: Array,
    default: [],
  },
})

const emit = defineEmits(['closed', 'onSuccess'])

const dialogVisible = ref(false)

onMounted(() => {
  dialogVisible.value = true
})

const loading = ref(true)

function closed() {
  emit('closed')
}

const store = ref({})
const categories = ref([])

const product_images_list = ref([])
const qualification_images_list = ref([])
const product_pdfs_list = ref([])

RPC.post('/store/detail', { id: props.row.id })
  .then((res) => {
    console.log(res)
    store.value = res.store || {}
    product_images_list.value = res?.store?.product_images
      ? res?.store?.product_images.split(',')
      : []
    qualification_images_list.value = res?.store?.qualification_images
      ? res?.store?.qualification_images.split(',')
      : []
    product_pdfs_list.value = res?.store?.product_pdfs ? JSON.parse(res?.store?.product_pdfs) : []
    // categories.value =
    //   res.categories?.map((item) => {
    //     return {
    //       ...item,
    //       images: item.images ? JSON.parse(item.images) : [],
    //     }
    //   }) || []
  })
  .finally(() => {
    loading.value = false
  })

const openPdf = (item) => {
  if (item.url) {
    window.open(item.url)
  }
}

const activeTab = ref(0)
</script>

<template>
  <el-dialog
    align-center
    title="详情"
    width="80%"
    v-model="dialogVisible"
    @closed="closed"
    :close-on-click-modal="false"
  >
    <div v-loading="loading">
      <div class="title">基本信息</div>
      <div class="storeBox">
        <div class="item">
          <div class="key">门店名称</div>
          <div class="value">{{ store.store_name }}</div>
        </div>
        <div class="item">
          <div class="key">地址详情</div>
          <div class="value">{{ store.address }}</div>
        </div>
        <div class="item">
          <div class="key">地区</div>
          <div class="value">{{ store.location }}</div>
        </div>
        <div class="item">
          <div class="key">工作时间</div>
          <div class="value">{{ store.business_hours }}</div>
        </div>
        <div class="item">
          <div class="key">联系电话</div>
          <div class="value">{{ store.contact_phone }}</div>
        </div>
        <div class="item">
          <div class="key">分类标签</div>
          <div class="value">{{ store.tags }}</div>
        </div>
        <div class="item">
          <div class="key">门店主图</div>
          <div class="value">
            <div class="main_image_box" v-if="store.main_image">
              <el-image
                ref="imageRef"
                style="width: 100%; height: 100%"
                :src="store.main_image"
                show-progress
                :preview-src-list="[store.main_image]"
                fit="cover"
              />
              <!-- <img :src="store.main_image" alt="" /> -->
            </div>
          </div>
        </div>
        <div class="item">
          <div class="key">经度</div>
          <div class="value">{{ store.longitude }}</div>
        </div>
        <div class="item">
          <div class="key">纬度</div>
          <div class="value">{{ store.latitude }}</div>
        </div>
      </div>

      <div class="categoriesBox">
        <div class="line" v-if="store.video_intro">
          <div class="key">视频</div>
          <div class="value">
            <video
              controls
              muted
              :src="store.video_intro"
              alt=""
              class="video_box"
              v-if="store.video_intro"
            />
          </div>
        </div>
        <div class="line">
          <div class="key">产品图片</div>
          <div class="value">
            <div class="imgBox" v-for="item in product_images_list" :key="item">
              <el-image
                ref="imageRef"
                style="width: 100%; height: 100%"
                :src="item"
                show-progress
                :preview-src-list="[item]"
                fit="cover"
              />
            </div>
          </div>
        </div>
        <div class="line">
          <div class="key">企业资质</div>
          <div class="value">
            <div class="imgBox" v-for="item in qualification_images_list" :key="item">
              <el-image
                ref="imageRef"
                style="width: 100%; height: 100%"
                :src="item"
                show-progress
                :preview-src-list="[item]"
                fit="cover"
              />
            </div>
          </div>
        </div>
        <div class="line">
          <div class="key">产品资料</div>
          <div class="value">
            <div
              class="pdfBox"
              v-for="item in product_pdfs_list"
              @click="openPdf(item)"
              :key="item"
            >
              <div class="pdf_item">
                <el-icon size="40"><Document /></el-icon>
                <div class="name">{{ item.name }}</div>
                <div class="info">
                  <div class="size">{{ item.size }}MB</div>
                  <div class="date">{{ item.date }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closed"> 取 消 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.main_image_box {
  width: 100%;
  height: 100px;
  img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
}
.title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.storeBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    width: 32%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .key {
      width: 70px;
      flex-shrink: 0;
      margin-right: 10px;
      font-weight: 700;
    }
  }
}
.categoriesBox {
  .tabBox {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    .tabItem {
      font-weight: 600;
      padding: 5px 10px;
      margin-right: 10px;
      cursor: pointer;
      &.selected {
        color: #006eff;
      }
    }
  }
  .line {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .key {
      font-weight: 700;
      width: 60px;
      margin-right: 10px;
      flex-shrink: 0;
    }
    .value {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      .video_box {
        width: 370px;
        height: 130px;
      }
      .imgBox {
        width: 100px;
        height: 100px;
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }
}

.pdfBox {
  width: 200px;
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
  .closeBox {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
  }
}

.pdf_item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 99%;
  border-radius: 10px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  cursor: pointer;
  .name {
    font-weight: 700;
  }
  .info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #999;
    font-size: 12px;
  }
}
</style>
