<template>
  <!-- 操作栏 -->
  <div class="operate">
    <el-row v-if="buttonList.length > 0" class="table-operate" type="flex">
      <el-col
        v-for="item in buttonList"
        :key="item.value"
        :span="collapse ? showSpan : collapseSpan"
      >
        <el-dropdown>
          <el-button
            :type="item.type"
            :icon="item.icon"
            @click="callFun(item.value)"
          >
            {{ item.name }}
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="lists in item.dropDowmList" :key="lists.id">
              <span @click="callFun(lists.value)">{{ lists.name }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <div class="settings">
        <el-button
          icon="el-icon-setting"
          type="text"
          @click="visible = !visible"
        />
        <el-popover
          v-model="visible"
          width="200"
          placement="top"
        >
          <el-tree
            ref="menu"
            class="tree-border"
            :data="buttonList"
            show-checkbox
            node-key="id"
            :check-strictly="menuCheckStrictly"
            empty-text="加载中，请稍后"
            :props="defaultProps"
            @check-change="handleCheckChange"
          />
          <div class="mt20 text-right">
            <el-button size="mini" type="text" @click="visible = false">取消</el-button>
            <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
          </div>
        </el-popover>
      </div>
    </el-row>

  </div>

</template>
<script>
import props from './props'
export default {
  props,
  data() {
    return {
      defaultProps: {
        label: 'name',
        children: 'dropDowmList'
      },
      menuCheckStrictly: false,
      collapse: false,
      moreMenu: [],
      visible: false,
      buttonList: [
        {
          name: '新增',
          type: 'text',
          value: 'addCorp',
          id: 0,
          disabled: false,
          dropDowmList: [
            {
              name: '新增',
              id: 1,
              value: 'addBtn'
            }, {
              name: '复制',
              id: 2,
              value: 'copyBtn'
            }
          ]
        },
        {
          name: '保存',
          type: 'text',
          value: 'saveCorp',
          disabled: false,
          id: 1,
          dropDowmList: [
            // {
            //   label: '保存',
            //   id: 1,
            //   value: 'save'
            // }, {
            //   label: '暂存',
            //   id: 2,
            //   value: 'momentSave'
            // }
          ]
        },
        {
          name: '提交',
          type: 'text',
          value: 'commit',
          id: 2,
          disabled: false,
          dropDowmList: [
            {
              name: '提交',
              id: 1,
              value: 'commit'
            }, {
              name: '撤销',
              id: 2,
              value: 'cencel'
            }
          ]
        },
        {
          name: '审批',
          type: 'text',
          value: 'handleApproval',
          id: 3,
          disabled: false,
          dropDowmList: [
            {
              name: '审批',
              id: 1,
              value: 'approvaled'
            }, {
              name: '反审批',
              id: 2,
              value: 'diaApproval'
            }
          ]
        }

      ]
    }
  },
  created() {
  },
  methods: {
    callFun(methodName) {
      this.$emit('handleFun', methodName)
    },
    handleCheckChange(data) {
      console.log(data)
    }
  }
}
</script>

<style>
.table-operate {
  margin-bottom: 20px;
  line-height: 30px;
  box-shadow: 0px -1px 0px 0px #e5e5e5,   /*上边阴影 */
              -0.2px 0px 0px 0px #e5e5e5,   /*左边阴影  */
              0.2px 0px 0px 0px #e5e5e5,    /*右边阴影 */
              0px 1px 0px 0px #e5e5e5;     /*下边阴影 */
}
.settings {
  position: relative;
  margin-left: auto;
  margin-right: 20px;
}
.el-popover {
  right: -20px;
}
</style>
