<template>
  <details open class="form-table-style mb30">
    <summary
      :class="{
        'point-font2': pageRole == 'adm',
        'point-font': pageRole == 'government',
      }"
    >
      <div class="flex justify-between align-center no-gutters">
        <p class="summary-style pl10">관내사업장</p>
        <div class="gd-1">
          <button
            :class="{
              'large-btn': true,
              'blue-border-btn': pageRole == 'adm',
              'green-border-btn': pageRole == 'government',
            }"
            @click="fnDataAdd"
          >
            추가
          </button>
        </div>
      </div>
    </summary>
    <div class="pt10 pb10">
      <div
        v-for="(bplc, index) in data"
        :key="index"
        v-show="bplc['useYn'] == 'Y'"
      >
        <table class="form-table">
          <colgroup>
            <col width="50%" />
            <col width="50%" />
          </colgroup>
          <tr>
            <td>
              <div class="gd-12 pr0">
                <label
                  :class="{
                    'form-title mb10': true,
                    'point-font2': pageRole == 'adm',
                    'point-font': pageRole == 'government',
                  }"
                >
                  사업장명
                </label>
                <input
                  type="text"
                  class="full-input"
                  v-model="bplc.bplcNm"
                  ref="bplcNm"
                  placeholder="사업장명을 입력하세요."
                />
              </div>
            </td>
            <td>
              <div class="gd-12 pl0">
                <label
                  :class="{
                    'form-title mb10': true,
                    'point-font2': pageRole == 'adm',
                    'point-font': pageRole == 'government',
                  }"
                >
                  주생산품
                </label>
                <input
                  type="text"
                  class="full-input"
                  v-model="bplc.mainPrdt"
                  ref="mainPrdt"
                  placeholder="주생산품을 입력하세요."
                />
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="gd-12 pr0">
                <label
                  :class="{
                    'form-title mb10': true,
                    'point-font2': pageRole == 'adm',
                    'point-font': pageRole == 'government',
                  }"
                >
                  주소
                </label>
                <input
                  type="text"
                  class="full-input"
                  v-model="bplc.bplcAddr"
                  ref="bplcAddr"
                  placeholder="주소를 입력하세요."
                />
              </div>
            </td>
            <td>
              <div class="gd-12 pl0">
                <label
                  :class="{
                    'form-title mb10': true,
                    'point-font2': pageRole == 'adm',
                    'point-font': pageRole == 'government',
                  }"
                >
                  대지면적
                </label>
                <div class="flex">
                  <div class="gd-6 pl0">
                    <input
                      type="text"
                      class="full-input"
                      v-model.trim="bplc.bplcSiar"
                      ref="bplcSiar"
                      placeholder="대지면적을 입력하세요."
                      oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                    />
                  </div>
                  <div class="gd-6 pr0">
                    <select
                      class="full-input"
                      v-model="bplc.bplcSiarUnit"
                      ref="bplcSiarUnit"
                    >
                      <option value="">대지면적단위를 선택하세요</option>
                      <option
                        v-for="(item, idx) in codeList"
                        :key="idx"
                        :value="item.cd"
                      >
                        {{ item.cdNm }}
                      </option>
                    </select>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="gd-12 pr0">
                <label
                  :class="{
                    'form-title mb10': true,
                    'point-font2': pageRole == 'adm',
                    'point-font': pageRole == 'government',
                  }"
                >
                  공장면적
                </label>
                <div class="flex">
                  <div class="gd-6 pl0">
                    <input
                      type="text"
                      class="full-input"
                      v-model.trim="bplc.fctryArea"
                      ref="fctryArea"
                      placeholder="공장면적을 입력하세요."
                      oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                    />
                  </div>
                  <div class="gd-6 pr0">
                    <select
                      class="full-input"
                      v-model="bplc.fctryAreaUnit"
                      ref="fctryAreaUnit"
                    >
                      <option value="">공장면적단위를 선택하세요</option>
                      <option
                        v-for="(item, idx) in codeList"
                        :key="idx"
                        :value="item.cd"
                      >
                        {{ item.cdNm }}
                      </option>
                    </select>
                  </div>
                </div>
              </div>
            </td>
            <td>
              <div class="gd-12 pl0">
                <label
                  :class="{
                    'form-title mb10': true,
                    'point-font2': pageRole == 'adm',
                    'point-font': pageRole == 'government',
                  }"
                >
                  종업원수
                </label>
                <input
                  type="text"
                  class="full-input"
                  v-model="bplc.wrkrCnt"
                  ref="wrkrCnt"
                  oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                  placeholder="종업원수를 입력하세요."
                />
              </div>
            </td>
          </tr>
        </table>
        <div class="flex justify-end align-center no-gutters">
          <div class="gd-1" v-show="index != 0">
            <button class="large-btn red-border-btn" @click="fnDataDel(index)">
              삭제
            </button>
          </div>
        </div>
      </div>
    </div>
  </details>
</template>

<script>
export default {
  props: {
    pageId: {
      type: String,
    },
    data: {
      type: Array,
    },
    pageRole: {
      type: String,
      default: "government",
    },
    codeList: {
      type: Array,
    },
  },
  methods: {
    // 표 추가
    fnDataAdd() {
      this.data.push({
        bplcId: null,
        entId: this.pageId,
        bplcNm: null,
        mainPrdt: null,
        bplcAddr: null,
        bplcSiar: null,
        bplcSiarUnit: "",
        fctryArea: null,
        fctryAreaUnit: "",
        wrkrCnt: null,
        useYn: "Y",
      });
    },
    // 표 삭제
    fnDataDel(idx) {
      var isDelete = confirm("삭제하시겠습니까?");
      if (isDelete) {
        this.data[idx].useYn = "N";
      }
    },
  },
};
</script>