<template>
    <div>
      <!--弹框-->
      <el-dialog
        title="门店选择"
        @close="closeDialog"
        :visible.sync="dialogCardVisible"
        width="600px">
        <div class="dialogwrap">
          <div class="dialogcontent">
            <el-radio-group v-model="radio" style="width: 100%;">
            <el-table ref="singleTable" :data="tableData">
              <el-table-column  width="33" prop="id">
                <template scope="scope">
                  <el-radio fill="red" :label="scope.row.id"></el-radio>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="门店名称"></el-table-column>
              <el-table-column prop="remarks" label="门店代码"></el-table-column>
            </el-table>
            </el-radio-group>
            <div class="page">
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="page.current_page"
                :page-size="page.page_size"
                layout="prev, pager, next"
                :total="page.total">
              </el-pagination>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="sureCard">确 定</el-button>
          <el-button @click="cancle">取 消</el-button>
         </span>
      </el-dialog>
      <!--弹框end-->
    </div>
</template>

<script>
  module.exports = require('./dialog')
</script>

<style lang="less" scoped>
  .dialogwrap{
    position: relative;
    &:before{
      position: absolute;
      left: -20px;
      top: -20px;
      right: -20px;
      content: '';
      border-bottom: 1px solid #dedede;
    }
  }
  .dialogcontent{
    padding: 0 10px;
  }
  .cue{
    margin-bottom: 20px;
    text-indent: 2rem;
  }
  .el-radio__label{
    color: transparent;
  }
  .el-radio__input.is-checked+.el-radio__label{
    color: transparent;
  }
  .page{
    margin: 20px 0;
    text-align: right;
  }
</style>
