<template>
  <el-dialog :visible.sync="visible" title="sap特性选择">
    <el-table v-loading="loading" ref="multipleTable" :data="page.records" lazy row-key="id" @selection-change="onSelect">
      <el-table-column type="selection" reserve-selection width="55"/>
      <el-table-column label="特性类型" prop="type">
        <template slot-scope="{row}">
          {{ (dict.type['sap_property_type'].find(item => item.value == row.type) || {label: row.type}).label }}
        </template>
      </el-table-column>
      <el-table-column label="数据类型" prop="dataType">
        <template slot-scope="{row}">
          {{ (dict.type['sys_data_type'].find(item => item.value == row.dataType) || {label: row.dataType}).label }}
        </template>
      </el-table-column>
      <el-table-column label="特性名称" prop="name"/>
      <el-table-column label="特性属性" prop="field"/>
      <el-table-column label="sap属性" prop="sapField"/>
      <el-table-column label="是否必填" prop="required">
        <template slot-scope="{row}">{{ row.required == 1 ? '是' : '否' }}</template>
      </el-table-column>
      <el-table-column label="错误提示语" prop="errMsg"/>
    </el-table>
    <pagination v-show="page.total>0" :total="page.total" :page.sync="pageReq.current" :limit.sync="pageReq.size" @pagination="getList"/>
    <div slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="onConfirm">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>

import { pageView } from '@/api/mes/md/sapField'

export default {
  dicts: ['sap_property_type', 'sys_data_type'],
  props: ['id'],
  data() {
    return {
      visible: false,
      loading: false,
      ids: [],
      selectList: [],
      page: {records: [], total: 0},
      pageReq: {
        current: 1,
        size: 10,
      },
    }
  },
  methods: {
    onConfirm() {
      this.visible = false
      this.$emit("handleConfirm", this.selectList)
    },
    onSelect(val) {
      this.selectList = val
    },
    getList(fn) {
      this.loading = true
      this.pageReq.pId = this.id
      pageView(this.pageReq).then(res => {
        this.page.records = res.data.rows
        this.page.total = res.data.total
        fn && fn()
      }).finally(() => this.loading = false)
    },
    init(form) {
      this.visible = true
      this.pageReq.pId = form.id
      this.pageReq.type = form.type
      this.getList(() => {
        if (form.subList && form.subList.length) {
          form.subList.forEach(sub => {
            this.$refs.multipleTable.toggleRowSelection({id: sub.id})
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      })
    },
  },
  created() {

  }
}
</script>

<style scoped>

</style>
