<template>
    <div>
    <el-dialog
      title="导出"
      :visible.sync="show"
      :append-to-body="true"
      :modal-append-to-body="false"
      width="800px"
      :show-close="true"
      @close="close"
    >
      <div class="formItem">
        <span class="title">是否显示明细：</span>
        <el-radio-group v-model="form.isDetail" >
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </div>
      <div class="formItem">
        <span class="title">是否冗余主表数据：</span>
        <el-radio-group v-model="form.isRedundance" >
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="submit('page')">本页导出</el-button>
        <el-button 
          :spinner="'el-icon-loading'"
          type="primary" 
          @click="submit('all')"
        >全部导出</el-button>
      </span>
    </el-dialog>
  </div>
  </template>
  
  <script>
  export default {
    name: 'exportDrop',
    props: {
      // 导出是【否冗余主表数据】配置
      isDetail:{
        type: Boolean,
        default: true,
      },
      // 导出是【显示明细】配置
      isRedundance:{
        type: Boolean,
        default: true,
      },
    },
    data () {
      return {
        show:true,
        form:{
          isDetail:null,
          isRedundance:null,
        }
      }
    },
    mounted () {
      this.form={
        isDetail:this.isDetail,
        isRedundance:this.isRedundance,
      }
    },
    methods: {
      close() {
        this.show = false
        this.$emit("closeDialog")
      },
      submit(type){
        this.$emit("exportDropSubmit",type,this.form)
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  .formItem{
    padding-bottom: 15px;
    display: flex;
    .title{
      width: 180px;
      text-align: right;
      padding-right: 10px;
    }
  }
  </style>