<template>
  <div class="syswin-searchbar-modal">
    <el-dialog :visible="visible" :append-to-body="true" width="560px" title="筛选器名称" custom-class="syswin-searchbar-dialog" @close="handleClose">
      <div class="syswin-searchbar-modal-container">
        <div class="syswin-searchbar-modal-container__form">
          <el-form ref="form" size="small" :model="form" label-width="120px">
            <el-form-item label="筛选器名称 :" prop="name">
              <el-input class="syswin-searchbar-modal-container__input" v-model="form.name" placeholder="给筛选器起个名字吧" clearable> </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="syswin-searchbar-modal-footer" slot="footer">
        <el-button type="primary" size="small" class="syswin-searchbar-modal-footer__confirm" @click="handleConfirm" :disabled="this.form.name === ''"
          >确定</el-button
        >
        <el-button size="small" class="syswin-searchbar-modal-footer__cancel" @click="handleClose">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'SyswinSearchbarModal',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    currentData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      form: {
        name: ''
      }
    }
  },
  computed: {},
  watch: {
    visible(newValue) {
      this.form.name = newValue && this.currentData && this.currentData.label ? this.currentData.label : ''
    }
  },
  filters: {},
  created() {},
  mounted() {},
  methods: {
    handleConfirm() {
      this.$emit('on-confirm', this.form.name)
      this.handleClose()
    },
    handleClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="scss">
@import './dialog-condition';
</style>
