<template>
  <div class="container">
    <!-- 編輯事件 -->
    <div class="LeftContainer">
      <b-row>
        <b-col class="label_col" style="padding: 10px 15px 0 30px" cols="3">
          <span>起始日期:</span>
        </b-col>
        <b-col cols="9">
          <div style="margin-top: 10px">
            <span style="font-weight: normal; color: black">{{
              schedule.start
            }}</span>
          </div>
        </b-col>
      </b-row>
      <b-row style="margin-top: 12px">
        <b-col class="label_col" style="padding: 10px 15px 0 30px" cols="3">
          <span>結束日期:</span>
        </b-col>
        <b-col cols="9">
          <div style="margin-top: 10px">
            <span style="font-weight: normal; color: black">{{
              schedule.end
            }}</span>
          </div>
        </b-col>
      </b-row>
      <b-row style="margin-top: 12px">
        <b-col class="label_col" style="padding: 10px 15px 0 30px" cols="3">
          <span>標題:</span>
        </b-col>
        <b-col cols="9">
          <div style="margin-top: 10px">
            <span style="font-weight: normal; color: black">
              <span
                v-show="schedule.chronology === true"
                style="font-weight: normal; color: red"
                >大事紀</span
              >
              {{ schedule.title }}
            </span>
          </div>
        </b-col>
      </b-row>
      <b-row style="margin-top: 12px">
        <b-col class="label_col" style="padding: 10px 15px 0 30px" cols="3">
          <span>類別:</span>
        </b-col>
        <b-col cols="7">
          <div style="margin-top: 10px">
            <span style="font-weight: normal; color: black; font-size: 16px">
              {{ schedule.scheduleType }}
            </span>
          </div>
        </b-col>
      </b-row>
      <b-row style="margin-top: 18px">
        <b-col class="label_col" style="padding-left: 30px" cols="3">
          <span>說明:</span>
        </b-col>
        <b-col cols="9">
          <div style="margin-top: 0px">
            <span style="font-weight: normal; color: black">
              {{ schedule.thing }}
            </span>
          </div>
        </b-col>
      </b-row>
    </div>
    <!-- 照片 -->
    <div class="RightContainer" v-show="this.schedule.chronology === true">
      <span style="color: black"><span style="font-weight: 900;">圖片說明</span>&nbsp;&nbsp;
        <span style="color: red; font-size: 14px;">*僅限上傳6張照片</span>
      </span>
      <hr style="margin-top: 10px; margin-bottom: 10px;" />
      <div class="pb-2" style="overflow-y: auto; overflow-x: hidden; height: 430px;">
        <div
          v-for="img in schedule.imageFile"
          :key="img._id"
          style="margin-top: 3px"
        >
          <b-row style="padding-top: 10px; padding-right: 15px">
            <b-col cols="4">
              <lyztw-image-container :data="img" size="130" />
            </b-col>
            <b-col cols="8">
              <div style="margin-left: -18px;">
                <b-form-textarea
                  v-model="img.description"
                  rows="6"
                  no-resize
                  style="
                    width: 100%;
                    height: 110px;
                    padding: 8px 12px 10px;
                    font-size: 16px;
                  "
                  :disabled="isEdit === false"
                />
              </div>
            </b-col>
          </b-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  props: ['getContent'],
  data () {
    return {
      eventCategory: [],
      isEdit: false
    }
  },
  async mounted () {
    this.eventCategory = await this.$store.dispatch(
      'paramsSetting/lookupParam',
      'schedule_classification'
    )
  },
  methods: {
    ...mapActions('schedule', ['deleteSchedule', 'patch']),
    ...mapActions('paramsSetting', ['lookupParam'])
  },
  computed: {
    ...mapState({
      schedule: (state) => state.schedule.Schedule
    }),
    scheduleType: {
      get () {
        return this.schedule.scheduleType
      },
      set (val) {
        this.schedule.scheduleType = val
        for (let ele of this.eventCategory.paramsItems) {
          if (ele.name === val) {
            this.schedule.color = ele.backgroundColor
          }
        }
      }
    }
  }
}
</script>

<style scoped>
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

::-webkit-scrollbar {
  width: 3px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background: #888;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.form-control {
  color: black !important;
}
.form-control:disabled {
  background-color: #ffffff;
  background: none;
  border: 0;
  color: black;
}

.custom-select {
  color: black !important;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.active-tab-class {
  background-color: #000000;
}
.form-control {
  color: black !important;
}
.btn {
  background-color: rgb(75, 102, 255);
  font-size: 16px;
  margin-top: 15px;
  margin-left: 15px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
}
.btn:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(49, 68, 175);
  transform: translateY(1);
}
.btn1 {
  background-color: rgb(255, 75, 75);
  font-size: 16px;
  margin-top: 15px;
  margin-left: 15px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
}
.btn1:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(175, 49, 49);
  transform: translateY(1);
}
.container {
  margin-right: 20px;
  width: auto;
  height: auto;
  padding: 0px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  padding-right: 0px;
  /* flex-shrink: 0; */
}
.LeftContainer {
  width: 600px;
  height: 520px;
  /* flex-shrink: 0; */
}
.RightContainer {
  width: 650px;
  height: 510px;
  background: rgba(98, 113, 221, 0.1);
  padding: 8px 20px;
  border-radius: 5px;
}
</style>
