<?php
/*
 * @Overview 생산오더 별 진행 현황
 * @History 2024-03-05 / 최승연 / 최초작성
 */
$cate_id = "STS_ORDER";
include_once "{$_SERVER['DOCUMENT_ROOT']}/common.inc.php";
include_once _SVC_INC_PATH_ . "/header.php";
?>
<style>
    .loading-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 83%;
        height: 100%;
        background-color: #0002;
        position: fixed;
        z-index: 5;
    }
    .loading-spinner {
        width: 40px;
        height: 40px;
        border: 5px solid #3498db;
        border-top: 5px solid transparent;
        border-radius: 50%;
        animation: rotate 1s linear infinite;
        z-index: 2;
    }
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
</style>


<div class="container">
  <!-- 사이드바 불러오기 -->
  <?php include_once _SVC_INC_PATH_ . "/sidebar.php"; ?>
  <!-- 사이드바 불러오기 종료 // -->


  <!-- 검색 조회 및 저장 -->
  <div class="table-header item-header">
    <div class="inner-container">
      <!-- 검색 조건 (인풋) -->
      <div class="search-container">
<!--      <div id="wait_aram" v-show="show">-->
<!--          <div id="alert_box">-->
<!--              <p id="font_weight">로딩중...</p>-->
<!--          </div>-->
<!--      </div>-->
        <!-- 파업 인풋 박스 시작 -->
        <div class="input-container flexcol gap06">
          <div class="input-box">
            <input type="text" id="product_order_pop" placeholder="생산오더">
            <span
              onclick="popOrder({WO_NO:'product_order_pop'})"><?php include _SVC_INC_PATH_ . '/img/popupIcon.php' ?></span>
          </div>
        </div>
        <!-- 팝업 인풋 박스 종료 // -->
        <!-- 파업 인풋 박스 시작 -->
        <!-- 팝업 인풋 박스 종료 // -->

        <!-- 파업 인풋 박스 시작 -->


        <div class="input-container flexrow gap06">
          <div class="input-box">
            <select name="ITEM_GRP" id="ITEM_GRP"></select>
          </div>
          <div class="input-box">
            <input type="text" id="product_pop" placeholder="품목코드">
            <span
              onclick="popItem({ ITEM_CD:'product_pop', ITEM_NM: 'ITEM_NM' })"><?php include _SVC_INC_PATH_ . '/img/popupIcon.php' ?></span>
          </div>
          <div class="input-box">
            <input type="text" id="ITEM_NM" placeholder="품목명">
          </div>
        </div>
        <!-- 팝업 인풋 박스 종료 // -->
        <!-- 파업 인풋 박스 시작 -->
        <div class="input-container flexcol gap06">
          <div class="input-box">
            <input type="text" id="client_pop" placeholder="고객사">
            <!--                <span onclick="popClient({BP_CD:'client_pop'})">--><?php //include _SVC_INC_PATH_ . '/img/popupIcon.php' ?><!--</span>-->
          </div>
        </div>
        <!-- 팝업 인풋 박스 종료 // -->
        <!-- 날짜 인풋 박스 시작 -->
        <div class="input-container flexrow gap06">
          <label for="order_date_pop" style="display:flex; align-items:center; text-wrap: nowrap;">지시일: &nbsp</label>
          <div class="input-box">
            <input type="date" max="9999-12-31" id="order_date_st">
          </div>
          <div class="input-box">
            <input type="date" max="9999-12-31" id="order_date_ed">
          </div>
        </div>
        <!-- 날짜 인풋 박스 종료 // -->
        <!-- 작업순서 인풋 박스 시작 -->
        <div class="input-container flexrow">
          <label for="PROC_SEQ" style="display:flex; align-items:center; text-wrap: nowrap;">작업순서:&nbsp</label>
          <div>
            <div class="input-box">
              <select id="PROC_SEQ">
                <option value="ASC">오름차순</option>
                <option value="DESC">내림차순</option>
              </select>
            </div>
          </div>
        </div>
        <!-- 팝업 인풋 박스 종료 // -->

        <div class="input-container flexcol gap06">

          <div class="input-box">
            <select id="WO_STATUS"></select>
          </div>
        </div>

      </div>
      <!-- 검색 조건 종료 // -->

      <!-- 조회 및 저장 버튼 -->
      <div class="button-container">
        <div class="button-box">
            <button class="point-btn" id="excelData"
                    @click="excelDownload()">엑셀 다운로드</button>
          <button class="point-btn" id="filter_btn"
            @click="getMainList('getStsList', 'order_date_st', 'order_date_ed','product_order_pop','product_pop','ITEM_NM','ITEM_GRP','PROC_SEQ','client_pop','WO_STATUS')">조회</button>
          <!--            <button class="point-btn disabled-btn" id="put_btn" disabled>저장</button>-->
        </div>
      </div>
      <!-- 조회 및 저장 버튼 종료 // -->

    </div>
    <!-- 검색 조회 및 저장 종료 // -->
  </div>
  <!-- 테이블 헤더 종료 // -->



  <!-- 컨텐츠 컨테이너 -->
  <div class="contents-container">

    <!-- 테이블 컨테이너 -->
    <div class="table-container ">
      <div class="inner-container flexcol gap20"> <!-- 테이블 컨텐츠 나오는 부분 vh로 높이 가로 맞춰놓기 -->

        <!-- 테이블 헤더 (제목, 추가, 삭제, 저장) -->
        <div class="table-box main-table flex-1" id="main_table">
          <ul class="flexrow  flexbetween">
            <div class="table-title">
              <p class="title">생산오더별 진행현황</p>
            </div>
            <div class="flexrow gap10">
              <div class="flexrow flexfillcenter">생산오더 수 : {{count}}</div>
              <div class="last-time flexrow flexfillcenter">{{now}}</div>
              <div class="flexrow flexfillcenter gap06" style="width:fit-content;">
                <div class="label-tag yellow-back">진행</div>
                <div class="label-tag blue-back">완료</div>
                <div class="label-tag orange-back">지연</div>
                <div class="label-tag gray-back white-font">대기</div>
                <div class="label-tag red-back">중지</div>
                <!-- <div class="label-tag green-back">중지</div> -->
              </div>
            </div>

          </ul>
          <!-- 테이블 헤더 종료 // -->

          <!-- 테이블 -->
          <!-- <div class="hy-table"></div> -->
            <div class="loading-wrap" v-show="show">
                <div class="loading-spinner"></div>
                <p>로딩중</p>
            </div>
          <div class="tb-height-full">
            <div class="col">

              <div class="cont_hfix">
                <table class="vue-table sts-order-table">
                  <colgroup>
                    <col style="min-width: 70px; max-width: 70px;">
                    <col style="min-width: 70px; max-width: 70px;">
                    <col style="min-width: 70px; max-width: 70px;">
                    <col style="min-width: 60px; width: 5%;  max-width: 60px;" v-for="n in 14*2">

                  </colgroup>
                  <thead>
                    <tr>
                      <th colspan="2" style="min-width: 143px;">생산오더</th>
                      <th>작업순서<br>작업상태</th>
                      <th colspan="2" v-for="n in 14">공정{{ n }}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <template v-for="(code, idx) in codeList">
                      <tr>

                        <td class="font-weight-700">[{{code.WO_NO}}]</td> <!--border -->
                        <td class="font-weight-700">{{code.WO_ORD_QTY}}</td> <!--border -->
                        <td rowspan="2" class="border-right border-bottom">[{{code.PROC_SEQ}}]</td>

                        <!-- R : 진행중 / F : 종료 D / 지연 / P : 예정 -->
                        <td colspan="2" v-for="n in 14" :key="`process-${n-1}`" class="border-right" :class="{ 
                            'yellow-back': code.OP_CD && code.OP_CD[n - 1] && code.OP_CD[n - 1].OP_STATUS === 'R',
                            'blue-back': code.OP_CD && code.OP_CD[n - 1] && code.OP_CD[n - 1].OP_STATUS === 'F',
                            'orange-back': code.OP_CD && code.OP_CD[n - 1] && code.OP_CD[n - 1].OP_STATUS === 'D',
                            'gray-back': code.OP_CD && code.OP_CD[n - 1] && code.OP_CD[n - 1].OP_STATUS === 'P',
                            'white-font': code.OP_CD && code.OP_CD[n - 1] && code.OP_CD[n - 1].OP_STATUS === 'P',
                            'red-back': code.OP_CD && code.OP_CD[n - 1] && code.OP_CD[n - 1].OP_STATUS === 'S',
                            'border-none': code.OP_CD && code.OP_CD[n - 1],
                           }">

                          {{ code.OP_CD[n-1]?.OP_CD }}
                        </td>
                      </tr>
                      <tr>
                        <td colspan="2">{{code.BP_NM}}</td>
                        <td v-for="n in 14*2" :key="`plan-${n}`" :class="{'border-right':n%2===0}">
                          {{ n % 2 === 0 ? code['OP_CD'][n/2-1]?.PRD_QTY : code['OP_CD'][(n-1)/2]?.ORD_QTY }}
                        </td>
                      </tr>
                      <tr>
                        <td>{{code.ITEM_GRP}}</td>
                        <td class="font-weight-700">{{code.ITEM_CD}}</td> <!--border -->
                        <td rowspan="3" class="border-right border-bottom">[{{code.ORD_STATUS}}]</td>

                        <td v-for="n in 14*2" :key="`tm-${n}`" style="word-break:break-word;"
                          :class="{
                            'border-right':n%2===0,
                            'orange-back':n%2===0 && code['OP_CD'][n/2-1]?.isDelay,
                            }">
                          {{ n % 2 === 0 ? code['OP_CD'][n/2-1]?.ED_TM : code['OP_CD'][(n-1)/2]?.ST_TM }}
                        </td>
                      </tr>
                      <tr>
                        <td colspan="2">
                          <div class="tooltip width-140px relative">
                            {{code.ITEM_NM}}
                          </div>
                          <span class="tooltiptext absolute">{{code.ITEM_NM}}</span>
                        </td>

<!--                        <td v-for="n in 14" :key="`pre-${n}`" class="border-right">{{ code.OP_CD[n-1]?.GL_TM}}</td>-->
                          <td v-for="n in 14*2" :key="`pre-${n}`" style="word-break:break-word;"
                              :class="{
                            'border-right':n%2===0,
                            }">
<!--                              {{ n % 2 === 0 ? code['OP_CD'][(n-1)/2]?.OP_TM : code.OP_CD[n-1]?.GL_TM }}-->
                              {{ n % 2 === 0 ? code['OP_CD'][n/2-1]?.GL_TM : code['OP_CD'][(n-1)/2]?.OP_TM    }}
                          </td>
                      </tr>
                      <tr class="border-bottom">
                        <td>{{code.ORD_DT}}</td>
                        <td>{{code.DLVY_REQ_DT}}</td>

                        <td v-for="n in 14*2" :key="`fa-${n}`" :class="{'border-right':n%2===0}" class="relative">

                          <div class="width-70px static" :class="{
                                                                    'opacity-0': (code.OP_CD[(n-1)/2]?.OP_CD === code['OP_CD'][(n-1)/2]?.FACLT_NM && n % 2 !== 0),
                                                                    'tooltip': (code.OP_CD[(n-1)/2]?.OP_CD !== code['OP_CD'][(n-1)/2]?.FACLT_NM) ||
                                                                               (code['OP_CD'][n/2-1]?.EMP_NM && n % 2 === 0)
                                                                  }" >
                            {{ n % 2 === 0 ? code['OP_CD'][n/2-1]?.EMP_NM : code['OP_CD'][(n-1)/2]?.FACLT_NM }}
                          </div>
                          <span class="tooltiptext absolute">{{ n % 2 === 0 ? code['OP_CD'][n/2-1]?.EMP_NM : code['OP_CD'][(n-1)/2]?.FACLT_NM }}</span>
                        </td>
                      </tr>

                    </template>
                  </tbody>
                </table>
              </div>
            </div>
          </div>








        </div>
        <!-- 테이블 종료 // -->

      </div>
    </div>
    <!-- 테이블 컨테이너 종료 // -->

  </div>
  <!-- 컨텐츠 컨테이너 종료 // -->

</div>
<!-- 메인 섹션 종료 // -->
</div>


<?php include_once _SVC_INC_PATH_ . "/footer_common.php"; ?>
<script src="./sts_order_excel.js"></script>
<script src="./sts_order.js"></script>
<?php
include_once _SVC_INC_PATH_ . "/footer.php";
include_once _SVC_INC_PATH_ . "/menualBtn.php";