<template>
  <div class="tool-bar-item">
    my tool bar
    <el-button-group class="button-group" v-if="is_tool_bar_group1">
      <el-button type="primary" v-if="is_tool_bar_new" :disabled="is_tool_bar_disabled_new" @click="clickNew" icon="el-icon-document-add" size="mini">新增</el-button>
      <el-button type="primary" v-if="is_tool_bar_delete" :disabled="is_tool_bar_disabled_delete" size="mini" icon="el-icon-folder-delete" @click="clickDelete">删除</el-button>
      <el-button type="primary" v-if="is_tool_bar_cancel" :disabled="is_tool_bar_disabled_cancel" size="mini" icon="el-icon-document-remove" @click="clickCancel">禁用</el-button>
      <el-button type="primary" v-if="is_tool_bar_start" :disabled="is_tool_bar_disabled_start" size="mini" icon="el-icon-document-checked" @click="clickStart">启用</el-button>
      <el-button type="primary" v-if="is_tool_bar_refresh" :disabled="is_tool_bar_disabled_refresh" @click="clickRefresh" icon="el-icon-refresh" size="mini">刷新</el-button>
      <el-button type="primary" v-if="is_tool_bar_print" :disabled="is_tool_bar_disabled_print" size="mini" icon="el-icon-printer" @click="clickPrint">打印</el-button>
      <slot name="tool-bar-group1"></slot>
    </el-button-group>

    <el-button-group class="button-group" v-if="is_tool_bar_group2">
      <el-button type="primary" v-if="is_tool_bar_submit" :disabled="is_tool_bar_disabled_submit" size="mini" icon="el-icon-right" @click="clickSubmit">提交</el-button>
      <el-button type="primary" v-if="is_tool_bar_call_back" :disabled="is_tool_bar_disabled_call_back"  icon="el-icon-back" size="mini" @click="clickCallBack">撤回</el-button>
      <el-button type="primary" v-if="is_tool_bar_back" :disabled="is_tool_bar_disabled_back" size="mini" icon="el-icon-document-delete" @click="clickBack">退回</el-button>
      <el-button type="primary" v-if="is_tool_bar_check" :disabled="is_tool_bar_disabled_check" size="mini" icon="el-icon-document-checked" @click="clickCheck">审批</el-button>
      <!-- <el-button type="primary" size="mini">审核</el-button> -->
      <!-- <el-button type="primary" size="mini">拒核</el-button> -->
      <el-button type="primary" v-if="is_tool_bar_work_flow_custom_01" :disabled="is_tool_bar_work_flow_disabled_custom_01" size="mini" icon="el-icon-tickets" @click="clickWorkFlowCustom01">
        {{ text_tool_bar_work_flow_custom_01 }}
      </el-button>
      <el-button type="primary" v-if="is_tool_bar_work_flow_custom_02" :disabled="is_tool_bar_work_flow_disabled_custom_02" size="mini" icon="el-icon-document" @click="clickWorkFlowCustom02">
        {{ text_tool_bar_work_flow_custom_02 }}
      </el-button>
      <!-- <el-button type="primary" size="mini">自定义工作流三</el-button>
      <el-button type="primary" size="mini">自定义工作流四</el-button> -->
      <slot name="tool-bar-group2"></slot>
    </el-button-group>
    <el-button-group class="button-group" v-if="is_tool_bar_group3">
      <el-button type="primary" size="mini" v-if="is_tool_bar_down_load" :disabled="is_tool_bar_disabled_down_load" icon="el-icon-bottom" @click="clickDownLoad">
        下载模板
      </el-button>
      <el-upload
        class="upload-demo"
        :action="action_url"
        multiple
        :limit="1"
        :show-file-list="false"
        :on-exceed="handleExceed"
        :before-upload="beforeUpload"
        :on-success="handleSuccess"
        :file-list="fileList"
      >
        <el-button type="primary" size="mini" icon="el-icon-upload2" v-if="is_tool_bar_import" :disabled="is_tool_bar_disabled_import" @click="clickImport">导入</el-button>
      </el-upload>
      <el-button type="primary" size="mini" icon="el-icon-setting" v-if="is_tool_bar_export_set" :disabled="is_tool_bar_disabled_export_set" @click="clickExPortSet">
        导出设置
      </el-button>
      <el-button type="primary" size="mini" icon="el-icon-download" v-if="is_tool_bar_export" :disabled="is_tool_bar_disabled_export" @click="clickExport">导出</el-button>
      <slot name="tool-bar-group3"></slot>
    </el-button-group>

    <el-button-group class="button-group" v-if="is_tool_bar_group4">
      <el-button type="primary" v-if="is_tool_bar_custom_01" :disabled="is_tool_bar_disabled_custom_01" size="mini" icon="el-icon-s-ticket" @click="clickCustom01">{{ text_tool_bar_custom_01 }}</el-button>
      <el-button type="primary" v-if="is_tool_bar_custom_02" :disabled="is_tool_bar_disabled_custom_02" size="mini" icon="el-icon-s-management" @click="clickCustom02">{{ text_tool_bar_custom_02 }}</el-button>
      <el-button type="primary" v-if="is_tool_bar_custom_03" :disabled="is_tool_bar_disabled_custom_03" size="mini" icon="el-icon-s-open" @click="clickCustom03">{{ text_tool_bar_custom_03 }}</el-button>
      <el-button type="primary" v-if="is_tool_bar_custom_04" :disabled="is_tool_bar_disabled_custom_04" size="mini" icon="el-icon-s-shop" @click="clickCustom04">{{ text_tool_bar_custom_04 }}</el-button>
      <el-button type="primary" v-if="is_tool_bar_custom_05" :disabled="is_tool_bar_disabled_custom_05" size="mini" icon="el-icon-s-opportunity" @click="clickCustom05">{{ text_tool_bar_custom_05 }}</el-button>
      <slot name="tool-bar-group4"></slot>
    </el-button-group>
  </div>
</template>

<script>
export default {
  name: 'tool-bar',
  props: {
    is_tool_bar_group1:{
      type:Boolean,
      default:true
    },
    is_tool_bar_group2:{
      type:Boolean,
      default:true
    },
    is_tool_bar_group3:{
      type:Boolean,
      default:true
    },
    is_tool_bar_group4:{
      type:Boolean,
      default:true
    },
    // 新建安扭是否可见
    is_tool_bar_new: {
      type: Boolean,
      default: true
    },
    // 新增 是否可用
    is_tool_bar_disabled_new: {
      type: Boolean,
      default: false
    },
    // 删除 安扭是否可见
    is_tool_bar_delete: {
      type: Boolean,
      default: true
    },
    // 删除 是否可用
    is_tool_bar_disabled_delete: {
      type: Boolean,
      default: false
    },

    // 刷新 安扭是否可见
    is_tool_bar_refresh: {
      type: Boolean,
      default: true
    },
    // 刷新 是否可用
    is_tool_bar_disabled_refresh: {
      type: Boolean,
      default: false
    },
    // 打印 安扭是否可见
    is_tool_bar_print: {
      type: Boolean,
      default: true
    },
    // 打印 是否可用
    is_tool_bar_disabled_print: {
      type: Boolean,
      default: false
    },
    // 禁用 是否可用
    is_tool_bar_disabled_cancel: {
      type: Boolean,
      default: false
    },
    // 禁用 安扭是否可见
    is_tool_bar_cancel: {
      type: Boolean,
      default: true
    },
    // 启用 是否可用
    is_tool_bar_disabled_start: {
      type: Boolean,
      default: false
    },
    // 启用 安扭是否可见
    is_tool_bar_start: {
      type: Boolean,
      default: true
    },

    // 提交 是否可用
    is_tool_bar_disabled_submit: {
      type: Boolean,
      default: false
    },
    // 提交 安扭是否可见
    is_tool_bar_submit: {
      type: Boolean,
      default: true
    },

    // 退回 是否可用
    is_tool_bar_disabled_back: {
      type: Boolean,
      default: false
    },
    // 退回 安扭是否可见
    is_tool_bar_back: {
      type: Boolean,
      default: true
    },

    // 撤回 是否可用
    is_tool_bar_disabled_call_back: {
      type: Boolean,
      default: false
    },
    // 撤回 安扭是否可见
    is_tool_bar_call_back: {
      type: Boolean,
      default: true
    },
    // 审批 是否可用
    is_tool_bar_disabled_check: {
      type: Boolean,
      default: false
    },
    // 审批 安扭是否可见
    is_tool_bar_check: {
      type: Boolean,
      default: true
    },
    // 自定义工作流一是否可见
    is_tool_bar_work_flow_custom_01: {
      type: Boolean,
      default: true
    },
    text_tool_bar_work_flow_custom_01: {
      type: String,
      default: '自定义一'
    },
    // 自定义工作流一是否可用
    is_tool_bar_work_flow_disabled_custom_01: {
      type: Boolean,
      default: false
    },
    text_tool_bar_work_flow_custom_02: {
      type: String,
      default: '自定义二'
    },
    // 自定义工作流二是否可见
    is_tool_bar_work_flow_custom_02: {
      type: Boolean,
      default: true
    },
    // 自定义工作流二是否可用
    is_tool_bar_work_flow_disabled_custom_02: {
      type: Boolean,
      default: false
    },
    // 是否是示示 下载模板
    is_tool_bar_down_load: {
      type: Boolean,
      default: true
    },
    // 下载模板 是否可用
    is_tool_bar_disabled_down_load: {
      type: Boolean,
      default: false
    },

    // 是否是示示导入
    is_tool_bar_import: {
      type: Boolean,
      default: true
    },
    // 导入 是否可用
    is_tool_bar_disabled_import: {
      type: Boolean,
      default: false
    },
    // 导出设置是否可见
    is_tool_bar_export_set: {
      type: Boolean,
      default: true
    },
    // 导出设置是否可见
    is_tool_bar_disabled_export_set: {
      type: Boolean,
      default: false
    },
    // 是否显示导出
    is_tool_bar_export: {
      type: Boolean,
      default: true
    },
    // 导出 是否可用
    is_tool_bar_disabled_export: {
      type: Boolean,
      default: false
    },
    // 自定义操作1 的文本
    text_tool_bar_custom_01: {
      type: String,
      default: '自定义一'
    },
    // 自定义操作1 是否可见
    is_tool_bar_custom_01: {
      type: Boolean,
      default: true
    },
    // 自定义操作1 是否可用
    is_tool_bar_disabled_custom_01: {
      type: Boolean,
      default: false
    },
    // 自定义操作1 的文本
    text_tool_bar_custom_02: {
      type: String,
      default: '自定义二'
    },
    // 自定义操作1 是否可见
    is_tool_bar_custom_02: {
      type: Boolean,
      default: true
    },
    // 自定义操作1 是否可用
    is_tool_bar_disabled_custom_02: {
      type: Boolean,
      default: false
    },
    // 自定义操作1 的文本
    text_tool_bar_custom_03: {
      type: String,
      default: '自定义三'
    },
    // 自定义操作1 是否可见
    is_tool_bar_custom_03: {
      type: Boolean,
      default: true
    },
    // 自定义操作1 是否可用
    is_tool_bar_disabled_custom_03: {
      type: Boolean,
      default: false
    },
    // 自定义操作1 的文本
    text_tool_bar_custom_04: {
      type: String,
      default: '自定义四'
    },
    // 自定义操作1 是否可见
    is_tool_bar_custom_04: {
      type: Boolean,
      default: true
    },
    // 自定义操作1 是否可用
    is_tool_bar_disabled_custom_04: {
      type: Boolean,
      default: false
    },
    // 自定义操作1 的文本
    text_tool_bar_custom_05: {
      type: String,
      default: '自定义五'
    },
    // 自定义操作1 是否可见
    is_tool_bar_custom_05: {
      type: Boolean,
      default: true
    },
    // 自定义操作1 是否可用
    is_tool_bar_disabled_custom_05: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data() {
    return {
      // is_group1: true,
      // is_group2: true,
      // is_group3: true,
      // is_group4: true,
      key: '',
      action_url: '/resource-service/upload_file?token=1674648446042112034&source=mongo',
      fileList: [] // 附件列表
    };
  },
  created() {
    let that = this;
    let token = localStorage.getItem('token');
    that.action_url = '/resource-service/upload_file?token=' + token + '&source=mongo';
  },
  methods: {
    // 新增
    clickNew() {
      let that = this;
      that.$emit('clickNew', true);
    },
    // 批量删除
    clickDelete() {
      let that = this;
      that.$emit('clickDelete', true);
    },
    // 刷新
    clickRefresh() {
      let that = this;
      that.$emit('clickRefresh', true);
    },
    // 打印
    clickPrint() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickPrint', true);
    },
    // 禁用
    clickCancel() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickCancel', true);
    },
    // 启用
    clickStart() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickStart', true);
    },
    // 提交
    clickSubmit() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickSubmit', true);
    },
    // 撤回
    clickCallBack() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickCallBack', true);
    },
    // 退回
    clickBack() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickBack', true);
    },
    // 审批
    clickCheck() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickCheck', true);
    },
    // 自定义工作流一
    clickWorkFlowCustom01() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickWorkFlowCustom01', true);
    },
    // 自定义工作流二
    clickWorkFlowCustom02() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickWorkFlowCustom02', true);
    },
    // 下载模板
    clickDownLoad() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickDownLoad', true);
    },

    // 导入
    clickImport() {
      let that = this;
      that.$emit('clickImport', true);
    },
    // 导出设置
    clickExPortSet() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickExPortSet', true);
    },
    // 导出
    clickExport() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickExport', true);
    },
    // 自定义操作1
    clickCustom01() {
      let that = this;
      console.log('clickCustom01');
      that.$emit('clickCustom01', true);
    },
    // 自定义操作2
    clickCustom02() {
      let that = this;
      // that.$message({
      //   type: 'info',
      //   message: '目前还没有实现改功能'
      // });
      that.$emit('clickCustom02', true);
    },
    // 自定义操作3
    clickCustom03() {
      let that = this;
      // that.$message({
      //   type: 'info',
      //   message: '目前还没有实现改功能'
      // });
      that.$emit('clickCustom03', true);
    },
    // 自定义操作4
    clickCustom04() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickCustom04', true);
    },
    // 自定义操作1
    clickCustom05() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickCustom05', true);
    },
    /***** 上传相关 *****/
    // 文件超出限制钩子
    handleExceed(files, fileList) {
      this.$message.warning(`只可以上传1个文件，本次选择了 ${files.length} 个文件`);
    },
    // 上传前
    beforeUpload(file) {
      console.log('文件格式', file);
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1);
      const extension = testmsg === 'xls';
      const extension2 = testmsg === 'xlsx';
      if (!extension && !extension2) {
        this.$message.error('上传的文件只能是Excel文件');
        return false;
      }
      // let isJPG = file.type === 'image/jpeg';
      let isLt5M = file.size / 1024 / 1024 < 5;
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt5M) {
        this.$message.error('上传文件大小不能超过 5MB!');
      }
      return (extension || extension2) && isLt5M;
    },
    // 上传成功
    handleSuccess(response, file, fileList) {
      let that = this;
      that.fileList = [];
      that.$emit('uploadSuccess', response.data.key);
    }
  }
};
</script>

<style lang="scss" scoped>
.tool-bar-item {
  padding: $spacing-small;
  background-color: $theme-white-1;
  border-top: 1px solid $theme-gray-3;
  display: flex;
  .button-group {
    margin-right: $spacing-normal;
    display: flex;
  }
}
</style>
