<template>
  <div style="height: 100%">
    <JNPF-table ref="dynamicTable" v-loading="listLoading" :maxHeight="600" :data="list" row-key="id" default-expand-all :tree-props="{ children: 'children', hasChildren: '' }">
      <!--          :prop="item.prop"-->
      <el-table-column
        :label="item.label"
        :align="item.align"
        :width="item.width"
        v-for="(item, i) in columnList"
        :prop="String(item.propId)"
        :key="i"
        :sortable="item.sortable ? 'custom' : item.sortable"
      >
        <template slot-scope="scope">
          <div class="templateVal">
            <div v-if="scope.row[item.propId]">
              <div v-if="item.jnpfKey === 'uploadImg' || item.jnpfKey === 'uploadFz'">
                <template v-if="item.jnpfKey === 'uploadFz'">
                  <span style="color: #1890ff" v-for="(i, k) in getImgFun(scope.row[item.propId])" :key="k">{{ i.name }}</span>
                </template>
                <el-image
                  v-else-if="getImgFun(scope.row[item.propId])[0].url"
                  style="width: 50px; height: 50px"
                  :src="define.comUrl + getImgFun(scope.row[item.propId])[0].url"
                  :preview-src-list="getImgFunList(scope.row[item.propId])"
                >
                </el-image>
                <span v-else>{{ scope.row[item.propId] }}</span>
              </div>
              <div v-else-if="item.jnpfKey === 'switch'">
                <el-switch disabled v-model="scope.row[item.propId]" active-value="1" inactive-value="0"></el-switch>
              </div>
              <div v-else>
                {{ scope.row[item.propId] }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
    </JNPF-table>
  </div>
</template>

<script>
export default {
  name: 'dynamicTable',
  data() {
    return {
      description: '',
      refreshTable: false,
      listLoading: false,
      list: [],
      columnList: [],
      dataForm: {
        id: '',
        data: '',
        flowId: ''
      }
    }
  },
  methods: {
    init(data) {
      this.description = data.description
      this.setting = data
      let columnConf = data.formConf ? JSON.parse(data.formConf) : {}
      this.columnList = columnConf.columnList
      this.dataForm.id = data.id || ''
      this.listLoading = true
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.dataForm = { data: data.formDataJson, id: data.id, flowId: data.flowId }
          if (!this.dataForm.data) return
          this.list = JSON.parse(this.dataForm.data)
          //如果导出时 只勾选了部分展示的列
          let fitlerData = Object.keys(this.list[0])
          this.columnList = this.columnList.filter((i) => {
            if (fitlerData.includes(String(i.propId))) {
              return i
            }
          })
          this.$nextTick(() => {
            this.listLoading = false
            this.refreshTable = false
            this.$emit('setPageLoad')
          })
        } else {
          this.$nextTick(() => {
            this.listLoading = false
            this.refreshTable = false
            this.$emit('setPageLoad')
          })
        }
      })
    },
    //图片类型处理
    getImgFun(value) {
      try {
        const toObj = JSON.parse(value)
        if (Array.isArray(toObj) && toObj[0].url) {
          return toObj
        }
      } catch {}
      return value
    },
    getImgFunList(val) {
      const list = this.getImgFun(val)
      if (Array.isArray(list) && list.length)
        return list.map((i) => {
          return this.define.comUrl + i.url
        })
    },
    dataFormSubmit(eventType) {
      this.eventType = eventType
      this.dataForm.data = JSON.stringify(this.list)
      this.$emit('eventReciver', this.dataForm, this.eventType)
    }
  }
}
</script>

<style scoped></style>
