<!-- banner管理 -->
<template>
  <div class="detail_container">
    <bg-breadcrumb></bg-breadcrumb>
    <div class="main_container">
      <bg-filter-group :showSearch="false">
        <template v-slot:left_action>
          <div class="apaas_button">
            <el-button class="register_btn" type="primary" @click="addBanner">
              <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
              新增
            </el-button>
          </div>
        </template>
      </bg-filter-group>
      <div class="table_container">
        <div class="table bg-scroll">
          <bg-table ref="Bgtable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
            <template v-slot:updated_time="{ row }">
              {{ row.updated_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
            </template>
            <template v-slot:state="{ row }">
              <bg-switch
                @click="changeUseRow(row)"
                :labels="['否', '是']"
                :values="[0, 1]"
                v-model="row.state"></bg-switch>
            </template>
            <template v-slot:action="{ row }">
              <bg-table-btns2 :limit="3">
                <bg-table-btn @click="edit_row(row)" :disabled="row.state == 1">编辑</bg-table-btn>
                <bg-table-btn @click="delete_row(row)" :disabled="row.state == 1">删除</bg-table-btn>
                <bg-table-btn @click="moveRow(row, 1)" :disabled="!row.canMoveUp">上移</bg-table-btn>
                <bg-table-btn @click="moveRow(row, 2)" :disabled="!row.canMoveDown">下移</bg-table-btn>
              </bg-table-btns2>
            </template>
          </bg-table>
        </div>
      </div>
    </div>
    <!-- 删除弹窗 -->
    <el-dialog
      class="dialog_box"
      title="提示"
      v-model="dialogDelete"
      width="400px"
      :before-close="
        () => {
          dialogDelete = false;
        }
      ">
      <div>确定要删除吗？</div>
      <template v-slot:footer>
        <div class="apaas_button">
          <el-button type="default" @click="dialogDelete = false">取 消</el-button>
          <el-button type="primary" @click="deleteData">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, onBeforeMount, nextTick } from "vue";
import axios from "../../../../request/http.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
const router = useRouter();
const Bgtable = ref(null);
const state = reactive({
  headers: [
    {
      label: "banner名称",
      prop: "banner_name",
    },
    {
      label: "链接地址",
      prop: "link_address",
    },
    {
      label: "创建人",
      prop: "created_by",
    },
    {
      label: "更新时间",
      prop: "updated_time",
    },
    {
      label: "是否启用",
      prop: "state",
    },
    {
      label: "操作",
      prop: "action",
      width: 176,
      fixed: "right",
    },
  ],
  tableRows: [],
  dialogDelete: false,
  actionRow: null,
});

const getRoleRows = () => {
  axios.get(`/apaas/system/v5/banner/list`).then((res) => {
    if (res.data.code == 200) {
      state.tableRows = res.data.data || [];
      if (state.tableRows.length > 0) {
        state.tableRows.forEach((e) => {
          e.canMoveUp = true;
          e.canMoveDown = true;
        });
        state.tableRows[0].canMoveUp = false;
        state.tableRows[state.tableRows.length - 1].canMoveDown = false;
      }
    } else {
      ElMessage.error(res.data.data);
    }
  });
}; // 获取列表

const addBanner = () => {
  router.push("/home-config/banner/add");
};

const edit_row = (row) => {
  router.push({
    path: "/home-config/banner/edit",
    query: {
      id: row.id,
    },
  });
};

const delete_row = (row) => {
  state.actionRow = row;
  state.dialogDelete = true;
};

const deleteData = () => {
  axios.delete(`/apaas/system/v5/banner/${state.actionRow.id}`).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg);
      state.dialogDelete = false;
      getRoleRows();
    } else {
      ElMessage.error(res.data.data);
    }
  });
};

const moveRow = (row, type) => {
  let index;
  state.tableRows.forEach((e, i) => {
    if (e.id == row.id) {
      index = i;
    }
  });
  let nextRow;
  if (type == 1) {
    // 上移
    nextRow = state.tableRows[index - 1];
  } else {
    // 下移
    nextRow = state.tableRows[index + 1];
  }
  let params = [
    {
      id: row.id,
      sort: nextRow.sort,
    },
    {
      id: nextRow.id,
      sort: row.sort,
    },
  ];
  axios
    .post(`/apaas/system/v5/banner/sort`, [...params])
    .then((res) => {
      if (res.data.code == 200) {
        ElMessage.success(res.data.msg);
        getRoleRows();
      } else {
        ElMessage.error(res.data.data);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

const changeUseRow = (row) => {
  let params = {
    id: row.id,
    state: row.state,
  };
  axios.post(`/apaas/system/v5/banner/status`, params).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg);
      getRoleRows();
    } else {
      ElMessage.error(res.data.data);
      row.state = row.state == 0 ? 1 : 0;
    }
  });
};

onBeforeMount(() => {
  getRoleRows();
});

const { filter, headers, tableRows, tableTotal, dialogDelete } = toRefs(state);
</script>

<style lang="scss" scoped>
.detail_container {
  width: 100%;
  padding: 0 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  .main_container {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background-color: #fff;
    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
    border-radius: 6px;
    margin: 0 0 16px;
    position: relative;
    height: calc(100% - 62px);
    .table_container {
      height: calc(100% - 70px);
      padding: 0 16px;
      .table {
        max-height: calc(100% - 64px);
      }
    }
  }
}
</style>
