<template>
    <ContentWrap v-loading="formLoading" style="overflow-y: auto;" class="ContentWrap">
    <div class="top" style="position: relative;overflow: auto;" :style="{ height: (winHeight - 210) + 'px' }" >
      <MerchantApplyBaseInfo  :propFormData="Obj" :isDetail="isDetail"  />
    </div>
    <div class="bottom" v-if="checkPermi(['sale:merchant-apply:update'])">
      <el-form ref="formRef" v-loading="formLoading"  label-width="100px" style="display: flex;" :rules="formRules" :model="formData">
        <el-form-item label="审核意见" prop="checkComment" style="border: none;width: 100%;">
          <el-input v-model="formData.checkComment" placeholder="请输入审核意见" />
        </el-form-item>
      </el-form>
			<div style="display: flex;">
				<el-button @click="goback" class="w-31">返 回</el-button>
				<el-button @click="openApplyList" class="w-31">审核记录</el-button>
				<el-button :disabled="formLoading" class="w-31" type="danger" @click="reject" v-hasPermi="['sale:merchant-apply:update']">拒 绝</el-button>
				<el-button :disabled="formLoading" class="w-31" type="primary" @click="agree" v-hasPermi="['sale:merchant-apply:update']">同 意</el-button>
			</div>
    </div>

  </ContentWrap>
  <MerchantApplyLog ref="merchantApplyLogRef" />



</template>

<script lang="ts" setup>
import MerchantApplyBaseInfo from './MerchantApplyBaseInfo.vue'
import { MerchantApi, MerchantVO } from '@/api/system/sale/merchant'
import { checkPermi } from "@/utils/permission"; // 权限判断函数
import { FormRules } from 'element-plus'
import MerchantApplyLog from './MerchantApplyLog.vue'
import { useRoute } from 'vue-router';
const route = useRoute();
const { push } = useRouter() // 路由跳转
const { t } = useI18n() // 国际化
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用

const isDetail = ref(true)
const winHeight = window.innerHeight || document.documentElement.clientHeight;
const Obj = ref({})

const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const message = useMessage() // 消息弹窗
const formData = reactive({
	checkComment: '', 
})

const formRules = reactive<FormRules>({
  checkComment: [{ required: true, message: '请输入审核意见'}],
})

const goback = () => {
	push({ name: 'Merchant' })
}
const merchantApplyLogRef = ref()
/** 打开审核列表 */
const openApplyList = () => {
  merchantApplyLogRef.value.open(Obj.value.id)
}
/** 同意 */
const agree = async () => {
  if (formData.checkComment === '') {
    message.error('请填写审核意见');
    return;
  }
  Obj.value.checkComment = formData.checkComment;
  Obj.value.checkStatus = 1;
  try {
    // 二次确认
    await message.confirm('同意审核？')
    MerchantApi.updateMerchantApply(Obj.value).then(() => {
      // 提示成功
      message.success(t('common.success'))
      emit('success');
      goback();
    })
    
  } catch { }
}

/** 拒绝申请 */
const reject = async () => {
  if (formData.checkComment === '') {
    message.error('请填写审核意见');
    return;
  }
  Obj.value.checkComment = formData.checkComment;
  Obj.value.checkStatus = 2;
  try {
    // 二次确认
    await message.confirm('拒绝申请?')
    await MerchantApi.updateMerchantApply(Obj.value).then(() => {
      // 提示成功
      message.success(t('common.success'))
     
      emit('success')
      goback();
    })
    
  } catch { }
}

onMounted(() => {
  console.log()
  Obj.value = JSON.parse(route.query.row as string);
  console.log(Obj.value)
  
  // 当子组件挂载时，改变父组件的样式
  document.getElementsByTagName('section')[1].style.padding = '0px';
  document.getElementsByTagName('section')[1].style.width = '100%';
  document.getElementsByTagName('section')[1].style.background = '#f5f7f9';
  document.getElementsByTagName('section')[1].querySelector('div').style.border = 'none';
});
onUnmounted(() => {
  // 当子组件卸载时，恢复父组件的原始样式
  document.getElementsByTagName('section')[1].style.width = 'auto';
  document.getElementsByTagName('section')[1].style.padding = '20px';
  document.getElementsByTagName('section')[1].style.background = 'var(--el-color-white)';
});
</script>

<style src="@/styles/MobileTab.css"  lang="scss" scoped></style>
<style scoped>
.w-31{
	flex: 1;
  font-size: 0.8rem
}
.bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: white;
	padding: 1rem;
	box-sizing: border-box;

	.el-button {
		width: 22%;
	}
}
</style>