<template>
    <div>
        <div class="detailItem">
            <div class="imgparent">
                <van-nav-bar
                    title="待审批"
                    left-text="返回"
                    left-arrow
                    @click-left="onClickLeft"
                />
            </div>
            <div class="approva_header">
                <van-notice-bar
                    color="#1989fa"
                    background="#fff"
                    left-icon="volume-o"
                >
                    技术是开发它的人的共同灵魂。
                </van-notice-bar>
            </div>
            <div>
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                >
                    <div class="approba_nave" v-for="(item,index) in list" :key="index">
                        <p>
                            <span class="soei"><i>王明</i>的请假申请</span>
                            <span>2021-04-24</span>
                        </p>
                        <p>请假类型:事假</p>
                        <p>开始时间：2021-04-25 13:00</p>
                        <p>结束时间：2021-04-25 18:00</p>
                    </div>
                </van-list>
            </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" }],
      list: [],
      loading: false,
      finished: false,
    };
  },
  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);
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
  }
};
</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;
    }
  }
  .approba_nave {
    border-bottom: 0.267vw solid #dadada;
    margin: 16px 16px;
    padding: 16px 0;
    p {
      font-size: 2.667vw;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
    }
    p:nth-child(1) {
      display: flex;
      justify-content: space-between;
      margin-bottom: 2.133vw;
      i {
        font-style: normal;
        font-weight: 700;
      }
      .soei {
        font-size: 3.733vw;
        font-family: PingFang SC;
        font-weight: 400;
        color: #343434;
      }
      span:nth-child(2) {
        color: #aaa;
        font-weight: 500;
      }
    }
  }
}
.approva_header {
  box-shadow: 0vw 0.8vw 0.533vw 0vw rgba(218, 218, 218, 0.35);
}
</style>