<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="range" 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="timeWork"
        label="转出时间"
        placeholder="点击选择时间"
        @click="showTimeWork = true"
      />
      <van-field
        v-model="branch"
        name="转入支部"
        label="转入支部"
        v-if="range == '0'"
        placeholder="点击输入支部"
        :rules="[{ required: true, message: '请输入支部名称' }]"
      />
      <van-field
        readonly
        clickable
        name="picker"
        v-else
        :value="branch"
        label="转入支部"
        placeholder="点击选择支部"
        @click="showBranch = true"
      />
      <van-field
        v-model="reason"
        rows="2"
        autosize
        label="转出原因"
        type="textarea"
        placeholder="转出原因"
        :rules="[{ required: true, message: '请填转出原因' }]"
        show-word-limit
      />
      <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="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,
  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/radio/style";
import "vant/lib/radio-group/style";
import "vant/lib/form/style";
import "vant/lib/datetime-picker/style";
import "vant/lib/sticky/style";
import "vant/lib/field/style";
import "vant/lib/cascader/style";
import { list, upParty } from "@/api/party/party.js";
import { toTree, getUserInfo } from "@/utils/common.js";
export default {
  name: "app",
  data: function() {
    return {
      minDate: new Date("1970-01-01 00:00:00"),
      showTimeWork: false,
      showBranch: false,
      branch: "",
      select: [],
      oriTimeWork: "",
      timeWork: "",
      username: getUserInfo().userName || "",
      range: "1",
      basic: "",
      reason: "",
      partyList: []
    };
  },
  methods: {
    onSubmit() {
      let select = this.select[this.select.length - 1] || {};
      upParty({
        organId: select.id,
        username: this.username,
        range: this.range,
        timeWork: this.timeWork,
        basic: this.basic,
        reason: this.reason
      }).then(() => {
        this.onClickLeft();
      });
    },
    onClickLeft() {
      history.go(-1);
    },
    branchFunc(val) {
      if (!val.selectedOptions.length) {
        this.branch = "";
        this.showBranch = false;
        return;
      }
      this.select = val.selectedOptions;
      this.branch = val.selectedOptions
        .map(v => {
          return v.name;
        })
        .join("-");
      this.showBranch = false;
    },
    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,
    vanDatetimePicker,
    vanRadioGroup,
    vanCascader
  }
};
</script>
<style lang="scss">
#joinParty {
  padding-bottom: 2em;
}
</style>
