<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-select v-model="query.type" clearable filterable placeholder="请选择列表名称">
              <el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.value" />
            </el-select>
          </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>
      <el-card shadow="always" class="mt-3" :body-style="{ padding: '20px' }">
        <div class="m-3">
          <el-alert title="启用状态后，最新开启的记录排序在上面" type="warning" :closable="false" />
        </div>
        <div class="table-default">
          <div class="pt-5 pl-2" v-action="'operation.FirstPage.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="type_str">
            </el-table-column>
            <el-table-column label="添加时间" prop="created_at">
            </el-table-column>
            <el-table-column label="小程序类型" prop="miniprogram_type_str">
            </el-table-column>
            <el-table-column label="状态" v-action="'operation.FirstPage.enableStatus'">
              <template #default="scope">
                <div>
                  <el-switch v-model="scope.row.status" :disabled="Boolean(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="handleConfigure(scope.row)"
                  v-action="'operation.FirstPage.setConfig'">配置</el-button>
                <br />
                <el-button link type="primary" size="small" @click="handleDel(scope.row)" v-if="!scope.row.status"
                  v-action="'operation.FirstPage.delete'">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <Paginate />
        </div>
      </el-card>
    </div>
  </div>
  <Dialog v-model="configVisible" title="配置" width="50%" destroy-on-close>
    <config @close="closeType('configVisible')" :primary="currentConfig"></config>
  </Dialog>

  <Dialog v-model="addVisible" title="新增" width="30%" destroy-on-close>
    <create @close="closeType('addVisible')"></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 { operationManageFirstPageEnableStatus, operationManageFirstPageDelete } from '@/api/pageLayout/homePage/index'
import { optionsCommonParams } from '@/api/common/index'

const api = 'operationManage/firstPage/list';
const typeList = ref([{ name: '本周精选', value: 1 }, { name: '优选好剧', value: 2 }])
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 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 handleDel = (row: object) => {
  ElMessageBox.confirm(
    `确认删除此列表吗?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      operationManageFirstPageDelete({ id: row.id }).then(res => {
        ElMessage.success(res.message)
        search()
      })
    })
    .catch(() => {
      search()
    })
}

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


const openForm = (data: any) => {
  addVisible.value = true
};
const handleConfigure = (data: object) => {
  currentConfig.value = data
  configVisible.value = true
};
onMounted(() => {
  search();
  init()
});
</script>
<style  lang='scss' scoped></style>
