<template>
  <div id="index">
    <detail-layout>
      <template v-slot:title>
        基本资料
      </template>
      <template v-slot:main>
        <!-- 下面3个标签页各自独立,由此组件发送请求后再将数据传给子组件,供其显示与修改;
        子组件在通过提供的方法将更改后的信息传回,提交;
        流程:请求数据=>子组件=>子组件做副本,用来显示和修改=>修改=>将数据传回父组件,只提交该子组件负责的范围内数据 -->
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="基本资料" name="first">
            <info :original="info" :base="base" :identity="identity" @onSubmit="onSubmit"></info>
          </el-tab-pane>
          <el-tab-pane label="认证信息" name="second">
            <auth :base="base" :identitys="identity" @onSubmit="onSubmit"></auth>
          </el-tab-pane>
        </el-tabs>
      </template>
    </detail-layout>
  </div>
</template>

<script>
import info from './info.vue';
import auth from './auth.vue';
import detailLayout from '@/layout/detail-layout.vue';
import { mapActions, mapState } from 'vuex';
export default {
  name: 'index',
  // metaInfo: {
  //   title: '企业基本资料',
  // },
  props: {},
  components: {
    detailLayout,
    info,
    auth,
  },
  data: () => ({
    activeName: 'first',
    info: {},
    base: {},
    identity: {},
  }),
  created() {
    this.getInfo();
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapActions(['corpOperation', 'getCorpInfo', 'postCorpInfo']),
    async getInfo() {
      let { info, base, identity } = await this.corpOperation({ type: 'search', data: { corpid: this.user.corpid } });
      this.$set(this, 'info', info);
      this.$set(this, 'base', base);
      this.$set(this, 'identity', identity);
    },
    async onSubmit({ data, type }) {
      //连接后台接口
      let result = await this.corpOperation({ data: { corpid: this.user.corpid, info: data }, type: type });
      this.$message({
        type: `${result.errcode}` === '0' ? 'success' : 'error',
        message: `${result.errcode}` === '0' ? '修改成功' : result.errmsg,
      });
    },
  },
};
</script>

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