<template>
  <page-header-wrapper>
    <JeepayCard
      ref="infoCard"
      style="margin-top: 20px;"
      :reqCardListFunc="reqCardListFunc"
      :span="{ xxl: 6, xl: 4, lg: 4, md: 3, sm: 2, xs: 1 }"
      :height="300"
      :name="'模板'"
      :addAuthority="vdata.jeepayCard.addAuthority"
      @addJeepayCard="addOrEdit"
    >
      <template #cardContentSlot="{record}">
        <div class="jeepay-card-content">
          <div class="img-div"><img :src="record.shellImgViewUrl" style="max-width: 200px"></div>
          <!-- 卡片底部操作栏 -->
          <div class="jeepay-card-ops">
            <a-tooltip v-if="$access('ENT_DEVICE_QRC_SHELL_EDIT')" placement="top" title="编辑">
              <edit-outlined key="edit" type="edit" @click="addOrEdit(record.sid)" />
            </a-tooltip>
            <a-tooltip v-if="$access('ENT_DEVICE_QRC_SHELL_DEL')" placement="top" title="删除">
              <delete-outlined key="delete" type="delete" @click="del(record.sid)" />
            </a-tooltip>
          </div>
        </div>
      </template>
    </JeepayCard>

    <AddOrEdit ref="addOrEditRef" :callbackFunc="refCardList" />
  </page-header-wrapper>
</template>

<script lang="ts" setup> 
import { API_URL_QRC_SHELL_LIST, req } from '@/api/manage'
import AddOrEdit from './AddOrEdit.vue'
import { ref,reactive,getCurrentInstance, provide } from 'vue'
const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties

const infoCard = ref()
const addOrEditRef = ref()
const vdata = reactive ({
  jeepayCard: {
    addAuthority: $access('ENT_DEVICE_QRC_SHELL_ADD')
  }
})

// 请求支付接口定义数据
function  reqCardListFunc () {
  return req.list(API_URL_QRC_SHELL_LIST, {pageSize: -1}).then(res => res.records)
}
// 刷新card列表
function  refCardList () {
infoCard.value.refCardList()
}


provide('listPageSearchFunc', refCardList)


// 新增 or  修改
function addOrEdit (recordId) {
  addOrEditRef.value.show(recordId)
}
function del (recordId) {
  $infoBox.confirmDanger('确认删除？', '', () => {
    req.delById(API_URL_QRC_SHELL_LIST, recordId).then(res => {
      $infoBox.message.success('删除成功！')
      refCardList()
    })
  })
}
</script>

<style lang="less" scoped>
  .jeepay-card-content {
    position: relative;
    background-color: @jee-card-back;
    border-radius: 6px;
    overflow:hidden;
    background-color: whitesmoke;

    .img-div{
      display: flex;
      justify-content: center;
    }
  }
  .jeepay-card-ops {
    width: 100%;
    height: 50px;
    background-color: @jee-card-back;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid @jee-back;
  }
</style>
