<template>
  <div class="index-container height-100">
    <fl-table :config="state.tableConfig"
              :refreshCount="state.tableConfig.refreshCount"
              @triggerRowActions="handleRowActions"
              @triggerTableBatchActions="handleTableBatchActions">
    </fl-table>
  </div>

  <a-modal v-if="state.modalVisible"
           v-model:visible="state.modalVisible"
           :title="state.dialogData.ID?'编辑广告':'新增广告'"
           width="800px"
             centered
             destroyOnClose
             :maskClosable="false"
           >
    <div class="row">

      <div class="col-3 fl-my-sm">标题</div>
      <div class="col-9 fl-my-sm">
        <fl-form-item type="text"
                      field="title"
                      :val="state.dialogData.title"
                      :disable="state.pageDisable"
                      @triggerValChange="handleValChange" />

      </div>
      <div class="col-3 fl-my-sm">广告图片</div>
      <div class="col-9 fl-my-sm">
        <fl-form-item :pageType="state.pageType"
                      type="upload"
                      field="imageUrl"
                      height="200px"
                      :val="state.dialogData.imageUrl"
                      :otherParams="{
                source: 'dialogData',
                mask: '',
                type: 'image',
              }"
                      @triggerValChange="handleValChange" />
      </div>

      <div class="col-3 fl-my-sm">链接</div>
      <div class="col-9 fl-my-sm">
        <fl-form-item type="text"
                      field="link"
                      :val="state.dialogData.link"
                      :disable="state.pageDisable"
                      @triggerValChange="handleValChange" />

        <div class="col-3 fl-my-sm">排序</div>
        <div class="col-9 fl-my-sm">
          <fl-form-item type="number"
                        field="sequence"
                        :val="state.dialogData.sequence"
                        :disable="state.pageDisable"
                        @triggerValChange="handleValChange" />

        </div>
      </div>
    </div>
    <template #footer>
      <div>
        <a-button @click="handleCloseModal"
                  class="cancel-btn">取消</a-button>
        <a-button @click="handleDialogConfirm"
                  :disabled="state.pageDisable"
                  :loading="state.btnLoading"
                  type="primary">提交</a-button>
      </div>
    </template>
  </a-modal>
</template>
<script setup>
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  watch,
  nextTick,
} from "vue";
import flFormItem from "@/components/layout/form/formItem.vue";
import flTable from "@/components/layout/table/commonTable.vue";
import { processError, processSuccess } from "@/utils/helper/message";
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;
const state = reactive({
  tableConfig: {
    refreshCount: 0,
    listUrl: {
      url: "api/inCircleArticle/Swiper/query",
      params: [
      ],
    },
    searchConfig: [
      {
        type: "text",
        label: "标题",
        field: "title",
      },
    ],
    columns: [
      {
        width: 120,
        label: "标题",
        field: "title",
      },
      {
        type: 'image',
        width: 100,
        label: "广告图片",
        field: "imageUrl",
      },
      {
        label: "链接",
        field: "link",
      },
      {
        label: "排序",
        field: "sequence",
      },
      {
        label: "操作",
        actions: [
          {
            actionType: "linkView",
            label: "详情",
            type: "370D9B",
            class: "fl-ma-xs",
            shape: "round",
          },
          {
            tooltip: true,
            type: "delete",
            label: "删除",
            shape: "round",
            class: "fl-ma-xs",
            actionUrl: {
              url: "api/inCircleArticle/Swiper/delete",
              params: [{ label: "id", field: "ID" }],
            },
          },
        ],
      },
    ],
    slotRightClass: "col-12 row",
    tableBatchActionsClass: "col-12 row justify-end",
    tableBatchActions: [
      {
        notLimitSelect: true,
        actionType: "createData",
        type: "primary",
        label: "创建",
      },
    ],
  },
  modalVisible: false,
  btnLoading: false,
  dialogData: {
    imageUrl: null,
    title: null,
    link: '',
    sequence: 0,
  },
});
onBeforeMount(() => { });
onMounted(() => { });


const handleRowActions = (btnConfig, rowData) => {
  if (btnConfig.actionType === "linkView") {
    state.dialogData = JSON.parse(JSON.stringify(rowData));
    state.modalVisible = true;
  }
};
const handleTableBatchActions = (selectedRows, config, rowData) => {
  if (config.actionType === "createData") {
    state.dialogData = {
      imageUrl: null,
      title: null,
      link: '',
      sequence: 0,
    }
    state.modalVisible = true;
  }
};

const handleCloseModal = () => {
  state.modalVisible = false;
};

const handleDialogConfirm = () => {
  let url = state.dialogData.ID
    ? "api/inCircleArticle/Swiper/update"
    : "api/inCircleArticle/Swiper/create";
  let params = JSON.parse(JSON.stringify(state.dialogData));
  state.btnLoading = true;
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      if (res.status === 0) {
        state.modalVisible = false;
        state.tableConfig.refreshCount++;
      } else {
        processError(res.msg);
      }
      state.btnLoading = false;
    },
    (err) => {
      state.btnLoading = false;
      processError(err.response.data.msg);
    }
  );
};
const handleValChange = (val, field) => {
  state.dialogData[field] = val;
};
</script>
<style scoped></style>
