<template>
  <view class="content">
    <view class="justify-center section_1" :style="{ backgroundImage: translateBg }">
      <image src="/static/imgs/general/back-icon.png" class="image" @click="back" />
      <text>完善信息</text>
    </view>
    <enterprise-form ref="enterpriseForm" v-if="role == 'enterprise'" :id="factoryId"></enterprise-form>
    <person-form ref="personForm" v-if="role == 'person'"></person-form>
    <qn-footer fixed>
      <view class="flex-col items-center text-wrapper_1" @click="save">
        <text>保存</text>
      </view>
    </qn-footer>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { saveFactoryInfo, savePersonalInfo } from '@/apis/factoryApi.js'
import PersonForm from './PersonForm.vue'
import EnterpriseForm from './EnterpriseForm.vue'
import { getBaseInfo } from '@/apis/commonApi.js'
export default {
  components: {
    PersonForm,
    EnterpriseForm
  },
  data() {
    return {
      /**
       * @description 当前角色
       * @value person | enterprise
       */
      role: 'person',
      companyId: null,
      factoryId: null
    }
  },
  methods: {
    go2,
    back,
    validateEnterprise() {
      const form = this.$refs.enterpriseForm.validate()
      if (form) {
        saveFactoryInfo(form).then((res) => {
          if (res) {
            getBaseInfo({}, true).then((success) => {
              if (success) {
                go2('digital-workshops', {}, true)
              }
            })
          }
        })
      }
    },
    validatePerson() {
      const form = this.$refs.personForm.validate()
      if (form) {
        savePersonalInfo(form).then((res) => {
          if (res) {
            getBaseInfo({}, true).then((success) => {
              if (success) {
                go2('mall', {}, true)
              }
            })
          }
        })
      }
    },
    save() {
      // 校验
      if (this.role == 'enterprise') {
        this.validateEnterprise()
      }
      if (this.role == 'person') {
        this.validatePerson()
      }
    },
    getCompanyInfo() {
      if (this.role == 'enterprise') {
        this.factoryId = this.companyId
      }
      // if(this.role == 'person') {

      // }
    }
  },
  computed: {
    translateBg() {
      if (this.role == 'enterprise') {
        return 'url(https://qncloud.oss-cn-shenzhen.aliyuncs.com/print-package-app/complete-factory.png)'
      }
      if (this.role == 'person') {
        return 'url(https://qncloud.oss-cn-shenzhen.aliyuncs.com/print-package-app/complete-person.png)'
      }
      return ''
    }
  },
  onLoad(options) {
    if (!options.role) {
      uni.showToast({
        title: '角色未选择，即将跳转',
        icon: 'none'
      })

      setTimeout(() => {
        if (options.id) {
          back()
        } else {
          go2('select-role', {}, true)
        }
      }, 1000)
    } else {
      this.role = options.role
      if (options.id) {
        this.companyId = options.id
        this.getCompanyInfo()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  .section_1 {
    padding: 59rpx 34rpx 309rpx;
    color: rgb(0, 0, 0);
    font-size: 36rpx;
    font-weight: 500;
    line-height: 50rpx;
    white-space: nowrap;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    .image {
      position: absolute;
      left: 34rpx;
      top: 66rpx;
      width: 20rpx;
      height: 36rpx;
    }
  }
  .text-wrapper_1 {
    margin: 0 32rpx;
    padding: 23rpx 0;
    background-color: rgb(0, 122, 255);
    border-radius: 10rpx;
    color: rgb(255, 255, 255);
  }
}
</style>
