<template>
  <div class="eibs-tab">
    <c-list-search
      @form-reset="handleReset('paramsForm')"
      @form-search="handleSearch"
    >
      <template v-slot="searchSlot">
        <el-form
          class="m-table-search-form"
          ref="paramsForm"
          label-position="right"
          label-width="110px"
          size="small"
        >
          <el-row>
           <div v-if="activeTab == 'de'">
            <c-col :span="8">
              <el-form-item label="业务编号" prop="infcon.seaownref" style="width: 100%">
                <c-input v-model="model.infcon.seaownref"  @change="changeOwnref" maxlength="16" placeholder="请输入业务编号"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="日期" prop="infcon.opndatfrom" style="width: 100%">
                <c-col :span="11">
                  <c-date-picker type="date" v-model="model.infcon.opndatfrom" placeholder="请选择起始日期" value-format="yyyy-MM-dd" style="width: 100%"></c-date-picker>
                </c-col>
                <c-col :span="2" style="text-align: center">
                  <label style="display: inline-block; width: 100%">-</label>
                </c-col>
                <c-col :span="11">
                  <c-date-picker type="date" v-model="model.infcon.opndatto" placeholder="请选择截至日期" style="width: 100%" value-format="yyyy-MM-dd"></c-date-picker>
                </c-col>
              </el-form-item>
            </c-col>
             <c-col :span="8">
                <el-form-item label="受益人" prop="infcon.benref" style="width: 100%">
                  <c-input v-model="model.infcon.benref"  placeholder="请输入受益人客户号/名称"></c-input>
                </el-form-item>
              </c-col>
           
            </div>
            <div v-if="activeTab == 'bf'">
            <c-col :span="8">
              <el-form-item label="业务编号" prop="bfcon.bfownref" style="width: 100%">
                <c-input v-model="model.bfcon.bfownref"  @change="changeOwnref" maxlength="16" placeholder="请输入业务编号"></c-input>
              </el-form-item>
            </c-col>

            <c-col :span="8">
              <el-form-item label="日期" prop="bfcon.opndatfrom" style="width: 100%">
                <c-col :span="11">
                  <c-date-picker type="date" v-model="model.bfcon.opndatfrom" placeholder="请选择起始日期" value-format="yyyy-MM-dd" style="width: 100%"></c-date-picker>
                </c-col>
                <c-col :span="2" style="text-align: center">
                  <label style="display: inline-block; width: 100%">-</label>
                </c-col>
                <c-col :span="11">
                  <c-date-picker type="date" v-model="model.bfcon.opndatto" placeholder="请选择截至日期" style="width: 100%" value-format="yyyy-MM-dd"></c-date-picker>
                </c-col>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="单据状态" prop="bfcon.docsta" style="width: 100%">
                <c-select v-model="model.bfcon.docsta" dbCode="stadoc" uil="CN"   placeholder="请选择单据状态"></c-select>
              </el-form-item>
            </c-col>
            </div>
            <div v-if="activeTab == 'bp'">
            <c-col :span="8">
              <el-form-item label="业务编号" prop="bpcon.bpownref" style="width: 100%">
                <c-input v-model="model.bpcon.bpownref"  @change="changeOwnref" maxlength="16" placeholder="请输入业务编号"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="日期" prop="bpcon.opndatfrom" style="width: 100%">
                <c-col :span="11">
                  <c-date-picker type="date" v-model="model.bpcon.opndatfrom" placeholder="请选择起始日期" value-format="yyyy-MM-dd" style="width: 100%"></c-date-picker>
                </c-col>
                <c-col :span="2" style="text-align: center">
                  <label style="display: inline-block; width: 100%">-</label>
                </c-col>
                <c-col :span="11">
                  <c-date-picker type="date" v-model="model.bpcon.opndatto" placeholder="请选择截至日期" style="width: 100%" value-format="yyyy-MM-dd"></c-date-picker>
                </c-col>
              </el-form-item>
            </c-col>
             <c-col :span="8">
              <el-form-item label="单据编号" prop="bpcon.pntref" style="width: 100%">
                <c-input v-model="model.bpcon.pntref" maxlength="16" placeholder="请输入单据编号"></c-input>
              </el-form-item>
            </c-col>
            </div>
          </el-row>
          <el-row v-show="searchSlot.searchToggle">
           <div v-if="activeTab == 'de'">
              <c-col :span="8">
              <el-form-item label="申请人"  prop="infcon.aplref" style="width: 100%">
                <c-input v-model="model.infcon.aplref"  placeholder="请输入申请人客户号/名称"></c-input>
              </el-form-item>
            </c-col>
              <c-col :span="8">
                    <el-form-item label="是否闭卷" prop="infcon.isClosed" style="width: 100%">
                      <c-select v-model="model.infcon.isClosed" dbCode='cxmflg'  placeholder="请选择是否闭卷">
                      </c-select>
                    </el-form-item>
              </c-col> 
            </div>
             <div v-if="activeTab == 'bf'">
                <c-col :span="8">
                  <el-form-item label="通知编号" prop="bfcon.seaownref" style="width: 100%">
                    <c-input v-model="model.bfcon.seaownref"  placeholder="请输入通知编号"></c-input>
                  </el-form-item>
                </c-col>
               
              <c-col :span="8">
                  <el-form-item label="受益人"  prop="bfcon.benref" style="width: 100%">
                    <c-input v-model="model.bfcon.benref"  placeholder="请输入受益人客户号/名称"></c-input>
                  </el-form-item>
              </c-col>
               <c-col :span="8">
                <el-form-item label="申请人"  prop="bfcon.aplref" style="width: 100%">
                  <c-input v-model="model.bfcon.aplref"  placeholder="请输入申请人客户号/名称"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="8">
                  <el-form-item label="是否闭卷" prop="bfcon.isClosed" style="width: 100%">
                    <c-select v-model="model.bfcon.isClosed" dbCode='cxmflg'  placeholder="请选择是否闭卷">
                    </c-select>
                  </el-form-item>
              </c-col> 
            </div>
            <div v-if="activeTab == 'bp'">
            <c-col :span="8">
                <el-form-item label="受益人"   prop="bpcon.benref" style="width: 100%">
                  <c-input v-model="model.bpcon.benref"  placeholder="请输入受益人客户号/名称"></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="是否闭卷" prop="bpcon.isClosed" style="width: 100%">
                  <c-select v-model="model.bpcon.isClosed" dbCode='cxmflg'  placeholder="请选择是否闭卷">
                  </c-select>
                </el-form-item>
            </c-col> 
            </div>
          </el-row>
        </el-form>
      </template>
    </c-list-search>

    <c-col :span="24" >
      <c-button class="medium_bcs" size="medium" type="primary" style="margin-left: 0px" title="DETOPN"
                @click="toDetopn">
        国内证卖方通知
      </c-button>
    </c-col>

<div style="height: 90%">
  <c-col :span="24">
      <c-tabs v-model="activeTab" @tab-click="handleClickTab" type="card" ref="elment">
        <el-tab-pane label="信用证信息" name="de">
          <el-table
              v-loading="load"
              :data="stmData.data" 
              height="calc(100vh - 480px)"
              border 
              :columns="stmData.columns"
              :showButtonFlg="true"
              :highlight-current-row="true"
              @row-click="TableRowClick"
              @row-dblclick="TableDblRow"
          >
            <el-table-column
                v-for="(item, key) in stmData.columns"
                :key="key"
                :label="item.label"
                :prop="item.prop"
                :min-width="item.width"
            >
              <template  slot-scope="scope">
                <div style="text-align: center" v-if="item.prop.indexOf('amt') >= 0">{{moneyFormat(scope.row[item.prop],scope.row.cur)}}</div>
                <div v-else>{{scope.row[item.prop]}}</div>
              </template>
            </el-table-column>
            <!-- 自定义组件里加了最右边的一列”操作“ -->
            <el-table-column fixed="right" prop="op" label="操作" width="180px">
              <template slot="header">
                <!-- 插槽里放了一个文字 一个按钮 -->
                <c-col :span="11" style="text-align: center"
                  ><span>操作</span>
                </c-col>
              </template>
              <template slot-scope="scope">
                <c-button
                  style="margin-right: 7px"
                  size="small"
                  type="text"
                  @click="handler(scope.row)"
                >处理
                </c-button>
                <!-- 申请一个弹出主键放在插槽，加工已渲染的数据 -->
                <el-popover
                  placement="top-start"
                  title="历史信息"
                  width="1200"
                  trigger="manual" 
                  v-clickOutside="closeDisplayDialog"
                  :ref="'popover_' + scope.row.inr"
                >
                  <div
                    style="
                      text-align: right;
                      margin-top: -30px;
                      margin-right: 5px;
                      font-size: 16px;
                    "
                  >
                    <span
                      class="el-icon-close"
                      style="cursor: pointer"
                      @click="closeDetailsDialog('popover_' + scope.row.inr)"
                    ></span>
                  </div>
                  <el-table
                      :data="trnData.data"
                      :columns="trnData.columns"
                      :showButtonFlg="true"
                  >
                    <el-table-column
                        v-for="(item, key) in trnData.columns"
                        :key="key"
                        :label="item.label"
                        :prop="item.prop"
                        :width="item.width"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row[item.prop] }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        prop="op"
                        label="操作"
                        width="100px"
                    >
                      <template slot-scope="scope">
                        <c-button
                            style="margin-left: 0"
                            size="small"
                            @click="display(scope.row)"
                        >快照</c-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                  <c-button
                    style="margin-left: 0px"
                    size="small"
                     type="text"
                    @click="details(scope.row)"
                    slot="reference"
                  >
                    快照
                  </c-button>
                  <c-button style="margin-left: 0" type="text" size="small" slot="reference" @click="toInfo(scope.row,'DED','BFD')">
                    Info
                  </c-button>
                </el-popover>
              
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-box" style="display:block">
             <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="pagination.pageIndex"
              :page-sizes="[10, 20, 50, 100, 500]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total">
          </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="单据信息" name="bf">
            <el-table
            v-loading="load"
              :data="stmDataBf.data"
              height="calc(100vh - 480px)"
              border 
              :columns="stmDataBf.columns"
              :showButtonFlg="true"
              :highlight-current-row="true"
              @row-click="TableRowClick"
              @row-dblclick="TableDblRow"
          >
            <el-table-column
                v-for="(item, key) in stmDataBf.columns"
                :key="key"
                :label="item.label"
                :prop="item.prop"
                :min-width="item.width"
            >
              <template  slot-scope="scope">
                <div style="text-align: center" v-if="item.prop.indexOf('amt') >= 0">{{moneyFormat(scope.row[item.prop],scope.row.cur)}}</div>
                <div v-else>{{scope.row[item.prop]}}</div>
              </template>
            </el-table-column>
            <!-- 自定义组件里加了最右边的一列”操作“ -->
            <el-table-column fixed="right" prop="op" label="操作" width="180px">
              <template slot="header">
                <!-- 插槽里放了一个文字 一个按钮 -->
                <c-col :span="11" style="text-align: center"
                  ><span>操作</span>
                </c-col>
              </template>
              <template slot-scope="scope">
                <c-button
                  style="margin-right: 7px"
                  size="small"
                  type="text"
                  @click="handler(scope.row)"
                >处理
                </c-button>
                <!-- 申请一个弹出主键放在插槽，加工已渲染的数据 -->
                <el-popover
                  placement="top-start"
                  title="历史信息"
                  width="1200"
                  trigger="manual" 
                  v-clickOutside="closeDisplayDialog"
                  :ref="'popover_' + scope.row.inr"
                >
                  <div
                    style="
                      text-align: right;
                      margin-top: -30px;
                      margin-right: 5px;
                      font-size: 16px;
                    "
                  >
                    <span
                      class="el-icon-close"
                      style="cursor: pointer"
                      @click="closeDetailsDialog('popover_' + scope.row.inr)"
                    ></span>
                  </div>
                  <el-table
                      :data="trnData.data"
                      :columns="trnData.columns"
                      :showButtonFlg="true"
                  >
                    <el-table-column
                        v-for="(item, key) in trnData.columns"
                        :key="key"
                        :label="item.label"
                        :prop="item.prop"
                        :width="item.width"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row[item.prop] }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        prop="op"
                        label="操作"
                        width="100px"
                    >
                      <template slot-scope="scope">
                        <c-button
                            style="margin-left: 0"
                            size="small"
                            @click="display(scope.row)"
                        >快照</c-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                  <c-button
                    style="margin-left: 0px"
                    size="small"
                    type="text"
                    @click="details(scope.row)"
                    slot="reference"
                  >
                    快照
                  </c-button>
                  <c-button style="margin-left: 0" type="text" size="small" slot="reference" @click="toInfo(scope.row,'BFD','BPD')">
                    Info
                  </c-button>
                </el-popover>
              
              </template>
            </el-table-column>
          </el-table>
           <div class="pagination-box" style="display:block">
             <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="pagination.pageIndex"
              :page-sizes="[10, 20, 50, 100, 500]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total">
          </el-pagination>
          </div>
        </el-tab-pane>
       
         <el-tab-pane label="融资信息" name="bp">
             <el-table
              v-loading="load"
              :data="stmDataBp.data"
              height="calc(100vh - 480px)"
              border 
              :columns="stmDataBp.columns"
              :showButtonFlg="true"
              :highlight-current-row="true"
              @row-click="TableRowClick"
              @row-dblclick="TableDblRow"
          >
            <el-table-column
                v-for="(item, key) in stmDataBp.columns"
                :key="key"
                :label="item.label"
                :prop="item.prop"
                :min-width="item.width"
            >
              <template  slot-scope="scope">
                <div style="text-align: center" v-if="item.prop.indexOf('amt') >= 0">{{moneyFormat(scope.row[item.prop],scope.row.cur)}}</div>
                <div style="text-align: center" v-else-if="item.prop==='fintyp'">{{getCodelabel(scope.row[item.prop],'fintyp')}}</div>
                <div style="text-align: center" v-else-if="item.prop==='ovdflg'">{{getCodelabel(scope.row[item.prop],'ovdflg')}}</div>
                <div v-else>{{scope.row[item.prop]}}</div>
              </template>
            </el-table-column>
            <!-- 自定义组件里加了最右边的一列”操作“ -->
            <el-table-column fixed="right" prop="op" label="操作" width="180px">
              <template slot="header">
                <!-- 插槽里放了一个文字 一个按钮 -->
                <c-col :span="11" style="text-align: center"
                  ><span>操作</span>
                </c-col>
              </template>
              <template slot-scope="scope">
                <c-button
                  style="margin-right: 7px"
                  size="small"
                  type="text"
                  @click="handler(scope.row)"
                >处理
                </c-button>
                <!-- 申请一个弹出主键放在插槽，加工已渲染的数据 -->
                <el-popover
                  placement="top-start"
                  title="历史信息"
                  width="1200"
                  trigger="manual" 
                  v-clickOutside="closeDisplayDialog"
                  :ref="'popover_' + scope.row.inr"
                >
                  <div
                    style="
                      text-align: right;
                      margin-top: -30px;
                      margin-right: 5px;
                      font-size: 16px;
                    "
                  >
                    <span
                      class="el-icon-close"
                      style="cursor: pointer"
                      @click="closeDetailsDialog('popover_' + scope.row.inr)"
                    ></span>
                  </div>
                  <el-table
                      :data="trnData.data"
                      :columns="trnData.columns"
                      :showButtonFlg="true"
                  >
                    <el-table-column
                        v-for="(item, key) in trnData.columns"
                        :key="key"
                        :label="item.label"
                        :prop="item.prop"
                        :width="item.width"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row[item.prop] }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        prop="op"
                        label="操作"
                        width="100px"
                    >
                      <template slot-scope="scope">
                        <c-button
                            style="margin-left: 0"
                            size="small"
                            @click="display(scope.row)"
                        >快照</c-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                  <c-button
                    style="margin-left: 0px"
                    type="text"
                    size="small"
                    @click="details(scope.row)"
                    slot="reference"
                  >
                    快照
                  </c-button>
                  <c-button style="margin-left: 0" type="text" size="small" slot="reference" @click="toInfo(scope.row,'BPD','')">
                    Info
                  </c-button>
                </el-popover>
              
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-box" style="display:block">
             <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="pagination.pageIndex"
              :page-sizes="[10, 20, 50, 100, 500]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total">
          </el-pagination>
          </div>
        </el-tab-pane >
        
      </c-tabs>
      </c-col>
      <!-- 点击处理ba弹框 -->
      <el-dialog
          v-if="initdialog"
					v-dialogDrag
          :visible.sync="initdialog"
          title="交易列表"
          append-to-body
          width="70%"
      >
        <m-busbtn ref="childs" :trnUrl="trnUrl" :inifrm="inifrm" :activeTab="activeTab" :model="handleModel" @onChoose="handleClick"></m-busbtn>
      </el-dialog>

     <!--业务锁及待处理数据弹窗-->
    <m-chklap ref="lockAndPending"  @changeBtn="changeBtn"></m-chklap>

    </div>

  </div>
</template>
<script>
import BusNavbar from "~/components/business/BusNavbar1";
import event from "../event";
import CheckLockAndPending from "~/components/business/CheckLockAndPending";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event],
  components: { 
    "m-busbtn": BusNavbar,
    "m-chklap": CheckLockAndPending,
     },
    
  data() {
    return {
      sptVisible:false,
      dealSptData:[],
      curinr: "",
      ownref: "",
      activeTab: "de",
      oldRefId:"",
      selectedModelDe:{},
      selectedModelBf:{},
      handleModel:{},
      queryCon:{},
      trnUrl:"",
      inifrm:"",
      load:false,
       //码表
      dbCodes:{
        fintyp:[],
        ovdflg:[],
      },
      trnData: {
        columns: [
          {
            label: "业务编号",
            prop: "ownref",
            width:"160"
          },
          {
            label: "交易名称",
            prop: "inifrmname",
            width:"220"
          },
          {
            label: "交易码",
            prop: "inifrm",
            width:"100"
          },
          {
            label: "交易时间",
            prop: "inidattim",
            width:"160"
          },
          {
            label: "状态",
            prop: "relflgName",
            width:"100"
          },
          {
            label: "币种",
            prop: "reloricur",
            width:"100"
          },
          {
            label: "金额",
            prop: "reloriamt",
            width:"150"
          },
        ],
        data: [],
      },
      stmData: {
        columns: [
           {
            label: "业务编号",
            prop: "ownref",
            width: "180px"
          },
          {
            label: "币种",
            prop: "cur",
            width: "120px"
          },

          {
            label: "金额",
            prop: "amt",
            width: "120px"
          },
          {
            label: "可交单金额",
            prop: "opnamt",
            width: "120px"
          },
          {
            label: "日期",
            prop: "credat",
            width: "120px"
          },
           {
            label: "效期",
            prop: "expdat",
            width: "120px"
          },
          {
            label: "受益人客户号",
            prop: "benExtkey",
            width: "120px"
          },
          {
            label: "受益人名称",
            prop: "benCnname",
            width: "120px"
          },
          {
            label: "开证行BIC编码",
            prop: "issExtkey",
            width: "180px"
          },
          {
            label: "申请人名称",
            prop: "aplCnname",
            width: "120px"
          },
          {
            label: "付款期限",
            prop: "tenmaxday",
            width: "120px"
          },
          {
            label: "经办柜员",
            prop: "ownusr",
            width: "120px"
          },
        ],
        data: [
        ],
      },

       stmDataBf: {
        columns: [
          {
            label: "业务编号",
            prop: "ownref",
            width: "180px"
          },
           {
            label: "通知编号",
            prop: "pntref",
            width: "180px"
          },
          {
            label: "单据币种",
            prop: "cur",
            width: "120px"
          },
          {
            label: "单据金额",
            prop: "amt",
            width: "120px"
          },
          {
            label: "日期",
            prop: "credat",
            width: "120px"
          },
           {
            label: "承兑到期日",
            prop: "udpdat",
            width: "120px"
          },
          {
            label: "到期日",
            prop: "matdat",
            width: "120px"
          },
          {
            label: "受益人编号",
            prop: "benExtkey",
            width: "150px"
          },
          {
            label: "受益人名称",
            prop: "benCnname",
            width: "200px"
          },
          {
            label: "申请人名称",
            prop: "aplCnname",
            width: "200px"
          },
          {
            label: "交单行编号",
            prop: "prbExtkey",
            width: "120px"
          },
          {
            label: "闭卷日期",
            prop: "clsdat",
            width: "120px"
          },
          {
            label: "经办柜员",
            prop: "ownusr",
            width: "120px"
          },
        ],
        data: [ 
         ],
      },
       stmDataBp: {
        columns: [
          {
            label: "业务编号",
            prop: "ownref",
            width: "180px"
          },
          {
            label: "单据编号",
            prop: "pntref",
            width: "180px"
          },
          {
            label: "日期",
            prop: "credat",
            width: "120px"
          },
          {
            label: "融资类型",
            prop: "fintyp",
            width: "120px"
          },
          {
            label: "币种",
            prop: "cur",
            width: "120px"
          },
          {
            label: "金额",
            prop: "amt",
            width: "120px"
          },
          {
            label: "余额",
            prop: "opnamt",
            width: "120px"
          },
           {
            label: "执行利率",
            prop: "tolrat",
            width: "120px"
          },
          {
            label: "受益人客户号",
            prop: "fiaExtkey",
            width: "120px"
          },
          {
            label: "受益人名称",
            prop: "fiaName",
            width: "250px"
          },
          
          {
            label: "融资账号",
            prop: "finact",
            width: "250px"
          },
          {
            label: "组织机构代码",
            prop: "juscod",
            width: "120px"
          },
          {
            label: "融资日期",
            prop: "opndat",
            width: "120px"
          },
          {
            label: "融资天数",
            prop: "intday",
            width: "120px"
          },
          {
            label: "到期日",
            prop: "matdat",
            width: "120px"
          },
          {
            label: "融资状态",
            prop: "ovdflg",
            width: "120px"
          },
          {
            label: "闭卷日期",
            prop: "clsdat",
            width: "120px"
          },
          {
            label: "支行名称",
            prop: "bchname",
            width: "150px"
          },
          {
            label: "经办柜员",
            prop: "ownusr",
            width: "120px",
          },
        ],
        data: [
        ]
      },


       
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },

      initdialog: false,
      handlerDataList: [],
      currentHandleRow: {},
    };
  },

  methods: {},
  mounted: function () {
     this.getdbCode('bpdtyp','','fintyp');
    this.getdbCode('ovdflg','','ovdflg');
  },
};
</script>
<style>
.pagination-box {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px;
  background: #fff;
  margin-top: 5px;
}
.btn-group-wrap {
  max-height: 200px;
  width: 100%;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.btn-item {
  margin-bottom: 10px;
  margin-right: 10px;
}
.medium_bcs {
  border-radius: 5px;
}
</style>