<template>
  <div style="background: #fff">
    <a-tabs @change="selectTabs">
      <a-tab-pane key="faceAdvert" tab="刷脸设备广告">
        <div class="account-settings-info-view">
          <page-header-wrapper>
            <a-card>
              <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData = {} }">
                <jeepay-text-up v-model:value="vdata.searchData['advertId']" :placeholder="'ID'" />
                <jeepay-text-up v-model:value="vdata.searchData['title']" :placeholder="'标题'" />
                <jeepay-text-up v-model:value="vdata.searchData['mchNo']" :placeholder="'用户号'" />
                <a-form-item label="" class="table-search-item">
                  <a-select v-model:value="vdata.searchData['releaseState']" placeholder="发布状态">
                    <a-select-option value="">
                      全部
                    </a-select-option>
                    <a-select-option value="0">
                      待发布
                    </a-select-option>
                    <a-select-option value="1">
                      已发布
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </JeepaySearchForm>
              <!-- 列表渲染 -->
              <JeepayTable
                ref="infoTableFace"
                :initData="false"
                :reqTableDataFunc="reqTableDataFunc"
                :tableColumns="tableColumnsFace"
                :searchData="vdata.searchData"
                rowKey="advertId"
                :rowSelection="{ type: 'checkbox', onChange: infoTableSelectChangeFunc }"
                @btnLoadClose="vdata.btnLoading=false"
              >
                <template #topBtnSlot>
                  <div>
                    <a-button v-if="$access('ENT_ADVERT_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新建</a-button>
                    <a-button v-if="$access('ENT_ADVERT_DEL')" type="danger" @click="deleteBatchFunc"><delete-outlined />批量删除</a-button>
                  </div>
                </template>
                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'advertType'">
                    {{ record.advertType === 1?'刷脸设备广告':record.advertType === 2?'支付后广告':record.advertType === 3?$SYS_NAME_MAP.MCH_APP+'APP':$SYS_NAME_MAP.AGENT_APP+'APP' }}
                  </template>
                  <template v-if="column.key === 'releaseState'">
                    <JeepayTableColState :showSwitchType="true" :badgeTextArray="['已发布','待发布','未知']" :state="record.releaseState" :on-change="(releaseState) => { return updateState(record.advertId, releaseState)}" />
                  </template>
                  <template v-if="column.key === 'imgUrl'">
                    <a-image
                      :width="60"
                      :src="record.imgUrl"
                    />
                  </template>
                  <template v-if="column.key === 'mchNo'">
                    <div v-if="record.mchNo">
                      用户号: {{ record.mchNo }} <br> 商户名：{{ record.infoName }}
                    </div>
                    <div v-else>全部商户</div>
                  </template>
                  <template v-if="column.key === 'op'">
                    <!-- 操作列插槽 -->
                    <JeepayTableColumns>
                      <a-button v-if="$access('ENT_ADVERT_EDIT')" type="link" style="padding-right: 10px;padding-left: 10px;" @click="editFunc(record.advertId)">修改</a-button>
                      <a-button v-if="$access('ENT_ADVERT_DEL')" type="link" style="color: red" @click="delFunc(record.advertId)">删除</a-button>
                    </JeepayTableColumns>
                  </template>
                </template>
              </JeepayTable>
            </a-card>
          </page-header-wrapper>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
  <!-- 新增 / 修改 页面组件  -->
  <InfoAddOrEdit ref="infoAddOrEdit" :callbackFunc="searchFunc" />
</template>
<script setup lang="ts">
import { API_URL_ADVERT, req, $batchDelAdvert, reqLoad} from '@/api/manage'
import InfoAddOrEdit from './AddOrEdit.vue'
import { ref, reactive, getCurrentInstance, nextTick, onMounted } from 'vue'

const { $infoBox, $access, $SYS_NAME_MAP } = getCurrentInstance()!.appContext.config.globalProperties

  const tableColumnsFace = reactive([
    { title: 'ID', dataIndex: 'advertId' },
    { title: '标题', key: 'title', dataIndex: 'title' },
    { title: '预览图', key: 'imgUrl', dataIndex: 'imgUrl' },
    // { title: '广告类型', key: 'advertType', dataIndex: 'advertType' },
    { title: '用户号', key: 'mchNo', dataIndex: 'mchNo' },
    { title: '发布状态', key: 'releaseState', dataIndex: 'releaseState' },
    { title: '创建时间', dataIndex: 'createdAt'},
    { key: 'op',title: '操作', fixed: 'right', align: 'center'}
  ])

  const vdata : any = reactive ({
    btnLoading: false,
    tableColumnsFace: tableColumnsFace,
    searchData: {},
    allotDeviceIdList: [], // 要划拨的设备ID，划拨类型为 select-勾选划拨 时必填
    groupKey: 'faceAdvert',
  })

  const infoTableFace = ref()

  const infoAddOrEdit  = ref()

  // 请求table接口数据
  function reqTableDataFunc (params)  {
    return req.list(API_URL_ADVERT, vdata.searchData)
  }

  onMounted(()=>{
    searchFunc()
  })

  function searchFunc() { // 点击【查询】按钮点击事件
    vdata.btnLoading = true // 打开查询按钮的loading

    vdata.searchData.advertType = '1'
    infoTableFace.value.refTable(true)
  }

  function addFunc () { // 业务通用【新增】 函数
    infoAddOrEdit.value.show(vdata.groupKey)
  }
  function delFunc (recordId) { // 业务通用【删除】 函数
    $infoBox.confirmDanger('确认删除？', '', () => {
      $batchDelAdvert(recordId).then((res: any) => {
        $infoBox.message.success('删除成功！')

        infoTableFace.value.refTable(false)
      }).catch(err => {})
    })
  }
  function editFunc (recordId) { // 业务通用【修改】 函数
    infoAddOrEdit.value.show(vdata.groupKey, recordId)
  }

  function selectTabs (key) { // 清空必填提示
    if (key) {
      vdata.groupKey = key
      nextTick(() => {
        searchFunc()
      })
    }
  }

  // 表格多选
  function infoTableSelectChangeFunc(selectedRowKeys, selectedRows) {
    vdata.selectRecordIdList = selectedRowKeys
  }

  function deleteBatchFunc() {  // 批量删除
    if (!vdata.selectRecordIdList || vdata.selectRecordIdList.length < 1) {
      $infoBox.message.error('请选择广告配置')
    } else {
      $infoBox.confirmDanger('确认删除？', '', () => {
        $batchDelAdvert(vdata.selectRecordIdList.join(',')).then((res: any) => {
          searchFunc()
          $infoBox.message.success('删除成功')
        })
      })
    }
  }

  function updateState (recordId, state) { // 【更新状态】
      return new Promise<void>((resolve, reject) => {
        return reqLoad.updateById(API_URL_ADVERT, recordId, { state: state }).then(res => {
          searchFunc()
          resolve()
        }).catch(err => reject(err))
      })
    }

</script>
<style lang="less" scoped>
.flex {
  display:flex;
  margin-bottom: 8px;
  i {
    margin-left: 5px;
  }
}
  .bottom-btn{
    /deep/ div{
      display: flex;
      justify-content: center;
    }
  }
</style>