<template>
  <div class="wrapper">
    <NavHeader color="#0687D2" title="绿色就医通道政策申报" @back="$router.go(-1)" />
    <van-form class="form" @submit="onSubmit" ref="form">
      <van-field
        v-model="form.hospital"
        :disabled="type === 'view'"
        label="预约医院"
        readonly
        clickable
        required
        @click="pickerHospital = true"
        placeholder="请选择预约医院"
        :rules="[{ required: true, message: '请选择预约医院', trigger: 'onChange' }]"
      />
      <van-field
        v-model="form.seeDoctorTime"
        :disabled="type === 'view'"
        label="就医时间"
        readonly
        clickable
        required
        @click="pickerTime = true"
        placeholder="请选择就医时间"
        :rules="[{ required: true, message: '请选择就医时间', trigger: 'onChange' }]"
      />
      <van-field
        v-model="form.diseaseDescription"
        :disabled="type === 'view'"
        autosize
        required
        label="疾病描述"
        type="textarea"
        placeholder="请填写疾病描述"
        :rules="[{ required: true, message: '请填写详细地址' }]"
      />
      <van-field
        v-model="form.outpatientDepartment"
        :disabled="type === 'view'"
        label="预约科室门诊"
        placeholder="请填写预约科室门诊"
      />
      <van-field
        v-model="form.remarks"
        :disabled="type === 'view'"
        autosize
        label="备注"
        type="textarea"
        placeholder="请填写备注"
      />
      <van-popup v-model="pickerHospital" position="bottom">
        <van-picker
          title="预约医院"
          :columns="
            hospitalList.map((item) => {
              return item.hospitalName;
            })
          "
          @confirm="onConfirmHospital"
          show-toolbar
          @cancel="pickerHospital = false"
        />
      </van-popup>
      <van-popup v-model="pickerTime" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="datetime"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onConfirm"
          @cancel="pickerTime = false"
        />
      </van-popup>
    </van-form>
    <van-button v-if="type === 'add'" block color="#0687D2" @click="$refs.form.submit()"
      >提交</van-button
    >
    <van-button v-if="type === 'edit'" block color="#0687D2" @click="$refs.form.submit()"
      >修改</van-button
    >
  </div>
</template>

<script>
import NavHeader from "@/components/NavHeader";
import Vue from "vue";
import { Form, Field, Button, Popup, Picker, DatetimePicker } from "vant";
import {
  mattersHospitalList,
  mattersGreenAdd,
  mattersGreenUpdate,
  mattersGet,
} from "@/api/policy";
import { getfullTime } from "@/utils/utils";

Vue.use(Form).use(Field).use(Button).use(Popup).use(Picker).use(DatetimePicker);

export default {
  components: { NavHeader },
  data() {
    let minDate = new Date().getTime() + 1000 * 3600 * 3;
    let maxDate = new Date().getTime() + 1000 * 3600 * 24 * 7;
    return {
      type: "",
      code: "",
      userInfo: {},
      pickerHospital: false,
      pickerTime: false,
      hospitalList: [],
      minDate: new Date(minDate),
      maxDate: new Date(maxDate),
      currentDate: new Date(),
      form: {
        hospital: "",
        hospitalCode: "", // 医院表code
        seeDoctorTime: "", // 就医时间
        diseaseDescription: "", // 疾病描述
        outpatientDepartment: "", // 预约科室门诊
        remarks: "", // 备注
        departmentCode: "",
        guideId: "",
        talentCode: "",
        name: "",
        phone: "",
        userId: "",
      },
    };
  },
  methods: {
    init() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      mattersGet({ appId: 1234, code: this.code, matterType: 3 }).then((res) => {
        this.$toast.clear();
        console.log(res);
        this.form.hospital = res.hospitalName;
        this.form.hospitalCode = res.hospitalCode;
        this.form.seeDoctorTime = res.seeDoctorTime;
        this.form.diseaseDescription = res.diseaseDescription;
        this.form.outpatientDepartment = res.outpatientDepartment;
        this.form.remarks = res.remarks;
      });
    },
    initHospital() {
      mattersHospitalList({ appId: 1234, hospitalType: 2 }).then((res) => {
        this.hospitalList = res;
      });
    },
    onSubmit() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      if (this.type === "add") {
        mattersGreenAdd({ appId: 1234, matterType: 3, ...this.form }).then((res) => {
          this.$toast.clear();
          this.$toast(res);
          setTimeout(() => {
            this.$router.go(-1);
          }, 500);
        });
      } else if (this.type === "edit") {
        mattersGreenUpdate({
          appId: 1234,
          code: this.code,
          hospitalCode: this.form.hospitalCode,
          seeDoctorTime: this.form.seeDoctorTime,
          diseaseDescription: this.form.diseaseDescription,
          outpatientDepartment: this.form.outpatientDepartment,
          remarks: this.form.remarks,
          name: this.form.name,
          phone: this.form.phone,
        }).then((res) => {
          this.$toast.clear();
          this.$toast(res);
          setTimeout(() => {
            this.$router.go(-1);
          }, 500);
        });
      }
    },
    onConfirmHospital(value, index) {
      this.form.hospital = value;
      this.form.hospitalCode = this.hospitalList[index].hospitalCode;
      this.pickerHospital = false;
    },
    onConfirm(date) {
      this.form.seeDoctorTime = getfullTime(date);
      this.pickerTime = false;
    },
  },
  created() {
    this.initHospital();
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    this.userInfo = JSON.parse(res) || {};
    this.form.departmentCode = this.$route.query.departmentCode;
    this.form.guideId = this.$route.query.guideId;
    this.form.talentCode = this.$route.query.talentCode;
    this.form.name = this.userInfo.realName;
    this.form.phone = this.userInfo.mobileNo;
    this.form.userId = this.userInfo.userId;
    this.code = this.$route.query.code;
    this.type = this.$route.query.type;
    if (this.code) {
      this.init();
    }
  },
};
</script>

<style lang="stylus" scoped>
.wrapper {
  .form {
    height calc(100vh - 173px)
    overflow-y: auto;
  }
}
</style>
