<template>
  <div id="index">
    <data-table
      :fields="fields"
      :opera="opera"
      :data="list"
      :total="total"
      @query="search"
      @edit="toEdit"
      @biology="toBiology"
      @cert="toCert"
      @criminal="toCriminal"
      @record="toRecord"
      @assess="toAssess"
      @delete="toDelete"
    >
      <template #btn>
        <el-button type="primary" size="mini" @click="toAdd">添加</el-button>
      </template>
    </data-table>
    <el-dialog :title="dtitle" :visible.sync="dialog" center>
      <component :is="view" v-model="form" @save="toSave"></component>
    </el-dialog>
  </div>
</template>

<script>
import { fields, opera } from './columns';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'index',
  props: {},
  components: {
    info: () => import('./info.vue'),
    biology: () => import('./biology.vue'),
    cert: () => import('./cert.vue'),
    criminal: () => import('./criminal.vue'),
    record: () => import('./record.vue'),
    assess: () => import('./assess.vue'),
  },
  data: function () {
    return {
      list: [{ name: 'xxx', age: 26, company: '长春市xxxxx公司', status: '已审核' }],
      total: 0,
      fields: fields,
      opera: opera,
      dialog: false,
      dtitle: '',
      form: {},
      view: '',
    };
  },
  created() {},
  methods: {
    search() {},
    toAdd() {
      this.dialogOpen('info');
    },
    // 去编辑
    toEdit({ data }) {
      this.dialogOpen('info');
      this.$set(this, `form`, data);
    },
    toBiology({ data }) {
      console.log('in function:toBiology');
      this.dialogOpen('biology');
      // TODO 获取生物信息
    },
    toCert({ data }) {
      console.log('in function:toCert');
      this.dialogOpen('cert');
      // TODO 获取证件
    },
    toCriminal({ data }) {
      console.log('in function:toCriminal');
      this.dialogOpen('criminal');
      // TODO 获取犯罪记录
    },
    toRecord({ data }) {
      console.log('in function:toRecord');
      this.dialogOpen('record');
      // TODO 获取打卡记录
    },
    toAssess({ data }) {
      console.log('in function:toAssess');
      this.dialogOpen('assess');
      // TODO 获取评价
    },
    toDelete({ data }) {
      console.log('in function:toDelete');
      // TODO 删除
    },
    toSave(data) {
      this.$message({ type: 'success', message: '保存成功' });
      this.dialogClose();
    },
    dialogOpen(view) {
      this.dialog = true;
      let word = '';
      if (view) {
        switch (view) {
          case 'info':
            word = '信息管理';
            break;
          case 'biology':
            word = '生物信息';
            break;
          case 'cert':
            word = '电子证书';
            break;
          case 'criminal':
            word = '前科记录';
            break;
          case 'record':
            word = '打卡记录';
            break;
          case 'assess':
            word = '评价记录';
            break;
          default:
            break;
        }
        this.dtitle = word;
        this.view = view;
      }
    },
    dialogClose() {
      this.dialog = false;
      this.form = {};
      this.dtitle = {};
      this.view = '';
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

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