<!-- 物料信息展示列表 -->
<template>
  <el-dialog title="物料列表" :visible.sync="dialogVisible" width="800px" :before-close="handleCancel">
    <!-- 列表 -->
    <el-table stripe border v-loading="loading" style="max-height:50vh" :clear-selection="false" :data="tableList" ref="table" @selection-change="handleSelectionChange">
      <el-table-column type="selection" :selectable="(row) => row.selectable"></el-table-column>
      <el-table-column label="产品编号" align="center" prop="materielCode" />
      <el-table-column label="产品名称" align="center" prop="materielName" />
      <el-table-column label="类别" align="center" prop="materielType">
        <template v-slot="scope">
          <dict-tag :type="DICT_TYPE.BS_MATERIAL_TYPE" :value="scope.row.materielType" />
        </template>
      </el-table-column>
      <el-table-column label="产品属性" align="center" prop="extend">
        <template v-slot="scope">
          <span>{{handleFilterExtendList(scope.row.extendList)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" align="center" prop="createTime" width="180">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="total > 0" :autoScroll="false" :total="total" :page.sync="queryParams.pageNo" :pageSizes="[1000,2000]" :limit.sync="queryParams.pageSize" @pagination="getList" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getMaterielPage } from "@/api/bs/materiel";
export default {
  name: '',
  props: {
    isOpen: Boolean,
    userList: Array,
    selectIds: Array
  },
  watch: {
    isOpen: {
      handler(val) {
        this.dialogVisible = val
        if (val) {
          this.handleInit()
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      tableList: [],
      total: 0,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 1000,
      },
    }
  },
  watch: {
    isOpen: {
      handler(val) {
        this.dialogVisible = val
        if (val) {
          this.handleInit()
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleInit() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    handleFilterExtendList(list) {
      let str = '-'
      let arr = []
      if (Array.isArray(list) && list.length) {
        list.forEach(n => {
          arr.push(`${n.key}:${n.name}`)
        })
      }
      str = arr.join('、') || '-'
      return str
    },
    handleSelectionChange(arr) {
      this.selectArr = arr;
    },
    getList() {
      this.loading = true;
      // 执行查询
      getMaterielPage(this.queryParams).then(response => {
        this.tableList = response.data.list;
        this.total = response.data.total;
        this.tableList = (response.data.list || []).map(item => {
          if (this.selectIds.includes(item.id)) {
            return {
              ...item,
              selectable: false
            }
          } else {
            return {
              ...item,
              selectable: true
            }
          }
        })
        this.loading = false;
      });
    },
    handleCancel() {
      this.$emit('onCancel')
    },
    handleConfirm() {
      this.$emit('onConfirm', this.selectArr)
    },
    handleInit() {
      this.queryParams.pageNo = 1
      this.queryParams.pageSize = 1000
      this.cacheArr = []
      this.getList()
    },
  }
}

</script>
<style lang='scss' scoped>
</style>