<template>
  <div class="ca-apply">
    <Form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <FormItem label="真实姓名" v-bind="validateInfos.idCardName">
        <Input v-model:value="form.idCardName" :disabled="disableEdit" />
      </FormItem>
      <FormItem label="身份证号码" v-bind="validateInfos.idCardNo">
        <Input v-model:value="form.idCardNo" :disabled="disableEdit" />
      </FormItem>
      <FormItem label="所在单位名称" v-bind="validateInfos.unitName">
        <Select v-model:value="form.unitName" :disabled="disableEdit">
          <Option
            v-for="organize in organizeList"
            :key="organize.id"
            :value="organize.name"
            >{{ organize.name }}</Option
          >
        </Select>
      </FormItem>
      <FormItem label="手机号码" v-bind="validateInfos.phone">
        <Input v-model:value="form.phone" :disabled="disableEdit" />
      </FormItem>
      <FormItem label="收件人" v-bind="validateInfos.idCardNo">
        <Input v-model:value="form.receiverName" :disadbled="disableEdit" />
      </FormItem>
      <FormItem label="联系电话" v-bind="validateInfos.idCardNo">
        <Input v-model:value="form.receiverPhone" :disadbled="disableEdit" />
      </FormItem>
      <FormItem label="邮寄地址" v-bind="validateInfos.address">
        <Input v-model:value="form.address" :disabled="disableEdit" />
      </FormItem>
      <FormItem :wrapperCol="{ span: 10, offset: 8 }">
        <Button type="primary" @click="onSubmit">前往申领</Button>
        <Button style="margin-left: 10px" @click="changeDisabled"
          >历史申领记录</Button
        >
      </FormItem>
    </Form>
  </div>
  <Drawer title="历史申领记录" placement="right" :closable="false"> </Drawer>
</template>
<style lang="less" scoped>
.ca-apply {
  width: 600px;
}
</style>
<script>
import { Form, Input, Button, Select, Drawer, message } from "ant-design-vue";
import { onMounted, reactive, ref, toRaw } from "vue";
import { useForm } from "@ant-design-vue/use";
import { get } from "@/services/http";
export default {
  components: {
    Form,
    Input,
    FormItem: Form.Item,
    Button,
    Select,
    Option: Select.Option,
    Drawer
  },
  setup() {
    //界面初始化
    var organizeList = ref([]);
    var userApplyList = ref([]);
    onMounted(async () => {
      const res = await get("/api2/UserInfo/Organize");
      if (res.errorCode != 0) {
        message.error(res.errorMsg);
      }
      organizeList.value = res.data;
      const listRes = await get("/api2/CA/UserApplyList");
      if (res.errorCode != 0) {
        message.error(res.errorMsg);
      }
      userApplyList.value = listRes;
    });
    const formRef = reactive({
      idCardName: "",
      idCardNo: "",
      phone: "",
      unitName: ""
    });
    const rulesRef = reactive({
      idCardName: [
        { required: true, message: "请输入18位身份证号码", trigger: "blur" }
      ],
      idCardId: [
        { required: true, message: "请输入18位身份证号码", trigger: "blur" }
      ],
      phone: [
        { required: true, message: "请输入18位身份证号码", trigger: "blur" }
      ],
      unitName: [
        { required: true, message: "请输入18位身份证号码", trigger: "change" }
      ]
    });
    const { validate, validateInfos } = useForm(formRef, rulesRef);

    var disableEdit = ref(false);
    const changeDisabled = function() {
      disableEdit.value = !disableEdit.value;
      console.log(disableEdit);
    };
    const onSubmit = function() {
      validate()
        .then(() => {
          console.log(toRaw(formRef));
        })
        .catch(e => {
          console.log(e);
        });
    };
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 10 },
      form: formRef,
      disableEdit,
      changeDisabled,
      validateInfos,
      onSubmit,
      organizeList
    };
  }
};
</script>
