<template>
  <custom-modal v-model="visible" title="Save Setting" :width="380" :okHandler="handleOk">
    <div class="save-setting">
      <div class="save-setting-all">
        <a-checkbox v-model="saveAll"> Save All </a-checkbox>
      </div>
      <div>
        <title-over-border title="Format">
          <a-radio-group v-model="saveFormat" class="format-radio-group">
            <a-radio value="txt">Save as Txt</a-radio>
            <a-radio value="xls">Save as Excel</a-radio>
            <!-- <a-radio value="html">Save as Html</a-radio> -->
          </a-radio-group>
        </title-over-border>
      </div>
    </div>
  </custom-modal>
</template>

<script>
import TitleOverBorder from '../TitleOverBorder.vue'
export default {
  components: { TitleOverBorder },
  props: {
    value: {
      type: Boolean,
    },
  },
  data() {
    return {
      saveAll: false,
      saveFormat: 'txt',
    }
  },
  methods: {
    reset() {
      this.saveAll = false
      this.saveFormat = 'txt'
    },

    handleOk() {
      this.$emit('save', this.saveFormat)
    },
  },
  computed: {
    visible: {
      set(val) {
        this.$emit('input', val)
      },
      get() {
        if (this.value) {
          this.reset()
        }

        return this.value
      },
    },
  },
}
</script>

<style lang="less" scoped>
.save-setting {
  display: flex;
  align-items: center;

  &-all {
    width: 65%;
    text-align: center;
  }

  .format-radio-group {
    .ant-radio-wrapper:not(:last-child) {
      margin-bottom: 10px;
    }
  }
}
</style>
