<template>
  <div>
    <div
      v-show="!preview"
      class="data_control flexCenter mt10"
      style="display: flex; justify-content: space-evenly"
    >
      <div class="col-4 fl alignC">
        <label for="datastart"> 데이터 시작 행 </label>
        <div class="flexBox" style="align-items: center !important">
          <input
            type="text"
            name="datastart"
            v-model="rowIndex"
            @blur="updateRowIndex"
            @keyup.enter="updateRowIndex"
          />
          <div class="updownbox flexBox">
            <input
              type="button"
              value="▲"
              class="input_up"
              @click="dataTableInfo.startRowIndex++"
            />
            <input
              type="button"
              value="▼"
              class="input_down"
              @click="dataTableInfo.startRowIndex--"
            />
          </div>
        </div>
      </div>
      <div class="col-4 fl alignL">
        <label for="dataend"> 데이터 시작 열 </label>
        <div class="flexBox" style="align-items: center !important">
          <input
            type="text"
            name="dataend"
            v-model="cellIndex"
            @blur="updateCellIndex"
            @keyup.enter="updateCellIndex"
          />
          <div class="updownbox flexBox">
            <input
              type="button"
              value="▲"
              class="input_up"
              @click="dataTableInfo.startCellIndex++"
            />
            <input
              type="button"
              value="▼"
              class="input_down"
              @click="dataTableInfo.startCellIndex--"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="datatableInfoBox" style="max-height: 550px; overflow: auto">
      <div class="table-zone">
        <!-- <div class="list-info flex justify-between align-center">
                    <div class="count-zone">
                        <p>총 <span>40</span>건 중 <span>01</span>건 선택</p>
                    </div>
                </div> -->
        <table class="list-table">
          <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
          <colgroup>
            <col style="width: 10%" />
            <col
              v-for="(info, i) in dataTableInfo.changeColumnDatas"
              :key="i"
              :style="changeWidth()"
            />
          </colgroup>
          <thead>
            <tr>
              <th>No</th>
              <th
                v-for="(info, i) in dataTableInfo.changeColumnDatas"
                :key="i"
                :style="
                  i < dataTableInfo.startCellIndex
                    ? 'background-color: #dfdfdf;'
                    : null
                "
              >
                [{{ i + 1 }}]
              </th>
            </tr>
          </thead>
          <!-- <tbody>
                        <tr>
                            <th :class="{ selected: getRowDataColumnIndex < 0 }">[1]</th>
                            <td :class="{
                            selected: getRowDataColumnIndex < 0
                            , disabled: getStartRowIndex >= 0 || dataTableInfo.startCellIndex > j
                        }"
                                v-for="(info, j) in dataTableInfo.changeColumnDatas">
                                {{ dataTableInfo.columnDatas[j].displyColumnNm }}
                            </td>
                        </tr>
                        <tr v-for="(cells, i) in dataTableInfo.rowData" v-if="i < viewCount">
                            <th :class="{ selected: getRowDataColumnIndex == i }">[{{ i + 2 }}]</th>
                            <td :class="{
                            selected: getRowDataColumnIndex == i
                            , disabled: getStartRowIndex > i || dataTableInfo.startCellIndex > j
                        }"
                                v-for="(value, j) in cells" :title="value">
                                {{ value }}
                            </td>
                        </tr>
                        <tr v-if="postList === 0">
                            <td colspan="5" class="no-list">검색조건에 해당하는 데이터가 없습니다.</td>
                        </tr>
                    </tbody> -->
          <tbody>
            <tr>
              <th>[1]</th>
              <td
                v-for="(info, j) in dataTableInfo.changeColumnDatas"
                :key="j"
                :style="
                  j < dataTableInfo.startCellIndex
                    ? 'background-color: #dfdfdf;'
                    : 'background-color: #fdd2d2;'
                "
              >
                {{ dataTableInfo.columnDatas[j].displyColumnNm }}
              </td>
            </tr>
            <tr
              v-for="(cells, i) in dataTableInfo.rowData"
              :key="i"
              :style="
                i + 1 < dataTableInfo.startRowIndex
                  ? 'background-color: #dfdfdf;'
                  : null
              "
            >
              <th>[{{ i + 2 }}]</th>
              <td
                v-for="(value, j) in cells"
                :key="j"
                :title="value"
                :style="
                  j < dataTableInfo.startCellIndex
                    ? 'background-color: #dfdfdf;'
                    : null
                "
              >
                {{ value }}
              </td>
            </tr>
            <tr v-if="postList === 0">
              <td colspan="5" class="no-list">
                검색조건에 해당하는 데이터가 없습니다.
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>


<script>
import _ from "lodash";

export default {
  name: "file-data-read",
  props: {
    isLoading: {
      type: Boolean,
      // default: true,
    },
    dataTable: {
      type: Object,
      default: {},
    },
    // 미리보기, 데이터셋 설정 화면 구분
    preview: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dataTableInfo: this.dataTable,
      columnIndex: this.dataTable.rowDataColumnIndex,
      rowIndex: this.dataTable.startRowIndex + 1,
      cellIndex: this.dataTable.startCellIndex + 1,
    };
  },
  methods: {
    // 데이터 확정후 창닫기
    displayIndex: function (index) {
      if (index) {
        return index + 1;
      } else {
        return 1;
      }
    },

    // 데이터 테이블 넓이 조정
    changeWidth: function () {
      return `width: ${90 / this.dataTableInfo.changeColumnDatas.length}%`;
    },

    // 데이터 시작 행 변경
    updateRowIndex() {
      this.dataTableInfo.startRowIndex = this.rowIndex - 1; // 엔터나 입력창 바깥 클릭 시 값 업데이트
    },

    // 데이터 시작 열 변경
    updateCellIndex() {
      this.dataTableInfo.startCellIndex = this.cellIndex - 1; // 엔터나 입력창 바깥 클릭 시 값 업데이트
    },
  },
  watch: {
    dataTable: function (v) {
      //데이터 테이블 정보 변경 시(다른 데이터 셋 선택시)
      this.dataTableInfo = _.cloneDeep(v);
      // 데이터 테이블 변경 이력이 없을 시 초기 세팅
      if (!v.columnNameChange) {
        for (let i = 0; i < this.dataTableInfo.columnDatas.length; i++) {
          // this.dataTableInfo.changeColumnDatas[i].columnNm = "col"+i;//*columnNm = 저장될 컬럼명
          this.dataTableInfo.columnDatas[i].columnNm = "col" + i; //*columnNm = 저장될 컬럼명

          //*displyColumnNm
          if (this.dataTableInfo.columnDatas[i].orginlColumnNm) {
            //원본 cell의 value가 빈값이 아닐 때
            //displyColumnNm = 원본 cell의 value
            // this.dataTableInfo.changeColumnDatas[i].displyColumnNm = this.dataTableInfo.columnDatas[i].orginlColumnNm;
            this.dataTableInfo.columnDatas[i].displyColumnNm =
              this.dataTableInfo.columnDatas[i].orginlColumnNm;
          } else {
            //원본 cell의 value가 빈값일 때
            //displyColumnNm = columnNm(DB에 생성될 컬럼명)
            // this.dataTableInfo.changeColumnDatas[i].displyColumnNm = "col"+i;
            this.dataTableInfo.columnDatas[i].displyColumnNm = "col" + i;
          }
        }
        this.dataTableInfo.originalColumnDatas = _.cloneDeep(
          this.dataTableInfo.columnDatas
        ); // 원본 컬럼행 데이터 저장
        this.dataTableInfo.changeColumnDatas = _.cloneDeep(
          this.dataTableInfo.columnDatas
        ); // 변경된 컬럼행 데이터 저장 (원본도 변경하는데 왜 필요한거지?)
      }
      this.$emit("update:isLoading", false); // 데이터테이블 복사 완료 시 로딩 해제
    },

    //데이터 시작 행의 Index
    "dataTableInfo.startRowIndex": function (value) {
      this.rowIndex = value + 1;
      //value(Index)값이 숫자가 아닐 때 => 0
      try {
        if (typeof parseInt(value) !== "number") {
          this.dataTableInfo.startRowIndex = 0;
          this.rowIndex = this.dataTableInfo.startRowIndex + 1;
          return;
        }
      } catch (e) {
        this.dataTableInfo.startRowIndex = 0;
        this.rowIndex = this.dataTableInfo.startRowIndex + 1;
        return;
      }

      let maxIndex = this.dataTableInfo.rowData.length; //컬럼(필드)행의 최대 Index = 데이터의 행 수 - 1

      if (value < 0) {
        //value(Index)가 데이터 시작 행의 Index보다 작을 때
        this.dataTableInfo.startRowIndex = 0;
        this.rowIndex = this.dataTableInfo.startRowIndex + 1;

        this.dataTableInfo.rowDataColumnIndex = 0;
      } else if (value > maxIndex) {
        //value(Index)가 최대 Index 보다 클 때
        this.dataTableInfo.startRowIndex = maxIndex;
        this.rowIndex = maxIndex + 1;

        this.dataTableInfo.rowDataColumnIndex = maxIndex;
      } else {
        //정상적으로 바뀔 때
        this.dataTableInfo.changeColumnDatas = _.cloneDeep(
          this.dataTableInfo.columnDatas
        );

        if (value > 0) {
          //원본 컬럼으로 바뀌는게 아닐 때
          //rowData에서 row정보를 받아옴
          let row = this.dataTableInfo.rowData[value - 1];
          for (
            let i = 0;
            i < this.dataTableInfo.changeColumnDatas.length;
            i++
          ) {
            this.dataTableInfo.changeColumnDatas[i].orginlColumnNm = row[i]; //*orginlColumnNm = 원본 cell의 value
            this.dataTableInfo.changeColumnDatas[i].columnNm = "col" + i; //*columnNm = 저장될 컬럼명
            this.dataTableInfo.columnDatas[i].orginlColumnNm = row[i]; //*orginlColumnNm = 원본 cell의 value
            this.dataTableInfo.columnDatas[i].columnNm = "col" + i; //*columnNm = 저장될 컬럼명

            //*displyColumnNm
            if (row[i]) {
              //원본 cell의 value가 빈값이 아닐 때
              //displyColumnNm = 원본 cell의 value
              this.dataTableInfo.changeColumnDatas[i].displyColumnNm = row[i];
              this.dataTableInfo.columnDatas[i].displyColumnNm = row[i];
            } else {
              //원본 cell의 value가 빈값일 때
              //displyColumnNm = columnNm(DB에 생성될 컬럼명)
              this.dataTableInfo.changeColumnDatas[i].displyColumnNm =
                "col" + i;
              this.dataTableInfo.columnDatas[i].displyColumnNm = "col" + i;
            }
          }
        }
        //★ 메모상에서 컬럼 데이터 변경 여부
        this.dataTableInfo.columnNameChange = true;
      }
      this.dataTableInfo.rowDataColumnIndex = this.dataTableInfo.startRowIndex;

      // 데이터 시작 행이 0일 때, 초기 컬럼 데이터로 변경
      if (this.dataTableInfo.startRowIndex == 0) {
        this.dataTableInfo.columnDatas = _.cloneDeep(
          this.dataTableInfo.originalColumnDatas
        );
      }

      this.$emit("index-change", this.dataTableInfo);
    },

    //데이터 시작 열의 Index
    "dataTableInfo.startCellIndex": function (value) {
      this.cellIndex = value + 1;
      //value(Index)값이 숫자가 아닐 때 => 0
      try {
        if (typeof parseInt(value) !== "number") {
          this.dataTableInfo.startCellIndex = 0;
          this.cellIndex = this.dataTableInfo.startCellIndex + 1;
          return;
        }
      } catch (e) {
        this.dataTableInfo.startCellIndex = 0;
        this.cellIndex = this.dataTableInfo.startCellIndex + 1;
        return;
      }

      //데이터 시작 열 최대 Index = 데이터의 컬럼 갯수
      let maxIndex = this.dataTableInfo.columnDatas.length - 1;
      if (value < 0) {
        //value(Index)가 0보다 작을 때
        this.dataTableInfo.startCellIndex = 0;
        this.cellIndex = this.dataTableInfo.startCellIndex + 1;
        return;
      } else if (value > maxIndex) {
        //value(Index)가 최대 Index 보다 클 때
        this.dataTableInfo.startCellIndex = maxIndex;
        this.cellIndex = maxIndex + 1;
        return;
      }
      this.$emit("index-change", this.dataTableInfo);
    },
  },
  computed: {
    //column Index에 의한 컬럼 사용 타입 변경  => Index 미만 컬럼은 사용 불가
    columnUseChange: function (columnDatas, index) {
      for (let i = 0; i < columnDatas.length; i++) {
        if (i > index - 1) {
          columnDatas[i].useAt = true;
        } else {
          columnDatas[i].useAt = false;
        }
      }
    },
  },
};
</script>
