<template>
  <uni-card
    :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
    :padding="'0px'"
    :margin="'20px'"
    :border="false"
  >
    <view class="title">申请试用</view>
    <u-form
      labelPosition="left"
      :model="model1"
      :rules="rules"
      ref="form"
      :labelWidth="80"
      :labelStyle="{ padding: '0rpx 10rpx' }"
      :errorType="'border-bottom'"
    >
      <u-form-item
        :prop="`formData.${item.key}`"
        :label="item.name"
        :required="item.required"
        v-for="(item, index) in formAttrList"
        :key="index"
        @click="item.fn"
      >
        <u-input
          v-if="item.type === 'input'"
          v-model="(model1.formData as any)[item.key]"
          :placeholder="`请输入${item.name}`"
          clearable
          :customStyle="{}"
          border="none"
          :disabled="item.disabled"
          :type="['contactPhone'].indexOf(item.key) > -1 ? 'number' : 'text'"
        >
          <template #suffix>
            <text v-if="item.unit">
              {{ item.unit }}
            </text>
          </template>
        </u-input>
        <u-input
          v-if="item.type === 'select'"
          :disabled="true"
          :disabledColor="'#ffffff'"
          v-model="(model1.formData as any)[item.key]"
          :placeholder="`请选择${item.name}`"
          clearable
          :customStyle="{}"
          border="none"
        >
          <template #suffix>
            <text v-if="item.unit">
              {{ item.unit }}
            </text>
          </template>
        </u-input>
        <template #right v-if="item.type === 'select'">
          <u-icon name="arrow-right" @click="item.fn"></u-icon>
        </template>
      </u-form-item>
    </u-form>
  </uni-card>

  <view class="btn-box-fix-btn">
    <view
      ><u-button type="primary" shape="circle" @click="save"
        >提交申请</u-button
      ></view
    >
  </view>

</template>

<script setup lang="ts">
import { SteelApi, UserApi } from "@/services";
import pinia from "@/store";
import { useMemberStore } from "@/store/index";
const store = useMemberStore(pinia);
const model1 = reactive<any>({
  formData: {},
});
const formAttrList = reactive<any>([
  {
    name: "公司名称",
    key: "companyName",
    type: "input",
    required: true,
    unit: "",
  },
  {
    name: "联系人",
    key: "contactPerson",
    type: "input",
    required: true,
    unit: "",
  },
  {
    name: "联系电话",
    key: "contactPhone",
    type: "input",
    required: true,
    unit: "",
  },
  {
    name: "地址",
    key: "address",
    type: "input",
    required: true,
    unit: "",
  },
]);
const rules = reactive({
  "formData.companyName": {
    type: "string",
    required: true,
    message: "请输入公司名称",
    trigger: ["blur", "change"],
  },
  "formData.contactPerson": {
    type: "string",
    required: true,
    message: "请输入联系人",
    trigger: ["blur", "change"],
  },
  "formData.contactPhone": {
    type: "string",
    required: true,
    message: "请输入联系电话",
    trigger: ["blur", "change"],
  },
  "formData.address": {
    type: "string",
    required: true,
    message: "请输入地址",
    trigger: ["blur", "change"],
  },
});


/**
 * 校验
 */
const form = ref();
const check = () => {
  return new Promise((resolve) => {
    form.value
      .validate()
      .then((res: boolean) => {
        resolve(res);
      })
      .catch((errors: any) => {
        resolve(false);
        uni.showToast({
          icon: "none",
          title: errors[0].message || "校验失败",
        });
      });
  });
};

const save = () => {
  check().then((res) => {
    if (res) {
      startSave();
    }
  });
  // if (store.profile?.token) {
  //   check().then((res) => {
  //     if (res) {
  //       startSave();
  //     }
  //   });
  // } else {
  //   uni.login({
  //   provider: "toutiao",
  //   success: function (loginRes) {
  //     UserApi.login({ code: loginRes.code }).then((res) => {

  //     });
  //   },
  // });
  // }
};

const startSave = () => {
  SteelApi.add(model1.formData).then((res) => {
    if (res.code === 200) {
      uni.showToast({
        title: "提交成功",
      });
      uni.navigateBack();
    }
  });
};
</script>
<style lang="scss" scoped>
::v-deep .uni-card__content {
  padding: 20rpx !important;
  height: calc(100vh - 200px);
  overflow: auto;
}
::v-deep .uni-card--shadow {
  padding: 0px !important;
}
::v-deep .u-form-item {
  height: auto;
  border-bottom: 1rpx solid rgba(233, 233, 233, 0.76);
  margin: 0px 20rpx;
  padding: 0px 20rpx;
}
.title {
  font-weight: 500;
  font-size: 32rpx;
  color: #000000;
}
.btn-box-fix-btn {
  justify-content: center;
  view {
    width: 70%;
  }
}
</style>
