<template>
  <div class="app-container">
    <el-button
      v-if="$attrs.optType === 'add'"
      type="primary"
      plain
      icon="el-icon-plus"
      size="mini"
      @click="$refs['ItemSelectRef'].showFlag = true"
    >新增</el-button>
    <ItemSelect v-if="$attrs.optType === 'add'" ref="ItemSelectRef" @onSelected="onItemSelect" />
    <el-table v-loading="loading" :data="tmToolRequestItemList" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column
      type="index"
      label="序号"
      width="50"/>
      <el-table-column label="物料编码" align="center" prop="sapItemCode" />
      <el-table-column  width="100px" label="物料名称" align="center" prop="itemName" />
      <el-table-column  width="100px" label="SN号" align="center" prop="toolCode" />
      <el-table-column width="120px" v-if="$attrs.optType === 'add'" label="入库位置" align="center" prop="local" >
         <template slot-scope="scope">
            <el-input v-model="scope.row.local" @blur="$emit('sum')" placeholder="请输入入库位置" />
         </template>
      </el-table-column>
      <el-table-column  width="120px" v-else label="入库位置" align="center" prop="local" />
      <el-table-column width="240px" v-if="$attrs.optType === 'add'" label="入库方式" align="center" prop="warehouseDesc">
         <template slot-scope="scope">
            <el-radio-group v-model="scope.row.warehouseDesc">
              <el-radio v-for="dict in dict.type.warehouse_desc"
                  :key="dict.value" :label="dict.label">{{ dict.label }}</el-radio>
            </el-radio-group>
         </template>
      </el-table-column>
      <el-table-column  width="120px" v-else label="入库方式" align="center" prop="warehouseDesc" />
      <el-table-column width="100px" v-if="$attrs.optType === 'add'" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleRemove(scope.row, scope.$index)"
          >删除</el-button>
          </template>
        </el-table-column>
    </el-table>


    <pagination
      v-show="total>0&&$attrs.optType !== 'add'"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { lisWoreHouseDetail } from "@/api/mes/tm/warehouse";
import ItemSelect from "./selectmachinesrecord.vue";
export default {
  name: "TmToolRequestItem",
  dicts: [
    "warehouse_desc"
  ],
  components: {ItemSelect},
  props:{
    id:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 刀模版物料申请单表格数据
      tmToolRequestItemList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  watch: {

  },
  created() {
    if (this.$attrs.optType !== 'add') {
      this.getList();
    }
  },
  methods: {
    onItemSelect(list){
      // console.log(list, 'list')
      const datas = list.map(item => {
        return {
          toolWarehouseId:item.toolWarehouseId,
          toolMachinesId:item.toolMachinesId,
          type:item.type,
          toolCode:item.toolCode,
          toolName:item.toolName,
          itemCode:item.itemCode,
          sapItemCode:item.sapItemCode,
          itemName:item.itemName,
          local:item.local,
          processId:Number(item.processId),
          processName:item.processName,
          warehouse:item.warehouse,
          warehouseDesc:item.warehouseDesc,
        }
      })
      this.tmToolRequestItemList = this.tmToolRequestItemList.concat(datas)
      this.$emit('sum')
    },
    /** 查询刀模版物料申请单列表 */
    getList() {
      console.log(this.id, 'ids')
      this.loading = true;
      this.queryParams.toolWarehouseId = this.id;
      lisWoreHouseDetail(this.queryParams).then(response => {
        this.tmToolRequestItemList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleRemove(row, index) {
      console.log(row,index)
      // this.tags.splice(this.tags.indexOf(tag), 1)
      this.tmToolRequestItemList.splice(this.tmToolRequestItemList.indexOf(row), 1)
      this.$emit('sum')
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.toolRequestItemId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    }
  }
};
</script>
