<template>
  <!-- 搜索 -->
  <div class="search-one">
    <div style="text-align: right;" class="search-input">
      <el-button type="primary" plain @click="openForm('create',{},merchantId)"  v-if="!mobile && !isDetail && list.length == 0">
        <Icon icon="ep:plus" /> 新增
      </el-button>
    </div>
  </div> 
  <el-row>
    <el-col v-for="(o, index) in list" :class="{ 'view': isDetail, 'mobile-card': mobile }" class="card" :key="index" :span="4" :xl="4" :lg="4" :md="4" :sm="24" :xs="24">
      <el-card @click="openForm('view', o,merchantId)">
        <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px;">
          <p style="width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-size: 16px;color:#000"
            :title="o.name">{{ o.name }}
          </p>
          <div v-if="!mobile" class="setting" @click.stop="openForm('update', o,merchantId)" >
            <el-icon size="20" color="rgb(220 223 231)">
              <Setting />
            </el-icon>
          </div>
        </div>
        <div >
          <div
            style="width: 100%;height:250px;border:1px solid rgb(220 223 231);display: flex;align-items: center;justify-content: center;overflow: hidden;margin:10px 0 ;">
            <img :src="o.logoUrl" style="width: 100%;" />
          </div>
          {{formatDate(o.updateTime,"YYYY-MM-DD")}}

        </div>
      </el-card>
    </el-col>
  </el-row>

  <div v-if="list.length == 0">
    <p style="text-align: center;margin-top: 100px;">该商户暂无店铺</p>
  </div>
  <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total"
    @pagination="getList" />
    
  <MerchantStoreFrom ref="MerchantStoreFromRef" @success="getList" />

</template>

<script setup>
import { formatDate } from '@/utils/formatTime'
import * as UserApi from '@/api/member/user'
import { ShopApi } from '@/api/system/sale/shop'
import { DICT_TYPE } from '@/utils/dict'
import { useRouter } from 'vue-router'
import { CouponSendForm } from '@/views/mall/promotion/coupon/components'
import { checkPermi } from '@/utils/permission'
import MerchantStoreFrom from './MerchantStoreFrom.vue'
// 从缓存中获取merId
import { useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()
const merId = wsCache.get('merId');


defineOptions({ name: 'MerchantStore' })

const message = useMessage() // 消息弹窗

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({

})
const props = defineProps({
  id: {
    default: null,
    type: Number
  },
  isDetail: {
    default: false,
    type: Boolean
  }
})
const merchantId = props.id
/*********************** 中星查询列表开始 **********************/

import { Setting, Search, Operation } from '@element-plus/icons-vue'
// 从路由中引入store中的app仓库
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const mobile = computed(() => appStore.getMobile)


/** 查看/添加/修改操作 */
const MerchantStoreFromRef = ref()
const openForm = (type, obj,merchantId) => {
  if (type == 'view') {
    // 查看

    // 如果是外链，则直接打开新窗口
    if (!obj.website) return

    // 如果没有http则帮他加上
    if (obj.website.indexOf('http') == -1) obj.website = 'http://' + obj.website
    
    window.open(obj.website, '_blank')
    return
  }
    
  MerchantStoreFromRef.value.open(type, obj,merchantId)
}

/************************ 中星查询列表结束 ***************************/

const queryFormRef = ref() // 搜索的表单



/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await ShopApi.getAllUserByMer(merId)
    list.value = data
    total.value = data.total || data.length
  } finally {
    loading.value = false
  }
}







/** 初始化 **/
onMounted(() => {
  getList()
})
</script>
<style src="@/styles/SearchIndex.css"  lang="scss" scoped></style>

<style lang="scss" scoped>
.setting {
  display: none !important;
}

.card:hover {
  .setting {
    display: block !important;

    .el-icon {
      margin-top: 5px;
    }
  }
}
::v-deep .el-card__body {
  padding: 0px !important
}
</style>
