<template>
  <div id="index">
    <el-row>
      <el-col :span="24" style="text-align: right; margin: 0 0 15px 0">
        <el-button type="primary" size="small" @click="toBack">返回</el-button>
      </el-col>
      <el-col :span="24" style="text-align: right" v-if="type !== 'info'">
        <el-button type="primary" size="small" @click="toDialog">{{ type === 'accept' ? '受理' : '审核' }}</el-button>
      </el-col>
    </el-row>
    <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.title" :data="data"></component>
      </el-tab-pane>
    </el-tabs>
    <!-- 1个组件,2个参数,走2个接口 -->
    <el-dialog :title="type === 'accept' ? '受理' : '审核'" :close-on-click-modal="false" :visible.sync="dialog" center :destroy-on-close="true">
      <deal @close="close" />
    </el-dialog>
  </div>
</template>

<script>
import deal from './parts/deal.vue';
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('company_base');
export default {
  name: 'index',
  props: {},
  components: {
    baseInfo: () => import('./parts/base.vue'),
    material: () => import('./parts/material.vue'),
    approve: () => import('./parts/approve.vue'),
    person: () => import('./parts/person.vue'),
    shareholders: () => import('./parts/shareholders.vue'),
    managers: () => import('./parts/managers.vue'),
    unit: () => import('./parts/unit.vue'),
    trainer: () => import('./parts/trainer.vue'),
    unitLegalPerson: () => import('./parts/unit_legal_person.vue'),
    companyPersonCharge: () => import('./parts/company_person_charge.vue'),
    companyServiceArea: () => import('./parts/company_service_area.vue'),
    serviceTarget: () => import('./parts/service_target.vue'),
    gun: () => import('./parts/gun.vue'),
    car: () => import('./parts/car.vue'),
    equipment: () => import('./parts/equipment.vue'),
    service: () => import('./parts/service.vue'),
    deal,
  },
  data: function () {
    return {
      dialog: false,
      tabs: 'baseInfo',
      tabsList: [],
      data: {},
      baseList: [
        { label: '申请信息', name: 'baseInfo', component: 'baseInfo' },
        { label: '电子资料', name: 'material', component: 'material' },
        { label: '审批流程', name: 'approve', component: 'approve' },
      ],
      type1Tabs: [
        { label: '申请人信息', name: 'person', component: 'person' },
        { label: '股东及出资额信息', name: 'shareholders', component: 'shareholders', title: '股东及出资额信息' },
        { label: '管理人信息', name: 'managers', component: 'managers', title: '管理人信息' },
        { label: '枪支', name: 'gun', component: 'gun' },
        { label: '车辆', name: 'car', component: 'car' },
        { label: '装备器材', name: 'equipment', component: 'equipment' },
        { label: '服务对象', name: 'service', component: 'service' },
      ],
      type2Tabs: [
        { label: '申请单位信息', name: 'unit', component: 'unit', title: '申请单位信息' },
        { label: '管理人信息', name: 'managers', component: 'managers', title: '管理人信息' },
        { label: '培训机构师资信息', name: 'trainer', component: 'trainer', title: '培训机构师资信息' },
        { label: '枪支', name: 'gun', component: 'gun' },
        { label: '车辆', name: 'car', component: 'car' },
        { label: '装备器材', name: 'equipment', component: 'equipment' },
        { label: '服务对象', name: 'service', component: 'service' },
      ],
      type3Tabs: [
        { label: '单位法人信息', name: 'unit_legal_person', component: 'unitLegalPerson', title: '单位法人信息' },
        { label: '单位分管负责人信息', name: 'company_person_charge', component: 'companyPersonCharge', title: '单位分管负责人信息' },
        { label: '单位服务区域', name: 'company_service_area', component: 'companyServiceArea', title: '单位服务区域' },
        { label: '枪支', name: 'gun', component: 'gun' },
        { label: '车辆', name: 'car', component: 'car' },
        { label: '装备器材', name: 'equipment', component: 'equipment' },
        { label: '服务对象', name: 'service', component: 'service' },
      ],
      type4Tabs: [
        { label: '单位法人信息', name: 'unit_legal_person', component: 'unitLegalPerson', title: '单位法人信息' },
        { label: '单位经营负责人', name: 'managers', component: 'managers', title: '单位经营负责人' },
        { label: '保安服务对象', name: 'service_target', component: 'serviceTarget', title: '保安服务对象' },
        { label: '枪支', name: 'gun', component: 'gun' },
        { label: '车辆', name: 'car', component: 'car' },
        { label: '装备器材', name: 'equipment', component: 'equipment' },
      ],
      type5Tabs: [
        { label: '单位法人信息', name: 'unit_legal_person', component: 'unitLegalPerson', title: '单位法人信息' },
        { label: '负责人信息', name: 'managers', component: 'managers', title: '负责人信息' },
        { label: '枪支', name: 'gun', component: 'gun' },
        { label: '车辆', name: 'car', component: 'car' },
        { label: '装备器材', name: 'equipment', component: 'equipment' },
        { label: '服务对象', name: 'service', component: 'service' },
      ],
      companyType: {
        保安服务公司申请设立: 1,
        保安培训单位设立审批: 2,
        自行招用保安员单位申请备案: 3,
        外省市保安服务公司跨区域运营申请备案: 4,
        保安服务公司分公司备案申请: 5,
      },
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    ...mapActions(['fetch']),
    async init() {
      let data = {};
      let tabsList = [];
      const reqBase = await this.fetch({ id: this.id });
      if (this.$checkRes(reqBase)) {
        data = _.cloneDeep(reqBase.data);
        this.$set(this, `data`, data);
      }
      if (data.purpose) {
        const keys = Object.keys(this.companyType);
        const r = keys.find((f) => data.purpose.includes(f));
        if (r) {
          let tabs = _.cloneDeep(this[`type${this.companyType[r]}Tabs`]);
          if (_.isArray(tabs)) {
            let dup = _.cloneDeep(this.baseList);
            const last = _.last(dup);
            dup.splice(dup.length - 1, 1);
            dup = [...dup, ...tabs, last];
            tabsList = dup;
          }
        }
      }
      if (tabsList.length <= 0) tabsList = _.cloneDeep(this.baseList);
      this.$set(this, `tabsList`, tabsList);
    },
    toDialog() {
      this.dialog = true;
    },
    toBack() {
      this.$router.go(-1);
    },
    close() {
      this.dialog = false;
      this.toBack();
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    type() {
      // 3种情况:
      /*
        1.info:详情 与状态无关
        2.accept:受理 0=>1 ;再走审批
        3.approve:审批 0/1=>2
        2,3 主要是区分受理/审核的接口
       */
      return this.$route.params.type;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

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