<!-- 物料信息基础档案 -->
<template>
  <div class="material-basic">

    <!-- 操作栏 -->
    <el-row :gutter="10" class="mb10" v-if="!headerParams.isEdit || mainTabCode == 'material'">
      <!-- 新增、修改、删除、复制 -->
      <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-dropdown size="small" v-if="isComponent == 'materiaList'" @command="handleFilter">
            <el-button size="small">
              过滤<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="filterCondition('stop')">显示停用</el-dropdown-item>
              <el-dropdown-item :command="filterCondition('allot')">显示已分配</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <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="handleIsInvoke(true)" @command="handleIsInvoke">
            启用
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="isInvoke(true)">启用</el-dropdown-item>
              <el-dropdown-item :command="isInvoke(false)">停用</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" @click="handleQueryForm">申请单查询</el-button>
        </el-button-group>
      </el-col>

      <!-- 导入导出 -->
      <el-col :span="1.5">
        <el-button-group>
          <el-button size="small" @click="handleImport">批量导入</el-button>
          <el-button size="small" @click="handleExport">批量导出</el-button>
        </el-button-group>
      </el-col>

    </el-row>

    <!-- 基本信息修改状态下—— 保存、保存新增、更新导入、取消 -->
    <el-row :gutter="10" class="mb10" v-else-if="headerParams.isEdit">
      <el-col :span="1.5">
        <el-button-group>
          <el-button size="small" @click="handleSave">保存</el-button>
          <el-button size="small" @click="handleSaveAdd" disabled>保存新增</el-button>
          <el-button size="small" @click="handleUpdateImport">更新导入</el-button>
        </el-button-group>
      </el-col>

      <el-col :span="1.5">
        <el-button-group>
          <el-button size="small" @click="handleCancel">取消</el-button>
        </el-button-group>
      </el-col>
    </el-row>

    <el-dialog title="操作提示" :visible.sync="optionDialog.show" width="30%" center top="50vh">
      <span>是否确认{{ optionDialog.op }}？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleOptionShow('option', false)">取 消</el-button>
        <el-button type="primary" @click="handleComfirmOption('cancal')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- <keep-alive include="materiaDetails" :max="15"> -->
    <component :is="isComponent" @actionBar="handleActionBar" :headerParams="headerParams"
      @headerOption="handleHeaderOption">
    </component>
    <!-- </keep-alive> -->

  </div>
</template>

<script>
import './style/index.scss';
import materiaList from './list.vue';
import materiaDetails from './details.vue';
export default {
  name: "material-basic",
  components: {
    materiaList,
    materiaDetails
  },
  data() {
    return {
      isComponent: 'materiaList',
      // 头部数据
      headerParams: {
        // 物料id
        materialId: '',
        // 是否编辑
        isEdit: false,
        activeMainTab: 'material',
      },

      // 列表选中数据
      checkedList: [],
      // 操作弹窗
      optionDialog: {
        show: false,
        op: ''
      },
      // details中主标签页的code
      mainTabCode: '',
    }
  },
  created() {

  },
  methods: {
    // 新增
    handleInster() {
      this.$message({
        message: '物料只能通过申请审批增加，不能在节点直接录入！',
        type: 'warning'
      });
    },
    // 修改
    handleEdit() {
      if (this.isComponent == 'materiaList' && this.checkedList.length == 1) {
        this.headerParams.isEdit = true;
        let bar = JSON.stringify({
          address: 'materiaDetails',
          id: this.checkedList[0].id
        })
        this.handleActionBar(bar);
      } else if (this.isComponent == 'materiaList' && this.checkedList.length > 1) {
        this.$message({
          message: '修改只能选择单个数据！',
          type: 'warning'
        });
      } else if (this.isComponent == 'materiaDetails') {
        this.headerParams.isEdit = true;
        console.log('详情修改');
      } else {
        this.$message({
          message: '请选择需要修改的信息！',
          type: 'warning'
        });
      }
    },
    // 删除
    handleDel() {
      console.log('删除');
    },
    // 复制
    handleCopy() {
      console.log('复制');
    },
    //查询 
    handleQuery() {

    },
    // 刷新
    handleRefresh() {
      console.log('刷新');
    },
    // 过滤
    handleFilter(e) {
      console.log(e, '过滤');
    },
    filterCondition(type) {
      return {
        type
      }
    },
    // 启用
    handleIsInvoke(e) {
      console.log('启用', e);
    },
    isInvoke(val) {
      return val;
    },
    // 申请单查询
    handleQueryForm() {
      console.log('申请单查询');
    },
    // 批量导入
    handleImport() {
      console.log('批量导入');
    },
    // 批量导出
    handleExport() {
      console.log('批量导出');
    },

    // 取消保存
    handleCancel() {
      console.log('取消保存');
      this.optionDialog.op = '取消';
      this.handleOptionShow('option', true);
    },
    // 保存修改
    handleSave() {
      console.log('保存修改');
    },
    // 保存修改并新增
    handleSaveAdd() {
      console.log('保存修改并新增');
    },
    // 更新导入
    handleUpdateImport() {
      console.log('更新导入');
    },
    // 头部数据处理
    handleHeaderOption(params) {
      let query = JSON.parse(params);
      console.log(query, 'query');
      this.checkedList = query.checkedList || [];
      this.headerParams.activeMainTab = query.activeMainTab || 'material';
    },
    // 触发动态组件
    handleActionBar(params) {
      let bar = JSON.parse(params);
      console.log(bar);
      this.isComponent = bar.address;
      this.headerParams.materialId = bar.id;
    },
    // 操作弹窗显隐
    handleOptionShow(type, val) {
      switch (type) {
        case 'option':
          this.optionDialog.show = val;
          break;
      }
    },
    // 操作弹窗确认按钮
    handleComfirmOption(op) {
      switch (op) {
        case 'cancal':
          this.handleOptionShow('option', false);
          this.headerParams.isEdit = false;
          break;
      }
    },


  }

};
</script>

