<!-- 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: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-btns :operations="getOperations(row)" />
            </template>
          </bg-table>
        </div>
      </div>
    </div>
    <!-- 删除弹窗 -->
    <el-dialog
      custom-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: "能力类型",
      prop: "ability_type",
    },
    {
      label: "创建人",
      prop: "created_user",
    },
    {
      label: "更新时间",
      prop: "update_time",
    },
    {
      label: "是否启用",
      prop: "state",
    },
    {
      label: "操作",
      prop: "action",
      width: 176,
      fixed: "right",
    },
  ],
  tableRows: [],
  dialogDelete: false,
  actionRow: null,
})

const getRoleRows = () => {
  state.tableRows = [
    {
      id: 1,
      ability_type: "数据服务",
      created_user: "admin",
      update_time: "2022-11-29 14:30:34",
      state: 1,
      sort: 1,
    },
    {
      id: 2,
      ability_type: "视频服务",
      created_user: "admin",
      update_time: "2022-11-29 14:30:34",
      state: 0,
      sort: 2,
    },
    {
      id: 3,
      ability_type: "综合服务",
      created_user: "admin",
      update_time: "2022-11-29 14:30:34",
      state: 1,
      sort: 3,
    },
    {
      id: 4,
      ability_type: "融合服务",
      created_user: "admin",
      update_time: "2022-11-29 14:30:34",
      state: 0,
      sort: 4,
    },
    {
      id: 5,
      ability_type: "时空服务",
      created_user: "admin",
      update_time: "2022-11-29 14:30:34",
      state: 1,
      sort: 5,
    },
  ]
  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
  }
  // axios
  //   .get(`/apaas/service/v5/ability/query/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 getOperations = (row) => {
  return [
    {
      name: "编辑",
      callback: () => edit_row(row),
      disabled: row.state == 1,
    },
    {
      name: "删除",
      callback: () => delete_row(row),
      disabled: row.state == 1,
    },
    {
      name: "上移",
      callback: () => moveRow(row,1),
      disabled: !row.canMoveUp,
    },
    {
      name: "下移",
      callback: () => moveRow(row,2),
      disabled: !row.canMoveDown,
    },
  ];
} // 表格操作按钮

const addBanner = () => {
  console.log("新增banner")
}

const edit_row = (row) => {
  console.log("去编辑")
}

const delete_row = (row) => {
  state.actionRow = row
  state.dialogDelete = true
  console.log("删除")
}

const deleteData = () => {
  console.log("确定删除",state.actionRow)
  state.dialogDelete = false
}

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
    }
  ]
  console.log(params)
  // axios
  //   .put(``,[...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) => {
  console.log(row)
}

onBeforeMount(() => {
  getRoleRows()
})
    
const {
  headers,
  tableRows,
  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>