<template>
    <div>
        <div class="detailItem">
            <div class="imgparent">
                <van-nav-bar
                    title="填写请假信息"
                    left-text="返回"
                    left-arrow
                    @click-left="onClickLeft"
                />
            </div>
            <div class="formtr">
                <van-form @submit="onSubmit">
                    <van-field
                        readonly
                        clickable
                        name="picker"
                        :value="value"
                        label="部门"
                        placeholder="点击选择部门"
                        @click="showPicker = true"
                        class="stru"
                    />
                    <van-popup
                        v-model="showPicker"
                        position="bottom"
                    >
                        <van-picker
                            show-toolbar
                            :columns="columns"
                            @confirm="onConfirm"
                            @cancel="showPicker = false"
                        />
                    </van-popup>
                    <van-field
                        readonly
                        clickable
                        name="picker"
                        :value="valuetao"
                        label="请假类型"
                        placeholder="点击选择请假类型"
                        @click="showPickertwo = true"
                        class="stru"
                    />
                    <van-popup
                        v-model="showPickertwo"
                        position="bottom"
                    >
                        <van-picker
                            show-toolbar
                            :columns="columnstwo"
                            @confirm="onConfirmtwo"
                            @cancel="showPickertwo = false"
                        />
                    </van-popup>
                    <van-field
                        readonly
                        clickable
                        name="datetimePicker"
                        :value="valuestartime"
                        label="开始时间"
                        placeholder="点击选择开始时间"
                        @click="showPickerstr = true"
                        class="stru"
                    />
                    <van-popup
                        v-model="showPickerstr"
                        position="bottom"
                    >
                        <van-datetime-picker
                            type="datetime"
                            v-model="currentDate"
                            @confirm="onConfirmstatime"
                            @cancel="showPickerstr = false"
                            :min-date="minDate"
                            :max-date="maxDate"
                        />
                    </van-popup>
                    <van-field
                        readonly
                        clickable
                        name="datetimePicker"
                        :value="valueendtime"
                        label="结束时间"
                        placeholder="点击选择结束时间"
                        @click="showPickerend = true"
                        class="stru"
                    />
                    <van-popup
                        v-model="showPickerend"
                        position="bottom"
                    >
                        <van-datetime-picker
                            type="time"
                            @confirm="onConfirmsendtime"
                            @cancel="showPickerend = false"
                        />
                    </van-popup>
                    <van-field
                        v-model="message"
                        rows="2"
                        autosize
                        label="请假事由"
                        type="textarea"
                        maxlength="50"
                        placeholder="请输入请假事由"
                        show-word-limit
                        class="stru"
                    />
                    <van-field
                        name="uploader"
                        label="文件上传"
                        class="stru"
                    >
                        <template #input>
                            <van-uploader v-model="uploader" />
                        </template>
                    </van-field>
                    <div style="margin: 16px;">
                        <van-button
                            round
                            block
                            type="info"
                            native-type="submit"
                        >提交</van-button>
                    </div>
                </van-form>
            </div>

        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      valuetao: "",
      valuestartime: "",
      valueendtime: "",
      columns: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
      columnstwo: ["杭州1", "宁波1", "温州1", "嘉兴1", "湖州1"],
      showPicker: false,
      showPickertwo: false,
      showPickerstr: false, //开始时间
      showPickerend: false, //结束时间
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      message: "",
      uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
    };
  },
  props: ["detailitem"],

  methods: {
    onClickLeft() {},
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    // 请假类型
    onConfirmtwo(value) {
      this.valuetao = value;
      this.showPickertwo = false;
    },
    // 开始时间
    onConfirmstatime(value) {
      this.valuestartime = value;
      this.showPickerstr = false;
    },
    // 结束时间
    onConfirmsendtime(value) {
      this.valueendtime = value;
      this.showPickerend = false;
    },
    // 提交
    onSubmit(values) {
      console.log("submit", values);
    }
  }
};
</script>

<style lang="less">
.formtr {
  .stru {
    .van-field__control {
      text-align: right;
    }
  }

  .van-cell:not(:last-child)::after {
    border-bottom: 0;
  }
  .van-field__control--custom{
      justify-content: flex-end;
  }
  .van-cell{
      font-weight: 500;
      color: #343434;
      padding: 5.6vw 4.267vw;
  }
}
</style>


<style scoped lang="less">
.detailItem {
 background-color:#fff;
 height: 100vh;
  p {
    font-size: 3.333vw;
    padding: 0.833vw 0;
  }
  .imgparent {
    position: relative;
    .bottom {
      padding: 0 2.778vw;
      margin-bottom: 1.389vw;
      position: absolute;
      bottom: 0.556vw;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
      justify-content: space-between;
      color: white;
      display: flex;
      left: 0;
      right: 0;
    }
  }
}
.formtr {
  .stru {
    .van-field__control {
      text-align: right;
    }
  }
}
</style>