<template>
  <span>
    <div class="row body">
      <div class="col-md-3"><b>種類</b></div>
      <div class="col">
        <div class="form-check">
          <input class="form-check-input" name="isPost" type="radio" id="type-post" :value="1" v-model="choice">
          <label class="form-check-label" for="type-post">ポスト</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" name="isPost" type="radio" id="type-page" :value="0" v-model="choice">
          <label class="form-check-label" for="type-page">ページ</label>
        </div>
      </div>
    </div>
    <div v-if="choice === 1">
      <div class="row body">
        <div class="col-md-3"><b>公開設定</b></div>
        <div class="col">
          <select id="public_status" name="public_status" class="form-control" v-model="pub">
            <option :value="0">公開</option>
            <option :value="1">スケジュールを設定</option>
            <option :value="2">限定公開</option>
            <option :value="3">非公開</option>
            <option :value="4">下書き</option>
          </select>
        </div>
      </div>
      <div class="row body" v-if="pub === 1">
        <div class="col-md-3"><b>公開日時</b></div>
        <div class="col">
          <date-picker name="publish_date" v-model="pubdate" :config="options" id="publish_date" />
        </div>
      </div>
    </div>
    <div class="row body" v-else>
      <div class="col-md-3"><b>メニュー</b></div>
      <div class="col">
        <div class="form-group form-check">
          <input type="checkbox" name="isMenu" class="form-check-input" id="menu" v-model="menu">
          <label class="form-check-label" for="menu">メニューに表示する</label>
        </div>
      </div>
    </div>
  </span>
</template>

<script>
  import datePicker from 'vue-bootstrap-datetimepicker';
  import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css';

  export default {
    components: { datePicker },
    props: { c: String, p: String, m: null, d: null },
    data: function () {
      return {
        options: { format: 'YYYY年MM月DD日 HH:mm:ss', locale: 'ja', useCurrent: true, showClear: true, showClose: true },
        choice: Number(this.c),
        pub: Number(this.p),
        menu: this.m,
        pubdate: this.d
      }
    },
    watch: {
      choice: function (v) {
        this.choice = Number(this.choice);
        if (this.choice === 0) this.pub = 0;
        else this.menu = false;
      },
      pub: function (v) {
        this.pub = Number(this.pub);
        if (this.pub !== 1) this.pubdate = null;
      }
    }
  }
</script>
