<script setup>

import {ref} from "vue";
import {useAutoCounterPart} from "@/stores/modules/autoCounterPart.js";
import {
  addCounterPartInterface,
  resetCounterPartInterface,
  deleteCounterPartInterface,
  editCounterPartInterface
} from "@/api/autoCounterPart.js";

const autoCounterPartStore = useAutoCounterPart();
autoCounterPartStore.getCounterPartList()

const visible = ref(false)
const selectedCounterPart = ref('')

const resetAction = async (id) => {
  const res = await resetCounterPartInterface.delete(id)
}

const deleteAction = async (id) => {
  const res = await deleteCounterPartInterface.delete(id)
}

const editAction = async (id) => {
  visible.value = true
  const res = await editCounterPartInterface.edit(id)
}

const itemForm = ref()

</script>

<template>
  <el-container>
    <el-header>
      <el-select
          placeholder="选择副本"
          style="width: 240px; margin-right: 20px;"
          v-model="selectedCounterPart"
      >
        <el-option
            v-for="item in autoCounterPartStore.counterPartList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        ></el-option>
      </el-select>
      <el-button type="primary" @click="addCounterPartInterface(selectedCounterPart)">添加</el-button>
      <el-button type="warning" disabled>关闭拦截</el-button>
      <el-button type="warning" disabled>拦截测试</el-button>

    </el-header>
    <el-main>
      <el-table
          style="width: 600px"
          :data="autoCounterPartStore.counterPartTable"
      >
        <el-table-column label="副本名称">
          <template #default="scope">
            <el-icon>
              <Flag/>
            </el-icon>
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="完成次数">
          <template #default="scope">
            <span>{{ scope.row.count }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300px">
          <template #default="scope">
            <el-button type="info" @click="resetAction(scope.row.id)">复位</el-button>
            <el-button type="primary" @click="editAction(scope.row.id)">编辑</el-button>
            <el-button type="danger" @click="deleteAction(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-drawer v-model="visible" :show-close="false">
        <template #header="{ close, titleId, titleClass }">
          <h4 :id="titleId" :class="titleClass">配置</h4>
          <el-button type="primary">保存</el-button>
          <el-button type="warning" @click="visible=false">取消</el-button>
          <el-button type="success">刷新用户</el-button>
        </template>
        <el-form>
          <el-form-item v-for="(item, index) in autoCounterPartStore.counterPartItem" :key="item.id"
                        :label="'用户'+ (index+1)">
            <el-select :placeholder="'请选择用户' + (index+1)" style="width: 240px; margin-right: 20px;">
              <el-option
                  v-for="item in autoCounterPartStore.users"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"

              ></el-option>
            </el-select>
            <el-checkbox label="不出手"></el-checkbox>
          </el-form-item>
        </el-form>
      </el-drawer>
    </el-main>
  </el-container>
</template>

<style scoped>

</style>
