<template>
  <div class="bill-wrap">
    <van-cell-group inset class="mt12_i">
      <van-field required v-model="billType" name="username" label="发票类型" placeholder="请输入发票类型" readonly />
      <van-field required name="radio" label="增值税发票">
        <template #input>
          <van-radio-group v-model="zzsChecked" direction="horizontal">
            <van-radio name="1">专用</van-radio>
            <van-radio name="2">普通</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field required v-model="query.openName" name="openName" label="发票抬头" placeholder="请输入发票抬头" />
      <van-field required v-model="query.openTaxpayer" name="openTaxpayer" label="识别号" placeholder="请输入纳税人识别号" />
      <van-field required v-model="query.operatingAddress" name="operatingAddress" label="经营地址" placeholder="请输入经营地址及电话" />
      <van-field required v-model="query.openBankAddress" name="openBankAddress" label="开户支行" placeholder="请输入开户行所属地" />
      <van-field required v-model="query.openBankAccount" name="openBankAccount" label="开户账号" placeholder="请输入开户行帐号" />
      <van-field required name="uploader" label="营业执照" >
        <template #input>
          <van-uploader :after-read="afterRead" v-model="fileList" multiple :preview-image="true" :max-count="1" :before-delete="deleteFun"/>
        </template>
      </van-field>
      <van-field required v-model="query.collectName" name="username" label="收件人" placeholder="请输入发票收件人" />
      <van-field required v-model="query.collectMobile" name="username" label="收件手机" placeholder="请输入发票收件手机" />
      <van-field required v-model="query.collectAddress" name="collectAddress" label="收件地址" placeholder="请输入发票收件地址" />
      <van-field required v-model="query.collectEmail" name="collectEmail" label="收票邮箱" placeholder="请输入收票邮箱" />
      <!-- <van-field required name="switch" label="设为默认">
        <template #input>
          <van-switch v-model="checked" size="20px" />
        </template>
      </van-field> -->
    </van-cell-group>
    <div class="buy-btn-wrap">
      <el-button class="btn_main" @click="saveBill">
        保存
      </el-button>
      <el-button class="btn_edge">
        删除
      </el-button>
    </div>
  </div>
  <van-popup v-model:show="showArea" destroy-on-close position="bottom">
    <van-area :area-list="areaList" :model-value="pickerValue" @confirm="onConfirm" @cancel="showArea = false" />
  </van-popup>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { areaList } from "@vant/area-data";
import { useAll } from "~/api/pubAll/service";
const { fileUploadWithPath,updateUserInvoice } = useAll();
import { showLoadingToast, closeToast } from "vant";

let pageTitle: any = ref("HOTKING-个人中心-发票资料");
useHead(() => ({
  title: pageTitle.value,
}));
const fileList = ref<any[]>([]);
const route = useRoute();
const router = useRouter();
const query: any = ref({});
const user = useUserStore();
const checked = ref(false);
const zzsChecked = ref("1");
const billType = ref("公司发票");
user.value.adminTitle = "发票资料";
const nuxtApp = useNuxtApp();
const fieldValue = ref("");
const showArea = ref(false);
const AreaVal = ref("");
const pickerValue = ref<any[]>([]);
const onConfirm = ({ selectedValues, selectedOptions }: any) => {
  showArea.value = false;
  pickerValue.value = selectedValues;
  AreaVal.value =
    selectedOptions[0].text + selectedOptions[1].text + selectedOptions[2].text;
};
function deleteFun(e:any){
   query.value.openBusinessLicense = ''
  return true
}
const saveBill = async () => {
  const toast = showLoadingToast({
    message: "",
    forbidClick: true,
    zIndex: 3000,
    className: "my-custom-toast",
    duration: 0,
  });
  let res: any = await updateUserInvoice({...query.value});
  toast.close();
  if(res.httpCode==200){
    ElMessage.success("保存成功");
    router.go(-1);
  }
};
const afterRead = async (file: any) => {
  // 此时可以自行将文件上传至服务器
  const form = new FormData();
  form.append("file", file.file);
  form.append('path', 'user');
  const toast = showLoadingToast({
    message: "",
    forbidClick: true,
    zIndex: 3000,
    className: "my-custom-toast",
    duration: 0,
  });
  let res: any = await fileUploadWithPath(form);
  toast.close();
  if(res.httpCode==200){
    query.value.openBusinessLicense = res.data
  }
};
onMounted(() => {
  if (route.query.item) {
    query.value = JSON.parse(route.query.item as any);
    fileList.value.push(
      {
        url:query.value.openBusinessLicense
      }
    )
  } else {
    query.value = {
      id: "",
      pageNum: null,
      pageSize: null,
      oppenId: null,
      userId: "",
      openName: "",
      openTaxpayer: "",
      operatingAddress: "",
      openBankAddress: "",
      openBankAccount: "",
      openBusinessLicense: "",
      collectName: "",
      collectMobile: "",
      collectAddress: "",
      modifyTime: "",
      collectEmail: "",
    };
  }
});
</script>
<style scoped lang="scss">
.bill-wrap {
  min-height: 100vh;
  background: #f7f7f7;
  padding-top: 1px;
  padding-bottom: 70px;
  .buy-btn-wrap {
    display: block;
    width: 100%;
    left: 0;
    padding: 0 12px;
    z-index: 1;
    width: 100%;
    .el-button {
      width: 100%;
      border-radius: 25px !important;
      flex: 1;
      height: 42px !important;
      line-height: 42px !important;
      margin-top: 20px;
      & + .el-button {
        margin-left: 0;
        margin-top: 10px;
      }
      &.is-disabled {
        background: #e9e9e9;
        color: #fff;
      }
    }
  }
}
</style>