<template>
  <div class="flex flex-col justify-between w-full sm:flex-row">
    <div class="w-full">
      <Search :search="search" :reset="reset">
        <template v-slot:body>
          <el-form-item label="轮播图名称">
            <el-input v-model="query.title" size="default" placeholder="请输入轮播图名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="小程序类型">
            <el-select v-model="query.miniprogram_type" clearable filterable placeholder="请选择小程序类型">
              <el-option v-for="(item, index) in miniprogramTypelist" :key="index" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </template>
      </Search>
      <div class="table-default">
        <div class="pt-5 pl-2" v-action="'operation.Banner.add'">
          <el-button type="primary" size="default" @click="openForm(null)">新增</el-button>
        </div>
        <el-table :data="tableData" class="mt-3" v-loading="loading">
          <el-table-column label="轮播图ID" prop="id"></el-table-column>
          <el-table-column label="轮播图名称" prop="title">
          </el-table-column>
          <el-table-column label="封面" prop="img_url">
            <template #default="scope">
              <el-image :src="scope.row.img_url" fit="fill" :lazy="true"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="排序" prop="sort">
          </el-table-column>
          <el-table-column label="添加时间" prop="created_at">
          </el-table-column>
          <el-table-column label="小程序类型" prop="miniprogram_type_text">
          </el-table-column>
          <el-table-column label="状态" v-action="'operation.Banner.updateStatus'">
            <template #default="scope">
              <div>
                <el-switch v-model="scope.row.status" @change="switchStatus(scope.row)" :active-value="1"
                  :inactive-value="0">
                </el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="handleEdit(scope.row)"
                v-action="'operation.Banner.edit'">编辑</el-button>
              <br />
              <el-button link type="primary" size="small" @click="handleDel(scope.row)"
                v-action="'operation.Banner.del'">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <Paginate />
      </div>
    </div>
  </div>
  <Dialog v-model="addVisible" :title="title" width="30%" destroy-on-close>
    <create @close="closeType('addVisible')" :primary="currentConfig"></create>
  </Dialog>
</template>

<script lang="ts"  setup>
import { InfoFilled } from '@element-plus/icons-vue';
import { computed, onMounted, ref } from 'vue';
import create from './form/create.vue';
import config from './form/config.vue';
import { useGetList } from '@/hook/curd/useGetList';
import {
  operationBannerEditStatus,
  operationBannerDel
} from '@/api/pageLayout/viewpagerPage/index';
import { optionsCommonParams } from '@/api/common/index'
const api = 'operation/banner/list';
const miniprogramTypelist = ref([])
const { data, query, search, reset, loading } = useGetList(api, true);
const tableData = computed(() => data.value?.data);
const addVisible = ref(false)
const currentConfig = ref({})
const title = ref('')
const configVisible = ref(false) //设置回传弹窗
const init = () => {
  optionsCommonParams().then(res => {
    console.log(res, 'optionsCommonParams');
    miniprogramTypelist.value = res.data.miniprogramType
  })
}
const closeType = (type: string) => {
  switch (type) {
    case 'configVisible':
      configVisible.value = false
      break;
    case 'addVisible':
      addVisible.value = false
      break;
  }
  search()
}

const switchStatus = (data: object) => {
  operationBannerEditStatus(data.id, { status: data.status }).then(res => {
    ElMessage.success(res.message)
    search()
  }).catch(e => {
    search()
  })
}

const handleDel = (row: object) => {
  ElMessageBox.confirm(
    `确认删除 ${row.title} 吗?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      operationBannerDel(row.id).then(res => {
        ElMessage.success(res.message)
        search()
      })
    })
    .catch(() => {
      search()
    })
}

const openForm = (data: any) => {
  title.value = '新增'
  currentConfig.value = {}
  addVisible.value = true
};
const handleEdit = (data: object) => {
  title.value = '编辑'
  currentConfig.value = data
  addVisible.value = true
};
onMounted(() => {
  search();
  init()
});
</script>
<style  lang='scss' scoped></style>
