<template>
  <div style="background: #fff">
    <a-tabs @change="selectTabs">
      <a-tab-pane key="faceAdvert" tab="">
        <div class="account-settings-info-view">
          <page-header-wrapper>
<!--            <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData = {} }"> </JeepaySearchForm>-->
            <!-- 列表渲染 -->
            <JeepayTable
              ref="infoTableFace"
              :initData="false"
              :reqTableDataFunc="reqTableDataFunc"
              :tableColumns="tableColumnsFace"
              :searchData="vdata.searchData"
              rowKey="advertId"
              @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>
                </div>
              </template>
              <template #bodyCell="{ column, record }">
                <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)">修改</a-button>
                    <a-button v-if="$access('ENT_ADVERT_DEL')" type="link" style="color: red" @click="delFunc(record.code)">删除</a-button>
                  </JeepayTableColumns>
                </template>
              </template>
            </JeepayTable>
            <InfoDetail ref="infoDetail" :callback-func="searchFunc" />
          </page-header-wrapper>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
  <!-- 新增 / 修改 页面组件  -->
  <InfoAddOrEdit ref="infoAddOrEdit" :columnsType="vdata.groupKey == 'faceAdvert' ? 0 : 1" :callbackFunc="searchFunc" />
</template>
<script setup lang="ts">
import {req, $batchDelAdvert, reqLoad, API_URL_APTITUDE, $deleteQualificationDefine} from '@/api/manage'
import InfoAddOrEdit from './AddOrEdit.vue'
import { ref, reactive, getCurrentInstance, nextTick, onMounted } from 'vue'

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

  const tableColumnsFace = reactive([
    { title: 'code', dataIndex: 'code' },
    { title: '标题', key: 'name', dataIndex: 'name' },
    { key: 'op',title: '操作', fixed: 'right', align: 'center'}
  ])

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

  const infoTableFace = ref()
  const infoTableAfter = ref()
  const infoTableAppMch = ref()
  const infoTableAppAgent = ref()
  const infoTableMch = ref()
  const infoTableAgent = ref()

  const infoAddOrEdit  = ref()

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

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

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

  function addFunc () { // 业务通用【新增】 函数
    infoAddOrEdit.value.show(vdata.groupKey, null, vdata.searchData)
  }

  function delFunc (recordId) { // 业务通用【删除】 函数
    $infoBox.confirmDanger('确认删除？', '', () => {
      $deleteQualificationDefine(recordId).then((res: any) => {
        $infoBox.message.success('删除成功！')

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

  function selectTabs (key) { // 清空必填提示
    if (key) {
      vdata.selectRecordIdList = []
      vdata.groupKey = key
      nextTick(() => {
        vdata.searchData = {}
        if(vdata.groupKey == 'appMchAdvert' || vdata.groupKey == 'appAgentAdvert') {
          vdata.paramsAndRateTabVal = 'home'
          vdata.searchData.appPlace = 2
        }
        searchFunc()
      })
    }
  }


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

.tab-selected {
  background-color: var(--ant-primary-color);
  color: #fff;
}

.tab-content {

  // margin-top: 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
  margin-right: 20px;
  margin-bottom: 10px;
  overflow: hidden;

  border: 1px solid #d9d9d9;
  font-size: 14px;
  color: #808080;
  .tab-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    height: 32px;
    cursor: pointer;
  }
}

.but-wrapper{
  display: flex;
  align-items: center;
}

</style>