<template>
  <div class="miningReport">
    <div class="titleBox">
        <i class="iconfont icon-baogao ic"></i>
        <h2 >{{$t(`personal.miningReport`)}}</h2>
    </div>
    <section class="contentBox">
        <div class="block">
            <div class="left">
                <i class="iconfont icon-baogao ic"></i>
                <div class="text">
                    <span style="font-size: 1.2em;">{{$t(`personal.weekly`)}}</span>
                    <span class="describe">{{$t(`personal.weeklyReportExplanation`)}}<span class="see">{{$t(`personal.weeklyReportTemplate`)}}</span> </span>
                </div>
            </div>
            <el-button class="bth" @click="handelWeek">{{$t(`personal.add`)}}</el-button>
        </div>

        <div class="block">
            <div class="left">
                <i class="iconfont icon-baogao ic"></i>
                <div class="text">
                    <span style="font-size: 1.2em;">{{$t(`personal.monthlyReport`)}}</span>
                    <span class="describe">{{$t(`personal.monthlyReportExplanation`)}}<span class="see">{{$t(`personal.monthlyReportTemplate`)}}</span> </span>
                </div>
            </div>
            <el-button class="bth" @click="handelMonth">{{$t(`personal.add`)}}</el-button>
        </div>
    </section>

         <el-dialog           
           :visible.sync="dialogVisible"
           width="45%"
           >
            <section class="dialogBox">
           <div class="title">{{$t(`personal.addWeeklyReport`)}}</div>
             <div class="inputBox"> 
          
               <div class="inputItem">
                 <span class="title" >{{$t(`personal.weeklyReportLanguage`)}}</span>
                 <el-select v-model="currency" :placeholder="$t(`personal.select`)">
                     <el-option
                       v-for="item in currencyList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                     </el-option>
                   </el-select>
 
               </div>
               <div class="inputItem">
                 <span class="title" >{{$t(`personal.weeklyReportCurrency`)}}</span>
                 <el-select v-model="currency" :placeholder="$t(`personal.select`)">
                     <el-option
                       v-for="item in currencyList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                     </el-option>
                   </el-select>
 
               </div>
               <div class="inputItem">
                 <span class="title" >{{$t(`personal.weeklyReportAccount`)}}</span>
                 <el-select v-model="currency" :placeholder="$t(`personal.select`)">
                     <el-option
                       v-for="item in currencyList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                     </el-option>
                   </el-select> 
               </div>             
             </div>    

           <el-button style="width:30%;font-size: 1.1em;margin-top: 30PX;" type="primary" @click="dialogVisible = false">{{$t(`personal.Submit`)}}</el-button>
      
         </section>
       </el-dialog> 

       <el-dialog           
           :visible.sync="monthlyReport"
           width="45%"
           >
            <section class="dialogBox">
           <div class="title">{{$t(`personal.addMonthlyReport`)}}</div>
             <div class="inputBox"> 
          
               <div class="inputItem">
                 <span class="title" >{{$t(`personal.monthlyReportLanguage`)}}</span>
                 <el-select v-model="currency" :placeholder="$t(`personal.select`)">
                     <el-option
                       v-for="item in currencyList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                     </el-option>
                   </el-select>
 
               </div>
               <div class="inputItem">
                 <span class="title" >{{$t(`personal.monthlyReportCurrency`)}}</span>
                 <el-select v-model="currency" :placeholder="$t(`personal.select`)">
                     <el-option
                       v-for="item in currencyList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                     </el-option>
                   </el-select>
 
               </div>
               <div class="inputItem">
                 <span class="title" >{{$t(`personal.monthlyReportAccount`)}}</span>
                 <el-select v-model="currency" :placeholder="$t(`personal.select`)">
                     <el-option
                       v-for="item in currencyList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                     </el-option>
                   </el-select> 
               </div>             
             </div>    

           <el-button style="width:30%;font-size: 1.1em;margin-top: 30PX;" type="primary" @click="monthlyReport = false">{{$t(`personal.Submit`)}}</el-button>
      
         </section>
       </el-dialog> 

  </div>

 
</template>

<script>
import IndexJs from "./index"
export default {
    mixins:[IndexJs]
}
</script>

<style lang="scss" scoped>
.miningReport{
    width: 100%;
    padding: 20PX;
    .titleBox{
        display: flex;
        align-items: center;
        h2{
          color: #36246F;
        }
    }
    .ic{
       font-size: 1.8em;
          margin-right: 5PX;
          color: #36246F;
          font-weight: 600;
    }
    .contentBox{
        width: 100%;
        .block{
            width: 95%;
            display: flex;
            justify-content: space-between;
           align-items: center;
         
            border:1PX solid rgba(0,0,0,0.1);
            padding: 20PX 50PX;
            height: 130PX;
            border-radius: 5PX;
            margin-top: 30PX;
            .left{
                display: flex;
              
                height: 50PX;
                .text{
                    display: flex;                  
                    flex-direction: column;
                    height: 100%;
                    justify-content: space-between;
                    // background: gold;
                    margin-left: 10PX;
                    .describe{
                        color: rgba(0,0,0,0.5);
                        .see{
                            color: #2889FC;
                            cursor: pointer;
                        }
                    }
                }
            }
            .bth{
                padding: 5PX 10PX;
                background: #EDF2FF;
                border:1PX solid #8DABFF;
                color: #2889FC;
            }
        }
    }
}

.dialogBox{
      padding: 0PX 20PX;
      padding-bottom: 50PX;
      display: flex;
      justify-content: center;
      flex-direction: column;
       align-items: center;
      .title{
        width: 100%;
        text-align: center;
        font-size: 25PX;
        margin: 10PX 0PX;
      }
      .inputBox{
        width: 70%;
        margin-top: 20PX;
        margin: 30PX 0PX;
        .inputItem{
          margin-top: 30PX;
          display: flex;
          flex-direction: column;
         align-items: left;
         justify-content: left;
        }
        .title{
          font-size: 1.1em;
          text-align: left;
        }
        .input{
          margin-top: 10PX;
         
        }     
      }
      .jurisdictionBox{
        width: 70%;
        height: 50PX;
        .checkboxS{
          margin-top: 10PX;
          display: flex;
          .el-checkbox{
            width: calc(100% / 3);
          }
        }
      }
  
    }
  
</style>