<template>
  <div id="baoanyuan-data">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one" v-if="type == '1'">
          <data-table :fields="fields" :opera="opera" :data="list" :usePage="false">
            <template #custom="{ item, row }">
              <template v-if="item.model === 'name'">
                <el-link size="mini" type="primary" :underline="false" @click="toView(row)">{{ row.name }}</el-link>
              </template>
            </template>
          </data-table>
        </el-col>
        <el-col :span="24" class="two" v-else-if="type == '2'">
          <el-col :span="24">
            <data-table :fields="twoFields" :opera="opera" :data="twoList" :usePage="false">
              <template slot="btn">
                <el-button type="primary" size="mini" @click="back()">返回</el-button>
              </template>
            </data-table>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: home_security } = createNamespacedHelpers('home_security');
export default {
  name: 'baoanyuan-data',
  props: {},
  components: {},
  data: function () {
    return {
      type: '1',
      // 分局
      fields: [
        { label: '管辖单位', model: 'name', custom: true },
        { label: '报名人数', model: 'baoming' },
        { label: '考试人数', model: 'kaoshi' },
        { label: '合格人数', model: 'hege' },
        { label: '不合格人数', model: 'buhege' },
        { label: '保安员注销人数', model: 'baoanyuanzhuxiao' },
        { label: '保安员报名注销人数', model: 'baomingzhuxiao' },
        { label: '持证人数', model: 'chizheng' },
      ],
      opera: [],
      list: [],
      // 派出所
      twoFields: [
        { label: '管辖单位', model: 'name' },
        { label: '报名人数', model: 'baoming' },
        { label: '考试人数', model: 'kaoshi' },
        { label: '合格人数', model: 'hege' },
        { label: '不合格人数', model: 'buhege' },
        { label: '保安员注销人数', model: 'baoanyuanzhuxiao' },
        { label: '保安员报名注销人数', model: 'baomingzhuxiao' },
        { label: '持证人数', model: 'chizheng' },
      ],
      twoList: [],
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...home_security(['query', 'twoQuery']),
    async search() {
      let res = await this.twoQuery();
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
      }
    },
    // 查看信息
    async toView(data) {
      let res = await this.query({ branch_id: data.id });
      if (this.$checkRes(res)) {
        this.$set(this, `twoList`, res.data);
        this.type = '2';
      }
    },
    // 返回
    back() {
      this.type = '1';
      this.search();
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

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