<template>
  <div id="criminal">
    <data-table :fields="fields" :opera="opera" :data="list" :usePage="false" height="500px" @edit="toEdit" @delete="toDelete">
      <template #btn>
        <el-button type="primary" size="mini" @click="toAdd">添加</el-button>
      </template>
    </data-table>
    <el-dialog title="前科信息" width="40%" :visible.sync="dialog" top="16vh" center :append-to-body="true" :close-on-click-modal="false">
      <data-form v-model="form" :fields="formFields" :needSave="false"></data-form>

      <template #footer>
        <div style="text-align: center">
          <el-button type="primary" style="margin-right: 20px" @click="toSave">保存</el-button>
          <el-button @click="toCancel">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'criminal',
  props: {},
  components: {},
  data: function () {
    return {
      dialog: false,
      list: [],
      fields: [
        { label: '罪项', model: 'c' },
        { label: '时间', model: 'time' },
      ],
      opera: [
        { label: '修改', method: 'edit' },
        { label: '删除', method: 'delete', type: 'danger', confirm: true },
      ],
      form: {},
      formFields: [
        { label: '罪项', model: 'c' },
        { label: '时间', model: 'time', type: 'date' },
      ],
    };
  },
  created() {},
  methods: {
    toAdd() {
      this.dialog = true;
    },
    toSave() {
      const data = _.cloneDeep(this.form);
      if (!data._id) {
        data._id = this.list.length + 1;
        this.list.push(data);
      } else {
        const index = this.list.findIndex((f) => f._id === data._id);
        this.$set(this.list, index, data);
      }
      this.form = {};
      this.toCancel();
    },
    toCancel() {
      this.dialog = false;
    },
    toEdit({ data }) {
      this.dialog = true;
      this.form = data;
    },
    toDelete({ index }) {
      this.list.splice(index, 1);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>
