<template>
  <div>
    <title-bar title="新增提醒" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div class="form-content v-scroller">
      <van-form @submit="onSubmit">
        <table>
          <tr>
            <td>
              <van-field readonly clickable required label="工作类型:" :value="value" placeholder="请选择" @click="showPicker = true" />
              <van-popup v-model="showPicker" style="width: 30%" round position="center">
                <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm_type" />
              </van-popup>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <van-field v-model="abstract" name="内容摘要" label="内容摘要:" placeholder="请输入您要安排的事项" />
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <div style="display: flex; align-items: center">
                <div style="width: 13%; padding-left: 1.5%; font-size: 16px; color: #999999">全天事件:</div>
                <div style="height: 1%"><van-switch active-color="#fd5065" v-model="checked" /></div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <van-field readonly clickable required name="DatetimePickerStart" :value="value_start_time" label="开始提示时间:" placeholder="开始提示时间" @click="showPicker_start_time = true" />
              <van-popup v-model="showPicker_start_time" style="width: 30%; border-radius: 15px" position="center">
                <van-datetime-picker @cancel="showPicker_start_time = false" @confirm="onConfirm_start_time" v-model="current_date_start" title="选择时间" />
              </van-popup>
            </td>
            <td>
              <van-field readonly clickable required name="DatetimePickerFinish" :value="value_finish_time" label="结束提示时间:" placeholder="结束提示时间" @click="showPicker_finish_time = true" />
              <van-popup v-model="showPicker_finish_time" style="width: 30%; border-radius: 15px" position="center">
                <van-datetime-picker @cancel="showPicker_finish_time = false" @confirm="onConfirm_finish_time" v-model="current_date_finish" title="选择时间" />
              </van-popup>
            </td>
          </tr>
          <tr>
            <td>
              <van-field readonly clickable name="DatetimePickerPlan" :value="value_plan_time" label="计划完成日期:" placeholder="计划完成日期" @click="showPicker_plan_time = true" />
              <van-popup v-model="showPicker_plan_time" style="width: 30%; border-radius: 15px" position="center">
                <van-datetime-picker @cancel="showPicker_plan_time = false" @confirm="onConfirm_plan_time" v-model="current_date_plan" title="选择时间" />
              </van-popup>
            </td>
            <td>
              <van-field readonly clickable name="DatetimePickerActual" :value="value_actual_time" label="实际完成日期:" placeholder="实际完成日期" @click="showPicker_actual_time = true" />
              <van-popup v-model="showPicker_actual_time" style="width: 30%; border-radius: 15px" position="center">
                <van-datetime-picker @cancel="showPicker_actual_time = false" @confirm="onConfirm_actual_time" v-model="current_date_actual" title="选择时间" />
              </van-popup>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <van-field v-model="message_content" rows="3" label="计划工作内容:" type="textarea" show-word-limit />
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <van-field v-model="message_condition" rows="3" label="实际执行情况:" type="textarea" show-word-limit />
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <van-field v-model="message_reason" rows="3" label="未完成理由:" type="textarea" show-word-limit />
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <van-field v-model="message_remark" rows="3" label="备注:" type="textarea" show-word-limit />
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <div class="submit-and-cancel" style="margin: 16px; display: flex; justify-content: center">
                <van-button round block type="info">取消</van-button>
                <van-button round block type="info" native-type="submit">提交</van-button>
              </div>
            </td>
          </tr>
        </table>
      </van-form>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import { Picker } from "vant";
import { Switch } from "vant";
import { DatetimePicker } from "vant";
import { Field } from "vant";

Vue.use(Field);

Vue.use(DatetimePicker);

Vue.use(Switch);

Vue.use(Picker);
/**
 * @Description 新增提醒
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:46
 */
@Component({
  name: "AddReminder",
  components: { TitleBar },
})
export default class AddReminder extends Vue {
  pageTitle = ""; // 页面标题

  onClick() {
    console.log(111111);
  }
  mounted() {
    this.pageTitle = this.$route.meta?.name;
  }
  value = "";
  showPicker = false;
  columns = ["内部管理", "上门催款", "电话催款", "拟定保全方案", "实施保全方案", "计划还款", "其他"];
  onConfirm_type(value: any) {
    this.value = value;
    this.showPicker = false;
  }
  abstract = "";

  checked = true;

  //开始时间
  value_start_time = "";
  showPicker_start_time = false;
  current_date_start = new Date();
  s = "";
  onConfirm_start_time(time: any) {
    this.value_start_time = time;
    this.showPicker_start_time = false;
  }
  //结束时间
  value_finish_time = "";
  showPicker_finish_time = false;
  current_date_finish = new Date();
  onConfirm_finish_time(time: any) {
    this.value_finish_time = time;
    this.showPicker_finish_time = false;
  }
  //计划完成时间
  value_plan_time = "";
  showPicker_plan_time = false;
  current_date_plan = new Date();
  onConfirm_plan_time(time: any) {
    this.value_plan_time = time;
    this.showPicker_plan_time = false;
  }
  //实际完成时间
  value_actual_time = "";
  showPicker_actual_time = false;
  current_date_actual = new Date();
  onConfirm_actual_time(time: any) {
    this.value_actual_time = time;
    this.showPicker_actual_time = false;
  }

  message_content = "";
  message_condition = "";
  message_reason = "";
  message_remark = "";
}
</script>

<style scoped lang="scss">
.form-content {
  width: 80%;
  margin: 0 auto;
}
table {
  width: 100%;
}
::v-deep .van-cell::after {
  border: 0;
}
::v-deep .van-field__control {
  border: 1px solid #999999;
}
::v-deep .van-field__label {
  margin-right: 0;
  width: 11%;
}
::v-deep .van-switch--on {
  .van-switch__node {
    transform: translateX(2em);
  }
}
::v-deep .van-field__control {
  height: 40px;
}
::v-deep .van-switch__node {
  width: 50%;
  height: 100%;
}
::v-deep .van-field__label span {
  line-height: 40px;
}
::v-deep .van-cell--clickable > div:nth-child(1) {
  width: 23%;
}
::v-deep .van-button--round {
  width: 15%;
  padding: 2.5% 0;
  margin: 0 1%;
}
::v-deep .van-button--round span {
  font-size: 16px;
}
.submit-and-cancel > button:nth-child(1) {
  background-color: white;
  color: #999999;
  border: 1px solid #999999;
}
.submit-and-cancel > button:nth-child(2) {
  background-color: #fd5065;
  border: 1px solid #fd5065;
}
</style>
