<template>
  <el-dialog :model-value="visible" title="店铺详情" @close="close">
    <el-scrollbar wrap-class="el-dialog-body-full-scroll">
      <el-form class="bg-white py-15px px-30px overflow-hidden" label-suffix="：">
        <div active-title-bar class="mb-5px">
          <span class="text-16px text-dark-500 font-semibold">店铺基本信息</span>
        </div>
        <el-form-item class="mb-2px" label="店铺名称">
          <span class="text-dark-500">{{ store.name }}</span>
        </el-form-item>
        <div class="flex">
          <el-form-item class="flex-shrink-0 max-w-1/2 mb-2px min-w-1/4" label="店铺ID">
            <span class="text-dark-500">{{ store.store_id }}</span>
          </el-form-item>
          <el-form-item class="flex-shrink-0 max-w-1/2 mb-2px ml-10px min-w-1/4" label="店铺类型">
            <span class="text-dark-500">{{ store.type }}</span>
          </el-form-item>
        </div>
        <el-form-item class="mb-2px" label="店铺介绍">
          <span class="text-dark-500">{{ store.introduce }}</span>
        </el-form-item>
        <el-form-item class="mb-2px" label="店铺图片">
          <div v-if="store.imgs && store.imgs.length" class="flex-grow flex flex-wrap -mb-10px">
            <div class="w-60px h-60px mr-10px mb-10px relative p-5px" v-for="(i, index) in store.imgs" :key="index">
              <el-image :src="i" fit="cover" class="w-full h-full rounded" :preview-src-list="store.imgs"
                :initial-index="index" />
            </div>
          </div>
        </el-form-item>
        <div active-title-bar class="mt-5px mb-5px">
          <span class="text-16px text-dark-500 font-semibold">店铺地理信息</span>
        </div>
        <el-form-item class="mb-2px" label="省市区">
          <span class="text-dark-500">{{ store.region && store.region ? store.region.join(' / '):'' }}</span>
        </el-form-item>
        <el-form-item class="mb-2px" label="详情地址">
          <span class="text-dark-500">{{ store.address }}</span>
        </el-form-item>
        <el-form-item class="mb-2px" label="坐标">
          <span class="text-dark-500">
            {{ store.longitude ? `经度：${store.longitude}`:''}} {{store.longitude && store.latitude ? '，':'' }} {{
            store.latitude? `纬度：${store.latitude}`:''}}
          </span>
        </el-form-item>
        <div active-title-bar class="mt-5px mb-5px">
          <span class="text-16px text-dark-500 font-semibold">店铺经营信息</span>
        </div>
        <div class="flex">
          <el-form-item class="mb-2px flex-shrink-0 max-w-1/2 mb-2px min-w-1/4" label="互联网诊查费">
            <span class="text-dark-500">
              {{store.chargeItems && store.chargeItems[0] ? store.chargeItems[0].fee+'元' : ''}}
            </span>
          </el-form-item>
          <el-form-item class="mb-2px flex-shrink-0 max-w-1/2 mb-2px min-w-1/4" label="店铺状态">
            <template #label>
              <el-tooltip effect="light" content="店铺停用后，所有店铺关联人员账号无法使用" placement="top">
                <div class="flex items-center">
                  <span>店铺状态</span>
                  <el-icon class="text-gray-500">
                    <QuestionFilled />
                  </el-icon>
                </div>
              </el-tooltip>
            </template>
            <span class="text-dark-500">{{ store.status }}</span>
          </el-form-item>
        </div>
        <el-form-item class="mb-2px" label="营业时间">
          <span class="text-dark-500">{{ store.openingHours }}</span>
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template #footer>
      <div text-center>
        <el-button class="w-100px" type="primary" @click="close()">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { nextTick, ref, watch } from "vue";
import MyLayout, { LayoutMain } from "@/components/layout";

const props = defineProps({
  store: {
    type: Object,
    default: () => ({})
  },
  visible: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["close"]);
const mainRef = ref(null);

function close() {
  emit("close");
}

watch(() => props.visible, n => {
  if (n) {
    nextTick().then(() => mainRef.value && mainRef.value.scrollTo(0))
  }
})
</script>
<style lang="scss" scoped></style>
