<!-- 物料申请单 -->
<template>
  <div class="material-requisition">
    <!-- 操作栏 -->
    <el-row :gutter="10" class="mb10">
      <!-- 新增、修改、删除、复制 -->
      <el-col :span="1.5">
        <el-button-group>
          <el-button size="small" @click="handleInster">新增</el-button>
          <el-button size="small" @click="handleEdit">修改</el-button>
          <el-button size="small" @click="handleDel">删除</el-button>
          <el-button size="small" @click="handleCopy">复制</el-button>
        </el-button-group>
      </el-col>

      <!-- 查询、刷新 -->
      <el-col :span="1.5">
        <el-button-group>
          <el-button size="small" @click="handleQuery">查询</el-button>
          <el-button size="small" @click="handleRefresh">刷新</el-button>
        </el-button-group>
      </el-col>

      <!-- 提交、收回  审批、取消审批、查看审批意见 -->
      <el-col :span="1.5">
        <el-button-group>

          <el-dropdown split-button size="small" @click="handleSubmit(true)" @command="handleSubmit">
            提交
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="isSubmit(true)">提交</el-dropdown-item>
              <el-dropdown-item :command="isSubmit(false)">收回</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-dropdown split-button size="small" @click="handleApproval('approval')" @command="handleApproval">
            审批
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="approvalState('approval')">审批</el-dropdown-item>
              <el-dropdown-item :command="approvalState('cancel')">取消审批</el-dropdown-item>
              <el-dropdown-item :command="approvalState('view')">查看审批意见</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-button-group>
      </el-col>

      <!-- 附件管理 -->
      <el-col :span="1.5">
        <el-button-group>
          <el-button size="small" v-if="isComponent == 'requestDetails'">附件管理</el-button>
          <!-- <el-button size="small">维护物料</el-button> -->

        </el-button-group>
      </el-col>
    </el-row>

    <component :is="isComponent" @actionBar="handleActionBar" :headerParams="headerParams"></component>
  </div>
</template>

<script>
import './style/index.scss';

import requestList from './list.vue';
import requestDetails from './details.vue';

import Store from '@/store/index'
export default {
  name: "material-requisition",
  components: {
    requestList,
    requestDetails,
  },
  data() {
    return {
      isComponent: 'requestList',
      // 头部参数
      headerParams: {
        // 是否编辑
        isEdit: false,
      },
      // 总条数
      total: 1,
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        name: null
      },
    };
  },
  created() {
    this.getList();
    console.log(Store.state.user, 'Store');
  },
  methods: {
    // 新增
    handleInster() {
      console.log('新增');
      this.isComponent = 'requestDetails';
    },
    // 修改
    handleEdit() {
      console.log('修改');
    },
    // 删除
    handleDel() {
      console.log('删除');
    },
    // 复制
    handleCopy() {
      console.log('复制');
    },
    // 查询
    handleQuery() {
      console.log('查询');
    },
    // 刷新
    handleRefresh() {
      console.log('刷新');
    },
    // 提交
    handleSubmit(val) {
      console.log(val, '提交');
    },
    isSubmit(type) {
      return type
    },
    // 审批
    handleApproval(val) {
      console.log(val, '审批');
    },
    approvalState(type) {
      return type
    },
    // 触发动态组件
    handleActionBar(params) {
      console.log(`需要更换至${params}~~~`);
      this.isComponent = params;
    },

    handleClick() { },
    /** 查询【请填写功能名称】列表 */
    getList() {

    },
    // 取消按钮
    cancel() {

      this.reset();
    },
    // 表单重置
    reset() {

    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },


  }
};
</script>
