<template>
  <div class="apply">
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <van-form @submit="onSubmit" validate-trigger="onSubmit">
      <h3 class="van-doc-demo-block__title">基础信息</h3>
      <van-field
        v-model="fromData.phone"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        v-model="fromData.emil"
        type="emil"
        name="邮箱"
        label="邮箱"
        placeholder="邮箱"
        :rules="[{ required: true, message: '请填写邮箱' }]"
      />
      <div v-for="(item, index) in list" :key="index">
        <h3 class="van-doc-demo-block__title">{{ item.name }}</h3>
        <div v-for="(v, o) in item.children" :key="index + '-' + o">
          <van-field
            :name="v.name"
            :label="v.name"
            v-if="v.type === 0 && v.children && v.children.length"
          >
            <template #input>
              <van-checkbox-group
                v-model="fromData[v.aclId]"
                direction="horizontal"
              >
                <van-checkbox
                  :name="child.aclId"
                  v-for="child in v.children"
                  :key="child.aclId"
                  @click="ele => changeBox(ele, child.aclId, v.aclId)"
                  checked-color="#e42417"
                  >{{ child.name }}</van-checkbox
                >
              </van-checkbox-group>
            </template>
          </van-field>
          <van-field
            :name="v.name"
            :label="v.name"
            :placeholder="v.name"
            v-if="v.type !== 0"
            v-model="fromData[v.aclId]"
          >
          </van-field>
        </div>
      </div>

      <h3 class="van-doc-demo-block__title">其它</h3>
      <van-field
        v-model="fromData.subject"
        name="事由"
        label="事由"
        placeholder="如有事由请填写在此处"
      />
      <van-field
        v-model="fromData.range"
        name="授权期限"
        label="授权期限"
        placeholder="授权期限"
        @click="show = !show"
        :rules="[{ required: true, message: '请填写授权期限' }]"
      />
      <h3 class="van-doc-demo-block__title">审核意见</h3>
      <van-field
        v-model="fromData.department"
        name="部门负责人"
        label="部门负责人"
        placeholder="在此处填写意见"
      />
      <van-field
        v-model="fromData.security"
        name="安全小组"
        label="安全小组"
        placeholder="在此处填写意见"
      />
      <van-field
        v-model="fromData.leader"
        name="集团领导"
        label="集团领导"
        placeholder="在此处填写意见"
      />
      <div style="margin: 16px;">
        <van-button
          color="#e42417"
          round
          block
          type="info"
          native-type="submit"
        >
          提交
        </van-button>
      </div>
    </van-form>
    <van-calendar v-model="show" type="range" @confirm="onConfirm" />
  </div>
</template>

<script>
import { jurisdictionTree } from "@/api/apply/index.js";

import {
  DropdownMenu as vanDropdownMenu,
  DropdownItem as vanDropdownItem,
  Form as vanForm,
  Button as vanButton,
  Field as vanField,
  Checkbox as vanCheckbox,
  CheckboxGroup as vanCheckboxGroup,
  Calendar as vanCalendar
} from "vant";
import "vant/lib/dropdown-menu/style";
import "vant/lib/dropdown-item/style";
import "vant/lib/checkbox/style";
import "vant/lib/calendar/style";
import "vant/lib/checkbox-group/style";
import "vant/lib/form/style";
import "vant/lib/button/style";
import "vant/lib/field/style";

import { isIphone, isAndroid } from "@/utils/isTerminal.js";
import { setToken } from "@/utils/common.js";

export default {
  name: "app",
  data: function() {
    return {
      value1: 0,
      value2: "a",
      show: false,
      list: [],
      test: [],
      fromData: {
        department: "",
        security: "",
        subject: "",
        phone: "",
        emil: "",
        leader: "",
        range: ""
      },
      option1: [
        { text: "申请部门", value: 0 },
        { text: "财务部", value: 1 },
        { text: "广告部", value: 2 }
      ],
      option2: [
        { text: "申请人", value: "a" },
        { text: "张二蛋", value: "b" },
        { text: "张一蛋", value: "c" }
      ]
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    formatDate(date) {
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let m = month > 9 ? month : "0" + month;
      let d = day > 9 ? day : "0" + day;
      return `${m}/${d}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.$set(
        this.fromData,
        "range",
        `${this.formatDate(start)} - ${this.formatDate(end)}`
      );
    },
    formatDateType(li) {
      for (let i = 0; i < li.length; i++) {
        const v = li[i];
        if (v.children && v.children.length) {
          this.fromData[v.aclId] = [];
          this.formatDateType(v.children);
        } else {
          this.fromData[v.aclId] = "";
        }
      }
    },
    changeBox() {
      this.fromData = JSON.parse(JSON.stringify(this.fromData));
    }
  },
  mounted() {
    window.voteNext = () => {
      var payload = {
        type: "JSbridge",
        functionName: "getUserInfo",
        arguments: {}
      };
      if (isIphone) this.$user = window.prompt(JSON.stringify(payload)) || {};
      if (isAndroid && window.H5Listener)
        this.$user = window.H5Listener.getUserInfo() || {};
      this.$user = JSON.parse(this.$user);
      if (this.$user) setToken(this.$user.accessToken);
      else setToken("");
    };
    // window.voteNext();
    jurisdictionTree(1).then(r => {
      let list = r.children || [];
      this.formatDateType(list);
      this.list = list;
    });
  },
  beforeDestroy: function() {},
  components: {
    vanDropdownMenu,
    vanDropdownItem,
    vanField,
    vanButton,
    vanCheckbox,
    vanCheckboxGroup,
    vanCalendar,
    vanForm
  }
};
</script>
<style lang="scss">
$themeColor: #e42417;

.apply {
  background-color: #f7f8fa;
  min-height: 100%;

  .van-doc-demo-block__title {
    margin: 0;
    padding: 32px 16px 16px;
    color: rgba(69, 90, 100, 0.6);
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
  }
  .van-checkbox {
    margin-bottom: 2px;
  }
}
</style>
