<template>
  <div class="status-change">
    <a-tabs v-model:activeKey="activeTab">
      <a-tab-pane key="cardStatus" tab="卡片状态">
        <a-form :model="cardForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
          <a-form-item label="原状态" name="aType">
            <a-select v-model:value="cardForm.aType" placeholder="请选择原状态" :style="{ width: '100%' }">
              <a-select-option v-for="status in cardStatusList" :key="status.status" :value="status.status">
                {{ status.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="目标状态" name="bType">
            <a-select v-model:value="cardForm.bType" placeholder="请选择目标状态" :style="{ width: '100%' }">
              <a-select-option v-for="status in cardStatusList" :key="status.status" :value="status.status"
                :disabled="cardForm.aType != null && status.status <= cardForm.aType">
                {{ status.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-tab-pane>

      <a-tab-pane key="inviteStatus" tab="邀请奖励状态">
        <a-form :model="inviteForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
       
          <a-form-item label="原状态" name="aType">
            <a-select v-model:value="inviteForm.aType" placeholder="请选择原状态" :style="{ width: '100%' }">
              <a-select-option v-for="status in inviteStatusList" :key="status.status" :value="status.status">
                {{ status.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="目标状态" name="bType">
            <a-select v-model:value="inviteForm.bType" placeholder="请选择目标状态" :style="{ width: '100%' }">
              <a-select-option v-for="status in inviteStatusList" :key="status.status" :value="status.status"
                :disabled="inviteForm.aType != null && status.status <= inviteForm.aType">
                {{ status.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-tab-pane>
    </a-tabs>

    <div class="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" :loading="loading" @click="handleSubmit">确定</a-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { message } from 'ant-design-vue';
import { defHttp } from '/@/utils/http/axios';

export default defineComponent({
  name: 'StatusChange',
  emits: ['cancel'],
  setup(props, { emit }) {
    const activeTab = ref('cardStatus');
    const loading = ref(false);

    const cardForm = reactive({
      aType: undefined as number | undefined,
      bType: undefined as number | undefined
    });

    const inviteForm = reactive({
      aType: undefined as number | undefined,
      bType: undefined as number | undefined
    });

    const cardStatusList = [
      { status: 1, text: '您的申报已提交审核，请耐心等待结果！' },
      { status: 2, text: '恭喜您的申报已通过，请立即点击制卡并且保密运输发货！', amount: 300, tips: "保密运输费用" },
      { status: 3, text: '线上免费激活' },
      { status: 4, text: '激活成功' },
      { status: 5, text: '正在入款' },
      { status: 6, text: '入款失败，银行卡流水异常' },
      { status: 7, text: '包装流水', amount: 1000, tips: "包装费用" },
      { status: 8, text: '正在入款，资金保险', amount: 500, tips: "资金保险费用" },
      { status: 9, text: '保险缴纳成功，等待到账' },
      { status: 10, text: '财产遭风险控制，确认本人收款', amount: 500, tips: "财产遭风险控制费用" },
      { status: 11, text: '重新汇入' },
      { status: 12, text: '升级通道，为财产保驾护航', amount: 500, tips: "升级通道费用" },
      { status: 13, text: '陆续到账中，请等待' },
      { status: 14, text: '免排队，立即到帐', amount: 800, tips: "免排队费用" },
      { status: 15, text: '正在加急打款' },
      { status: 16, text: '操作不当，资料丢失', amount: 300, tips: "操作不当费用" },
    ];
    const inviteStatusList = [
      { status: 0, text: '您的提现已提交，请等待审核！' },
      { status: 1, text: '恭喜您的审核已通过，请等待入款！' },
      { status: 2, text: '请立刻补缴大额存款保险费（补缴后即可原路返还）' },
      { status: 3, text: '等待入款！' },
      { status: 4, text: '查询到前方还有92848位家人正在等待入款！邮储推出立刻到账服务 仅提供600号人', amount: 600, tips: '个人所得税' },
      { status: 5, text: '前方还有328位等待入款！' },
    ];

    const handleSubmit = async () => {
      const currentForm = activeTab.value === 'cardStatus' ? cardForm : inviteForm;


      if (currentForm.aType == null || currentForm.bType == null) {
        message.warning('请选择状态');
        return;
      }

      try {
        loading.value = true;
        const url = activeTab.value === 'cardStatus'
          ? '/business/businessYw1/editAllAtoB'
          : '/business/businessYw1/editUserAllAtoB';

        await defHttp.get({
          url,
          params: {
            aType: currentForm.aType,
            bType: currentForm.bType
          }
        });

        message.success('状态修改成功');
        emit('cancel');
      } catch (error) {
        message.error('状态修改失败');
      } finally {
        loading.value = false;
      }
    };

    const handleCancel = () => {
      emit('cancel');
    };

    return {
      activeTab,
      loading,
      cardForm,
      inviteForm,
      cardStatusList,
      inviteStatusList,
      handleSubmit,
      handleCancel
    };
  }
});
</script>

<style lang="less" scoped>
.status-change {
  padding: 24px;

  .footer {
    margin-top: 24px;
    text-align: right;

    .ant-btn+.ant-btn {
      margin-left: 8px;
    }
  }
}

@media (max-width: 576px) {
  .status-change {
    padding: 16px;
  }

  :deep(.ant-form-item-label) {
    padding: 0;
  }
}
</style>