<template>
  <div>
    <div style="position: relative;" class="btn-width">
      <span v-for="item in msgList" :key="item.name">
        <span v-if="item.upload">
          <label
            v-show="$showBtn(item.id)"
            :key="item.name"
            style="margin-bottom: 0;"
            class="marRight-5"
          >
            <Upload
              :action="item.action"
              :on-success="_handelsuccess"
              :before-upload="_beupload"
              :data="dataObj"
              :with-credentials="true"
              :show-upload-list="false"
            >
              <Button style="margin-bottom: 10px">
                {{ item.name }}
              </Button>
            </Upload>
          </label>
        </span>
        <span v-else>
          <el-button
            v-show="$showBtn(item.id)"
            :id="item.id"
            :key="item.name"
            :type="item.type?item.type:'default'"
            style="margin-bottom: 10px;"
            :style="{'float':item.float?'right':'left','marginRight':item.marginRight?item.marginRight+'px':'5px'}"
            @click="_btnClick(item.name,item)"
          >
            {{ item.name }}
          </el-button>
        </span>
      </span>
      <slot name="processTask" />
      <span v-if="showSearchBtn === undefined ? false : true" class="fold">
        <div v-if="open" @click="_btnClick('search')">
          <img :src="noSearch">
          <span class="no-search-bg-span">
            收起搜索
          </span>
        </div>
        <div v-else style="position: relative" @click="_btnClick('search')">
          <!--<img src="http://static.patzn.com/img/search.png">-->
          <i class="icons iconfont pt-search icon-search" />
          <span class="search-bg-span">
            条件搜索
          </span>
        </div>
      </span>
    </div>

    <!--显示表单弹框-->
    <formTypeModal ref="formModal" @on-result-change="_formResult" />
  </div>
</template>
<style scoped>
.fold {
  display: inline-block;
  position: absolute;
  right: 0;
}

.fold img {
  top: 7px;
  left: -25px;
  position: absolute;
}

.fold span {
  cursor: pointer;
  line-height: 36px;
  font-size: 12px;
}

.no-search-bg-span {
  color: #999999;
}
.icon-search {
  font-size: 20px;
  position: absolute;
  top: 3px;
  right: 50px;
}
</style>
<script>
/*
* float:浮动。right为向右浮动，默认是向左浮动的;
* marginRight:距离右边多少距离。如：marginRight:100,默认值为5
* */
import Store from 'store2'
import { sysForm, sysResource } from '../../api'
import global from '../../api/config'
import formTypeModal from './formTypeModal'

export default {
  components: { formTypeModal },
  // props: {
  //   msg: null,  //任何类型
  //   open: false,
  //   showSearchBtn: null
  // },
  props: ['msg', 'open', 'showSearchBtn'],
  data() {
    return {
      // 上传提交的参数
      dataObj: {
        file: ''
      },
      isForm: true,
      // 表单数据
      formType: '',
      formTypeList: [],
      noSearch: global.staticURL + '/img/no-search.png',
      msgList: []
    }
  },
  mounted() {
    this.$nextTick(function() {
      if (!Store.session('showBtnList') && global.getLn()) {
        this._getPermissionBtn()
      } else {
        this.msgList = this.msg ? this.$showBtnList(this.msg) : []
      }
    })
  },
  methods: {
    // 获取按钮权限 ---- 临时做法，后期修改
    _getPermissionBtn: async function() {
      const result = await sysResource.getBtn({ theme: global.getCode() })
      Store.session('showBtnList', result.join(','))
      // console.log('showBtnList==', Store.session('showBtnList'))
      this.msgList = this.msg ? this.$showBtnList(this.msg) : []
    },
    // 按钮点击事件
    _btnClick(name, data) {
      if (data && data.id && data.isForm) {
        this._getForm(data.id, name)
      } else {
        // 无配置表单
        this.$emit('on-result-change', name)
      }
    },
    _getForm: async function(id, name) {
      const result = await sysForm.getByBtnCode(id)
      if (result.length === 0) {
        // 无配置表单
        this.$emit('on-result-change', name)
      } else if (result.length === 1) {
        // 只有一个配置表单(不需要选择)
        this.$emit('on-result-change', name, result[0])
      } else {
        // 有多个配置表单(需要打开弹框进行选择)
        this.$refs.formModal._open(name, result)
      }
    },
    // 表单返回数据
    _formResult(data) {
      // 返回按钮名称和表单标识
      this.$emit('on-result-change', data.name, data.formType)
    },
    // 导入
    _beupload(file) {
      this.dataObj.file = file.name
    },
    _handelsuccess(response, file, fileList) {
      // 上传成功
      if (response.success) {
        this.$message.success('上传成功！')
      } else {
        this.$message.warning(response.msg)
      }
      this.$emit('on-result-change', 'upload')
    }
  }
}
</script>
