<template>
  <div class="syswin-searchbar-list__footer" :class="{ 'align-right': saveToLocalPosition === 'right' }">
    <el-button size="small" v-if="saveToLocalPosition === 'left'" class="syswin-footer__save" @click="handleSave">保存</el-button>
    <el-select size="small" class="syswin-footer__condition" v-model="conditionValue" @change="handleChangeCondition">
      <el-option v-for="(item, index) in conditionList" :key="index" :label="item.label" :value="item.value">
        <span class="syswin-footer__label">{{ item.label }}</span>
        <i class="syswin-footer__edit el-icon-edit-outline" @click.stop="handleEditCondition(index)"></i>
        <i class="syswin-footer__delete el-icon-delete" @click.stop="handleDeleteCondition(index)"></i>
      </el-option>
    </el-select>
    <el-button size="small" v-if="saveToLocalPosition === 'right'" class="syswin-footer__save" @click="handleSave">保存</el-button>
    <dialogCondition ref="dialogCondition" :visible.sync="dialogConditionVisible" :currentData="value" @on-confirm="handleConfirmCondition" />
  </div>
</template>

<script>
import dialogCondition from './dialog-condition'
export default {
  name: 'SySaveLocal',
  components: {
    dialogCondition
  },
  props: {
    saveToLocalPosition: {
      type: String,
      default: 'right',
      validator: function(value) {
        return ['left', 'right'].indexOf(value) !== -1
      }
    },
    storageName: {
      type: String,
      default: 'searchbar'
    },
    value: {
      type: Object,
      default: () => ({})
    },
    conditionList: {
      type: Array,
      default() {
        return []
      }
    },
    // 当前搜索条件的value，select双向绑定的值
    curConditionValue: {
      type: [String, Number]
    }
  },
  data() {
    return {
      dialogConditionVisible: false,
      conditionValue: this.curConditionValue
    }
  },
  watch: {
    curConditionValue: function(newVal) {
      this.conditionValue = newVal
    }
  },
  methods: {
    // 保存按钮
    handleSave() {
      this.$emit('input', {})
      this.dialogConditionVisible = true
    },
    // 切换保存过滤条件的下拉框
    handleChangeCondition(value) {
      this.$emit('handleChangeCondition', value)
    },
    // 编辑保存过滤条件的下拉框选项
    handleEditCondition(index) {
      this.$emit('handleEditCondition', index)
      this.dialogConditionVisible = true
    },
    // 删除保存过滤条件的下拉框选项
    handleDeleteCondition(index) {
      this.$confirm('确定删除筛选条件？', '提示', {
        showClose: false,
        customClass: 'syswin-searchbar-confirm',
        confirmButtonClass: 'syswin-searchbar-confirm-btns__confirm',
        cancelButtonClass: 'syswin-searchbar-confirm-btns__cancel'
      })
        .then(() => {
          this.$emit('handleDeleteCondition', index)
        })
        .catch(() => {})
    },
    // 筛选器名称模态框确定按钮事件
    handleConfirmCondition(label) {
      this.$emit('handleConfirmCondition', label)
    }
  }
}
</script>

<style lang="scss" scoped>
@import './search-bar';
</style>
