<template>
  <v-row class="search-box" align="center" no-gutters>
    <!-- <v-col v-if="label" cols="2"> -->
    <!-- <v-col v-if="label" :cols="labelCols">
			<label for="" class="search-box-label">
				<v-icon
					x-small
					:color="item.required ? '#fb8200' : 'primary'"
					class="mr-1"
					>mdi-record-circle</v-icon
				>
				{{ item.label }}
			</label>
		</v-col> -->
    <!-- <v-col :cols="label ? textCols : ''">
			<v-text-field
				readonly
				v-model="selectValue"
				append-icon="mdi-magnify"
				class="v-input__custom"
				@click="dialog = !dialog"
				outlined
				:hide-details="true"
				:disabled="item.disabled || false"
				:required="item.required || false"
			></v-text-field>
		</v-col> -->

    <!-- <v-row justify="center"> -->
    <v-dialog ref="popModal" v-model="dialog" width="800" overlay-color="#000" overlay-opacity="0.8" scrollable>
      <!-- <template v-slot:activator="{ on, attrs }">
        <v-btn color="primary" dark v-bind="attrs" v-on="on">공정/설비</v-btn>
      </template> -->
      <v-card style="height: 100%">
        <!-- <v-card-title
					class="v-card__title d-flex align-center justify-space-between"
				>
					<span class="custom-title-4">{{ '' }}</span>
					<v-btn icon tile :ripple="false" @click="closePop()">
						<v-icon>mdi-close</v-icon>
					</v-btn>
				</v-card-title> -->
        <!-- <v-card-actions> -->
        <!-- <v-text-field label="위치정보 선택"></v-text-field> -->
        <v-card-title class="pa-5 d-flex align-center justify-space-between">
          <span class="custom-title-4">가이드 정보</span>
          <a-button icon="close" type="text" @click="closePop()"></a-button>
        </v-card-title>
        <!-- <v-row align="center" no-gutters>
                        <v-col :cols="4">
                            <div class="d-flex align-center justify-space-between pb-5">
                                <v-card-title class="pa-0">가이드 정보</v-card-title>
                            </div>
                        </v-col>
                        <v-col :cols="8" class="text-right">
                            <v-btn icon tile :ripple="false" @click="closePop()">
                                <v-icon>mdi-close</v-icon>
                            </v-btn>
                        </v-col>
                    </v-row> -->
        <div class="px-5 pb-3">
          <v-row align="center" no-gutters>
            <v-col :cols="12">
              <label for="" class="search-box-label">
                <v-icon small :class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
                가이드지표
              </label>
            </v-col>
            <v-col :cols="6" class="pr-2">
              <v-text-field v-if="dialog" v-model="InputValue['gdIdxId']" class="v-input__custom" :readonly="true"
                outlined :hide-details="true">
              </v-text-field>
            </v-col>
            <v-col :cols="6"  class="pl-2">
              <v-text-field v-if="dialog" v-model="InputValue['gdIdxNm']" class="v-input__custom" :readonly="true"
                outlined :hide-details="true">
              </v-text-field>
            </v-col>
          </v-row>
          <v-divider class="mt-5 mb-2"></v-divider>
        </div>
       
        <div class="px-5 pb-4">
          <v-row align="center">
            <v-col :cols="6" class="py-2 pr-2">
              <InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="계산코드" valueNm="calcProc"
                :iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
            </v-col>
            <v-col :cols="6">
            </v-col>
            <v-col :cols="12" class="py-2">
              <InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="계산설명" valueNm="calcDesc"
                :iconShow="true" :labelCols="12" :textCols="12"  :readonly="true" />
            </v-col>
            <v-col :cols="6" class="py-2 pr-2">
              <InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="물리량1" valueNm="pysclQtyId1"
                :iconShow="true" :readonly="true" :labelCols="12" :textCols="12"  />
            </v-col>
            <v-col :cols="6" class="py-2 pl-2">
              <InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="물리량2" valueNm="pysclQtyId2"
                :iconShow="true" :readonly="true" :labelCols="12" :textCols="12"  />
            </v-col>
            <v-col :cols="6" class="py-2 pr-2">
              <InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="물리량3" valueNm="pysclQtyId3"
                :iconShow="true" :readonly="true" :labelCols="12" :textCols="12"  />
            </v-col>
            <v-col :cols="6" class="py-2 pl-2">
              <InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="물리량4" valueNm="pysclQtyId4"
                :iconShow="true" :readonly="true" :labelCols="12" :textCols="12"  />
            </v-col>
            <v-col :cols="6" class="py-2 pr-2">
              <InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="카테고리1" valueNm="ctgr1"
                :iconShow="true" :readonly="true" :labelCols="12" :textCols="12"  />
            </v-col>
            <v-col :cols="6" class="py-2 pl-2">
              <InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="카테고리2" valueNm="ctgr2"
                :iconShow="true" :readonly="true" :labelCols="12" :textCols="12"  />
            </v-col>
            <v-col :cols="6" class="py-2 pr-2">
              <InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="주의기준값" valueNm="careStndVal"
                :iconShow="true" :readonly="true" :labelCols="12" :textCols="12"  />
            </v-col>
            <v-col :cols="6">
            </v-col>
            <v-col :cols="6" class="py-2 pr-2">
              <InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="경고기준값" valueNm="warnStndVal"
                :iconShow="true" :readonly="true" :labelCols="12" :textCols="12"  />
            </v-col>
            <v-col :cols="12" class="py-2">
              <InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="알람메세지" valueNm="alrmMsg"
                :iconShow="true" :labelCols="12" :textCols="12" :readonly="true" />
            </v-col>
            <v-col :cols="12" class="py-2">
              <InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="가이드방법" valueNm="gdMeth"
                :iconShow="true" :labelCols="12" :textCols="12" :readonly="true" />
            </v-col>
          </v-row>
        </div>
        <v-card-actions>
          <v-spacer></v-spacer>
          <a-button color="primary" type="primary" @click="closePop()">확인</a-button>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import selectCodeList from '@/components/common/select/selectCodeList';
import InputText from '~/components/common/input/InputText';
import dateUtility from '~/plugins/dateUtility';

export default {
  props: {
    parentPrgmId: {
      type: String,
      require: true,
      default: '비교대상 최대(20개)',
    },
    label: {
      type: String,
      require: false,
      default: '전력 계약 정보',
    },
    valueNm: {
      type: String,
      require: false,
      default: '',
    },
    title: {
      type: String,
      require: false,
      default: '전력 계약 목록',
    },
    labelCols: {
      type: Number,
      require: false,
      default: 4,
    },
    textCols: {
      type: Number,
      require: false,
      default: 7,
    },
    item: {
      type: Object,
      require: true,
    },
    bindingData: {
      type: String,
      require: false,
    }
  },
  components: {
    Grid,
    selectCodeList,
    dateUtility,
    InputText
    // Tree
  },
  data() {
    return {
      labelPrepend: true,
      modalDataKey: 'modalData2',
      myModalKey: 'gdIdxDetPop',
      gridName: 'gdIdxDetPop',
      loadGrid: false,
      setGrid: false,
      popCheck: false,
      dialog: false,
      activeRowData: {},
      checkedRowDataList: [],
    };
  },
  computed: {
    ...mapState({
      // searchParam: state => state.pageData,
      searchParam(state) {
        return state.pageData[this.parentPrgmId];
      },
      myBindingData(state) {
        //return state.pageData[this.parentPrgmId]["rowGridSelectData"];
        if (!this.bindingData) {
          return state.pageData[this.parentPrgmId]['rowGridSelectData'];
        } else {
          return state.pageData[this.parentPrgmId][this.bindingData][
            'rowGridSelectData'
          ];
        }
      },
    }),
    InputValue: {
      get() {
        return this.myBindingData;
      }
    },
    chkDialog() {
      return this.dialog
    },
  },
  watch: {
    async chkDialog(val) {
      if (!val) {
        this.closePop();
      } else {
        // await this.getRowGridData();

      }
    },
    async popCheck(val) {
      if (val) {
        await this.getData();
        this.dialog = true;
      } else {
        this.dialog = false;
      }
    }
  },
  beforeCreate() {
    this.$store.commit('setPageData', {
      modalData2: { gdIdxDetPop },
    });
  },
  created() {

  },
  mounted() {
    this.init();
  },
  methods: {
    ...mapMutations({
      setPageData: 'setPageData',
      setModalGridData: 'setModalGridData',
      setModalGridColumn: 'setModalGridColumn',
      setModalGridOption: 'setModalGridOption',
    }),
    ...mapActions({
      postApiReturn: 'modules/list/postApiReturn',
    }),
    init() {

      this.gridInit();
    },
    closePop() {
      this.popCheck = false;
    },
    search() {
      this.getData();
    },
    async getData() {
      var res = await this.postApiReturn({
        apiKey: 'selectEnrgEffcGdIdxDetPop',
        resKey: 'gdIdxDetPopData',
        sendParam: {
          gdIdxId: this.myBindingData.gdIdxId,
          eqpmId: this.myBindingData.eqpmId,
        },
      });

      this.setPageData({
        calcProc: res[0].calcProc,
        calcDesc: res[0].calcDesc,
        pysclQtyId1: res[0].pysclQtyId1Nm,
        pysclQtyId2: res[0].pysclQtyId2Nm,
        pysclQtyId3: res[0].pysclQtyId3Nm,
        pysclQtyId4: res[0].pysclQtyId4Nm,
        ctgr1: res[0].ctgr1,
        ctgr2: res[0].ctgr2,
        warnStndVal: res[0].warnStndVal,
        careStndVal: res[0].careStndVal,
        alrmMsg: res[0].alrmMsg,
        gdMeth: res[0].gdMeth
      });

    }
  },
};
var gdIdxDetPop = {
  gdIdxDetGrid: {
    data: [],
    column: [],
    option: {}
  }
}

// 전력량 요금(원/kWh)
</script>
<style lang="scss" scoped>
.tui-grid-scrollbar-left-bottom {
  display: none !important;
}

// #gdIdx_InputText::v-deep .v-input__custom {
//   margin-left: -60px;
// }

// .v-input__custom {
//   margin-left: -60px;
// }
</style>