<template>
  <div id="app" class="container mx-auto px-4 py-8">
    <div class="text-center mb-8">
      <h1 class="text-3xl font-bold text-gray-800">物流系统 v5.0</h1>
      <p class="text-gray-600">任务配置创建工具</p>
      
      <!-- 新增：项目信息和下载区域 -->
      <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mt-4 max-w-2xl mx-auto">
        <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
          <div class="text-left w-30">
            <h3 class="font-semibold text-blue-800 mb-1">项目信息</h3>
            <a href="http://git.liulikeji.cn/xingluo/CCTweaked-utils/src/branch/main/Logistics/V5" 
               target="_blank" 
               class="text-blue-600 hover:text-blue-800 underline text-sm">
              📁项目仓库
            </a>
          </div>
          
          <div class="flex items-center gap-2">
            <code class="bg-gray-800 text-green-200 px-3 py-1 rounded text-sm">wget http://git.liulikeji.cn/xingluo/CCTweaked-utils/raw/branch/main/Logistics/V5/startup.lua</code>
            <button @click="copyDownloadCommand" class="btn btn-sm btn-primary">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
              </svg>
              复制
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
      <div class="flex flex-col md:flex-row gap-6">
        <!-- 左侧配置区域 -->
        <div class="w-full md:w-2/3">
          <div class="mb-6">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">创建新任务</h2>
            
            <!-- 传输类型选择 -->
            <div class="mb-6">
              <label class="block text-gray-700 font-medium mb-2">传输类型</label>
              <div class="flex gap-4">
                <label class="flex items-center">
                  <input type="radio" v-model="task.type" value="item" class="radio radio-primary mr-2">
                  <span>物品传输</span>
                </label>
                <label class="flex items-center">
                  <input type="radio" v-model="task.type" value="fluid" class="radio radio-primary mr-2">
                  <span>流体传输</span>
                </label>
              </div>
            </div>
            
            <!-- 输入容器配置 -->
            <div class="container-box">
              <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-800">输入容器</h3>
                <button @click="addInputContainer" class="btn btn-sm btn-primary">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                  </svg>
                  添加容器
                </button>
              </div>
              
              <div v-for="(input, index) in task.input" :key="'input-'+index" class="mb-6 p-4 bg-gray-50 rounded-lg">
                <div class="flex justify-between items-center mb-3">
                  <h4 class="font-medium text-gray-700">容器 #{{ index + 1 }}</h4>
                  <button @click="removeInputContainer(index)" class="btn btn-xs btn-error">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </button>
                </div>
                
                <div class="mb-4">
                  <label class="block text-gray-700 mb-1">容器名称</label>
                  <input v-model="input.containerName" type="text" placeholder="例如: chest_left" class="input input-bordered w-full">
                </div>
                
                <div class="mb-4">
                  <label class="flex items-center">
                    <input type="checkbox" v-model="input.cache" class="checkbox checkbox-primary mr-2">
                    <span>启用缓存模式</span>
                  </label>
                </div>
                
                <div class="mb-4">
                  <label class="block text-gray-700 mb-2">过滤规则</label>
                  
                  <div class="tabs mb-3">
                    <a class="tab tab-bordered" :class="{'tab-active': input.filterType === 'whitelist'}" @click="input.filterType = 'whitelist'">白名单</a> 
                    <a class="tab tab-bordered" :class="{'tab-active': input.filterType === 'blacklist'}" @click="input.filterType = 'blacklist'">黑名单</a>
                  </div>
                  
                  <div v-if="input.filterType === 'whitelist'">
                    <div class="mb-2">
                      <div class="item-entry" v-for="(item, itemIndex) in input.whitelist" :key="'input-wl-'+itemIndex">
                        <input v-model="item.name" type="text" placeholder="物品ID (例如: minecraft:stone)" class="input input-bordered flex-grow">
                        <button @click="removeWhitelistItem(input.whitelist, itemIndex)" class="btn btn-xs btn-error">
                          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <button @click="addWhitelistItem(input.whitelist)" class="btn btn-sm btn-outline">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                      </svg>
                      添加白名单项目
                    </button>
                  </div>
                  
                  <div v-else>
                    <div class="mb-2">
                      <div class="item-entry" v-for="(item, itemIndex) in input.blacklist" :key="'input-bl-'+itemIndex">
                        <input v-model="item.name" type="text" placeholder="物品ID (例如: minecraft:dirt)" class="input input-bordered flex-grow">
                        <button @click="removeBlacklistItem(input.blacklist, itemIndex)" class="btn btn-xs btn-error">
                          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <button @click="addBlacklistItem(input.blacklist)" class="btn btn-sm btn-outline">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                      </svg>
                      添加黑名单项目
                    </button>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 输出容器配置 -->
            <div class="container-box">
              <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-800">输出容器</h3>
                <button @click="addOutputContainer" class="btn btn-sm btn-primary">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                  </svg>
                  添加容器
                </button>
              </div>
              
              <div v-for="(output, index) in task.output" :key="'output-'+index" class="mb-6 p-4 bg-gray-50 rounded-lg">
                <div class="flex justify-between items-center mb-3">
                  <h4 class="font-medium text-gray-700">容器 #{{ index + 1 }}</h4>
                  <button @click="removeOutputContainer(index)" class="btn btn-xs btn-error">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </button>
                </div>
                
                <div class="mb-4">
                  <label class="block text-gray-700 mb-1">容器名称</label>
                  <input v-model="output.containerName" type="text" placeholder="例如: chest_right" class="input input-bordered w-full">
                </div>
                
                <div class="mb-4">
                  <label class="block text-gray-700 mb-1">优先级</label>
                  <input v-model="output.priority" type="number" min="1" class="input input-bordered w-full">
                </div>
                
                <div class="mb-4">
                  <label class="flex items-center">
                    <input type="checkbox" v-model="output.cache" class="checkbox checkbox-primary mr-2">
                    <span>启用缓存模式</span>
                  </label>
                </div>
                
                <div class="mb-4">
                  <label class="block text-gray-700 mb-2">过滤规则</label>
                  
                  <div class="tabs mb-3">
                    <a class="tab tab-bordered" :class="{'tab-active': output.filterType === 'whitelist'}" @click="output.filterType = 'whitelist'">白名单</a> 
                    <a class="tab tab-bordered" :class="{'tab-active': output.filterType === 'blacklist'}" @click="output.filterType = 'blacklist'">黑名单</a>
                  </div>
                  
                  <div v-if="output.filterType === 'whitelist'">
                    <div class="mb-2">
                      <div class="item-entry" v-for="(item, itemIndex) in output.whitelist" :key="'output-wl-'+itemIndex">
                        <input v-model="item.name" type="text" placeholder="物品ID (例如: minecraft:stone)" class="input input-bordered flex-grow">
                        <input v-model="item.count" type="number" min="1" placeholder="数量" class="input input-bordered w-24">
                        <button @click="removeWhitelistItem(output.whitelist, itemIndex)" class="btn btn-xs btn-error">
                          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <button @click="addWhitelistItem(output.whitelist)" class="btn btn-sm btn-outline">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                      </svg>
                      添加白名单项目
                    </button>
                  </div>
                  
                  <div v-else>
                    <div class="mb-2">
                      <div class="item-entry" v-for="(item, itemIndex) in output.blacklist" :key="'output-bl-'+itemIndex">
                        <input v-model="item.name" type="text" placeholder="物品ID (例如: minecraft:dirt)" class="input input-bordered flex-grow">
                        <button @click="removeBlacklistItem(output.blacklist, itemIndex)" class="btn btn-xs btn-error">
                          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <button @click="addBlacklistItem(output.blacklist)" class="btn btn-sm btn-outline">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                      </svg>
                      添加黑名单项目
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 右侧预览区域 -->
        <div class="w-full md:w-1/3">
          <div class="sticky top-4">
            <div class="bg-white rounded-xl shadow-lg p-6">
              <h3 class="text-lg font-semibold text-gray-800 mb-4">配置预览</h3>
              
              <div class="mb-4">
                <label class="block text-gray-700 mb-2">生成的任务配置</label>
                <pre class="bg-gray-800 text-green-200 p-4 rounded-lg overflow-auto max-h-96">{{ formattedJson }}</pre>
              </div>
              
              <!-- 新增命令文本区域 -->
              <div class="mb-4">
                <label class="block text-gray-700 mb-2">命令文本</label>
                <pre class="bg-gray-800 text-blue-200 p-4 rounded-lg overflow-auto">{{ commandString }}</pre>
              </div>
              
              <div class="flex gap-2">
                <button @click="copyToClipboard" class="btn btn-primary flex-grow">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
                  </svg>
                  复制命令
                </button>
                <button @click="resetForm" class="btn btn-outline">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                  </svg>
                  重置
                </button>
              </div>
              
              <div v-if="copySuccess" class="mt-3 text-center text-green-500">
                命令已复制到剪贴板！
              </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-lg p-6 mt-4">
              <h3 class="text-lg font-semibold text-gray-800 mb-4">使用说明</h3>
              <ul class="text-gray-600 space-y-2">
                <li class="flex items-start">
                  <div class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center mr-2 flex-shrink-0">1</div>
                  <span>配置输入和输出容器信息</span>
                </li>
                <li class="flex items-start">
                  <div class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center mr-2 flex-shrink-0">2</div>
                  <span>设置过滤规则（白名单或黑名单）</span>
                </li>
                <li class="flex items-start">
                  <div class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center mr-2 flex-shrink-0">3</div>
                  <span>为输出容器设置优先级</span>
                </li>
                <li class="flex items-start">
                  <div class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center mr-2 flex-shrink-0">4</div>
                  <span>复制生成的命令文本</span>
                </li>
                <li class="flex items-start">
                  <div class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center mr-2 flex-shrink-0">5</div>
                  <span>在物流系统中粘贴并执行命令</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      task: {
        type: 'item',
        input: [
          {
            containerName: '',
            cache: false,
            filterType: 'whitelist',
            whitelist: [{ name: '' }],
            blacklist: [{ name: '' }]
          }
        ],
        output: [
          {
            containerName: '',
            priority: 1,
            cache: false,
            filterType: 'whitelist',
            whitelist: [{ name: '', count: null }],
            blacklist: [{ name: '' }]
          }
        ]
      },
      copySuccess: false,
      copyDownloadSuccess: false
    }
  },
  computed: {
    taskConfig() {
      const task = JSON.parse(JSON.stringify(this.task));
      
      // 转换输入容器
      const inputObj = {};
      task.input.forEach(container => {
        const containerName = container.containerName || 'unnamed_container';
        inputObj[containerName] = {
          cache: container.cache
        };
        
        // 处理白名单 - 只有当有实际内容时才添加
        const whitelistItems = container.whitelist.filter(item => item.name && item.name.trim() !== '');
        if (whitelistItems.length > 0) {
          inputObj[containerName].whitelist = {};
          whitelistItems.forEach(item => {
            inputObj[containerName].whitelist[item.name] = {};
          });
        }
        
        // 处理黑名单 - 只有当有实际内容时才添加
        const blacklistItems = container.blacklist.filter(item => item.name && item.name.trim() !== '');
        if (blacklistItems.length > 0) {
          inputObj[containerName].blacklist = {};
          blacklistItems.forEach(item => {
            inputObj[containerName].blacklist[item.name] = {};
          });
        }
      });
      
      // 转换输出容器
      const outputObj = {};
      task.output.forEach(container => {
        const containerName = container.containerName || 'unnamed_container';
        outputObj[containerName] = {
          priority: parseInt(container.priority) || 1,
          cache: container.cache
        };
        
        // 处理白名单 - 只有当有实际内容时才添加
        const whitelistItems = container.whitelist.filter(item => item.name && item.name.trim() !== '');
        if (whitelistItems.length > 0) {
          outputObj[containerName].whitelist = {};
          whitelistItems.forEach(item => {
            if (item.count) {
              outputObj[containerName].whitelist[item.name] = { count: parseInt(item.count) };
            } else {
              outputObj[containerName].whitelist[item.name] = {};
            }
          });
        }
        
        // 处理黑名单 - 只有当有实际内容时才添加
        const blacklistItems = container.blacklist.filter(item => item.name && item.name.trim() !== '');
        if (blacklistItems.length > 0) {
          outputObj[containerName].blacklist = {};
          blacklistItems.forEach(item => {
            outputObj[containerName].blacklist[item.name] = {};
          });
        }
      });
      
      return {
        type: task.type,
        input: inputObj,
        output: outputObj
      };
    },
    
    formattedJson() {
      return JSON.stringify(this.taskConfig, null, 2);
    },
    
    compressedJson() {
      return JSON.stringify(this.taskConfig);
    },
    
    commandString() {
      return `add ${this.compressedJson}`;
    },
    
    downloadCommand() {
      return 'wget http://git.liulikeji.cn/xingluo/CCTweaked-utils/raw/branch/main/Logistics/V5/startup.lua';
    }
  },
  methods: {
    addInputContainer() {
      this.task.input.push({
        containerName: '',
        cache: false,
        filterType: 'whitelist',
        whitelist: [{ name: '' }],
        blacklist: [{ name: '' }]
      });
    },
    
    removeInputContainer(index) {
      if (this.task.input.length > 1) {
        this.task.input.splice(index, 1);
      }
    },
    
    addOutputContainer() {
      this.task.output.push({
        containerName: '',
        priority: 1,
        cache: false,
        filterType: 'whitelist',
        whitelist: [{ name: '', count: null }],
        blacklist: [{ name: '' }]
      });
    },
    
    removeOutputContainer(index) {
      if (this.task.output.length > 1) {
        this.task.output.splice(index, 1);
      }
    },
    
    addWhitelistItem(list) {
      list.push(this.task.type === 'item' ? { name: '', count: null } : { name: '' });
    },
    
    removeWhitelistItem(list, index) {
      if (list.length > 1) {
        list.splice(index, 1);
      }
    },
    
    addBlacklistItem(list) {
      list.push({ name: '' });
    },
    
    removeBlacklistItem(list, index) {
      if (list.length > 1) {
        list.splice(index, 1);
      }
    },
    
    copyToClipboard() {
      const textarea = document.createElement('textarea');
      textarea.value = this.commandString;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      
      this.copySuccess = true;
      setTimeout(() => {
        this.copySuccess = false;
      }, 3000);
    },
    
    copyDownloadCommand() {
      const textarea = document.createElement('textarea');
      textarea.value = this.downloadCommand;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      
      this.copyDownloadSuccess = true;
      setTimeout(() => {
        this.copyDownloadSuccess = false;
      }, 3000);
    },
    
    resetForm() {
      this.task = {
        type: 'item',
        input: [
          {
            containerName: '',
            cache: false,
            filterType: 'whitelist',
            whitelist: [{ name: '' }],
            blacklist: [{ name: '' }]
          }
        ],
        output: [
          {
            containerName: '',
            priority: 1,
            cache: false,
            filterType: 'whitelist',
            whitelist: [{ name: '', count: null }],
            blacklist: [{ name: '' }]
          }
        ]
      };
    }
  }
}
</script>

<style>
.container-box {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.item-entry {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.drag-handle {
  cursor: move;
  opacity: 0.6;
}
.drag-handle:hover {
  opacity: 1;
}
.transition-all {
  transition: all 0.3s ease;
}
</style>