<template>
  <div class="p-2">
    <el-card shadow="hover">
      <!-- 页面标题 -->
      <div class="mb-[10px] text-sm font-medium">
        牌局测试工具，是否生效 <span class="text-red-500 text-lg font-bold">{{ effectiveText }}</span>
      </div>
      <div class="mb-[10px] text-sm font-medium">
        <p>S黑、H红、D方、C梅代表四种花色/ AKQJT98765432 代表13个点数/ AS,黑桃A/ D,方块2</p>
      </div>
      <!-- 表单区域 -->
      <el-form ref="cardToolsFormRef" :model="form" label-width="80px">
        <el-form-item label="整牌(2人)">
          <el-input v-model="form.contentTwo" type="textarea" :rows="3" placeholder="请按输入" />
        </el-form-item>

        <el-form-item label="整牌(3人)">
          <el-input v-model="form.contentThree" type="textarea" :rows="3" placeholder="请按输入" />
        </el-form-item>

        <el-form-item label="整牌(4人)">
          <el-input v-model="form.contentFour" type="textarea" :rows="3" placeholder="请按输入" />
        </el-form-item>
        <el-form-item label="整牌(5人)">
          <el-input v-model="form.contentFive" type="textarea" :rows="3" placeholder="请按输入" />
        </el-form-item>

        <el-form-item label="整牌(6人)">
          <el-input v-model="form.contentSex" type="textarea" :rows="3" placeholder="请按输入" />
        </el-form-item>

        <el-form-item label="整牌(7人)">
          <el-input v-model="form.contentSeven" type="textarea" :rows="3" placeholder="请按输入" />
        </el-form-item>

        <el-form-item label="整牌(8人)">
          <el-input v-model="form.contentEight" type="textarea" :rows="3" placeholder="请按输入" />
        </el-form-item>

        <el-form-item label="整牌(9人)">
          <el-input v-model="form.contentNine" type="textarea" :rows="3" placeholder="请按输入" />
        </el-form-item>
      </el-form>

      <!-- 操作按钮 -->
      <div class="flex justify-center items-center space-x-4 mb-4">
        <el-button type="primary" @click="submitForm">生 效</el-button>
        <el-button @click="removeRedisPokerHands2">取消生效</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup name="CardTools" lang="ts">
import { ref, reactive } from 'vue';
import { addCardTools, selectBusinessCardToolsMaxNew, removeRedisPokerHands } from '@/api/system/business/cardTools';
import { CardToolsForm } from '@/api/system/business/cardTools/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 设置默认值
const defaultContent = 'AS,AH,KS,KH,QS,QH,JS,JH,TS,TH,9S,9H,8S,8H,7S,7H,6S,6H,2H,5S,5H,5D,2C,5C,2D,4H';
const defaultContentTwo = 'AS,AH,KS,KH,2H,5S,5H,5D,2C,5C,2D,4H';
const defaultContentThree = 'AS,AH,KS,KH,QS,QH,2H,5S,5H,5D,2C,5C,2D,4H';
const defaultContentFour = 'AS,AH,KS,KH,QS,QH,JS,JH,2H,5S,5H,5D,2C,5C,2D,4H';
const defaultContentFive = 'AS,AH,KS,KH,QS,QH,JS,JH,TS,TH,2H,5S,5H,5D,2C,5C,2D,4H';
const defaultContentSex = 'AS,AH,KS,KH,QS,QH,JS,JH,TS,TH,9S,9H,2H,5S,5H,5D,2C,5C,2D,4H';
const defaultContentSeven = 'AS,AH,KS,KH,QS,QH,JS,JH,TS,TH,9S,9H,8S,8H,2H,5S,5H,5D,2C,5C,2D,4H';
const defaultContentEight = 'AS,AH,KS,KH,QS,QH,JS,JH,TS,TH,9S,9H,8S,8H,7S,7H,2H,5S,5H,5D,2C,5C,2D,4H';
const defaultContentNine = 'AS,AH,KS,KH,QS,QH,JS,JH,TS,TH,9S,9H,8S,8H,7S,7H,6S,6H,2H,5S,5H,5D,2C,5C,2D,4H';

const form = reactive<CardToolsForm>({
  contentNine: defaultContentNine,
  contentEight: defaultContentEight,
  contentSeven: defaultContentSeven,
  contentSex: defaultContentSex,
  contentFive: defaultContentFive,
  contentFour: defaultContentFour,
  contentThree: defaultContentThree,
  contentTwo: defaultContentTwo,
  isDelete: 0
});

/** 提交表单 */
const submitForm = () => {
  // 构建要提交的数据
  const formData = {
    contentTwo: form.contentTwo,
    contentThree: form.contentThree,
    contentFour: form.contentFour,
    contentFive: form.contentFive,
    contentSex: form.contentSex,
    contentSeven: form.contentSeven,
    contentEight: form.contentEight,
    contentNine: form.contentNine,
    isDelete: 0
  };
  // 调用 addCardTools 接口
  addCardTools(formData)
    .then(() => {
      proxy?.$modal.msgSuccess('生效成功');
      loadLastContent(); // ✅ 成功后刷新
    })
    .catch(() => {
      let proxy;
      proxy?.$modal.msgError('生效失败');
    });
};
const effectiveText = computed(() => {
  return form.isDelete === 0 ? '已生效' : '未生效';
});
/** 重置表单 */
const resetForm = () => {
  form.content = defaultContent; // 重置为默认值
};

/** 获取上一次写入的数据 */
const loadLastContent = async () => {
  try {
    //TODO完善
    const res = await selectBusinessCardToolsMaxNew();
    if (res.data && res.data.contentTwo) {
      form.content = res.data.content;
      form.contentTwo = res.data.contentTwo;
      form.contentThree = res.data.contentThree;
      form.contentFour = res.data.contentFour;
      form.contentFive = res.data.contentFive;
      form.contentSex = res.data.contentSex;
      form.contentSeven = res.data.contentSeven;
      form.contentEight = res.data.contentEight;
      form.contentNine = res.data.contentNine;
      form.isDelete = res.data.isDelete;
    } else {
      form.isDelete = 1;
    }
  } catch (error) {
    console.error('获取上一次数据失败:', error);
    // 如果获取失败，使用默认值
    form.content = defaultContent;
  }
};

const removeRedisPokerHands2 = async () => {
  try {
    await proxy?.$modal.confirm('是否确认取消当前牌局配置的生效？此操作将恢复为上次保存的状态。');

    await removeRedisPokerHands();
    await loadLastContent();

    proxy?.$modal.msgSuccess('已取消生效');
  } catch (error) {
    proxy?.$modal.msgError('操作失败，请稍后重试');
  }
};

// 页面加载时获取上一次的数据
onMounted(() => {
  loadLastContent();
});
</script>

<style scoped>
.flex {
  display: flex;
}
.justify-center {
  justify-content: center;
}
.items-center {
  align-items: center;
}
.space-x-4 {
  gap: 1rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.text-center {
  text-align: center;
}
.font-bold {
  font-weight: bold;
}

/* 添加新的样式来控制表单宽度 */
.el-form {
  max-width: 100%;
  width: 100%;
}

.el-form-item {
  margin-bottom: 16px;
}

.el-form-item__label {
  width: 80px !important;
  text-align: right;
  padding-right: 12px;
}

.el-form-item__content {
  flex: 1;
  min-width: 0;
}

.el-input--textarea {
  width: 100% !important;
  max-width: 100%;
}

/* 确保输入框不会超出父容器 */
.el-textarea {
  width: 100% !important;
  max-width: 100%;
}

/* 调整卡片容器的宽度 */
.el-card {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
</style>
