<!-- 公有按钮 -->
<template>
  <!-- 
      * add -- 新增数据
      * edit -- 修改数据
      * delete -- 删除数据
      * current-reset -- 当前页数
      * search-reset -- 搜索框情况改变回调
      * current-row-change -- 点击行单机
      * row-update -- 修改数据
      * row-save -- 新增数据
     -->

  <div id='buttonS'>
    <div class="clear over_hidden searchButtons" style='padding-bottom: 3px;'>
      <div class="f_left">
        <!-- <div class='sourceS'> -->
        <slot name='dataSource' class="tempSlot"></slot>
        <!-- </div> -->
        <!-- 相关操作按钮 -->
        <el-button v-if='btn.add' type="primary" icon="el-icon-plus" size="mini" @click.stop="add()">
          {{addText}}
        </el-button>
        <el-button v-if='btn.edit' size="mini" icon="el-icon-edit" @click.stop="edit()">修改
        </el-button>
        <el-button v-if='btn.delete' size="mini" class="iconDelete" @click.stop='deletes()' icon="el-icon-close">
          {{deleteText}}
        </el-button>
        <el-button v-if='btn.download' size="mini" class="iconDelete" @click.stop='download()'>
          {{downTitle}}
        </el-button>
      </div>

      <div class="f_right text-right searchButton">
        <!-- 查询条件 -->
        <slot name='search' class="tempSlot"></slot>
        <el-input style='width:250px' v-if='btn.get' v-model.trim="value" :placeholder="placehold" clearable size="mini"
          @keyup.enter.native="get" @change='seatchChange'>
          <el-button slot="append" icon="el-icon-search" @click='get'></el-button>
        </el-input>

        <!-- <el-button type='primary' v-if='btn.get' class="searchChange" size="mini" @click='get()'>搜索</el-button> -->
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'buttonS',
    data() {
      return {
        value: '',
        btn: {},
        placehold: '请输入搜索条件', //搜索框placeholder
        downTitle: '下载', //下载按钮text
        permissions: {
          add: false, //新增
          edit: false, //选中行修改
          delete: false, //删除
          download: false, //下载
          get: false, //搜索
        }
      };
    },
    props: {
      addText: {
        type: String,
        default: '添加'
      },
      deleteText: {
        type: String,
        default: '删除'
      },
      btnAuthority: {
        type: Object,
        required: false
      },
      downloadTitle: {
        type: String,
        required: false
      },
      searchPlaceholder: {
        type: String,
        required: false
      }
    },
    components: {},
    computed: {},
    created() {
      // 处理按钮展示问题
      this.btn = Object.assign(this.permissions, this.btnAuthority);

      // 添加处理任务管理功能批量删除按钮
      if (this.$route.name === 'dailyDatas' || this.$route.name === 'dataTaskManagements') {
        this.btn['delete'] = false;
      }
      this.downTitle = this.downloadTitle ? this.downloadTitle : this.downTitle;
      this.placehold = this.searchPlaceholder ? this.searchPlaceholder : this.placehold;
    },
    methods: {
      add() {
        /**
         * 添加数据
         */
        this.$emit('add')
      },
      edit() {
        /**
         * 修改数据
         */
        this.$emit('edit')
      },
      deletes() {
        /**
         * 批量删除
         */
        this.$emit('deletes')
      },
      get() {
        /**
         * 搜索数据
         */
        this.$emit('get', this.value)
      },
      seatchChange() {
        /**
         * 改变事件
         */
        this.$emit('changes', this.value)
      },
      download() {
        /**
         * 下载资料
         */
        this.$emit('download')
      }
    }
  }

</script>
<style>
  .searchButtons {
    line-height: 31px;
  }

  .searchButton {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .searchButton span {
    line-height: 31px;
  }

  /* 搜索图标 */
  .el-input-group__append {
    background-color: #409eff !important;
    padding: 0 10px !important;
    cursor: pointer !important;
    border-radius: 0 4px 4px 0 !important;
    color: #fff !important;
    border: 1px solid #409eff !important;
  }

</style>