<template>
  <div class="main">
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"
          >電商管理中心</el-breadcrumb-item
        >
        <el-breadcrumb-item><a href="/">物流方式</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <hr />
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="shipping_code" label="物流代碼" width="180" />
        <el-table-column prop="shipping_name" label="物流方式" width="180" />
        <el-table-column prop="shipping_desc" label="物流描述" width="180" />
        <el-table-column prop="shipping_fee" label="手續費" />
        <el-table-column label="排序" width="80">
          <template #default="scope">
            <i
              class="action-icon icon-arrow-drop-up"
              @click="handleSortChange(0, scope.$index, scope.row)"
              v-if="scope.$index !== 0"
            />
            <i
              class="action-icon icon-arrow-drop-down"
              @click="handleSortChange(1, scope.$index, scope.row)"
              v-if="scope.$index < total - 1"
            />
          </template>
        </el-table-column>
        <el-table-column label="狀態" width="80">
          <template #default="scope">
            <el-switch
              v-model="scope.row.enabled"
              :active-value="1"
              :inactive-value="0"
              @change="handleSwitch($event, scope.row.shipping_id, scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >編輯</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
  <edit-form
    :editid="editId"
    :visible="showEditForm"
    @close="onEditClose"
    @update="onFormUpdate"
  />
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getList, updateEnabled, updateOrder } from "@/api/shipping";

import EditForm from "./components/EditForm.vue";

const total = ref(0);
const tableData = ref([]);

onMounted(() => {
  genList();
});

const genList = async () => {
  let res = await getList();

  if (res.code === 200) {
    total.value = res.data.total;
    tableData.value = res.data.data;
  }
};
//列表操作
//是否有效
const handleSwitch = async (event, id) => {
  let res = await updateEnabled({ shipping_id: id, enabled: event });
  let enabled;
  if (res.code !== 200) {
    ElMessage.error("更新失敗,請重新操作");
    enabled = !event;
  } else {
    enabled = event;
  }
  enabled = enabled ? 1 : 0;
  tableData.value = tableData.value.map((item) => {
    if (item.shipping_id === id) {
      item.enabled = enabled;
    }
    return item;
  });
};

//交換排序
const handleSortChange = async (type, index, row) => {
  //找出tableData中的shipping_order值大於row.shipping_sort的第一個值
  let target;
  if (type === 0) {
    target = tableData.value[index - 1];
  } else {
    target = tableData.value[index + 1];
  }

  //交換shipping_order值
  let temp = row.shipping_order;
  row.shipping_order = target.shipping_order;
  target.shipping_order = temp;

  //更新至後端
  let params = [
    { shipping_id: row.shipping_id, shipping_order: row.shipping_order },
    { shipping_id: target.shipping_id, shipping_order: target.shipping_order },
  ];

  let res = await updateOrder(params);

  if (res.code !== 200) {
    return;
  }

  //重新排序
  tableData.value = tableData.value.sort((a, b) => {
    return a.shipping_order - b.shipping_order;
  });
};

//編輯
const showEditForm = ref(false);
const editId = ref(null);

const handleEdit = (index, row) => {
  showEditForm.value = true;
  editId.value = row.shipping_id;
};

const onEditClose = () => {
  showEditForm.value = false;
  editId.value = null;
};

const onFormUpdate = () => {
  genList();
};
</script>

<style lang="less" scoped>
.main {
  background-color: #ffffff;
  .breadcrumb {
    margin: 0 0 10px;
    padding: 10px 10px;
    line-height: 1.2;
    font-weight: 500;

    :deep(.el-breadcrumb) {
      font-size: 16px;
      color: #606266;
      .el-breadcrumb__inner {
        display: inline-block;
        vertical-align: middle;
        .el-breadcrumb__separator {
          color: #c0c4cc;
        }
      }
    }
  }
}

.action-icon {
  font-size: 24px;
}
</style>
