<template>
  <div class="select">
    <div class="left">
      <slot></slot>
      <slot name="left">
        <div class="left-content">
          <el-button
            v-if="backBtn"
            size="small"
            icon="el-icon-arrow-left"
            @click="back"
            >返回</el-button
          >
          <el-button
            size="small"
            type="primary"
            @click="click(item.eventName)"
            v-for="item in leftBtn"
            :key="item.label"
            >{{ item.label }}
          </el-button>
          <div class="iconRpresents">
            <div
              class="iconRpresents-item"
              v-for="(item, index) in leftText"
              :key="index"
            >
              <span class="iconRpresents-item-text">{{ item.title }}</span
              ><span class="iconRpresents-item-text-change">{{
                item.text
              }}</span>
            </div>
          </div>
        </div>
      </slot>
    </div>
    <div class="right">
      <slot name="right">
        <el-button
          class="rightBtnOuter"
          size="small"
          type="primary"
          @click="click(item.eventName)"
          v-for="item in rightBtn"
          :key="item.label"
          >{{ item.label }}
        </el-button>
      </slot>
    </div>

    <!-- <el-button size="small" type="primary" @click="onSubmit">查询</el-button> -->
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    leftBtn: {
      type: Array,
      default: () => [
        {
          label: "新增",
          eventName: "add",
        },
      ],
    },
    backBtn: {
      type: Boolean,
      default: false,
    },
    leftText: {
      type: Array,
      default: () => [
        // {
        //     title: "当前病区为：",
        //     text: "6病区",
        // },
      ],
    },
    rightBtn: {
      type: Array,
      default: () => [
        {
          label: "导入",
          eventName: "inputFile",
        },
        {
          label: "导出",
          eventName: "outputFile",
        },
      ],
    },
  },
  data() {
    return {};
  },
  methods: {
    click(eventName) {
      console.log("eventName: ", eventName);
      this.$emit(eventName);
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.select {
  width: calc(100% - 20px);
  display: flex;
  padding: 10px 10px 0 10px;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  .left-content {
    display: flex;
    align-items: center;
    .iconRpresents {
      margin-left: 20px;
      display: flex;
      align-items: center;
      .iconRpresents-item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        color: $color-333;
        span {
          display: inline-block;
          margin-left: 4px;
        }
        .iconRpresents-item-text-change {
          color: $theme-color;
        }
      }
    }
  }

  .rightBtnOuter {
    width: 72px;
  }
}
</style>