<template>
  <!--  position: fixed;right:1%;bottom: 1%;-->
  <el-row :style="{width:'100%'}"
          style="background-color: rgba(209,211,220,0.6);position: fixed;bottom: 0;right: 0;z-index: 99;display: flex">
    <el-col style="text-align: left;padding: 8px 16px 8px 16px;" :style="{paddingLeft:leftShifting}">
      <slot name="floatLeft"></slot>
    </el-col>


    <el-col style="text-align: right;padding: 8px 16px 8px 0;">
      <slot name="leftButton"></slot>
      <el-button v-if="showCancel" @click="cancel">{{
          cancelLabel
        }}
      </el-button>
      <el-button v-if="showSaveDraft"
                 :loading="loading && showLoading" @click="saveDraft">{{
          saveDraftLabel
        }}
      </el-button>
      <el-button v-if="showSubmit" type="primary" :loading="loading && showLoading" @click="submit">{{
          submitLabel
        }}
      </el-button>
      <el-button v-if="showConfirm"  type="primary"
                 :loading="loading && showLoading" @click="Confrim">{{
          confirmLabel
        }}
      </el-button>
      <el-button v-if="showPass" type="primary" :loading="loading && showLoading" @click="pass">{{
          passLabel
        }}
      </el-button>
      <el-button v-if="showRefuse" type="danger" :loading="loading && showLoading" @click="refuse">{{
          refuseLabel
        }}
      </el-button>
      <slot name="rightButton">
      </slot>
    </el-col>
  </el-row>
</template>

<script>

export default {
  props: {
    showLoading: {
      type: Boolean,
      default: true
    },
    showConfirm: {
      type: Boolean,
      default: true
    },
    showSubmit: {
      type: Boolean,
      default: false,
    },
    showSaveDraft: {
      type: Boolean,
      default: false,
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    showPass: {
      type: Boolean,
      default: false
    },
    showRefuse: {
      type: Boolean,
      default: false
    },
    cancelLabel: {
      type: String,
      default: "取消"
    },
    saveLabel: {
      type: String,
      default: "保存"
    },
    confirmLabel: {
      type: String,
      default: "确定"
    },
    saveDraftLabel: {
      type: String,
      default: "暂存"
    },
    submitLabel: {
      type: String,
      default: "提交"
    },
    passLabel: {
      type: String,
      default: "通过"
    },
    refuseLabel: {
      type: String,
      default: "驳回"
    },
  },
  components: {},
  data() {
    return {
      widthChange: '90%',
      leftShifting: '16px',
      //暂存loading
      loading: false,
      //提交loading
      submitLoading: false,
      //通过loading
      passLoading: false,
      //驳回loading
      refuseLoading: false,
      //确认loading
      confirmLoading: false,
      changeWidth: 100,
    };
  },
  computed: {
    listenComponentState() {
      return this.$store.state.app.sidebar.opened;
    },
    listenDeviceState() {
      return this.$store.state.app.device;
    }
  },
  watch: {
    listenComponentState: function () {
      this.styleClass()
    },
    listenDeviceState: function () {
      this.styleClass()
    }
  },
  created() {
    this.styleClass()
  },
  methods: {
    cancel() {
      this.$emit('cancel',)
    },
    styleClass() {
      if (this.$store.state.app.device === 'mobile') {
        this.leftShifting = '16px'
      } else {
        if (this.$store.state.app.sidebar.opened != null && this.$store.state.app.sidebar.opened) {
          // this.widthChange = '89.583%'
          this.leftShifting = '216px'
        } else {
          // this.widthChange = '97.187%'
          this.leftShifting = '70px'
        }
      }
    },
    Confrim() {
      this.$emit('Confirm')
    },
    saveDraft() {
      this.$emit('saveDraft')
    },
    submit() {
      this.$emit('submit')
    },
    pass() {
      this.$emit('pass')
    },
    refuse() {
      this.$emit('refuse')
    },
    // downloadForm(){
    //   if(this.showLoading){
    //     this.loading=true;
    //   }
    //   this.$emit('downloadForm')
    // }
  },


  mounted() {

  },
  updated(){

  }


}


</script>

<style scoped></style>

