<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: 400px; height:36px"
            v-model="type"
          >
          </b-form-input>
        </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 department.paramsValue"
              :key="index"
              style="margin-top:4px"
              class="card-body"
              >
                <span>
                  {{ type }}
                </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: '',
        department: {
          _id: '',
          paramsValue: []
        }
      }
    },
    async mounted () {
      this.department = await this.lookupParam('department')
    },
    methods: {
      ...mapActions('paramsSetting', ['lookupParam', 'updateParam']),
      async addType () {
        var wasNull = false
        if (this.type === '') { wasNull = true }
        if (wasNull) alert('單位類別未輸入!')
        else {
          if (this.department.paramsValue.includes(this.type)) {
            alert('此類別已經存在!')
            this.type = ''
          } else {
            this.department.paramsValue.push(this.type)
            this.type = ''
            await this.updateParam({
              id: this.department._id,
              paramsValue: this.department.paramsValue
            })
          }
        }
      },
      async deleteType (data) {
        var yes = confirm('類別已再使用，確定刪除?')
        if (yes) {
          this.department.paramsValue.splice(data, 1)
          await this.updateParam({
            id: this.department._id,
            paramsValue: this.department.paramsValue
          })
        }
      }
    },
    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: 10px;
  }
  .container {
    /* margin-right: 20px; */
    width: 600px;
    height: 420px;
  }
  .card-body {
    padding: 5px;
  }
  .form-control {
    color: black !important;
  }
  </style>
  