<template>
<div>
  <b-row>
        <span>公司名稱</span>
  </b-row>
  <b-row>
        <multiselect
            style="width:366px"
            v-model="directories.company"
            tag-placeholder="加入欄位"
            caret="openSelect"
            placeholder="請輸入或選擇廠商"
            deselect-label="已選擇"
            :options="companies.paramsValue"
            :multiple="false"
            :taggable="true"
            @tag="addTagCompany"
            selectLabel="請選擇"
            selectedLabel="已選擇"
            deselectLabel="取消選擇"
            v-if="isEdit"
          >
          </multiselect>
          <div v-else style="margin-top: 10px;margin-bottom: 10px;width:366px">
              <span style="font-weight: normal; color: black">
                {{ directories.company }}
              </span> </div>
      </b-row>
      <b-row>
          <span>標案組織(非必填)</span>
        </b-row>
       <b-row>
          <b-form-input
              id="input-lg"
              style="width:366px"
              v-model="directories.projectTitle"
              v-if="isEdit"
            ></b-form-input>
          <div v-else style="margin-top: 10px;margin-bottom: 10px;width:366px">
              <span style="font-weight: normal; color: black">
                {{ directories.projectTitle }}
              </span> </div>
      </b-row>
      <b-row>
          <span>計畫職稱</span>
        </b-row>
  <b-row>
          <b-form-input
              id="input-lg"
              style="width:366px"
              v-if="isEdit"
              v-model="directories.title"></b-form-input>
              <div v-else style="margin-top: 10px;margin-bottom: 10px;width:366px">
              <span style="font-weight: normal; color: black">
               {{ directories.title }}
              </span> </div>

      </b-row>
      <b-row>
          <span>人員名稱</span>
            </b-row>
  <b-row>
          <b-form-input
              id="input-lg"
              style="width:366px"
              v-if="isEdit"
              v-model="directories.name"></b-form-input>
              <div v-else style="margin-top: 10px;margin-bottom: 10px;width:366px">
              <span style="font-weight: normal; color: black">
                {{ directories.name }}
              </span> </div>
      </b-row>
      <b-row>
          <span>聯絡電話</span>
            </b-row>
  <b-row>
          <b-form-input
              id="input-lg"
              style="width:366px"
              v-if="isEdit"
              v-model="directories.contactNumber"></b-form-input>
              <div v-else style="margin-top: 10px;margin-bottom: 10px;width:366px">
              <span style="font-weight: normal; color: black">
                {{ directories.contactNumber }}
              </span> </div>
      </b-row>
      <b-row>
          <span>Email</span>
            </b-row>
  <b-row>
          <b-form-input
              id="input-lg"
              style="width:366px"
              v-if="isEdit"
              v-model="directories.email"></b-form-input>
              <div v-else style="margin-top: 10px;margin-bottom: 10px;width:366px">
              <span style="font-weight: normal; color: black">
               {{ directories.email }}
              </span> </div>
      </b-row>
      <b-row>
          <span>Gmail</span>
            </b-row>
  <b-row>
          <b-form-input
              id="input-lg"
              style="width:366px"
              v-if="isEdit"
              v-model="directories.gmail"></b-form-input>
              <div v-else style="margin-top: 10px;margin-bottom: 10px;width:366px">
              <span style="font-weight: normal; color: black">
               {{ directories.gmail }}
              </span> </div>
      </b-row>
      <b-row>
          <span>LINE ID</span>
            </b-row>
  <b-row>
          <b-form-input
              id="input-lg"
              style="width:366px"
              v-if="isEdit"
              v-model="directories.line"></b-form-input>
              <div v-else style="margin-top: 10px;margin-bottom: 10px;width:366px">
              <span style="font-weight: normal; color: black">
               {{ directories.line }}
              </span> </div>
      </b-row>
      <b-row>
          <span>備註</span>
            </b-row>
  <b-row>
          <b-form-input
              id="input-lg"
              style="width:366px"
              v-if="isEdit"
              v-model="directories.remark"></b-form-input>
              <div v-else style="margin-top: 10px;margin-bottom: 10px;width:366px">
              <span style="font-weight: normal; color: black">
                {{ directories.remark }}
              </span> </div>
      </b-row>
    <b-button v-if="isEdit" class="btn" @click="isSaved()" style="float: right;margin-top:10px">
          儲存
    </b-button>
    <b-button v-else class="btn" @click="isEdit = true" style="float: right;margin-top:10px">編輯</b-button>
    </div>
</template>

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

export default {
  data () {
    return {
      isEdit: false,
      directory: {
        projectTitle: '',
        line: '',
        company: '',
        name: '',
        title: '',
        contactNumber: '',
        email: '',
        gmail: '',
        remark: ''
      },
      companies: {
        _id: '',
        paramsValue: []
      }
    }
  },
  components: {
    Multiselect
  },
  async mounted () {
    this.companies = await this.lookupParam(
      'companies'
    )
  },
  methods: {
    ...mapActions('paramsSetting', ['updateParam', 'lookupParam']),
    ...mapActions('project', ['patchDirectories']),
    async isSaved () {
      let yes = confirm('確定更新')
      if (yes) {
        this.isEdit = false
        await this.patchDirectories(this.directories._id)
        await this.$store.dispatch('project/lookupDirectories')
        alert('建立成功')
        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.directories.company = newTag
    }
  },
  computed: {
    ...mapState({
      list: (state) => state.project.list,
      directories: state => state.project.directories
    })
  }
}
</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>
