<template>
  <div id="view-form">
    <el-form label-position="right" :label-width="labelWidth">
      <el-row :gutter="10">
        <el-col v-for="(f, fIndex) in fields" :span="f.span || default_span" :key="`baseField${fIndex}`">
          <el-form-item :label="f.label">
            <p class="model">{{ getData(f.model) || '暂无' }}</p>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <slot></slot>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: dept } = createNamespacedHelpers('police_department');
export default {
  name: 'view-form',
  props: {
    data: { type: Object, required: true },
    fields: { type: Array, required: true },
    labelWidth: { type: String, default: '180px' },
    default_span: { type: Number, default: 8 },
  },
  components: {},
  data: function () {
    return {};
  },
  created() {},
  methods: {
    ...dept(['fetch']),
    getData(model) {
      let data = _.get(this.data, model);
      if (!data) return;
      try {
        // 有一种直接就是Array
        if (_.isArray(data)) {
          data = data.join(',');
          return data;
        }
        // 另一种转成Array
        if (JSON.parse(data)) {
          data = JSON.parse(data);
          if (_.isArray(data)) {
            data = data.join(',');
          }
        }
      } finally {
        return data;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.model {
  border: 1px solid #dcdfe6;
  padding: 0 8px;
  border-radius: 5px;
}
</style>
