<template>
  <div id="batch_check_certification">
    <div class="title_bar">
      <div>
        <span class="title_bar_font">税款所属期：</span>
        <span style="color: red">2020年11月</span>
        <span style="color: #888!important;font-size: 14px">（当期可进行批量勾选操作的截止日期为：2020年12月15日）</span>
      </div>
      <div>
        <el-button type="primary" round>查询</el-button>
        <el-button type="primary" round>下载发票文件</el-button>
        <el-button type="danger" round>上传</el-button>
      </div>
    </div>
    <div style="margin-bottom: 5px">
      <span>发票类别：</span>
      <el-radio-group v-model="invoiceType">
        <el-radio :label="1">增值税发票</el-radio>
        <el-radio :label="2">海关缴款书</el-radio>
      </el-radio-group>
    </div>
    <div class="select_info">
      <div v-if="invoiceType === 1 && isCheck === false">
        <span>开票日期：</span>
        <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
        —
        <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </div>
      <div v-if="isCheck">
        <span>勾选日期：</span>
        <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
        —
        <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </div>
      <div v-if="invoiceType === 2 && isCheck === false">
        <span>填发日期：</span>
        <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
        —
        <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </div>
      <div v-if="invoiceType === 1">
        <span>销方税号：</span>
        <el-input v-model="input" placeholder="请输入内容" class="input_style"></el-input>
      </div>
      <div>
        <span>勾选标志：</span>
        <el-radio-group v-model="isCheck">
          <el-radio :label="false">未勾选</el-radio>
          <el-radio :label="true">已勾选</el-radio>
        </el-radio-group>
      </div>
      <div v-if="!isCheck">
        <span>接收日期：</span>
        <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
        -
        <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </div>
    </div>
    <div class="title_bar">
      <span class="title_bar_font">批量勾选：</span>
    </div>
    <div>
      <div>
        <div>
          <div class="table_title">数据汇总情况</div>
<!--          <div class="theme-popover" id="jdt" style="margin-left: -200px;margin-top: 200px">-->
<!--            <div class="theme-popbod">-->
<!--              <div>正在处理，请稍后...</div>-->
<!--              <div id="img2"><img src="images/loading_1.gif"></div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="theme-popover-mask" id="mask3"></div>-->
          <table v-if="invoiceType === 1" width="100%" class="table_line_height table_title" border="1">
            <tbody>
            <tr>
              <th width="20%">勾选标志</th>
              <th width="15%">发票份数</th>
              <th width="20%">合计金额(元)</th>
              <th width="20%">合计税额(元)</th>
              <th width="">操作</th>
            </tr>
            <tr>
              <td>未勾选</td>
              <td>12</td>
              <td>1234.12</td>
              <td>5452.21</td>
              <td><a href="#" style="color: red">全部勾选</a></td>
            </tr>
            </tbody>
          </table>
<!--          <div class="theme-popover" id="jksjdt" style="margin-left: -200px;margin-top: 200px">-->
<!--            <div class="theme-popbod">-->
<!--              <div>正在处理，请稍后...</div>-->
<!--              <div id="jksimg2"><img src="images/loading_1.gif"></div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="theme-popover-mask" id="jksmask3"></div>-->
          <table v-if="invoiceType === 2" width="100%" class="table_line_height table_title" border="1">
            <tbody>
            <tr>
              <th width="25%">勾选标志</th>
              <th width="25%">缴款书份数</th>
              <th width="25%">合计税款金额(元)</th>
              <th width="">操作</th>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div>
        <div>
          <div class="table_title">批量勾选日志</div>
          <table v-if="invoiceType === 1" width="100%" class="table_line_height table_title" border="1">
            <tbody>
            <tr id="files">
              <th width="20%">上传时间</th>
              <th width="20%">勾选结果</th>
              <th width="20%">发票份数</th>
              <th width="20%">金额(元)</th>
              <th width="20%">税额(元)</th>
            </tr>
            <tr style="color: red">
              <td rowspan="2">2020-12-12 13:12:12</td>
              <td>勾选</td>
              <td>12</td>
              <td>1255.11</td>
              <td>152.12</td>
            </tr>
            <tr style="color: red">
              <td>撤销</td>
              <td>0</td>
              <td>0.00</td>
              <td>0.00</td>
            </tr>
            <tr style="">
              <td rowspan="2">2020-12-12 13:10:12</td>
              <td>勾选</td>
              <td>0</td>
              <td>0.00</td>
              <td>0.00</td>
            </tr>
            <tr style="">
              <td>撤销</td>
              <td>12</td>
              <td>152.13</td>
              <td>235.15</td>
            </tr>
            </tbody>
          </table>
          <table v-if="invoiceType === 2" width="100%" class="table_line_height table_title" border="1">
            <tbody>
            <tr id="jksfiles">
              <th width="20%">上传时间</th>
              <th width="20%">勾选结果</th>
              <th width="20%">缴款书份数</th>
              <th width="20%">税款金额(元)</th>
            </tr>
            <tr id="jkstr1" style="">
              <td rowspan="2">&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr id="jkstr2" style="">
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
<!--    <div>-->
<!--      <div id="dataTab">-->
<!--        <div class="title2">数据汇总情况</div>-->
<!--        <div class="theme-popover" id="jdt" style="margin-left: -200px;margin-top: 200px">-->
<!--          <div class="theme-popbod">-->
<!--            <div>正在处理，请稍后...</div>-->
<!--            <div id="img2"><img src="images/loading_1.gif"></div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="theme-popover-mask" id="mask3"></div>-->
<!--        <table width="100%" class="height40 resultTable" border="1" id="datatb" style="display: none;">-->
<!--          <tbody>-->
<!--          <tr id="data">-->
<!--            <th width="20%">勾选标志</th>-->
<!--            <th width="15%">发票份数</th>-->
<!--            <th width="20%">合计金额(元)</th>-->
<!--            <th width="20%">合计税额(元)</th>-->
<!--            <th width="">操作</th>-->
<!--          </tr>-->
<!--          <tr id="dtr1">-->
<!--            <td>&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--          </tr>-->
<!--          </tbody>-->
<!--        </table>-->
<!--        <div class="theme-popover" id="jksjdt" style="margin-left: -200px;margin-top: 200px">-->
<!--          <div class="theme-popbod">-->
<!--            <div>正在处理，请稍后...</div>-->
<!--            <div id="jksimg2"><img src="images/loading_1.gif"></div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="theme-popover-mask" id="jksmask3"></div>-->
<!--        <table width="100%" class="height40 resultTable" border="1" id="jksdatatb" style="">-->
<!--          <tbody>-->
<!--          <tr id="jksdata">-->
<!--            <th width="25%">勾选标志</th>-->
<!--            <th width="25%">缴款书份数</th>-->
<!--            <th width="25%">合计税款金额(元)</th>-->
<!--            <th width="">操作</th>-->
<!--          </tr>-->
<!--          <tr id="jksdtr1">-->
<!--            <td>&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--          </tr>-->
<!--          </tbody>-->
<!--        </table>-->
<!--      </div>-->
<!--      <div style="" id="fileTab">-->
<!--        <div class="title2">批量勾选日志</div>-->
<!--        <table width="100%" class="table_line_height table_title" border="1" id="filetb" style="display: none;">-->
<!--          <tbody>-->
<!--          <tr id="files">-->
<!--            <th width="20%">上传时间</th>-->
<!--            <th width="20%">勾选结果</th>-->
<!--            <th width="20%">发票份数</th>-->
<!--            <th width="20%">金额(元)</th>-->
<!--            <th width="20%">税额(元)</th>-->
<!--          </tr>-->
<!--          <tr id="tr1" style="">-->
<!--            <td rowspan="2">&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--          </tr>-->
<!--          <tr id="tr2" style="">-->
<!--            <td>&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--          </tr>-->
<!--          </tbody>-->
<!--        </table>-->
<!--        <table width="100%" class="table_line_height table_title" border="1" id="jksfiletb" style="">-->
<!--          <tbody>-->
<!--          <tr id="jksfiles">-->
<!--            <th width="20%">上传时间</th>-->
<!--            <th width="20%">勾选结果</th>-->
<!--            <th width="20%">缴款书份数</th>-->
<!--            <th width="20%">税款金额(元)</th>-->
<!--          </tr>-->
<!--          <tr id="jkstr1" style="">-->
<!--            <td rowspan="2">&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--          </tr>-->
<!--          <tr id="jkstr2" style="">-->
<!--            <td>&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--            <td>&nbsp;</td>-->
<!--          </tr>-->
<!--          </tbody>-->
<!--        </table>-->
<!--      </div>-->
<!--    </div>-->
    <div class="mainBox1">
      <div class="title_two"><span class="two_info">备注</span></div>
      <div class="tips color_2">
        <div id="hhl_tips" style="display: none;">1、发票状态为“正常”之外的其他发票，其他异常发票或海关缴款书不允许勾选；<br>2、管理状态为“疑点发票”的发票，企业勾选该类发票后系统将进行相应提示，请谨慎勾选；<br>3、对于勾选为抵扣的发票或海关缴款书默认全额抵扣，您可根据实际情况自行调整有效抵扣税额，请注意：差额部分将不可继续勾选为其他用途；<br>4、对于信息来源为扫描认证的发票或海关缴款书，支持撤销勾选操作，再次勾选时税款所属期归属在勾选提交时的当期；<br>5、对于已勾选的发票或海关缴款书，您可以在这里撤销勾选，但在申报期内，如您已经在“抵扣勾选统计”模块进行了申请统计，系统将锁定当期的勾选操作；如需继续勾选发票或海关缴款书，可在撤销统计成功后继续进行发票或海关缴款书勾选；<br>6、批量勾选会忽略已勾选的发票或海关缴款书再次勾选和已撤销勾选的发票或海关缴款书再次撤销的情况；<br>7、本模块支持查询当期可勾选范围内已勾选和未勾选的发票或海关缴款书。往期认证和未到认证期的发票或海关缴款书，请前往进项发票查询模块的“单票查询”和“未到勾选日期发票查询”进行查询。
        </div>
        <div id="old_tips">1、除发票状态、管理状态为正常外，其他异常发票或海关缴款书不允许勾选；<br>2、对于勾选为抵扣的发票或海关缴款书默认全额抵扣，您可根据实际情况自行调整有效抵扣税额，请注意：差额部分将不可继续勾选为其他用途；<br>3、对于信息来源为扫描认证的发票或海关缴款书，支持撤销勾选操作，再次勾选时税款所属期归属在勾选提交时的当期；<br>4、对于已勾选的发票或海关缴款书，您可以在这里撤销勾选，但在申报期内，如您已经在“抵扣勾选统计”模块进行了申请统计，系统将锁定当期的勾选操作；如需继续勾选发票或海关缴款书，可在撤销统计成功后继续进行发票或海关缴款书勾选；<br>5、批量勾选会忽略已勾选的发票或海关缴款书再次勾选和已撤销勾选的发票或海关缴款书再次撤销的情况；<br>6、本模块支持查询当期可勾选范围内已勾选和未勾选的发票或海关缴款书。往期认证和未到认证期的发票或海关缴款书，请前往进项发票查询模块的“单票查询”和“未到勾选日期发票查询”进行查询。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'batch_check_certification',
  data() {
    return {
      invoiceType: 1,
      isCheck: false
    }
  }
}
</script>

<style scoped>
.title_bar {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  margin-bottom: 10px;
}
.title_bar_font {
  border-left: 5px solid #16307a;
  padding-left: 12px;
  display: inline-block;
}
.select_info {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.select_info div {
  margin-right: 10px;
  margin-bottom: 5px;
}
.table_title {
  font-size: 14px;
  padding: 10px 0;
  color: #666;
  text-align: center;
}
.table_line_height {
  line-height: 40px;
}
.table_title th {
  background: #56627f;
  color: #fff;
  border: 1px solid #000;
}
.input_style {
  width: 250px;
}
.title_two {
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ebebeb;
  position: relative;
}
.title_two .two_info {
  border-left: 5px solid #16307a;
  padding-left: 12px;
  display: inline-block;
}
.mainBox1 {
  margin-top: 10px;
  clear: both;
}
.color_2 {
  color: #888 !important;
}
.input_1, .input_2, .tips {
  line-height: 28px;
}
table, td {
  border-collapse: collapse;
}
</style>
