<template>
  <a-drawer
    title="订单设置"
    :maskClosable="true"
    width="850"
    placement="right"
    :closable="true"
    @close="handleCancel"
    v-model:open="modalVisible"
    :ok-button-props="okBtnStatus"
    destroy-on-close
    style="overflow: auto; padding-bottom: 53px"
  >
    <!--订单设置-->
    <a-spin :spinning="spinning" :tip="tipTitle">
      <a-form ref="formRef" :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="订单URL" name="orderUrl">
          <a-input placeholder="请输入订单URL" v-model:value="formState.orderUrl" />
        </a-form-item>

        <a-form-item hidden="hidden" label="ID" name="id">
          <a-input type="hidden" placeholder="订单ID" v-model:value="formState.orderUrlID" />
        </a-form-item>
      </a-form>
    </a-spin>

    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-button type="primary" @click="handleOk" v-if="okBtnStatus" :loading="loadingDrawerBtn"> 提交 </a-button>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { getAction, postAction } from '@/api/manage/manage';
  import { useMessage } from '@/hooks/web/useMessage';
  import pick from 'lodash.pick';

  const modalVisible = ref(false);
  const labelCol = reactive({ span: 3 });
  const wrapperCol = reactive({ span: 21 });
  const spinning = ref(false);
  const tipTitle = ref('');
  let formState = reactive({ code: '', orderUrl: '', domain: '', orderUrlID: '' });
  const okBtnStatus = ref(true);
  const loadingDrawerBtn = ref(false);

  const formRef = ref();
  const formRules = reactive({
    orderUrl: [{ required: true, message: '订单URL必填', trigger: 'blur' }],
  });
  const { createMessage } = useMessage();

  function init(record) {
    Object.assign(formState, pick(record, 'code', 'orderUrl', 'domain', 'orderUrlID'));
    spinning.value = true;
    getAction('/adweb/adwebSiteManage/getSiteOrderInfo?siteCode=' + record.code, {}).then(function (res) {
      if (res.code == 200) {
        formState.orderUrl = res.result.orderInitUrl;
        formState.orderUrlID = res.result.orderID;
      }

      spinning.value = false;
    });

    modalVisible.value = true;
  }

  function handleCancel() {
    formState.orderUrlID = '';
    formState.orderUrl = '';
    formState.domain = '';
    formState.code = '';
    spinning.value = false;
    modalVisible.value = false;
    loadingDrawerBtn.value = false;
  }

  async function handleOk() {
    await formRef.value
      .validate()
      .then(() => {
        loadingDrawerBtn.value = true;
        spinning.value = true;

        let orderUrlData = {
          siteCode: formState.code,
          domainName: formState.domain,
          orderUrl: formState.orderUrl,
          id: formState.orderUrlID,
        };

        postAction('/adweb/adwebSiteManage/set/order/url', orderUrlData, 120000)
          .then(function (res) {
            console.log('res:{}', res);
            if (res.code == 200) {
              modalVisible.value = false;

              createMessage.success('操作成功！');
            } else {
              createMessage.error(res.message);
            }
          })
          .catch(function (err) {
            console.log(err);
            loadingDrawerBtn.value = false;
            spinning.value = false;
          })
          .finally(() => {
            loadingDrawerBtn.value = false;
            spinning.value = false;
          });
      })
      .catch(() => {
        return false;
      });
  }

  defineExpose({ init });
</script>

<style scoped lang="less"></style>
