<template>
  <el-dialog title="合同段排序" :visible.sync="visible" width="600px" append-to-body @close="handleClose"
    class="project-dialog">
    <span slot="title">
      <i class="el-icon-sort" style="color: #2550A2;margin-right: 5px;"></i>{{ title }}
    </span>
    <div class="sort-container">
      <!-- 提示信息 -->
      <div class="tip-box">
        <i class="el-icon-info"></i>
        拖动项目可调整顺序，或者使用箭头按钮、输入序号进行排序

      </div>

      <!-- 排序列表 -->
      <draggable v-model="sortList" class="sort-list" handle=".drag-handle" @end="handleDragEnd">
        <div v-for="(item, index) in sortList" :key="item.id" class="sort-item">
          <i class="el-icon-rank drag-handle"></i>
          <div class="item-content">
            <span>{{ item.name }}</span>

            <div class="item-actions">
              <div class="move-btns">
                <el-button type="text" icon="el-icon-arrow-up" :disabled="index === 0"
                  @click="moveItem(index, -1)"></el-button>
                <el-button type="text" icon="el-icon-arrow-down" :disabled="index === sortList.length - 1"
                  @click="moveItem(index, 1)"></el-button>
              </div>
              <span>移至</span>
              <el-input-number :controls="false" v-model="item.sortNum" :min="1" :max="sortList.length" size="mini"
                style="width: 60px;" @change="handleNumberChange($event, index)"></el-input-number>
              <span>位</span>

            </div>
          </div>
        </div>
      </draggable>
    </div>

    <div slot="footer" style="text-align: center">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm"
        style="  background-color: #2550A2;border-color: #2550A2 ;color: white;">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'ContractSort',
  components: {
    draggable
  },
  props: {
    // 添加 props
    title: {
      type: String,
      default: '排序'
    },
    sortProLoad: { // 接收父组件传递的 sortProLoad 状态
      type: Boolean,
      default: false,
    },

  },
  data() {
    return {
      sortList: [],
      visible: false
    }
  },

  methods: {
    // 添加显示方法
    // 修改显示方法
    show(contractList) {
      if (!contractList || !Array.isArray(contractList)) {
        console.warn('contractList must be an array');
        return;
      }
      // 初始化排序列表
      this.sortList = contractList.map((item, index) => ({
        ...item,
        sortNum: index + 1
      }));
      this.visible = true;
    },    // 添加隐藏方法
    hide() {
      this.visible = false;
    },
    initSortList() {
      this.sortList = this.contractList.map((item, index) => ({
        ...item,
        sortNum: index + 1
      }));
    },
    handleDragEnd() {
      // 重新计算序号
      this.sortList.forEach((item, index) => {
        item.sortNum = index + 1;
      });
    },
    moveItem(index, direction) {
      const newIndex = index + direction;
      const item = this.sortList.splice(index, 1)[0];
      this.sortList.splice(newIndex, 0, item);
      this.handleDragEnd();
    },
    handleNumberChange(value, index) {
      const targetIndex = value - 1;
      if (targetIndex === index) return;

      const item = this.sortList.splice(index, 1)[0];
      this.sortList.splice(targetIndex, 0, item);
      this.handleDragEnd();
    },
    handleClose() {
      this.visible = false;
    },
    handleConfirm() {
      this.$emit('confirm', this.sortList);
      this.visible = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.sort-container {
  padding: 10px;

  .tip-box {
    background: #EFF6FF;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    color: #3271FF;
    font-size: 13px;

    .el-icon-info {
      margin-right: 5px;
      color: #3271FF;
    }
  }

  .sort-list {
    max-height: 500px;
    overflow-y: auto;

    .sort-item {
      display: flex;
      align-items: center;
      padding: 10px;
      border: 1px solid #EBEEF5;
      margin-bottom: 10px;
      border-radius: 4px;

      &:hover {
        background: #f5f7fa;
      }

      .drag-handle {
        cursor: move;
        color: #909399;
        margin-right: 10px;
        font-size: 18px;
      }

      .item-content {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .item-actions {
        display: flex;
        align-items: center;
        gap: 10px;

        .move-btns {
          display: flex;

        }
      }
    }
  }
}
</style>