<template>
  <PageWrapper
    title="花式拖拽演示"
    content="常用于卡片，事项，预约，流程，计划等，每个卡片，都可以上下拖拽顺序，另外不同卡片，也可以拖拽过去，拖拽过来，都不在话下呢，快试试O(∩_∩)O哈哈~"
  >
    <el-row :gutter="20" class="mt-3 proCard">
      <el-col :span="6">
        <el-card title="需求池" size="small" shadow="never">
          <template #header>
            <div class="card-header">
              <span>需求池</span>
              <el-tag>月</el-tag>
            </div>
          </template>
          <Draggable
            class="draggable-ul"
            animation="300"
            :list="demandList"
            group="people"
            itemKey="name"
          >
            <template #item="{ element }">
              <div class="cursor-move draggable-li">
                <el-tag>需求</el-tag><span class="ml-2">{{ element.name }}</span>
              </div>
            </template>
          </Draggable>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card size="small" shadow="never">
          <template #header>
            <div class="card-header">
              <span>开发中</span>
              <el-tag type="warning">月</el-tag>
            </div>
          </template>
          <Draggable
            class="draggable-ul"
            animation="300"
            :list="exploitList"
            group="people"
            itemKey="name"
          >
            <template #item="{ element }">
              <div class="cursor-move draggable-li">
                <el-tag type="warning">开发中</el-tag><span class="ml-2">{{ element.name }}</span>
              </div>
            </template>
          </Draggable>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card size="small" shadow="never">
          <template #header>
            <div class="card-header">
              <span>已完成</span>
              <el-tag type="warning">月</el-tag>
            </div>
          </template>
          <Draggable
            class="draggable-ul"
            animation="300"
            :list="completeList"
            group="people"
            itemKey="name"
          >
            <template #item="{ element }">
              <div class="cursor-move draggable-li">
                <el-tag type="error">已完成</el-tag><span class="ml-2">{{ element.name }}</span>
              </div>
            </template>
          </Draggable>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card size="small" shadow="never">
          <template #header>
            <div class="card-header">
              <span>已验收</span>
              <el-tag type="success">月</el-tag>
            </div>
          </template>
          <Draggable
            class="draggable-ul"
            animation="300"
            :list="approvedList"
            group="people"
            itemKey="name"
          >
            <template #item="{ element }">
              <div class="cursor-move draggable-li">
                <el-tag type="success">已验收</el-tag><span class="ml-2">{{ element.name }}</span>
              </div>
            </template>
          </Draggable>
        </el-card>
      </el-col>
    </el-row>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import Draggable from 'vuedraggable';

  const demandList = reactive([
    { name: '预约表单页面，能填写预约相关信息', id: 1 },
    { name: '促销活动页面，包含促销广告展示', id: 2 },
    { name: '商品列表，需要一个到货提醒功能', id: 3 },
    { name: '商品需要一个评价功能', id: 4 },
    { name: '商品图片需要提供放大镜', id: 5 },
    { name: '订单需要提供删除到回收站', id: 6 },
    { name: '用户头像上传，需要支持裁剪', id: 7 },
    { name: '据说Vue3.2发布了，setup啥时候支持？', id: 8 },
  ]);

  const exploitList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);

  const completeList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);

  const approvedList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);
</script>

<style lang="scss" scoped>
  .draggable-ul {
    width: 100%;
    overflow: hidden;
    margin-top: -16px;

    .draggable-li {
      width: 100%;
      padding: 16px 10px;
      border-bottom: 1px solid var(--n-border-color);
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
