<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-button type="primary" size="mini" @click="back()">返回</el-button>
        </el-col>
        <el-col :span="24" class="two">
          <el-tabs v-model="tabs" type="card">
            <el-tab-pane v-for="(i, index) in tabsList" :key="`tab${index}`" :label="i.label" :name="i.name">
              <component :is="i.component" :title="i.label" :data="info"></component>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const { basic, one } = require('./dict');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('company_base');
const { mapActions: dept } = createNamespacedHelpers('police_department');
export default {
  name: 'index',
  props: {},
  components: {
    // 基本信息
    baseInfo: () => import('./parts/baseInfo.vue'),
    // 电子资料
    material: () => import('./parts/material.vue'),
    // 申请人信息
    person: () => import('./parts/person.vue'),
    // 股东及出资额信息
    shareholders: () => import('./parts/shareholders.vue'),
    // 管理人信息
    managers: () => import('./parts/managers.vue'),
    // 枪支
    gun: () => import('./parts/gun.vue'),
    // 车辆
    car: () => import('./parts/car.vue'),
    // 装备器材`
    equipment: () => import('./parts/equipment.vue'),
    // 服务对象
    service: () => import('./parts/service.vue'),
    // 申请单位信息
    unit: () => import('./parts/unit.vue'),
    // 培训机构师资信息
    trainer: () => import('./parts/trainer.vue'),
    // 单位法人信息
    unitLegalPerson: () => import('./parts/unitLegalPerson.vue'),
    // 单位分管负责人信息
    companyPersonCharge: () => import('./parts/companyPersonCharge.vue'),
    // 单位服务区域
    companyServiceArea: () => import('./parts/companyServiceArea.vue'),
    // 保安服务对象
    serviceTarget: () => import('./parts/serviceTarget.vue'),
  },
  data: function () {
    return {
      // 详细信息
      info: {},
      // tabs
      tabs: 'baseInfo',
      tabsList: [],
    };
  },
  async created() {
    if (this.id) await this.search();
  },
  methods: {
    ...mapActions(['fetch']),
    ...dept({ deptFetch: 'fetch' }),

    // 查询详情
    async search() {
      let res = await this.fetch({ id: this.id });
      if (this.$checkRes(res)) {
        let data = _.cloneDeep(res.data);
        res = await this.deptFetch({ id: data.tube_company });
        if (this.$checkRes(res)) {
          data.tube_company = res.data ? res.data.name : '';
        }
        this.$set(this, `info`, data);
      }
      // 查询企业类型并赋值tabs
      if (this.purpose_id) {
        const p1 = one.find((f) => f.type.includes(this.purpose_id));
        if (p1) {
          let dup = _.cloneDeep(basic);
          dup = [...dup, ...p1.list];
          console.log(dup);
          this.$set(this, `tabsList`, dup);
        }
      }
    },
    back() {
      this.$router.go(-1);
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    purpose_id() {
      return this.$route.query.purpose_id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    text-align: right;
    margin: 0 0 10px 0;
  }
}
</style>
