<template>
  <el-dialog
    v-dialogDrag
    title="添加检验项管理"
    :visible.sync="open"
    width="1200px"
    append-to-body
    @open="dialogOpen"
    @close="dialogClose"
  >

    <!-- 搜索工作栏 -->
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      size="small"
      label-width="88px"
    >
      <SearchBar :show-more="false" :collapse-span="6">
        <template #header>
          <el-col :span="6">
            <el-form-item label="检验项编码" prop="inspectionNo">
              <el-input
                v-model="queryParams.inspectionNo"
                placeholder="请输入检验项编码"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检验项名称" prop="inspectionName">
              <el-input
                v-model="queryParams.inspectionName"
                placeholder="请输入检验项名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="检验项类型"
              prop="inspectionModel"
              label-width="98px"
            >
              <el-select
                v-model="queryParams.inspectionModel"
                placeholder="请选择检验项类型"
                clearable
                size="small"
              >
                <el-option
                  v-for="dict in getDictDatas(
                    DICT_TYPE.WMS_INSPECTION_TYPE
                  )"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </template>
        <template #buttons>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </template>
      </SearchBar>
    </el-form>

    <!-- 列表 -->
    <el-row :gutter="20">
      <el-col :span="14">
        <el-table
          ref="table"
          v-loading="loading"
          :data="list"
          border
          size="mini"
          max-height="250px"
          :row-key="getOnlyRowKey"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            label="检验项编码"
            align="center"
            prop="inspectionNo"
          />
          <el-table-column
            label="检验项名称"
            align="center"
            prop="inspectionName"
            width="180"
          />
          <el-table-column
            label="检验项类型"
            align="center"
            prop="inspectionModel"
            width="100"
          >
            <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.WMS_INSPECTION_TYPE" :value="scope.row.inspectionModel" />
            </template>
          </el-table-column>
          <el-table-column
            label="检验类别"
            align="center"
            prop="inspectionType"
            width="100"
          >
            <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.WMS_INSPECTION_CATEGORY" :value="scope.row.inspectionType" />
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="2" class="text-center">
        <el-button type="primary" icon="el-icon-right" @click="handleExchange" />
      </el-col>
      <el-col :span="8">
        <!-- 选中的组件 -->
        <el-table
          v-loading="loading"
          :data="selectList"
          border
          size="mini"
        >
          <el-table-column
            label="检验项编码"
            align="center"
            prop="inspectionNo"
          />
          <el-table-column
            label="检验项名称"
            align="center"
            prop="inspectionName"
          />
          <el-table-column
            label="操作"
            align="center"
            width="80"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                class="text-danger"
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button
        v-hasPermi="['wms:material-item-detail:modifyMaterialItem']"
        type="primary"
        :loading="ensureLoading"
        @click="submitForm"
      >确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getInspectionItemPage } from '@/api/wms/quality/inspectionItems'
// import { createMaterialItem, modifyMaterialItem } from '@/api/wms/quality/inspectionCase'

export default {
  name: 'AddInspectionItems',
  components: {
  },
  props: {
    inspectionType: {
      type: Number,
      default: 0
    },
    caselist: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      ensureLoading: false,
      selectDisabled: false,
      // 是否是第一次加载
      isFirst: true,
      // 总条数
      total: 0,
      // WMS 品质管理-检验项管理列表
      list: [],
      currentRows: [],
      // 选中的
      selectList: [],
      // 弹出层标题
      title: '',
      caseTitle: '',
      // 物料编码，modify时传
      materialNo: '',
      // 是否显示弹出层
      open: false,
      dom: '',
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        inspectionNo: null,
        inspectionName: null,
        inspectionModel: null,
        inspectionType: null,
        minValue: null,
        standValue: null,
        maxValue: null,
        createTime: [],
        inspectionItemId: null,
        type: null,
        materialItemCode: null,
        currentCount: 0,
        idList: [],
        auditStatus: 1
      },
      //
      modifyParams: {},
      // 表单参数
      form: {},
      isLoading: false,
      // 表单校验
      rules: {
        inspectionNo: [{ required: true, message: '检验项编码不能为空', trigger: 'blur' }],
        inspectionName: [{ required: true, message: '检验项名称不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true
      // 执行查询
      getInspectionItemPage(this.queryParams).then(response => {
        this.list = response.data.list
        this.total = response.data.total
      }).finally(() => {
        this.loading = false
      })
    },
    /** 取消按钮 */
    cancel() {
      this.queryParams.idList = []
      this.open = false
      this.reset()
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        inspectionNo: undefined,
        inspectionName: undefined,
        inspectionModel: undefined,
        inspectionType: undefined,
        minValue: undefined,
        standValue: undefined,
        maxValue: undefined,
        code: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加检验项管理'
    },
    dialogOpen() {
      this.$nextTick(() => {
        this.getList()
        this.scroll()
      })
    },
    // 选中的
    handleSelectionChange(val) {
      this.currentRows = val
    },
    dialogClose() {
      const { queryParams } = this
      queryParams.pageNo = 1
      queryParams.pageSize = 10
      this.selectList = []
      queryParams.idList = []
      queryParams.idListDeleted = []
      this.$emit('closeIds', queryParams.idList)
      this.getList()
      this.$refs.table.clearSelection()
    },
    submitForm() {
      if (this.selectList.length <= 0) {
        this.$modal.msgWarning('检验项不能为空，请选择您要新增的检验项')
        return
      }
      this.$emit('getSelectList', this.selectList, this.queryParams.idList)
      this.open = false
      // const params = this.selectList.map(item => {
      //   const { id: inspectionItemId, inspectionType: type } = item
      //   return {
      //     inspectionItemId,
      //     type,
      //     code: this.queryParams.materialItemCode
      //   }
      // })

      // await createMaterialItem(params)
      //   this.$modal.msgSuccess('新增成功')
      //   this.open = false
      //   this.$emit('addComplete')
      // const { id, wmsMaterialAdditionalId } = this.modifyParams
      // const modifyMaterialParams = {
      //   updateReqVO: this.caselist,
      //   wmsMaterialItemMasterId: id,
      //   wmsMaterialAdditionalId: wmsMaterialAdditionalId,
      //   materialNo: this.materialNo
      // }
      // if (wmsMaterialAdditionalId === null) {
      //   return
      // }
      // modifyMaterialItem(modifyMaterialParams).then(res => {
      //   this.$emit('addComplete')
      // })
    },
    scroll() {
      // 获取需要绑定的table
      this.dom = this.$refs.table.bodyWrapper
      this.dom.addEventListener('scroll', () => {
      // 表格滚动条滚动的距离
        const scrollTop = this.dom.scrollTop
        // 变量windowHeight是可视区的⾼度
        // let windowHeight = this.dom.clientHeight
        // 变量scrollHeight是滚动条的总⾼度
        const scrollHeight = this.dom.scrollHeight
        const clientHeight = this.dom.clientHeight
        const scrollBottom = scrollHeight - scrollTop - clientHeight
        if (scrollBottom < 1 && this.list.length < this.total) { // 这里就是滚动条滚动到底部的时候
          this.queryParams.pageSize += 10
          this.getList()
          if (this.list.length + 1 === this.total) {
            return
          }
          setTimeout(() => {
            this.loading = false
          }, 500)
        }
      })
    },

    // 选中切换
    handleExchange() {
      if (this.currentRows.length <= 0) {
        this.$modal.msgWarning('请选择您要新增的方案')
        return
      }
      this.selectList.push(...this.currentRows)
      const changeList = this.selectList.map(item => {
        const { id } = item
        return id
      })
      this.queryParams.idList.push(...changeList)
      this.getList()
      this.currentRows = []
    },
    // 删除选中的方案
    handleDelete(row) {
      const { id } = row
      const index = this.selectList.findIndex(item => item.id === id)
      const idIndex = this.queryParams.idList.findIndex(item => item === id)
      if (index > -1) {
        this.selectList.splice(index, 1)
        this.queryParams.idList.splice(idIndex, 1)
        this.getList()
      }
    },
    getOnlyRowKey(row) {
      return row.id
    }
  }
}
</script>

