<template>
<div class="container">
    <b-row>
      <b-col cols="2" style="margin-top: 10px">
        <span>類別名稱:</span>
      </b-col>
      <!-- 類別輸入框 -->
      <b-col cols="8" style="margin-left: -20px; margin-top: 5px">
        <b-form-input
          style="width: 380px; height:36px"
          v-model="type"
        >
        </b-form-input>
      </b-col>
    </b-row>
    <b-row>
      <b-col cols="2" style="margin-top: 10px">
        <span>類別顏色:</span>
      </b-col>
      <!-- 選擇顏色 -->
      <b-col cols="6" style="margin-left: -20px; margin-top: 5px">
        <b-form-input
          style="width: 320px; height:36px"
          v-model="color"
        >
        </b-form-input>
      </b-col>
      <b-col cols="2" style="margin-left: 20px">
        <input type="color" v-model="color"/>
      </b-col>
      <!-- 按鈕 -->
      <b-col cols="2">
          <b-button class="btn1" @click="addType">新增</b-button>
      </b-col>
    </b-row>
    <div style="margin-top: -20px">
    <div style="margin-top: 40px">類別列表</div>
    <hr style="border-top: 1px solid gray; margin-top: 0; " />
    </div>
    <!-- 類別列表 -->
    <div style="height: 290px; width: 100%; overflow: auto; margin-top: -20px">
      <ul
        class="list-group list-group-flush"
        style="list-style-type: none; font-weight: 600; font-size: 16px"
      >
        <b-card
          v-for="(type, index) in scheduleClassification.paramsItems"
          :key="index"
          style="margin-top:4px"
          class="card-body"
        >
        <span>
          <b-icon
            class="p-0 ml-2"
            aria-hidden="true"
            style="height: 16px; width: auto; border-radius: 50%"
            :style="type"
          ></b-icon> {{ type.name }}
        </span>
        <b-button
          size="sm"
          variant="danger"
          class="float-right"
          @click="deleteType(index)"
        >
          <b-icon icon="trash-fill"></b-icon>
        </b-button>
        </b-card>
      </ul>
    </div>
</div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  data () {
    return {
      type: '',
      checkType: '',
      color: '#000000',
      scheduleClassification: {
        _id: '',
        paramsItems: []
      }
    }
  },
  async mounted () {
    this.reloadClassificationList()
  },
  methods: {
    ...mapActions('paramsSetting', ['lookupParam', 'updateParamsItem']),
    async addType () {
      for (let scheduleType of this.scheduleClassification.paramsItems) {
        if (this.type === scheduleType.name) this.checkType = scheduleType.name
      }
      var wasNull = false
      if (this.type === '') { wasNull = true }
      if (wasNull) {
        alert('類別名稱未輸入!')
      } else {
        if (this.type === this.checkType) {
          alert('此類別名稱已經存在!')
          this.type = ''
        } else {
          this.scheduleClassification.paramsItems.push({
            name: this.type,
            backgroundColor: this.color
          })
          this.type = ''
          await this.updateParamsItem({
            id: this.scheduleClassification._id,
            paramsItems: this.scheduleClassification.paramsItems
          })
          alert('類別名稱 新增成功!')
        }
      }
    },
    async deleteType (data) {
      var yes = confirm('類別已再使用，確定刪除?')
      if (yes) {
        this.scheduleClassification.paramsItems.splice(data, 1)
        await this.updateParamsItem({
          id: this.scheduleClassification._id,
          paramsItems: this.scheduleClassification.paramsItems
        })
        alert('類別已刪除!')
      }
    },
    async reloadClassificationList () {
      this.scheduleClassification = await this.lookupParam('schedule_classification')
    }
  },
  computed: {
    ...mapState({
      currentUser: state => state.user.current
    })
  }
}
</script>

<style scoped>
.btn1 {
  background-color: rgb(75, 102, 255);
  font-size: 16px;
  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;
  float: center;
  text-align: justify;
  margin-top: 5px;
  margin-left: 0px;
}
.container {
/* margin-right: 20px; */
  width: 600px;
  height: 420px;
}
.card-body {
  padding: 5px;
}
.form-control {
  color: black !important;
}
input[type="color"]{
  width:40px;
  border:1px solid rgb(255, 255, 255);
  margin-top:2px;
  padding:3px !important;
  height:40px;
  border-radius: 15%;
  background-color: #ffffff;
  cursor: pointer;
}
</style>
