<?php
$cate_id = "mnu_auto_seq"; //현재 메뉴 ID 필수!!!
include_once "{$_SERVER['DOCUMENT_ROOT']}/common.inc.php";
include_once _ADM_INC_PATH_ ."/auth_check.php";

$baseObj->DB->tableExists(TB_numbering_rule);
$baseObj->DB->tableExists(TB_numbering_hist);

include _ADM_INC_PATH_ ."/header.html";
?>

        <div id="cmd_bar" class="mb-2">
          <div class="h4"><i class="bi bi-files-alt"></i> 채번규칙</div>
          <div class="text-right">
          </div>
        </div>

        <div id="base_info_body" class="container-fluid mt-3">
          <div class="row">
            <div class="col">
              <h5 class="d-flex justify-content-between">
                <span><i class="bi bi-subtract"></i> 채번규칙</span>
              </h5>
              <div class="mt-3 cont_hfix">
                <table class="table">
                  <colgroup>
                    <col width="5%"/>
                    <col width="20%"/>
                    <col width="15%"/>
                    <col width="*"/>
                  </colgroup>
                  <thead class="text-center bg-dark text-light top_sticky">
                    <tr>
                      <th>NO</th>
                      <th>채번 ID</th>
                      <th>채번 내용</th>
                      <th>채번 SEQ Nums</th>
                      <th>Source Format</th>
                      <th>발행수</th>
                    </tr>
                  </thead>
                  <tbody>
                    <template v-for="(seq, idx) in SeqList">

                    <tr
                      :class="['text-center',{'bg-warning':seq.NUM_ID==forms.NUM_OID}]"
                      @click="getSeq(seq.NUM_ID)">
                      <td>{{idx+1}}</td>
                      <td>{{seq.NUM_ID}}</td>
                      <td>{{seq.REMK}}</td>
                      <td>{{seq.NUM_SEQS}}</td>
                      <td>{{seq.NUM_FORMAT}}</td>
                      <td>{{seq.NUM_DIST}}</td>
                    </tr>
                    </template>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="col">
              <h5><i class="bi bi-subtract"></i> 채번규칙 내용</h5>
              <form method="post" name="codeform" class="mt-3 fadmin" action="###" onsubmit="return false">
                <div class="fld-block">
                  <label for="NUM_ID" class="form-label">채번 ID</label>
                  <div>
                    <input type="text" class="form-control inline" id="NUM_ID" name="NUM_ID" v-model="forms.NUM_ID" placeholder="채번 Id">
                    <small class="text-info">※ 채번 ID는 유일한(Unique)한 값이어야 합니다.</small>
                  </div>
                </div>
                <div class="fld-block">
                  <label for="NUM_ID" class="form-label">채번 내용</label>
                  <div>
                    <input type="text" class="form-control inline" id="REMK" name="REMK" v-model="forms.REMK" placeholder="채번 내용">
                  </div>
                </div>
                <div class="fld-block">
                    <ul class="list-group w-100" id="list_numbering">
                    <li class="list-group-item bg-secondary filtered pt-2 pb-2 pl-0 pr-0">
                      <div class="m-0 ml-1 text-center d-flex">
                        <div type="tex" class="pl-2 pr-2 col-u-5">No</div>
                        <div type="text" class="pl-2 pr-2 col-u-15">컬럼ID</div>
                        <div type="text" class="pl-2 pr-2 col-u-20">포맷스트링</div>
                        <div type="text" class="pl-2 pr-2 col-u-10" v-if="0">증감기준</div>
                        <div type="text" class="pl-2 pr-2 col-u-10">시작지점</div>
                        <div type="text" class="pl-2 pr-2 col-u-10">끝지점</div>
                        <div type="text" class="pl-2 pr-2 col-u-10">시작값</div>
                        <div type="text" class="pl-2 pr-2 col-u-10">증감값</div>
                        <div type="text" class="pl-2 pr-2 col-u-15">치환방식</div>
                        <div type="text" class="pl-2 pr-2 col-u-5"><button class="btn btn-sm btn-success" @click="forms.NUM_RULE.push({...rule_item})"><i class="bi bi-plus"></i></button></div>
                      </div>
                    </li>
                    <vuedraggable
                      v-model="forms.NUM_RULE"
                      filter=".filtered"
                      handle=".handle"
                      item-key="id">
                      <template #item="{element, index}" :value="element.DISP_TYPE = element.DISP_TYPE||'F'">
                      <li class="list-group-item pt-2 pb-2 pl-0 pr-0">
                        <div class="m-0 ml-1 d-flex">
                          <div type="text" class="pl-2 pr-2 col-u-5 text-center handle hand">{{index+1}}</div>
                          <input type="text" class="pl-2 pr-2 col-u-15" name="COLUMN_ID[]" v-model="element.COLUMN_ID">
                          <input type="text" class="pl-2 pr-2 col-u-20" name="FORMAT_STR[]" v-model="element.FORMAT_STR">
                          <select class="pl-2 pr-2 col-u-10" name="DISP_TYPE[]" v-model="element.DISP_TYPE" v-if="0">
                            <option value="">제외</option>
                            <option value="V">포함</option>
                          </select>
                          <input type="text" class="pl-2 pr-2 col-u-10" name="START_POS[]" v-model="element.START_POS">
                          <input type="text" class="pl-2 pr-2 col-u-10" name="SEL_LEN[]" v-model="element.SEL_LEN">
                          <input type="text" class="pl-2 pr-2 col-u-10" name="INCRE_STEP[]" v-model="element.INCRE_STEP">
                          <input type="text" class="pl-2 pr-2 col-u-10" name="INCRE_SEED[]" v-model="element.INCRE_SEED">
                          <select class="pl-2 pr-2 col-u-15" name="CONV_FUNC[]" v-model="element.CONV_FUNC" @change="chkConvFunc(element)">
                            <option value="">없음</option>
                            <option value="R">REQUEST</option>
                            <option value="A">자동증가</option>
                            <option value="D">날짜</option>
                          </select>
                          <div type="text" class="pl-2 pr-2 col-u-5 text-center"><button class="btn btn-sm btn-danger" @click="forms.NUM_RULE.splice(index,1)"><i class="bi bi-dash"></i></button></div>
                        </div>
                      </li>
                       </template>
                    </vuedraggable>
                    </ul>
                </div>
                <div class="mt-4 text-center">
                  <button type="button" class="btn btn-sm btn-primary px-5" @click="putSeq()">Submit</button> <button type="button" class="btn btn-sm btn-danger px-5" v-if="forms.NUM_OID" @click="delSeq">Delete</button> <button type="button" class="btn btn-sm btn-success px-5" @click="initSeq" v-if="(forms.NUM_OID || forms.NUM_ID || forms.NUM_RULE.length)">Reset</button>
                </div>
              </form>
            </div>
          </div>
        </div>
<?php

include _ADM_INC_PATH_ ."/footer.html";
?>
<!--
<script type="importmap">
{"imports": {
    "vue": "https://cdn.jsdelivr.net/npm/vue@3.2.39/dist/vue.esm-browser.js"
  }
}
</script>
<script type="module">
  import { createApp } from 'vue'
-->

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-draggable-next@4.1.4/dist/vuedraggable.umd.min.js"></script>
<script>
const VueAutoSeq = createApp({
  components: {
    vuedraggable,
  },
  data() {
    return {
      ajax_url: './auto_seq.ajax.php',
      Bran_Use: false, //지금은 안쓴다
      Bran_filter: '',
      SeqList: [],
      forms: {
        NUM_OID: "",
        NUM_ID: "",
        REMK: "",
        NUM_RULE: [],
      },
      rule_item : {
        COLUMN_ID:"",
        FORMAT_STR:"",
        DISP_TYPE:"",
        START_POS:"",
        SEL_LEN:"",
        INCRE_STEP:"",
        INCRE_SEED:"",
        CONV_FUNC:"",
      }
    }
  },
  mounted() {
    let _this = this;
    _this.getSeqList();
  },
  computed: {
  },
  methods: {
    getSeqList() {
      let _this = this;
      let postdata = {mode:'getSeqList'};

      _this.execCode({postdata, func:(data)=>{_this.SeqList = data;}});
    },
    getSeq(NUM_ID) {
      let _this = this;
      let postdata = {mode:'getSeq', NUM_ID};

      _this.execCode({postdata, func:(data)=>{_this.forms = data;}});
    },
    putSeq() {
      let _this = this;
      let postdata = {..._this.forms, mode:'putSeq'}

      _this.execCode({postdata, smsg:"등록 되었습니다.", func:_this.getSeqList});
    },
    delSeq() {
      let _this = this;
      let postdata = {..._this.forms, mode:'delSeq'}

      if( confirm("해당 채번규칙을 정말 삭제하시겠습니까?") ){
        _this.execCode({postdata, smsg:"삭제 되었습니다.", func:function(){
            _this.getSeqList();
            _this.initSeq();
          }});
      }
    },
    initSeq() {
      let _this = this;
      // if( _this.forms.NUM_OID ){
      //   _this.getSeq(_this.forms.NUM_OID);
      // }else{
        _this.forms = {
          NUM_OID: "",
          NUM_ID: "",
          NUM_RULE: [],
       // };
      }
    },
    chkConvFunc(element) {
      let _this = this;
      let anum = _this.forms.NUM_RULE.reduce( (cnt, rule) => cnt + (rule.CONV_FUNC == 'A'?1:0), 0 );
      if( anum > 1 ){
        kuls_alert("자동증가는 채번규칙에 1회만 등록 가능합니다.");
        element.CONV_FUNC = '';
      }
    },

    execCode(exdata) {
      let _this = this;

      ajax_json({
        url: _this.ajax_url,
        type: "POST",
        data: exdata.postdata,
        success: function (data) {
          if (!data.code) {
            kuls_alert(data.mesg);
          }else{
            if(exdata.smsg){
              kuls_success(exdata.smsg);
            }

            exdata.func && exdata.func(data.data);
          }
        },
        error: function (request, status, error) {
          kuls_alert(error.message);
        }
      });
    },
  }
}).mount('#base_info_body');
</script>