<template>
  <div>
      <b-row>
        <span>公司名稱</span>
        <multiselect
            style="width: 95%"
            v-model="directory.company"
            tag-placeholder="加入欄位"
            caret="openSelect"
            placeholder="請輸入或選擇廠商"
            deselect-label="已選擇"
            :options="companies.paramsValue"
            :multiple="false"
            :taggable="true"
            @tag="addTagCompany"
            selectLabel="請選擇"
            selectedLabel="已選擇"
            deselectLabel="取消選擇"
          >
          </multiselect>
      </b-row>
      <b-row>
          <span>標案組織(非必填)</span>
          <b-form-input
              id="input-lg"
              style="width: 95%"
              v-model="directory.projectTitle"
            ></b-form-input>
      </b-row>
      <b-row>
          <span>計畫職稱</span>
          <b-form-input
              id="input-lg"
              style="width: 95%"
              v-model="directory.title"
            ></b-form-input>
      </b-row>
      <b-row>
          <span>人員名稱</span>
          <b-form-input
              id="input-lg"
              style="width: 95%"
              v-model="directory.name"
            ></b-form-input>
      </b-row>
      <b-row>
          <span>聯絡電話</span>
          <b-form-input
              id="input-lg"
              style="width: 95%"
              v-model="directory.contactNumber"
            ></b-form-input>
      </b-row>
      <b-row>
          <span>Email</span>
          <b-form-input
              id="input-lg"
              style="width: 95%"
              v-model="directory.email"
            ></b-form-input>
      </b-row>
      <b-row>
          <span>Gmail</span>
          <b-form-input
              id="input-lg"
              style="width: 95%"
              v-model="directory.gmail"
            ></b-form-input>
      </b-row>
      <b-row>
          <span>LINE ID</span>
          <b-form-input
              id="input-lg"
              style="width: 95%"
              v-model="directory.line"
            ></b-form-input>
      </b-row>
      <b-row>
          <span>備註</span>
          <b-form-input
              id="input-lg"
              style="width: 95%"
              v-model="directory.remark"
            ></b-form-input>
      </b-row>

    <div class="btns2" style="float: right;padding-top: 15px">
        <b-button class="btn" @click="addOne"> 新增 </b-button>
        <b-button class="btn" style="margin-left:10px" @click="closeModal"> 取消 </b-button>
    </div>

  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.min.css'
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      directory: {
        projectTitle: '',
        line: '',
        company: '',
        name: '',
        title: '',
        contactNumber: '',
        email: '',
        gmail: '',
        remark: ''
      },
      companies: {
        _id: '',
        paramsValue: []
      }
    }
  },
  async mounted () {
    this.directoryList = await this.$store.dispatch('project/lookupDirectories')
    this.companies = await this.lookupParam(
      'companies'
    )
  },
  components: {
    Multiselect
  },
  methods: {
    ...mapActions('paramsSetting', ['updateParam', 'lookupParam']),
    ...mapActions('project', ['addDirectory', 'lookupDirectories']),
    async addOne () {
      var yes = confirm('確認新增?')
      if (yes) {
        await this.addDirectory(this.directory)
        alert('新增成功')
        this.$emit('closeEvent')
        this.lookupDirectories()
      }
    },
    closeModal () {
      this.$emit('closeEvent')
    },
    async addTagCompany (newTag) {
      if (!this.companies.paramsValue.includes(newTag)) {
        this.companies.paramsValue.push(newTag)
        await this.updateParam({
          id: this.companies._id,
          paramsValue: this.companies.paramsValue
        })
        this.companies = await this.lookupParam(
          'companies'
        )
      }
      this.directory.company = newTag
      console.log(this.directory.company)
    }
  },
  computed: {
    rows () {
      return this.directoryList.length
    }
  }
}
</script>

<style scoped>
.btn {
  background-color: rgb(75, 102, 255);
  font-size: 14px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 6px;
  padding-bottom: 6px;
  color: white;
  border: 0;
}
.btn:hover {
  color: black;
  background-color: rgb(228, 228, 228);
  transform: scale(1.1);
}
</style>
