<template>
  <div class="wrap">
    <h2 style="color: #10833b" class="flex gap">
      <img src="../../../resources/images/bar.png" alt="" />횡단보도 목록 조회
    </h2>
    <div style="margin-left: 2rem; font-size: 13px" class="m-b3">
      현황관제&nbsp;&#62;&nbsp;<em class="green2 lined">횡단보도 목록 조회</em>
    </div>
    <div class="board-wrap ">

    <!-- 검색 -->
    <div class="de_Search">
      <table class="troubleTable">
      <tbody>
          <tr>
              <th>행정동</th>
              <td colspan="3" > 
                <div class="flex-start gap"><dongSelectList  @setDongCd="setDongCd" :nodeHiddenCk="true" :crslk_azHiddenCk="true" ></dongSelectList> </div>          
              </td>  
              <th>조회기간</th>
              <td colspan="3">       
                 <input type="date" value-format="yyyyMMdd" :max="today" v-model="crosswalkListSearch.startDate" />
                 <span style="margin: 0px 2%;"> ~ </span>
                 <input type="date" value-format="yyyyMMdd" :min="crosswalkListSearch.startDate" :max="today" v-model="crosswalkListSearch.endDate" />        
              </td>         
          </tr>
          <tr>                 
              <th>장비상태</th>
              <td > 
                <select v-model="crosswalkListSearch.error" style="width:100%;">
                  <option value="null">전체</option>
                  <option value="Y">정상</option>
                  <option value="N">비정상</option>
                </select>      
              </td>  
              <th>우회차선</th>
              <td >       
                 <select v-model="crosswalkListSearch.searchRightTurnType" style="width:100%;">
                  <option value="null">전체</option>
                  <option value="직각">직각</option>
                  <option value="곡선">곡선</option>
                </select>   
              </td>             
              <td colspan="4">     
                <button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;" @click="crosswalkSelectList">검색</button>
              </td> 
          </tr>
      </tbody>
      </table>
    </div>
      <!-- <div class="search-wrap border">
        <div class="flex-between mb-block">
          <div class="gap gap-sub">
            
          </div>
          <div class="flex gap date">
            
            <div class="bg-white flex gap">
              
            </div>
          </div>
        </div>

        <div class="flex-between">
          <div class="flex-start gap statue">
           
            <div class="bg-white flex gap box">
              
            </div>
          </div>
          <div class="flex mb-block">
            <div class="flex-start gap">
              
              
            </div>

            <div class="flex-start gap">
              <label class="">왕복차선 </label>
              <select v-model="crosswalkListSearch.searchRoundTripLane">
                <option value="null" disabled>전체</option>
              </select>
            </div>
            <div class="flex gap">
              <label class="m-r">장비 </label>
              <label>무단횡단</label>
              <input
                class="m-r"
                type="checkbox"
                v-model="crosswalkListSearch.jaywalking"
                true-value="Y"
                false-value="N"
              />
              <label>신호연장</label>
              <input
                class="m-r"
                type="checkbox"
                v-model="crosswalkListSearch.signal"
                true-value="Y"
                false-value="N"
              />
              <label>우회차량</label>
              <input
                class="m-r"
                type="checkbox"
                v-model="crosswalkListSearch.rightTurn"
                true-value="Y"
                false-value="N"
              />
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <div>
      <table class="pc">
        <!-- <colgroup>
            <col style="width: 10%;">
            <col style="width: 20%;">
            <col style="width: 20%;">
            <col style="width: 30%;">
            <col style="width: 20%;">
          </colgroup> -->
        <thead>
          <tr>
            <th>No</th>
            <th>설치일자</th>
            <th>시/도</th>
            <th>시/군/구</th>
            <th>행정동</th>
            <th>노드명</th>
            <th>횡단보도명</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(item, idx) in crosswalkList"
            :key="idx"
            @click="crosswalkSelectOne(item)"
          >
            <td data-title="NO">{{ crosswalkIdx - idx }}</td>
            <td data-title="설치일자">{{ item.instl_ymd }}</td>
            <td data-title="시/도">{{ item.sido_nm }}</td>
            <td data-title="시/군/구">{{ item.sigungu_nm }}</td>
            <td data-title="행정동">{{ item.dong_nm }}</td>
            <td data-titel="노드명">{{ item.node_name }}</td>
            <td data-titel="횡단보도명">{{ item.crslk_nm }}</td>
          </tr>
          <tr v-if="crosswalkListCount == 0">
              <td style="font-size: 20px;" colspan="7">검색조건에 해당하는 데이터가 없습니다.</td>
            </tr>
        </tbody>
      </table>
      <table class="mobile">
        <colgroup>
          <col style="width: 10%" />
          <col style="width: 20%" />
        </colgroup>
        <tbody>
          <tr>
            <th>No</th>
            <td></td>
          </tr>
          <tr>
            <th>설치일자</th>
            <td></td>
          </tr>
          <tr>
            <th>시/도</th>
            <td></td>
          </tr>
          <tr>
            <th>시/군/구</th>
            <td></td>
          </tr>
          <tr>
            <th>행정동</th>
            <td></td>
          </tr>
          <tr>
            <th>교차로</th>
            <td></td>
          </tr>
          <tr>
            <th>횡단보도명</th>
            <td></td>
          </tr>
        </tbody>
      </table>
      <div class="modal-wrap" v-if="modal_crosswalkOne == true">
        <div class="modal-bg"></div>
        <div class="modal_base" style="width:100rem;">
          <h2 class="flex-between">           
            <span>횡단보도 상세정보</span>
            <button
              type="button"
              class="gray-btn modal_base_close"
              @click="modal_crosswalkOne = false"
            >
              <img src="../../../resources/images/close.png" alt="" />
            </button>
          </h2>
          <div class="modal_base_body">
          <div class="flex-between">
            <div v-if="WTRMS_CAM1.file_name!=null" class="img" >무단횡단검지카메라 이미지
              <img style="height:100px;" :src="'http://localhost:8080/download/'+WTRMS_CAM1.file_path+'/'+WTRMS_CAM1.file_name">
            </div>
            <div v-if="WTRMS_CAM2.file_name!=null" class="img" >무단횡단검지카메라 이미지
              <img style="height:100px;" :src="'http://localhost:8080/download/'+WTRMS_CAM2.file_path+'/'+WTRMS_CAM2.file_name">
            </div>
            <div v-if="SIGNL_EXTN_CAM1.file_name!=null" class="img" >신호연장검지카메라 이미지
              <img style="height:100px;" :src="'http://localhost:8080/download/'+SIGNL_EXTN_CAM1.file_path+'/'+SIGNL_EXTN_CAM1.file_name">
            </div>
            <div v-if="SIGNL_EXTN_CAM2.file_name!=null" class="img" >신호연장검지카메라 이미지
              <img style="height:100px;" :src="'http://localhost:8080/download/'+SIGNL_EXTN_CAM2.file_path+'/'+SIGNL_EXTN_CAM2.file_name">
            </div>
            <div v-if="RITTRN_VHCLE_CAM.file_name!=null" class="img" >우회차량검지카메라 이미지
              <img style="height:100px;" :src="'http://localhost:8080/download/'+RITTRN_VHCLE_CAM.file_path+'/'+RITTRN_VHCLE_CAM.file_name">
            </div>
          </div>
           <h3 class="modal_base_title">횡단보도 기본정보</h3>
           <div class="de_Search">
           <table class="troubleTable mrg_b_0" >              
              <tbody>
                <tr>
                  <th colspan="2">시/도</th>
                  <td colspan="2">{{ crosswalk.sido_nm }}</td>
                  <th colspan="2">시/군/구</th>
                  <td colspan="2">{{ crosswalk.sigungu_nm }}</td>
                </tr>               
                <tr>
                  <th colspan="2">행정동</th>
                  <td colspan="2">{{ crosswalk.dong_nm }}</td>
                  <th colspan="2">노드명</th>
                  <td colspan="2">{{ crosswalk.node_name }}</td>
                </tr>              
                <tr>
                  <th colspan="2">횡단보도명</th>
                  <td colspan="2">{{ crosswalk.crslk_nm }}</td>   
                  <th colspan="2">왕복차선</th>
                  <td colspan="2">{{ crosswalk.rndtp_tfclne_info }}차선</td>               
                </tr>               
                <tr>
                  <th colspan="2">위도</th>
                  <td colspan="2">{{ crosswalk.lat }}</td>
                  <th colspan="2">경도</th>
                  <td colspan="2">{{ crosswalk.lon }}</td>                 
                </tr>
                <tr>
                  <th rowspan="3">설치된 검시장비</th>
                  <th>무단횡단</th>
                  <td
                    colspan="6"
                    v-if="crosswalk.wtrms_crosng_eqpmn_instl_yn == 'y'"
                  >
                    설치
                  </td>
                  <td colspan="6" v-else>미설치</td>
                </tr>
                <tr>
                  <th >신호연장</th>
                  <td
                    colspan="6"
                    v-if="crosswalk.signl_extn_eqpmn_instl_yn == 'y'"
                  >
                    설치
                  </td>
                  <td colspan="7" v-else>미설치</td>
                </tr>
                <tr>
                  <th>우회전차량</th>
                  <td
                    colspan="6"
                    v-if="crosswalk.rittrn_vhcle_eqpmn_instl_yn == 'y'"
                  >
                    설치
                  </td>
                  <td colspan="6" v-else>미설치</td>
                </tr>
                <!--
                <tr>
                  <th colspan="2">무단횡단 검지범위</th>
                  <td colspan="6">{{ crosswalk.wtrms_crosng_detct_rate }}%</td>
                </tr>
                -->                
                <tr>
                  <th colspan="2">우회전차선유무</th>
                  <td colspan="2">{{ crosswalk.rittrn_tfclne_yn }}</td>
                  <th colspan="2">우회전차선유형</th>
                  <td colspan="2">{{ crosswalk.rittrn_tfclne_ty }}</td>
                </tr>   
                <tr>
                  <th colspan="2">등록자 ID</th>
                  <td colspan="2">{{ nullHyphen(crosswalk.rgtr_id) }}</td>
                  <th colspan="2">등록일자</th>
                  <td colspan="2">{{ yyyymmdd(crosswalk.reg_dt) }}</td>
                </tr>
                <tr>
                  <th colspan="2">수정자 ID</th>
                  <td colspan="2">{{ nullHyphen(crosswalk.mdfr_id) }}</td>
                  <th colspan="2">수정일자</th>
                  <td colspan="2">{{ yyyymmdd(crosswalk.mdfcn_dt) }}</td>
                </tr>
                <tr>
                  <th colspan="2">횡단보도 유지보수 담당자</th>
                  <td colspan="2">{{ crosswalk.mngr_nm }}</td>
                </tr>
              </tbody>
            </table>
           </div>
            <br />
            <br />
            <br />

            <h3 class="modal_base_title">이벤트 발생정보</h3>
            <button class="btn-2 green-btn s-btn " style=" float: right; margin-left: 10px; margin-bottom:5px;" @click="crosswalkSearchPage(crosswalk.node_id, crosswalk.dong_cd)">위치확인</button>
            <button class="btn-2 green-btn s-btn " style=" float: right; margin-left: 10px; margin-bottom:5px;" @click="situationSearchPage(crosswalk.node_id, crosswalk.crslk_az, crosswalk.sigungu_cd, crosswalk.dong_cd)">상황발생 상세보기</button>
            <button class="btn-2 green-btn s-btn " style=" float: right; margin-left: 10px; margin-bottom:5px;" @click="errorSearchPage(crosswalk.node_id, crosswalk.crslk_az, crosswalk.sigungu_cd, crosswalk.dong_cd)">장애발생 상세보기</button>          
            <div class="de_Search">
              <table class="troubleTable mrg_b_0" >              
                  <tbody>
                    <tr>
                      <th rowspan="4">금일 상황 발생</th>
                      <th >무단횡단</th>
                      <td colspan="4">
                        {{ crosswalk.jaywalkCount }}회
                      </td>
                    </tr>
                    <tr>
                      <th>신호연장</th>                     
                      <td>{{ crosswalk.signalCount }}회</td>
                    </tr>
                    <tr>
                      <th>차량위반</th>   
                      <td>{{ crosswalk.rightTurnCount }}회</td>
                    </tr>
                    <tr>
                      <th>금일 장애발생 수</th>
                      <td>{{ crosswalk.errorCount }}회</td>
                    </tr>
                  </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-wrap">
      <PaginationButton
        v-model:currentPage="crosswalkListSearch.currentPage"
        :per-page="crosswalkListSearch.perPage"
        :total-count="crosswalkListCount"
        :max-range="5"
        :click="crosswalkSelectList"
      />
    </div>
    <!--<div class="flex-end">
      <router-link to="/UserManagement.page">
        <span class="btn-2 green-btn excel">Excel로 저장</span>
      </router-link>
    </div> -->
  </div>
</template>

<script>
import axios from "axios";
import PaginationButton from "../../component/pagination/PaginationButton.vue";
import dongSelectList from "../../component/dongSelectListSimple.vue";
import COMMON_UTIL from "../../../resources/js/commonUtil.ts";

export default {
  data() {
    return {
      crosswalkListSearch: {
        currentPage: 1,
        perPage: 10,
        startDate: null,
        endDate: null,
        searchDongCode: null,
        searchRightTurnType: null,
        error: null
      },

      crosswalk: {
        crslk_az: null,
        node_id: null,
        sigungu_cd: null,
        dong_cd: null,
        crslk_nm: null,
        instl_ymd: null,
        reg_dt: null,
        rgtr_id: null,
        mdfcn_dt: null,
        mdfr_id: null,
        mntnce_mngr_id: null,
        rittrn_tfclne_yn: null,
        rittrn_tfclne_ty: null,
        rndtp_tfclne_info: null,
        wtrms_crosng_detct_rate: null,
        wtrms_crosng_eqpmn_instl_yn: null,
        signl_extn_eqpmn_instl_yn: null,
        rittrn_vhcle_eqpmn_instl_yn: null,
        lat: null,
        lon: null,
        sido_nm: null,
        sigungu_nm: null,
        dong_nm: null,
        node_name: null,
        mngr_nm: null,
        jaywalkCount: null,
        signalCount: null,
        rightTurnCount: null,
        errorCount: null,
      },

      crosswalkListCount: 0,
      crosswalkList: [],
      crosswalkIdx: 0,

      address: {},
      modal_crosswalkOne: false,

      //오늘 날짜
      today: COMMON_UTIL.today(),
      file_info:[],
      RITTRN_VHCLE_CAM:{
        file_path:null,
        file_name:null,
      },
      WTRMS_CAM1:{
        file_path:null,
        file_name:null,
      },
      WTRMS_CAM2:{
        file_path:null,
        file_name:null,
      },
      SIGNL_EXTN_CAM1:{
        file_path:null,
        file_name:null,
      },
      SIGNL_EXTN_CAM2:{
        file_path:null,
        file_name:null,
      },
    };
  },
  methods: {
    crosswalkSelectList: function () {
      const vm = this;
      vm.crosswalkListSearch.searchDongCode = vm.address.dong_cd;

      axios({
        url: "/statusControl/crosswalkSelectList.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: vm.crosswalkListSearch,
      })
        .then(function (response) {
          // console.log("crosswalkSelectList - response : ", response.data);
          vm.crosswalkListCount = response.data.crosswalkListCount;
          vm.crosswalkList = response.data.crosswalkList;
          vm.crosswalkIdx =
            response.data.crosswalkListCount -
            (vm.crosswalkListSearch.currentPage - 1) *
            vm.crosswalkListSearch.perPage;
        })
        .catch(function (error) {
          console.log("crosswalkSelectList - error : ", error);
          alert("횡단보도 목록 조회 오류, 관리자에게 문의해주세요.");
        });
    },

    crosswalkSelectOne: function (item) {
      const vm = this;

      axios({
        url: "/statusControl/crosswalkSelectOne.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: { node_id: item.node_id, crslk_az: item.crslk_az },
      })
        .then(function (response) {
          console.log("crosswalkSelectOne - response : ", response.data);
          vm.crosswalk = response.data;
          vm.modal_crosswalkOne = true;
          vm.RITTRN_VHCLE_CAM={
            file_path:null,
            file_name:null,
          };
          vm.WTRMS_CAM1={
            file_path:null,
            file_name:null,
          }
          vm.WTRMS_CAM2={
            file_path:null,
            file_name:null,
          }
          vm.SIGNL_EXTN_CAM1={
            file_path:null,
            file_name:null,
          }
          vm.SIGNL_EXTN_CAM2={
            file_path:null,
            file_name:null,
          },         
          vm.crosswalkImgSelect(item);
        })
        .catch(function (error) {
          console.log("crosswalkSelectOne - error : ", error);
          alert("횡단보도 상세조회 오류, 관리자에게 문의해주세요.");
        });
    },

    //횡단보도 이미지 조회
    crosswalkImgSelect: function (item) {
      const vm = this;
      // console.log("crosswalkSelectOne item : ",item);
      axios({
        url: "/statusControl/crosswalkImgSelectList.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: { node_id: item.node_id, crslk_az: item.crslk_az },
      }).then(function (response) {  
          console.log("crosswalkImgSelectList response : ",response.data);
          let cnt1=0;
          let cnt2=0;
          for( var i=0 ;  i<response.data.length ; i++){
            console.log("for response i : ",i," :",response.data[i]);
            //우회전 카메라
            if(response.data[i].eqpmn_ty_id==='EQPMN-CAM-RITTRN_VHCLE'){
              vm.RITTRN_VHCLE_CAM.file_name=response.data[i].file_nm;
              vm.RITTRN_VHCLE_CAM.file_path=response.data[i].real_file_nm;
            }
            //무단횡단 카메라
            if(response.data[i].eqpmn_ty_id==='EQPMN-CAM-WTRMS'){
              console.log("for ck i : ",i," :",response.data[i]);
              if(cnt1==0){
                vm.WTRMS_CAM1.file_name=response.data[i].file_nm;
                vm.WTRMS_CAM1.file_path=response.data[i].real_file_nm;
              }
              else{
                vm.WTRMS_CAM2.file_name=response.data[i].file_nm;
                vm.WTRMS_CAM2.file_path=response.data[i].real_file_nm;
              }
              cnt1++;
              console.log("WTRMS_CAM1 i : ",i," :",vm.WTRMS_CAM1);
              console.log("WTRMS_CAM2 i : ",i," :",vm.WTRMS_CAM2);
            }
            //신호연장 카메라
            if(response.data[i].eqpmn_ty_id==='EQPMN-CAM-SIGNL_EXTN'){
              if(cnt2==0){
                vm.SIGNL_EXTN_CAM1.file_name=response.data[i].file_nm;
                vm.SIGNL_EXTN_CAM1.file_path=response.data[i].real_file_nm;
              }
              else{
                vm.SIGNL_EXTN_CAM2.file_name=response.data[i].file_nm;
                vm.SIGNL_EXTN_CAM2.file_path=response.data[i].real_file_nm;
              }
              cnt2++;
            }
          } 
          vm.file_info = response.data;
        })
        .catch(function (error) {
          console.log("crosswalkSelectOne - error : ", error);
          alert("횡단보도 상세조회 오류, 관리자에게 문의해주세요.");
        });
    },
    //날짜 시,분,초 자르기
    yyyymmdd: function (date) {
      return COMMON_UTIL.yyyymmdd(date);
    },

    //null값 '-' 치환
    nullHyphen(data) {
      return COMMON_UTIL.nullHyphen(data);
    },

    //dongSelectList 컴포넌트에서 선택된 dong_cd 셋팅
    setDongCd(value) {
      // console.log("value : ", value);
      this.address = value;
    },

    situationSearchPage: function(node_id, crslk_az, sigungu_cd, dong_cd) {
      this.$router.push({ path: '/SituationSearch.page', query: { 'node_id': node_id, 'crslk_az': crslk_az, 'sigungu_cd': sigungu_cd,'dong_cd': dong_cd}})
    },

    errorSearchPage: function(node_id, crslk_az, sigungu_cd, dong_cd) {
      this.$router.push({ path: '/ErrorSearch.page', query: { 'node_id': node_id, 'crslk_az': crslk_az, 'sigungu_cd': sigungu_cd, 'dong_cd': dong_cd}})
    },
    
    crosswalkSearchPage: function(node_id, dong_cd) {
      this.$router.push({ path: '/CrosswalkSearch.page', query: { 'node_id': node_id, 'dong_cd': dong_cd, 'route': 'Y'}})
    }
  },
  watch: {},
  computed: {},
  components: {
    PaginationButton: PaginationButton,
    dongSelectList: dongSelectList,
  },
  created() {
    this.crosswalkListSearch.endDate = COMMON_UTIL.today();
    // this.crosswalkListSearch.startDate = COMMON_UTIL.oneMonthAgo();
    this.crosswalkListSearch.startDate = '2023-07-01';
  },
  mounted() {
    console.log("CrosswalkListSearch mounted");
    this.crosswalkSelectList();
  },
};
</script>

<style scoped>
@media all and (max-width: 479px) {
  .date {
    margin-right: 0 !important;
    margin-bottom: 1rem;
  }
  .line select {
    width: 10rem;
  }
  .local select {
    width: 8.7rem;
  }
}
.date {
  width: 60%;
}
.wrap h2 {
  font-size: 2.5rem;
}
.mar {
  margin-bottom: 0rem !important;
}
.gap-sub {
  display: flex;
}
.g1 {
  width: 35.9em !important;
  margin-bottom: 0rem !important;
}
.ta5 {
  height: 9em !important;
  line-height: 9em !important;
  height: 30em;
}
.in1 {
  width: 21em;
  /* height: 4em !important; */
  text-align: center;
}
.taa {
  width: 10em;
  height: 7em;
  background-color: #f0f0f0;
  /* border: 1px solid gray; */
  /* border-bottom: 1px solid; */
  box-shadow: 0px 0px 1px gray;
  line-height: 7em;
  text-align: center;
}
.g2 {
  width: 38.6em;
  /* margin-bottom: 0rem !important; */
}
.g3 {
  width: 39em;
  height: 7em;
  /* margin-top: -11px; */
  /* flex-grow: 1; */
  /* width: 155em; */
}
.statue {
  width: 50%;
}
.statue select {
  width: 20rem;
}
#op {
  line-height: 2em;
}
.border {
  width: 100%;
  height: 100%;
  /* border: 1px solid blue; */
}
.board-wrap {
  width: 100%;
}
.mobile {
  display: none;
}


.btnb {
  width: 1500px;
  margin: 0 auto;
  /* text-align: right; */
  /* margin-top: -80em; */
  /* border: 1px solid red; */
}
.modal {
  width: 100rem;
}
.modalmain {
  padding: 1rem;
  max-height: 70rem;
  overflow: scroll;
  overflow-x: hidden;
}
.modalmain table tbody tr:nth-child(odd) {
  background: #f7f6f6;
}
.modalmain table tbody tr:nth-child(even) {
  background: #ffffff;
}
.modalmain table td {
  border: 1px solid #eee;
}

.modal-bg h2 {
  background: #e5e5dd;
  font-size: 2rem;
  padding: 1rem;
}
.modal h3 {
  font-size: 1.8rem;
  border-bottom: 1px solid #eee;
  padding: 1rem 0 0.2rem 0;
}
.modal h4 {
  font-size: 1.6rem;
  font-weight: 100;
  padding: 0.2rem 0 1rem 0;
}
.modal-bg button {
  border: 0;
  background: none;
  height: 30px;
  cursor: pointer;
}
.modal  img {
  width: 25px;
  height: 25px;
}
.modal .box{padding: 3rem;}
.modal .box .img{width: 15rem; height: 15rem; border: 1px solid #e5e5dd;}  
.main-img{width: 20rem; height: 20rem;  border: 1px solid #e5e5dd; margin: 3px;}
.txt-point {
  color: #333;
}
.wrap {
  width: 80%;
  margin: 25px auto;
}

.search-wrap .box {
  width: 100%;
}
.float-right {
  float: right;
}

.clear-fix::after {
  content: "";
  display: block;
  clear: both;
}

.search-wrap .float-right form > *:not(:last-child) {
  margin-right: 1rem;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

th,
td {
  border-left: none;
  border-right: none;
}

table th {
  padding: 15px ;
  color: #fff;
  background-color: #13833b;
}

table td {
  padding: 10px ;
  border-bottom: 1px solid #e5e5dd;
}

table tr:nth-child(odd) {
  background-color: #f7f6f6;
}

table tr:nth-child(even) {
  background-color: #fdfdf2;
}

.bottom-wrap {
  position: relative;
  padding: 1rem 0;
}

.btn-2 {
  display: inline-block;
  padding: 0.3rem 2rem;
  font-size: 13.333px;
}

.pg-wrap {
  text-align: center;
}

.pg-item {
  display: inline-block;
  padding: 10px;
  color: #949292;
}

.pg-item.prev,
.pg-item.next,
.pg-item.active {
  color: #13833b;
}

.btn-wrap {
  position: absolute;
  right: 0;
  top: 1.5em;
  z-index: 10;
}

.btn-wrap button {
  cursor: pointer;
}
.img {
  height: 15rem;
  border: 1px solid rgba(92, 92, 92, 0.516);
  line-height: 4rem;
  width: 200px;
}
</style>

