<template>
  <div>
    <div style="position: relative;min-height: 36px" class="btn-width">
      <span v-for="item in msg" :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>
          <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.id,item.componentName)"
          >{{ item.name }}
          </Button>
        </span>
      </span>
      <slot name="processTask" />
      <span v-if="showSearchBtn === undefined ? false : true" class="fold">
        <div v-if="open" @click="_btnClick('search')">
          <img :src="imgNoSearch">
          <span class="no-search-bg-span">收起搜索</span>
        </div>
        <div v-else @click="_btnClick('search')">
          <img :src="imgSearch">
          <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;
}
</style>
<script>
/*
* float:浮动。right为向右浮动，默认是向左浮动的;
* marginRight:距离右边多少距离。如：marginRight:100,默认值为5
* */
import { sysForm } from '../../api'
import config 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: ''
      },
      imgNoSearch: `${config.staticURL}/img/no-search.png`,
      imgSearch: `${config.staticURL}/img/search.png`,
      isForm: false,
      // 表单数据
      formType: '',
      formTypeList: []
    }
  },
  methods: {
    // 按钮点击事件
    _btnClick(name, id, componentName) {
      if (id) {
        this._getForm(id, name)
      } else {
        // 无配置表单
        this.$emit('on-result-change', name, componentName)
      }
    },
    _getForm: async function(id, name) {
      const result = await sysForm.getByBtnCode(id, name)
      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>
