<template>
  <div class="tab-content" id="PTtab-2" :key="'PTtab-2'" >
    <div>
      <div class="pagenamPT">
        <h3 class="pagename2 w100w">하부파트너목록</h3>
      </div>
      <div class="PTsch">
        <input type="text" :placeholder="$t('front.search.emptySearch')" v-model="searchMemId"/>
        <a @click="getPartnerList(1)">
          <img src="@/assets/img/search.png" alt=""/>
        </a>
        <ul class="btBtnlist">
          <li @click="onChangePartnerLevel('')">전체</li>
          <template v-for="item in partnerLevelList" :key="item.code">
            <template v-if="item.code !== 'NORMAL'">
              <li @click="onChangePartnerLevel(item.code)">{{item.codeName}}</li>
            </template>
          </template>
        </ul>
      </div>
      <div class="strTablescr">
         <div class="strTablePC">
            <table class="strTablePT">
              <colgroup>
                <col width="8%">
                <col width="9%">
                <col width="7%">
                <col width="12%">
                <col width="7%">
                <col width="7%">
                <col width="7%">
                <col width="11%">
                <col width="11%">
                <col width="8%">
                <col width="13%">
              </colgroup>
              <thead>
              <tr>
                <th>아이디</th>
                <th>닉네임</th>
                <th>파트너등급</th>
                <th>상위아이디/닉네임</th>
                <th>카지노요율</th>
                <th>호텔카지노요율</th>
                <th>슬롯요율</th>
                <th>보유금</th>
                <th>보유포인트</th>
                <th>하부 생성</th>
                <th>가입 일시</th>
              </tr>
              </thead>
              <tbody>
                <template v-if="partnerList.length > 0">
                  <tr v-for="item in partnerList" :key="item.memId">
                    <td :class="item.myLevel">{{item.memId}}</td>
                    <td>{{item.memNick}}</td>
                    <td>
                       <template v-if="item.myLevelName === '총본사'">
                         <span class="box" :class="item.myLevel">대본</span>
                       </template>
                       <template v-else-if="item.myLevelName === '대본사'">
                         <span class="box" :class="item.myLevel">본사</span>
                       </template>
                       <template v-else-if="item.myLevelName === '부본사'">
                         <span class="box" :class="item.myLevel">부본</span>
                       </template>
                       <template v-else>
                         <span class="box" :class="item.myLevel">{{item.myLevelName}}</span>
                       </template>
                    </td>
                    <td>{{item.recommenderId}}/{{item.recommenderNick}}</td>
                    <td>{{item.casinoRate}}</td>
                    <td>{{item.hcasinoRate}}</td>
                    <td>{{item.slotRate}}</td>
                    <td>{{thousand(item.cashAmt)}}</td>
                    <td>{{thousand(item.pointAmt)}}</td>
                    <td><button class="saveBtnPT" v-if="item.myLevel !== ''" @click="onChangePartnerAddPopupSub(item)">생성</button></td>
                    <td>{{dateFormatAll(item.joinDate)}}</td>
                  </tr>
                </template>
                <template v-else>
                  <tr>
                    <td colspan="9">내역 없음</td>
                  </tr>
                </template>
              </tbody>
            </table>
         </div>
         <div class="strTableM">
            <div class="strTablePTM">
               <template v-if="partnerList.length > 0">
                 <ul v-for="item in partnerList" :key="item.memId">
                   <li><em>아이디</em><span :class="item.myLevel">{{item.memId}}</span></li>
                   <li><em>닉네임</em>{{item.memNick}}</li>
                   <li>
                      <em>파트너등급</em>
                      <template v-if="item.myLevelName === '총본사'">
                        <span class="box" :class="item.myLevel">대본</span>
                      </template>
                      <template v-else-if="item.myLevelName === '대본사'">
                        <span class="box" :class="item.myLevel">본사</span>
                      </template>
                      <template v-else-if="item.myLevelName === '부본사'">
                        <span class="box" :class="item.myLevel">부본</span>
                      </template>
                      <template v-else>
                        <span class="box" :class="item.myLevel">{{item.myLevelName}}</span>
                      </template>
                   </li>
                   <li><em>상위아이디<br />/닉네임</em>{{item.recommenderId}}/{{item.recommenderNick}}</li>
                   <li><em>카지노요율</em>{{item.casinoRate}}</li>
                   <li><em>호텔카지노</em>{{item.hcasinoRate}}</li>
                   <li><em>슬롯요율</em>{{item.slotRate}}</li>
                   <li><em>보유금</em>{{thousand(item.cashAmt)}}</li>
                   <li><em>보유포인트</em>{{thousand(item.pointAmt)}}</li>
                   <li><em>가입 일시</em>{{dateFormatAll(item.joinDate)}}</li>
                 </ul>
               </template>
                <template v-else>
                 <ul>
                    <li class="nodata">내역 없음</li>
                 </ul>
               </template>
            </div>
         </div>
      </div>

      <pagination v-if="pageInfo"
                  :pageNum="pageInfo.page"
                  :pageSize="pageInfo.count_per_list"
                  :totalCount="pageInfo.tatal_list_count"
                  :className="'partnerPaging'"
                  @goToPage="getPartnerList"
      />
      <!------------------------------------------------------------------------------->
    </div>
    <div v-if="makesub" class="moveWrap2">
      <div class="tabmenu_make moveWraphead">
        <ul>
          <li @click="currentTab = 'makeTab1'" :class="{'current': currentTab == 'makeTab1'}" v-if="newPartner.partnerLevel !== 'PTN_5'">파트너</li>
          <li @click="currentTab = 'makeTab2'" v-if="isMemberMake(newPartner.partnerLevel)" :class="{'current': currentTab == 'makeTab2'}">회원</li>
        </ul>
        <a class="close" @click="onChangePartnerAddPopupSub"><img src="@/assets/img/icon_cancel.png" /></a>
      </div>
      <div class="tabcont_make moveWrapbody" v-if="currentTab == 'makeTab1' && newPartner.partnerLevel !== 'PTN_5'">
        <h4>파트너 생성</h4>
        <table class="part">
          <colgroup>
            <col width="20%"/>
            <col width="30%"/>
            <col width="20%"/>
            <col width="30%"/>
          </colgroup>
          <tr>
            <th>아이디</th>
            <td><input class="in" name="newMemId" type="text" v-model="newPartner.memId" autocomplete="off" role="presentation"/></td>
            <th>비밀번호</th>
            <td><input class="in" name="newMemPass" type="password" v-model="newPartner.memPass" autocomplete="off"/></td>
          </tr>
          <tr>
            <th>닉네임</th>
            <td><input class="in" type="text" v-model="newPartner.memNick" /></td>
            <th>출금 비밀번호</th>
            <td><input class="in password" pattern="[0-9]*" type="text" v-model="newPartner.cashOutPass" /></td>
          </tr>
          <tr>
            <th>추천인 아이디</th>
            <td>{{newPartner.recommenderId}}({{newPartner.partnerLevelName}})</td>
            <th>계좌정보</th>
            <td class="accountInfo">
              <bank-list :className="'in'" @onChange="onChangeBank"></bank-list>
              <input class="in w45w" type="text" v-model="newPartner.bankAcc"/>
            </td>
          </tr>
          <tr>
            <th>이름</th>
            <td><input class="in" type="text" v-model="newPartner.memName" /></td>
            <th>전화번호</th>
            <td><input class="in" type="text" v-model="newPartner.memPhone" /></td>
          </tr>
        </table>
        <h4>게임별 요율설정</h4>
        <table>
          <tr>
            <th :colspan="Object.keys(newPartner.rateGroup).length">{{$t('front.stributor.roll')}}(%)</th>
            <th :colspan="Object.keys(newPartner.rateGroup).length">{{$t('front.stributor.lose')}}(%)</th>
          </tr>
          <tr>
            <th v-for="(item, key) in newPartner.rateGroup" v-bind:key="item">
              {{$t(`front.gnb.${key}`)}}
            </th>
            <th v-for="(item, key) in newPartner.rateGroup" v-bind:key="item">
              {{$t(`front.gnb.${key}`)}}
            </th>
          </tr>
          <tr>
            <td v-for="(item) in newPartner.rateGroup" v-bind:key="item">
              <a class="rbnt">최대값 : {{item.maxPointRate}}</a><br>
              <a class="rbnt">최소값 : {{item.minPointRate}}</a>
            </td>
            <td v-for="(item) in newPartner.rateGroup" v-bind:key="item">
              <a class="rbnt">최대값 : {{item.maxLoseRate}}</a><br>
              <a class="rbnt">최소값 : {{item.minLoseRate}}</a>
            </td>
          </tr>
          <tr>
            <td v-for="(item, key) in newPartner.rateGroup" v-bind:key="item">
              <input type="text" v-model="item[`${key}PR`]">
            </td>
            <td v-for="(item, key) in newPartner.rateGroup" v-bind:key="item">
              <input type="text" v-model="item[`${key}LR`]">
            </td>
          </tr>
        </table>
        <a class="btn" @click="onAddPartnerSubmit">등록</a>
      </div>

      <div class="tabcont_make moveWrapbody" v-if="currentTab == 'makeTab2'">
        <h4>회원 생성</h4>
        <table class="part">
          <colgroup>
            <col width="20%"/>
            <col width="30%"/>
            <col width="20%"/>
            <col width="30%"/>
          </colgroup>
          <tr>
            <th>아이디</th>
            <td><input class="in" type="text" autocomplete="off" v-model="newMember.memId"/></td>
            <th>출금 비밀번호</th>
            <td><input class="in password" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" type="text" maxlength="4" pattern="[0-9]*" v-model="newMember.cashOutPass" inputmode="numeric"  /></td>
          </tr>
          <tr>
            <th>비밀번호</th>
            <td><input class="in" type="password" autocomplete="off" v-model="newMember.memPass"/></td>
            <th>전화번호</th>
            <td><input class="in" type="text" v-model="newMember.memPhone"/></td>
          </tr>
          <tr>
            <th>닉네임</th>
            <td><input class="in" type="text" v-model="newMember.memNick"/></td>
            <th>추천인 아이디</th>
            <td>{{newPartner.recommenderId}}({{newPartner.partnerLevelName}})
              <input class="in" type="hidden" v-model="newMember.recommenderId"/>
            </td>
          </tr>
          <tr>
            <th>이름</th>
            <td><input class="in" type="text" v-model="newMember.memName"/></td>
            <th>계좌정보</th>
            <td class="accountInfo">
              <bank-list :className="'in'" @onChange="onChangeBankMember"></bank-list>
              <input class="in w45w" type="text" v-model="newMember.bankacc" oninput="this.value = this.value.replace(/[^0-9.]/g, '')" />
            </td>
          </tr>
        </table>
        <a class="btn" @click="newMemberSignup()">등록</a>
      </div>
    </div>
  </div>
</template>

<script>
import {
  partnerLevels, retailMyPartnerList, partnerJoin, partnerRates, getRetailSummary
} from '@/api/retail'
import Pagination from '@/components/ui/Pagination.vue'
import {
  isValidOnlyNumber,
  isValidOnlyPhoneNumber,
  isValidPassword,
  isValidPasswordPartner,
  isValidUserId,
  thousand
} from '@/libs/utils'
import { mapState } from 'vuex'
import BankList from '@/components/ui/BankList.vue'
import { PARTNER_LEVEL_NAME } from '@/libs/constants'
import { signUp } from '@/api/member'

export default {
  name: 'PartnerList',
  components: {
    Pagination,
    BankList
  },
  computed: {
    ...mapState([
      'userData',
      'gameCount',
      'commonCodeByOrder',
      'commonCodeByCode'
    ]),
    partnerLevelName () {
      console.log(this.item.partnerLevel)
      return PARTNER_LEVEL_NAME[this.item.partnerLevel]
    }
  },
  data () {
    return {
      makesub: false,
      summary: {},
      rate: {},
      currentTab: 'makeTab1',
      searchType: 'P',
      searchPartnerLevel: '',
      partnerLevelList: [],
      partnerList: [],
      partnerLevelObject: null,
      summaryNew: null,
      searchMemId: '',
      myRate: {},
      myChildrenRate: [],
      newPartner: {
        memId: '',
        memPass: '',
        memNick: '',
        memPhone: '',
        bank: '',
        bankAcc: '',
        cashOutPass: '',
        rateGroup: {}
      },
      newMember: {
        memId: '',
        memPass: '',
        memNick: '',
        memPhone: '',
        bank: '',
        bankAcc: '',
        cashOutPass: '',
        memLevel: '1',
        partSendYn: 'N',
        firstBetConfYn: 'N',
        memStatus: 0
      },
      defaultNewPartner: {
        memId: '',
        memPass: '',
        memNick: '',
        memPhone: '',
        bank: '',
        bankAcc: '',
        cashOutPass: '',
        rateGroup: {}
      },
      defaultMember: {
        memId: '',
        memPass: '',
        memNick: '',
        memPhone: '',
        bank: '',
        bankAcc: '',
        cashOutPass: '',
        memLevel: '1',
        partSendYn: 'N',
        firstBetConfYn: 'N',
        memStatus: 0
      },
      rateMaxMinList: [],
      newPartnerLevel: {}
    }
  },
  async created () {
    this.emitter.emit('Loading', true)
    this.getPartnerLevels()
    this.getSummary()
    this.rateMaxMinList = await this.getPartnerRateForNewPartner()
    await this.getPartnerList(1)
    this.newPartnerLevel = this.partnerLevelList[0]
    this.emitter.emit('Loading', false)
  },
  watch: {
    'newPartner.partnerLevel': function (newLevel) {
      if (newLevel === 'PTN_5') {
        this.currentTab = 'makeTab2'
      }
    }
  },
  methods: {
    thousand,
    isMemberSignupValidate () {
      const data = this.newMember
      for (const key of Object.keys(data)) {
        const value = data[key]
        if (key === 'memId') {
          if (value === '') {
            this.onAlert('warningart', 'front.member.emptyMemId')
            return false
          }

          if (!isValidUserId(value)) {
            this.onAlert('warningart', 'api.U101')
            return false
          }
        }

        if (key === 'memPass') {
          if (data[key] === '') {
            this.onAlert('warningart', 'front.member.emptyMemPass')
            return false
          }

          if (!isValidPassword(value) || value.length > 20) {
            this.onAlert('warningart', 'api.U102')
            return false
          }
        }

        if (key === 'cashOutPass') {
          if (data[key] === '') {
            this.onAlert('warningart', 'front.member.emptyCashOutPass')
            return false
          }

          if (!isValidOnlyNumber(value) || value.length !== 4) {
            this.onAlert('warningart', 'api.U103')
            return false
          }
        }

        if (key === 'memNick') {
          if (data[key] === '') {
            this.onAlert('warningart', 'front.member.emptyMemName')
            return false
          }

          if (value.length > 20 || value.length < 3) {
            this.onAlert('warningart', 'api.U105')
            return false
          }
        }

        if (key === 'memPhone') {
          if (data[key] === '') {
            this.onAlert('warningart', 'front.member.emptyMemTel')
            return false
          }

          if (!isValidOnlyPhoneNumber(value)) {
            this.onAlert('warningart', 'front.member.noValidMemTel')
            return false
          }
        }

        if (key === 'recommenderId') {
          if (data[key] === '') {
            this.onAlert('warningart', 'front.member.emptyRecommenderId')
            return false
          }
        }

        if (key === 'bank') {
          if (data[key] === '') {
            this.onAlert('warningart', 'front.member.emptyBankName')
            return false
          }
        }

        if (key === 'memName') {
          if (data[key] === '') {
            this.onAlert('warningart', 'front.member.emptyBankAccountName')
            return false
          }
        }

        if (key === 'bankacc') {
          if (data[key] === '') {
            this.onAlert('warningart', 'front.member.emptyBankNumber')
            return false
          }

          if (!isValidOnlyNumber(value)) {
            this.onAlert('warningart', 'front.member.noValidBankNumber')
            return false
          }
        }
      }

      return true
    },
    newMemberSignup () {
      this.newMember.recommenderId = this.newPartner.recommenderId
      if (this.isMemberSignupValidate()) {
        this.newMember.memPhone = this.newMember.memPhone.toString()
        signUp(this.newMember).then(async response => {
          const result = response.data
          if (result.resultCode === '0') {
            await this.onCheck('front.member.completeSignup')
            this.makesub = false
            this.newMember = {
              ...this.defaultMember
            }
          } else {
            this.onAlert('warningart', 'api.' + result.resultCode)
          }
        }).catch(err => {
          console.error('singup err : ', err)
        })
      }
    },
    async onChangePartnerAddPopupSub (currentPartner) {
      console.log(currentPartner)
      if (!this.isMemberMake(currentPartner.myLevel)) {
        this.currentTab = 'makeTab1'
      }

      this.makesub = !this.makesub
      if (this.makesub) {
        console.log(this.rateMaxMinList)

        const list = await this.getPartnerRateForNewPartner(currentPartner.memId)
        console.log(list)

        this.newPartner.recommenderId = currentPartner.memId
        this.newPartner.partnerLevel = currentPartner.myLevel
        this.newPartner.partnerLevelName = currentPartner.myLevelName

        for (let i = 0; i < list.length; i++) {
          const item = list[i]
          const vendorCode = item.vendorCode
          let groupCode = this.commonCodeByCode[vendorCode].groupCode
          const groupCodeName = this.commonCodeByCode[vendorCode].groupCodeName
          if (groupCode === 'minigame') {
            groupCode = 'mini'
          }
          if (groupCode === 'casino' && groupCodeName.indexOf('HC-') > -1) {
            groupCode = 'hcasino'
          }
          if (groupCode) {
            this.newPartner.rateGroup[groupCode] = {
              ...item
            }
            this.newPartner.rateGroup[groupCode][`${groupCode}PR`] = '0.0'
            this.newPartner.rateGroup[groupCode][`${groupCode}LR`] = '0.0'
          }
          console.log(groupCode)
        }
      }
    },
    getPartnerRateForNewPartner (memId) {
      const params = {}
      if (memId) {
        params.memId = memId
      } else {
        params.memId = this.userData.memId
      }
      console.log('[REQ]/api/retail/partnerRates : ', params)
      return partnerRates(params).then(res => {
        console.log('[RES]/api/retail/partnerRates : ', res)
        const result = res.data
        if (result.resultCode === '0') {
          const list = result.data.rateMaxMinList
          // this.rateMaxMinList = list
          return list
        }
      })
    },
    onChangePartnerLevel (partnerLevel) {
      this.searchPartnerLevel = partnerLevel
      this.getPartnerList(1)
    },
    getPartnerList (page) {
      if (!page) {
        page = this.pageInfo.page
      }
      const params = {
        page: page,
        searchMemId: this.searchMemId,
        partnerLevel: this.searchPartnerLevel,
        searchType: this.searchType,
        count_per_list: 40
      }
      console.log('[REQ]getRetailMyMemList : ', params)
      return retailMyPartnerList(params).then(res => {
        console.log('[RES]getRetailMyMemList : ', res.data)
        const result = res.data
        if (result.resultCode === '0') {
          console.log(result.list)
          this.partnerList = result.data.list
          this.pageInfo = result.data.pageInfo
        }
      })
    },
    getPartnerLevels () {
      partnerLevels({}).then(res => {
        const result = res.data
        if (result.resultCode === '0') {
          console.log('partnerLevel : ', result.data)
          this.partnerLevelList = result.data.list
          this.newPartnerLevel = result.data.list[0]

          const partnerObj = {}
          for (let i = 0; i < this.partnerLevelList.length; i++) {
            const item = this.partnerLevelList[i]
            const code = item.code
            const codeName = item.codeName

            if (!partnerObj[code]) {
              partnerObj[code] = codeName
            }
          }

          console.log(partnerObj)

          this.partnerLevelObject = partnerObj
        }
      })
    },
    onAddPartnerSubmit () {
      this.emitter.emit('Loading', true)
      const reqData = { ...this.newPartner, rateGroup: {} }

      for (const groupCode in this.newPartner.rateGroup) {
        const item = this.newPartner.rateGroup[groupCode]
        const pr = item[`${groupCode}PR`]
        if (pr) {
          if (Number(item.maxPointRate) < Number(pr) || Number(item.minPointRate) > Number(pr)) {
            this.onAlert('warningart', `front.stributor.${groupCode}RollingError`)
            this.emitter.emit('Loading', false)
            return false
          }
        } else {
          this.onAlert('warningart', `front.stributor.${groupCode}RollingError`)
          this.emitter.emit('Loading', false)
          return false
        }
        const lr = item[`${groupCode}LR`]
        if (lr) {
          if (Number(item.maxLoseRate) < Number(lr) || Number(item.minLoseRate) > Number(lr)) {
            this.onAlert('warningart', `front.stributor.${groupCode}LoseError`)
            this.emitter.emit('Loading', false)
            return false
          }
        } else {
          this.onAlert('warningart', `front.stributor.${groupCode}LoseError`)
          this.emitter.emit('Loading', false)
          return false
        }

        reqData.rateGroup[`${groupCode}PR`] = pr
        reqData.rateGroup[`${groupCode}LR`] = lr
      }

      if (!reqData.memId) {
        this.onAlert('warningart', 'front.member.emptyMemId')
        this.emitter.emit('Loading', false)
        return false
      }

      if (!isValidUserId(reqData.memId)) {
        this.onAlert('warningart', 'api.U101')
        this.emitter.emit('Loading', false)
        return false
      }

      if (!reqData.memPass) {
        this.onAlert('warningart', 'front.member.emptyMemPass')
        this.emitter.emit('Loading', false)
        return false
      }

      if (!isValidPasswordPartner(reqData.memPass) || reqData.memPass.length > 20) {
        this.onAlert('warningart', 'api.U102')
        this.emitter.emit('Loading', false)
        return false
      }

      if (!reqData.memNick) {
        this.onAlert('warningart', 'front.member.emptyMemNick')
        this.emitter.emit('Loading', false)
        return false
      }
      if (!reqData.cashOutPass) {
        this.onAlert('warningart', 'front.member.emptyCashOutPass')
        this.emitter.emit('Loading', false)
        return false
      }
      if (!reqData.bank) {
        this.onAlert('warningart', 'front.member.emptyBankName')
        this.emitter.emit('Loading', false)
        return false
      }
      if (!reqData.bankAcc) {
        this.onAlert('warningart', 'front.member.emptyBankNumber')
        this.emitter.emit('Loading', false)
        return false
      }
      if (!reqData.memName) {
        this.onAlert('warningart', 'front.member.emptyMemName')
        this.emitter.emit('Loading', false)
        return false
      }
      if (!reqData.memPhone) {
        this.onAlert('warningart', 'front.member.emptyMemTel')
        this.emitter.emit('Loading', false)
        return false
      }

      return partnerJoin(reqData).then(res => {
        const result = res.data
        if (result.resultCode === '0') {
          this.onCheck('하위파트너 생성신청이 완료되었습니다. 관리자에서 승인되면 가입처리가 완료됩니다.')
          this.onChangePartnerAddPopupSub()
          this.newPartner = { ...this.defaultNewPartner }
          this.getPartnerList(1)
          this.emitter.emit('Loading', false)
        } else {
          console.log(res)
          this.emitter.emit('Loading', false)
          this.onAlert('warningart', result.resultMessage)
        }
      })
    },
    onChangeBank (value) {
      this.newPartner.bank = value
    },
    onChangeBankMember (value) {
      this.newMember.bank = value
    },
    getSummary () {
      getRetailSummary({}).then(response => {
        const data = response.data
        if (data.resultCode === '0') {
          this.summary = data.data.summary
          this.summaryNew = data.data.summaryNew
        }
      })
    }
  }
}
</script>
<style scoped>
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
  } /* 위아래버튼 삭제 */
  .PTN_1 { color: #b10000; }
  .PTN_2 { color: #d86800; }
  .PTN_3 { color: #c4a600; }
  .PTN_4 { color: #00a53f; }
  .PTN_5 { color: #4668ff; }
  .NORMAL { color: #8f5fff; }
  .box {display: inline-block; }
  .PTN_1.box {background: #5068d4;color: #fff; padding: 5px 4px;border-radius: 3px;}
  .PTN_2.box {background: #42b182;color: #fff; padding: 5px 4px;border-radius: 3px;}
  .PTN_3.box {background: #c63d40;color: #fff; padding: 5px 4px;border-radius: 3px;}
  .PTN_4.box {background: #edb838;color: #fff; padding: 5px 4px;border-radius: 3px;}
  .PTN_5.box {background: #4293ad;color: #fff; padding: 5px 4px;border-radius: 3px;}
  .NORMAL.box {background: #636971;color: #fff; padding: 5px 4px;border-radius: 3px;}
  .datesearchPT input[type="date"]::-webkit-calendar-picker-indicator{background: url(../../../assets/img/PTcalender.svg);display: block;background-repeat: no-repeat;background-size: contain;}
  .moveWrap2 {position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);background: #fff;z-index: 5;font-family: 'NanumGothic';box-shadow: 0 0 10px 1px #ddd;}
  .moveWrap2 .close {position: absolute;right: 50px;top: 18px; cursor: pointer;}
  .moveWrap2 .close img {height: 35px;}
  .moveWraphead { padding: 20px 50px; background:#575C68; color: #fff; font-size: 18px; }
  .moveWrapbody { padding: 0 50px 20px; }
  .moveWrap2 h4 {font-size: 16px;font-weight: bold;margin: 40px 0 18px;position: relative;color: #575C68;}
  .moveWrap2 table {width: 800px;text-align: center;}
  .moveWrap2 th {height: 40px;background: #828793; border: solid 1px #DDDEE2;color: #fff;vertical-align: middle;}
  .moveWrap2 table tr:nth-child(2) th { background:#EEF0F5; color: #575C68; }
  .moveWrap2 .scroll table tr:nth-child(2) th { background:#828793; color: #fff;}
  .moveWrap2 td {height: 40px;background: #FBFCFD;vertical-align: middle;border: solid 1px #EEF0F5;white-space: nowrap;color: #575C68;overflow: hidden;text-overflow: ellipsis;position: relative;}
  .moveWrap2 input {width: 50px;border: 1px solid #0000F0;background: #fff;border-radius: 3px;color: #575C68;text-align: center;}
  .moveWrap2 input.in {width: 90%;height: 28px;}
  .moveWrap2 input.in.password {-webkit-text-security: disc;-moz-webkit-text-security: disc;-moz-text-security: disc;}
  .moveWrap2 .accountInfo input.in { width: 54%; }
  .moveWrap2 .accountInfo input.in.w45w {width: 45%;}
  .moveWrap2 select.in {width: 80px;height: 28px;border: 1px solid #60452a;background: #fff;color: #575C68;margin-right: 5px;}
  .moveWrap2 p {margin-top: 25px;color: #2A40B9;font-size: 12px;text-align: right;}
  .moveWrap2 a.btn {margin-top: 25px;background: #2F4DF2;font-size: 16px;padding: 0 55px;height: 35px;color: #fff;line-height: 35px;text-align: center;border-radius: 5px;display: inline-block;margin-bottom: 18px;float: right;}
  /* .tabmenu_make { width: } */
  .tabmenu_make > ul {display: flex; gap: 10px; }
  .tabmenu_make > ul li {border: 1px solid; border-radius: 10px; padding: 8px 15px; cursor: pointer; }
  .tabmenu_make > ul li.current {background: #fff;color: #575C68;}
  @media (max-width: 1000px) {
    .strTablePTM li:nth-child(10), .strTablePTM li:nth-child(4) {width: 100%;}
  }
</style>
<style scoped src="@/styles/striNew.css"></style>
