<!-- 舊的新增專案(但現在完全不會用到了喔!!掰掰~) -->
<template>
  <div id="All">
    <div
      id="picture"
      class="background"
      style="
        z-index: -1;
        position: fixed;
        background-repeat: no-repeat;
        width: 100%;
      "
    >
      <img :src="backgroundImg" width="100% " height="100%" alt="" />
    </div>
    <div id="PMISTitleAndSignIn" class="front">
      <b-row style="padding-top: 30px">
        <b-col cols="10">
          <a class="btn_title"> PMIS專案管理資訊系統</a>
        </b-col>

        <b-col cols="2">
          <b-nav-item-dropdown
            right
            style="float: right; padding-top: 5px; color: white"
          >
            <b-dropdown-item to="/personalInformation"
              >個人資料</b-dropdown-item
            >
            <b-dropdown-divider></b-dropdown-divider>
            <b-dropdown-item to="/signIn/userLogIn">登出</b-dropdown-item>
          </b-nav-item-dropdown>
          <b-avatar variant="primary" style="float: right"></b-avatar>
          <div
            style="
              padding-right: 10px;
              padding-top: 9px;
              float: right;
              color: white;
            "
          >
            {{ currentUser.name }}
          </div>
        </b-col>
      </b-row>
    </div>
    <div
      style="
        border-radius: 8px;
        margin-left: 10%;
        margin-top: 30px;
        width: 80%;
        height: 80vh;
        font-color: black;
        background-color: rgb(243, 243, 243);
        padding: 30px;
      "
    >
      <div id="word">
        <b-row>
          <span style="font-weight: bold; font-size: 23px; color: black">
            新增專案</span
          >
        </b-row>
      </div>
      <div id="allContent" style="margin-top: 20px">
        <b-row>
          <b-form-group
            style="font-size: 20px; color: black; margin-right: 15px"
            label="選擇委託類型："
          >
          </b-form-group>
          <div
            id="ContractCategory"
            style="
              height: 60vh;
              overflow: auto;
              margin-left: 10px;
              margin-top: 5px;
              padding-right: 15px;
            "
          >
            <div id="PCMControl" style="width: 130vh">
              <b-form-checkbox
                v-model="aaa"
                :class="aaa ? null : 'collapsed'"
                :aria-expanded="aaa ? 'true' : 'false'"
                aria-controls="collapse-4"
                style="color: black"
              >
                專案管理
              </b-form-checkbox>
              <b-collapse id="collapse-4" v-model="aaa" class="mt-2">
                <b-row>
                  <b-col cols="8">
                    <a style="font-size: 20px; color: black"> 專案資料</a>
                    <b-row style="margin-top: 10px">
                      <b-col cols="6">
                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="計畫名稱:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            style="width: 100%"
                            v-model="project.name"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="計畫編號:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.number"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="主辦部門:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.organizer"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="主辦工程師:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.organizerEngineer"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="工程地點:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.address"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="業主:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.owner"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>
                      </b-col>
                      <b-col cols="6">
                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="業主地址:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.ownerAddress"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="聯絡人:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.contactPerson"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="聯絡電話:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.contactNumber"
                            style="width: 100%"
                          ></b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="電子郵件:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.email"
                            style="width: 100%"
                          ></b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 20px"
                          label="標別:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.tenders"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>
                      </b-col>
                    </b-row>
                  </b-col>
                  <b-col cols="4">
                    <a style="font-size: 20px; color: black"> 參數設置</a>
                    <br />
                    <span style="color: black">發文預設單位</span>
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="PCM.issuer"
                    ></b-form-input>
                    <span style="color: black">發文預設字號</span>
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="PCM.issue_text_number"
                    ></b-form-input>
                    <span style="color: black">輸出Title</span>
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="PCM.title"
                    ></b-form-input>
                    <span style="color: black">發文限辦天數</span>
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="PCM.issueHandlingDay"
                    ></b-form-input>
                    <span style="color: black">收文限辦天數</span>
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="PCM.receiveHandlingDay"
                    ></b-form-input>
                    <span style="color: black"
                      >輸出書函時，內部存檔用之名稱</span
                    >
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="PCM.outputFileName"
                    ></b-form-input>
                  </b-col>
                </b-row>
              </b-collapse>
            </div>
            <div id="CSControl" style="width: 130vh">
              <b-form-checkbox
                v-model="bbb"
                :class="bbb ? null : 'collapsed'"
                :aria-expanded="bbb ? 'true' : 'false'"
                aria-controls="collapse-4"
                style="color: black"
              >
                監造工務管理
              </b-form-checkbox>
              <b-collapse id="collapse-4" v-model="bbb" class="mt-2">
                <b-row>
                  <b-col cols="8">
                    <a style="font-size: 20px; color: black"> 專案資料</a>
                    <b-row style="margin-top: 10px">
                      <b-col cols="6">
                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="計畫名稱:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            style="width: 100%"
                            v-model="project.name"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="計畫編號:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.number"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="主辦部門:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.organizer"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="主辦工程師:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.organizerEngineer"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="工程地點:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.address"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="業主:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.owner"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>
                      </b-col>
                      <b-col cols="6">
                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="業主地址:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.ownerAddress"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="聯絡人:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.contactPerson"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="聯絡電話:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.contactNumber"
                            style="width: 100%"
                          ></b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="電子郵件:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.email"
                            style="width: 100%"
                          ></b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 20px"
                          label="標別:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.tenders"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>
                      </b-col>
                    </b-row>
                  </b-col>
                  <b-col cols="4">
                    <a style="font-size: 20px; color: black"> 參數設置</a>
                    <br />
                    <span style="color: black">發文預設單位</span>
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="CS.issuer"
                    ></b-form-input>
                    <span style="color: black">發文預設字號</span>
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="CS.issue_text_number"
                    ></b-form-input>
                    <span style="color: black">輸出Title</span>
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="CS.title"
                    ></b-form-input>
                    <span style="color: black">發文限辦天數</span>
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="CS.issueHandlingDay"
                    ></b-form-input>
                    <span style="color: black">收文限辦天數</span>
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="CS.receiveHandlingDay"
                    ></b-form-input>
                    <span style="color: black"
                      >輸出書函時，內部存檔用之名稱</span
                    >
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="CS.outputFileName"
                    ></b-form-input>
                  </b-col>
                </b-row>
              </b-collapse>
            </div>
            <div id="OtherControl" style="width: 130vh">
              <b-form-checkbox
                v-model="ccc"
                :class="ccc ? null : 'collapsed'"
                :aria-expanded="ccc ? 'true' : 'false'"
                aria-controls="collapse-4"
                style="color: black"
              >
                其他
              </b-form-checkbox>
              <b-collapse id="collapse-4" v-model="ccc" class="mt-2">
                <b-row>
                  <b-col cols="8">
                    <a style="font-size: 20px; color: black"> 專案資料</a>
                    <b-row style="margin-top: 10px">
                      <b-col cols="6">
                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="計畫名稱:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            style="width: 100%"
                            v-model="project.name"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="計畫編號:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.number"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="主辦部門:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.organizer"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="主辦工程師:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.organizerEngineer"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="工程地點:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.address"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="業主:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.owner"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>
                      </b-col>
                      <b-col cols="6">
                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="業主地址:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.ownerAddress"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="聯絡人:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.contactPerson"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="聯絡電話:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.contactNumber"
                            style="width: 100%"
                          ></b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 12px"
                          label="電子郵件:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.email"
                            style="width: 100%"
                          ></b-form-input>
                        </b-form-group>

                        <b-form-group
                          label-cols-sm="4"
                          label-align-sm="left"
                          style="color: black; margin-bottom: 20px"
                          label="標別:"
                          label-for="input-lg"
                        >
                          <b-form-input
                            id="input-lg"
                            v-model="project.tenders"
                            style="width: 100%"
                          >
                          </b-form-input>
                        </b-form-group>
                      </b-col>
                    </b-row>
                  </b-col>
                  <b-col cols="4">
                    <a style="font-size: 20px; color: black"> 參數設置</a>
                    <br />
                    <span style="color: black">發文預設單位</span>
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="Other.issuer"
                    ></b-form-input>
                    <span style="color: black">發文預設字號</span>
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="Other.issue_text_number"
                    ></b-form-input>
                    <span style="color: black">輸出Title</span>
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="Other.title"
                    ></b-form-input>
                    <span style="color: black">發文限辦天數</span>
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="Other.issueHandlingDay"
                    ></b-form-input>
                    <span style="color: black">收文限辦天數</span>
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="Other.receiveHandlingDay"
                    ></b-form-input>
                    <span style="color: black"
                      >輸出書函時，內部存檔用之名稱</span
                    >
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="Other.outputFileName"
                    ></b-form-input>
                  </b-col>
                </b-row>
              </b-collapse>
            </div>
          </div>
        </b-row>
        <div style="float: right; margin-top: 15px">
          <b-button class="btn" @click="addProject">儲存</b-button>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  data () {
    return {
      project: [],
      aaa: false,
      bbb: false,
      ccc: false,
      backgroundImg: require('../../assets/png/000.png'),
      PCM: {
        group: 'PCM',
        issuer: '',
        issue_text_number: '',
        title: '',
        issueHandlingDay: '',
        receiveHandlingDay: '',
        outputFileName: ''
      },
      CS: {
        group: 'CS',
        issuer: '',
        issue_text_number: '',
        title: '',
        issueHandlingDay: '',
        receiveHandlingDay: '',
        outputFileName: ''
      },
      Other: {
        group: 'Other',
        issuer: '',
        issue_text_number: '',
        title: '',
        issueHandlingDay: '',
        receiveHandlingDay: '',
        outputFileName: ''
      }
    }
  },
  methods: {
    ...mapActions('project', ['createProject', 'addProjectRoleParamSetting']),
    addProject () {
      var wasNull = false
      if (
        this.project.name === '' ||
        this.project.number === '' ||
        this.project.organizer === '' ||
        this.project.organizerEngineer === '' ||
        this.project.address === '' ||
        this.project.owner === '' ||
        this.project.ownerAddress === '' ||
        this.project.contactPerson === '' ||
        this.project.contactNumber === '' ||
        this.project.email === '' ||
        this.project.tender === ''
      ) {
        wasNull = true
      }
      if (wasNull) alert('尚有內容未填!')
      else {
        var yes = confirm('確定新增專案?')
        if (yes) {
          if (this.project._id === undefined) {
            this.createProject()
          }
          alert('新增專案成功！')
          this.$router.push({ name: 'Dashboard' })
        } else {
          alert('取消新增')
        }
      }
    }
  },
  computed: {
    ...mapState({
      currentUser: state => state.user.current
    })
  },
  watch: {}
}
</script>

<style>
.thClass1 {
  background-color: #1d325f;
  color: rgb(255, 255, 255);
}
</style>
<style scoped>
.btn {
  background-color: rgb(75, 102, 255);
  font-size: 15px;
  padding-left: 13px;
  padding-right: 13px;
  padding-top: 7px;
  padding-bottom: 7px;
  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(0);
}
.btn_title {
  background-color: #1d325f;
  font-size: 40px;
  color: white;
  margin-left: 70px;
  border: none;
  padding: 10px;
}
</style>
