<template>
  <div class="borrow-apply">
    <van-form>
      <van-field
        class="background"
        v-model="applyName"
        required
        label="申请人"
        placeholder="请输入申请人"
        :rules="[{ required: true, message: '申请人不能为空' }]"
      />
      <van-field
        class="background"
        v-model="knwlName"
        label="知识名称"
        placeholder="请输入知识名称"
      />
      <van-field
        class="background"
        v-model="knwlPath"
        label="知识路径"
        placeholder=""
      />
      <van-field
        class="background"
        v-model="admin"
        label="管理员"
        placeholder=""
      />
      <van-field-select
        class="border"
        label="借阅控制"
        required
        placeholder="请选择"
        v-model="control"
        :columns="controlOption"
      />
      <van-field
        v-show="showReadTimes"
        class="border"
        v-model="readTimes"
        required
        label="阅读次数"
        placeholder=""
        :rules="[{ required: true, message: '不能为空' }]"
      />
      <div v-show="showDate">
        <van-field-date
          class="border"
          v-model="startDate"
          :minDate="minDate"
          :maxDate="maxDate"
          type="date"
          required
          label="开始日期"
          placeholder="请选择日期"
        />
        <van-field-date
          class="border"
          v-model="endDate"
          required
          label="结束日期"
          type="date"
          placeholder="请选择日期"
        />
      </div>
      <van-field
        class="border"
        v-model="remarks"
        required
        :autosize="{ maxHeight: 100, minHeight: 100 }"
        type="textarea"
        label="备注"
        placeholder=""
      />
      <div class="footer">
        <!--<van-button round block type="info" native-type="submit">
          提交
        </van-button>-->
        <van-button type="danger">作废</van-button>
        <van-button plain type="info" @click="onSave">保存</van-button>
        <van-button type="info" @click="onHandle">办理</van-button>
        <van-button type="default">更多</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
  import vanFieldSelect from '@/components/fieldSelect'
  import vanFieldDate from '@/components/fieldDate'
  export default {
    name: 'borrow-approve',
    components: {
      vanFieldSelect,
      vanFieldDate
    },
    data () {
      return {
        applyName: '司马懿',
        knwlName: 'AWS访问连接池参数调整',
        knwlPath: '知识目录 > 公司 > 重要文件',
        admin: '张飞',
        control: '阅读次数',
        controlOption: ['阅读次数', '有效日期'],
        showReadTimes: true,
        readTimes: '3次',
        showDate: false,
        startDate: '',
        endDate: '',
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        remarks: '',
        id: 1
      }
    },
    methods: {
      onSave (values) {
        console.log('submit', values)
      },
      onHandle () {
        this.$router.push({
          name: 'borrow-approve',
          params: {
            id: this.id
          }
        })
      }
    },
    watch: {
      control: function () {
        if (this.control === '阅读次数') {
          this.showReadTimes = true
          this.showDate = false
        } else {
          this.showReadTimes = false
          this.showDate = true
        }
      }
    }
  }
</script>

<style scoped>
  .borrow-apply {
    height: 100%;
  }

  .footer {
    padding: 12px;
    position: fixed;
    border-top: 0.33px solid #e9e9e9;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 1;
  }

  .footer .van-button {
    height: 38px;
    line-height: 38px;
    width: calc(100% / 4 - 12px);
    margin-right: 12px;
    border-radius: 2px;
    padding: 0 !important;
  }

  .footer .van-button:last-child {
    margin-right: 0;
  }
</style>
