<template>
  <div id="joinParty" class="app">
    <van-sticky :offset-top="0">
      <van-nav-bar title="入党" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="sex" direction="horizontal">
            <van-radio name="1">男</van-radio>
            <van-radio name="0">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        readonly
        clickable
        name="picker"
        :value="nation"
        label="民族"
        placeholder="点击选择民族"
        @click="showPicker = true"
      />
      <van-field
        readonly
        clickable
        name="picker"
        :value="birth"
        label="生日"
        placeholder="点击选择生日"
        @click="showBirth = true"
      />
      <van-field
        v-model="ID"
        name="身份证号"
        label="身份证号"
        type="digit"
        placeholder="身份证号"
        :rules="[{ required: true, message: '请填写身份证号' }]"
      />
      <van-field
        v-model="phone"
        type="tel"
        label="联系方式"
        placeholder="联系方式"
        :rules="[{ required: true, message: '请填联系方式' }]"
      />
      <van-field
        v-model="add"
        label="户籍地址"
        :rules="[{ required: true, message: '请填户籍地址' }]"
        placeholder="户籍地址"
      />
      <van-field
        readonly
        clickable
        name="picker"
        :value="education"
        label="文化程度"
        placeholder="点击选择学历"
        @click="showEducation = true"
      />
      <van-field
        readonly
        clickable
        name="picker"
        :value="occupation"
        label="职业"
        placeholder="点击选择职业"
        @click="showOccupation = true"
      />
      <van-field
        readonly
        clickable
        name="picker"
        :value="timeWork"
        label="参加工作时间"
        placeholder="点击选择时间"
        @click="showTimeWork = true"
      />
      <van-field
        v-model="post"
        name="职务"
        label="职务"
        placeholder="职务"
        :rules="[{ required: true, message: '请填写职务' }]"
      />
      <van-field
        v-model="nowAdd"
        name="现住地"
        label="现住地"
        placeholder="现住地"
        :rules="[{ required: true, message: '请填写现住地' }]"
      />
      <van-field
        readonly
        clickable
        name="picker"
        :value="branch"
        label="选择支部"
        placeholder="点击选择支部"
        @click="showBranch = true"
      />
      <van-field
        v-model="basic"
        rows="2"
        autosize
        label="备注"
        type="textarea"
        placeholder="备注"
        :rules="[{ required: true, message: '请填备注' }]"
        show-word-limit
      />
      <div style="margin: 16px;">
        <van-button round block type="danger" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    <!-- 选择民族 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="$nation"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <!-- 选择生日 -->
    <van-popup v-model="showBirth" position="bottom">
      <van-datetime-picker
        v-model="oribirth"
        @cancel="birthCancel"
        @confirm="birthFunc"
        :min-date="minDate"
        type="date"
        title="选择生日"
      />
    </van-popup>
    <!-- 选择学历 -->
    <van-popup v-model="showEducation" position="bottom">
      <van-picker
        show-toolbar
        :columns="$education"
        @confirm="onEducation"
        @cancel="showEducation = false"
      />
    </van-popup>
    <!-- 选择职业 -->
    <van-popup v-model="showOccupation" position="bottom">
      <van-picker
        show-toolbar
        :columns="$occupation"
        @confirm="onOccupation"
        @cancel="showOccupation = false"
      />
    </van-popup>
    <!-- 选择开始工作日期 -->
    <van-popup v-model="showTimeWork" position="bottom">
      <van-datetime-picker
        v-model="oriTimeWork"
        @cancel="TimeWorkCancel"
        @confirm="TimeWorkFunc"
        :min-date="minDate"
        type="date"
        title="选择日期"
      />
    </van-popup>
    <!-- 选择支部 -->
    <van-popup v-model="showBranch" position="bottom">
      <van-cascader
        v-model="branch"
        title="请选择所在地区"
        :options="partyList"
        :field-names="{
          text: 'name',
          value: 'id',
          children: 'children'
        }"
        @close="showBranch = false"
        @finish="branchFunc"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  NavBar as vanNavBar,
  Button as vanButton,
  Sticky as vanSticky,
  Field as vanField,
  Radio as vanRadio,
  Popup as vanPopup,
  Picker as vanPicker,
  DatetimePicker as vanDatetimePicker,
  RadioGroup as vanRadioGroup,
  Form as vanForm,
  Cascader as vanCascader
} from "vant";
import "vant/lib/nav-bar/style";
import "vant/lib/button/style";
import "vant/lib/popup/style";
import "vant/lib/picker/style";
import "vant/lib/radio/style";
import "vant/lib/radio-group/style";
import "vant/lib/form/style";
import "vant/lib/sticky/style";
import "vant/lib/field/style";
import "vant/lib/cascader/style";
import { list } from "@/api/party/party.js";
import { toTree } from "@/utils/common.js";
export default {
  name: "app",
  data: function() {
    return {
      minDate: new Date("1970-01-01 00:00:00"),
      showTimeWork: false,
      showOccupation: false,
      showEducation: false,
      showBirth: false,
      showPicker: false,
      showBranch: false,
      branch: "",
      selectBrach: [],
      oriTimeWork: "",
      education: "",
      post: "",
      occupation: "",
      timeWork: "",
      username: "",
      nation: "",
      birth: "",
      ID: "",
      oribirth: "",
      phone: "",
      add: "",
      nowAdd: "",
      sex: "1",
      basic: "",
      partyList: []
    };
  },
  methods: {
    onSubmit() {
      list().then(res => {
        console.log(res);
        this.onClickLeft();
      });
    },
    onClickLeft() {
      history.go(-1);
    },
    onConfirm(value) {
      this.nation = value;
      this.showPicker = false;
    },
    onEducation(val) {
      this.showEducation = false;
      this.education = val;
    },
    onOccupation(val) {
      this.showOccupation = false;
      this.occupation = val;
    },
    birthFunc(val) {
      this.showBirth = false;
      let time = new Date(val);
      this.birth = time.getFullYear() + "-";
      let month = time.getMonth() + 1;
      let day = time.getDate();
      this.birth += month > 9 ? month : "0" + month;
      this.birth += "-";
      this.birth += day > 9 ? day : "0" + day;
    },
    branchFunc(val) {
      if (!val.selectedOptions.length) {
        this.branch = "";
        this.showBranch = false;
        return;
      }
      this.selectBrach = val.selectedOptions;
      this.branch = val.selectedOptions
        .map(v => {
          return v.name;
        })
        .join("-");
      this.showBranch = false;
    },
    birthCancel() {
      this.showBirth = false;
      this.birth = "";
    },
    TimeWorkFunc(val) {
      this.showTimeWork = false;
      let time = new Date(val);
      this.timeWork = time.getFullYear() + "-";
      let month = time.getMonth() + 1;
      let day = time.getDate();
      this.timeWork += month > 9 ? month : "0" + month;
      this.timeWork += "-";
      this.timeWork += day > 9 ? day : "0" + day;
    },
    TimeWorkCancel() {
      this.showTimeWork = false;
      this.timeWork = "";
    }
  },
  mounted() {
    list().then(res => {
      let list = res || [];
      this.partyList = toTree(list, {
        pidKey: "parentId",
        idKey: "id",
        rootId: 1
      });
    });
  },
  beforeDestroy: function() {},
  components: {
    vanSticky,
    vanNavBar,
    vanButton,
    vanForm,
    vanField,
    vanPopup,
    vanRadio,
    vanPicker,
    vanDatetimePicker,
    vanRadioGroup,
    vanCascader
  }
};
</script>
<style lang="scss">
#joinParty {
  padding-bottom: 2em;
}
</style>
