<template>
  <el-dialog :visible.sync="visible" :title="$t('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="$t('特性类型')" 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="$t('数据类型')" 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="$t('特性名称')" prop="name"/>
      <el-table-column :label="$t('特性属性')" prop="field"/>
      <el-table-column :label="$t('sap属性')" prop="sapField"/>
      <el-table-column :label="$t('是否必填')" prop="required">
        <template slot-scope="{row}">{{ row.required == 1 ? $t('是') : $t('否') }}</template>
      </el-table-column>
      <el-table-column :label="$t('错误提示语')" 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">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="onConfirm">{{$t('确认')}}</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>
