<template>
  <ele-modal
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :maxable="maxable"
    title="审核商户入驻申请"
    :body-style="{ paddingBottom: '28px' }"
    @update:visible="updateVisible"
    @ok="submitReview"
  >
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="申请信息">
        <a-descriptions
          bordered
          :column="{ xxl: 1, xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }"
        >
          <a-descriptions-item label="商户名称">{{
            data?.merchantName
          }}</a-descriptions-item>
          <a-descriptions-item label="证件号码">{{
            data?.merchantCode
          }}</a-descriptions-item>
          <a-descriptions-item label="联系人手机号">{{
            data?.phone
          }}</a-descriptions-item>
          <a-descriptions-item label="联系人姓名">{{
            data?.realName
          }}</a-descriptions-item>
          <a-descriptions-item label="身份证号码">{{
            data?.idCard
          }}</a-descriptions-item>
          <a-descriptions-item label="店铺类型">{{
            data?.shopType
          }}</a-descriptions-item>
          <a-descriptions-item label="商户分类">{{
            data?.category
          }}</a-descriptions-item>
          <a-descriptions-item label="手续费"
            >{{ data?.commission }}%</a-descriptions-item
          >
          <a-descriptions-item label="创建时间">{{
            data?.createTime
          }}</a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>

      <a-tab-pane key="2" tab="资质文件">
        <a-row :gutter="24">
          <a-col :span="8">
            <div class="file-preview">
              <h4>营业执照</h4>
              <a-image
                v-if="data?.yyzz"
                :src="data?.yyzz"
                :width="150"
                :height="150"
              />
              <a-empty v-else description="未上传" />
            </div>
          </a-col>

          <a-col :span="8">
            <div class="file-preview">
              <h4>身份证正面</h4>
              <a-image
                v-if="data?.sfz1"
                :src="data?.sfz1"
                :width="150"
                :height="150"
              />
              <a-empty v-else description="未上传" />
            </div>
          </a-col>

          <a-col :span="8">
            <div class="file-preview">
              <h4>身份证反面</h4>
              <a-image
                v-if="data?.sfz2"
                :src="data?.sfz2"
                :width="150"
                :height="150"
              />
              <a-empty v-else description="未上传" />
            </div>
          </a-col>

          <a-col :span="24" style="margin-top: 20px">
            <div class="file-preview">
              <h4>其他资质文件</h4>
              <div v-if="otherFiles.length > 0" class="files-grid">
                <a-image
                  v-for="(file, index) in otherFiles"
                  :key="index"
                  :src="file"
                  :width="100"
                  :height="100"
                  style="margin-right: 10px; margin-bottom: 10px"
                />
              </div>
              <a-empty v-else description="未上传其他资质文件" />
            </div>
          </a-col>
        </a-row>
      </a-tab-pane>

      <a-tab-pane key="3" tab="审核处理">
        <a-form
          ref="formRef"
          :model="reviewForm"
          :rules="reviewRules"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
        >
          <a-form-item label="审核结果" name="status" required>
            <a-radio-group v-model:value="reviewForm.status">
              <a-radio :value="1">通过</a-radio>
              <a-radio :value="2">驳回</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item
            v-if="reviewForm.status === 2"
            label="驳回原因"
            name="reason"
            required
          >
            <a-textarea
              v-model:value="reviewForm.reason"
              :rows="4"
              :maxlength="200"
              placeholder="请输入驳回原因"
            />
          </a-form-item>

          <a-form-item
            v-if="reviewForm.status === 1"
            label="手续费(%)"
            name="commission"
          >
            <a-input-number
              v-model:value="reviewForm.commission"
              :step="0.1"
              :max="100"
              :min="0"
              :precision="2"
              placeholder="请输入手续费"
            />
          </a-form-item>

          <a-form-item
            v-if="reviewForm.status === 1"
            label="是否自营"
            name="ownStore"
          >
            <a-switch
              checked-children="是"
              un-checked-children="否"
              :checked="reviewForm.ownStore === 1"
              @update:checked="(val) => (reviewForm.ownStore = val ? 1 : 0)"
            />
          </a-form-item>

          <a-form-item
            v-if="reviewForm.status === 1"
            label="是否推荐"
            name="recommend"
          >
            <a-switch
              checked-children="是"
              un-checked-children="否"
              :checked="reviewForm.recommend === 1"
              @update:checked="(val) => (reviewForm.recommend = val ? 1 : 0)"
            />
          </a-form-item>

          <a-form-item
            v-if="reviewForm.status === 1"
            label="是否需要审核"
            name="goodsReview"
          >
            <a-switch
              checked-children="是"
              un-checked-children="否"
              :checked="reviewForm.goodsReview === 1"
              @update:checked="(val) => (reviewForm.goodsReview = val ? 1 : 0)"
            />
          </a-form-item>

          <a-form-item
            v-if="reviewForm.status === 1"
            label="创建商户"
            name="createMerchant"
          >
            <a-switch
              checked-children="是"
              un-checked-children="否"
              :checked="reviewForm.createMerchant"
              @update:checked="(val) => (reviewForm.createMerchant = val)"
            />
            <div class="tips">审核通过后是否立即创建商户</div>
          </a-form-item>

          <a-form-item label="备注" name="comments">
            <a-textarea
              v-model:value="reviewForm.comments"
              :rows="4"
              :maxlength="200"
              placeholder="请输入备注信息"
            />
          </a-form-item>
        </a-form>
      </a-tab-pane>
    </a-tabs>
  </ele-modal>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch } from 'vue';
  import { Form, message } from 'ant-design-vue';
  import {
    checkShopMerchantApply,
    createMerchantFromApply
  } from '@/api/shop/shopMerchantApply';
  import { ShopMerchantApply } from '@/api/shop/shopMerchantApply/model';

  const useForm = Form.useForm;

  const props = defineProps<{
    visible: boolean;
    data?: ShopMerchantApply | null;
  }>();

  const emit = defineEmits<{
    (e: 'done'): void;
    (e: 'update:visible', visible: boolean): void;
  }>();

  // 提交状态
  const loading = ref(false);
  // 是否显示最大化切换按钮
  const maxable = ref(true);
  // 表单引用
  const formRef = ref<any>(null);
  // 当前标签页
  const activeKey = ref('1');

  // 其他资质文件
  const otherFiles = ref<string[]>([]);

  // 审核表单
  const reviewForm = reactive({
    status: 1, // 默认通过
    reason: '',
    commission: 0,
    ownStore: 0,
    recommend: 0,
    goodsReview: 1,
    createMerchant: true, // 默认创建商户
    comments: ''
  });

  // 审核表单验证规则
  const reviewRules = reactive({
    status: [{ required: true, message: '请选择审核结果', trigger: 'change' }],
    reason: [{ required: true, message: '请输入驳回原因', trigger: 'blur' }]
  });

  /* 更新visible */
  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  };

  // 提交审核
  const submitReview = () => {
    if (!formRef.value) return;

    formRef.value
      .validate()
      .then(() => {
        loading.value = true;

        const formData = {
          applyId: props.data?.applyId,
          status: reviewForm.status,
          reason: reviewForm.reason,
          commission: reviewForm.commission,
          ownStore: reviewForm.ownStore,
          recommend: reviewForm.recommend,
          goodsReview: reviewForm.goodsReview,
          comments: reviewForm.comments
        };

        checkShopMerchantApply(formData)
          .then(async (msg) => {
            message.success(msg);

            // 如果审核通过且需要创建商户
            if (
              reviewForm.status === 1 &&
              reviewForm.createMerchant &&
              props.data?.applyId
            ) {
              try {
                await createMerchantFromApply(props.data.applyId);
                message.success('商户创建成功');
              } catch (e) {
                message.error('商户创建失败: ' + (e as Error).message);
              }
            }

            loading.value = false;
            updateVisible(false);
            emit('done');
          })
          .catch((e) => {
            loading.value = false;
            message.error(e.message);
          });
      })
      .catch(() => {});
  };

  const { resetFields } = useForm(reviewForm, reviewRules);

  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
        resetFields();
        reviewForm.status = 1;
        reviewForm.createMerchant = true;

        // 解析其他资质文件
        otherFiles.value = [];
        if (props.data?.files) {
          try {
            const files = JSON.parse(props.data.files);
            if (Array.isArray(files)) {
              otherFiles.value = files;
            } else {
              otherFiles.value = [props.data.files];
            }
          } catch {
            otherFiles.value = [props.data.files];
          }
        }
      }
    },
    { immediate: true }
  );
</script>

<style lang="less" scoped>
  .file-preview {
    text-align: center;

    h4 {
      margin-bottom: 10px;
      font-weight: normal;
    }
  }

  .files-grid {
    display: flex;
    flex-wrap: wrap;
  }

  .tips {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
  }
</style>
