<template>
  <view>
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="完善信息">
      <text @click="jump" v-if="operation === 'add'" style="color: #007aff" slot="right">跳过</text>
    </uni-nav-bar>
    <qn-form-item label="基础信息" type="title"></qn-form-item>
    <qn-form-item label="企业名称" required>
      <qn-easyinput :maxlength="20" v-model="form.name" :inputBorder="false" text="right" placeholder="请输入企业名称"></qn-easyinput>
    </qn-form-item>
    <qn-form-item label="企业简称">
      <qn-easyinput :maxlength="20" v-model="form.shortName" :inputBorder="false" text="right" placeholder="请输入企业简称"></qn-easyinput>
    </qn-form-item>
    <qn-form-item label="所在地区" required>
      <qn-data-picker
        text="right"
        :border="false"
        class="qn-picker"
        placeholder="区域"
        popup-title="请选择城市"
        :map="{ text: 'name', value: 'id' }"
        @change="onAreaChange"
        :clear-icon="true"
        :localdata="items"
      >
        <text v-if="form.locStreetName">
          {{ `${form.locProvinceName || ''}/${form.locCityName || ''}/${form.locDistrictName || ''}/${form.locStreetName || ''}` }}
        </text>
      </qn-data-picker>
    </qn-form-item>
    <qn-form-item label="详细地址" required>
      <qn-easyinput
        :maxlength="20"
        :styles="{ disableColor: '#fff' }"
        v-model="form.locDetail"
        :inputBorder="false"
        text="right"
        placeholder="请输入详细地址"
      ></qn-easyinput>
    </qn-form-item>
    <qn-form-item label="工商信息" type="title"></qn-form-item>
    <qn-form-item label="信用代码" required>
      <qn-easyinput
        :maxlength="18"
        :styles="{ disableColor: '#fff' }"
        v-model="form.uniformSocialCreditCode"
        :inputBorder="false"
        text="right"
        placeholder="请输入企业信用代码"
      ></qn-easyinput>
    </qn-form-item>
    <qn-form-item label="法人/实控人" required>
      <qn-easyinput
        :maxlength="20"
        :styles="{ disableColor: '#fff' }"
        v-model="form.legalPersonName"
        :inputBorder="false"
        text="right"
        placeholder="请输入法人/实控人"
      ></qn-easyinput>
    </qn-form-item>
    <qn-form-item label="法人/实控人手机" required>
      <qn-easyinput
        :maxlength="11"
        type="number"
        :styles="{ disableColor: '#fff' }"
        v-model="form.legalPersonMobile"
        :inputBorder="false"
        text="right"
        placeholder="请输入法人/实控人手机"
      ></qn-easyinput>
    </qn-form-item>
    <qn-form-item label="法人/实控人身份证号" required>
      <qn-easyinput
        :maxlength="18"
        :styles="{ disableColor: '#fff' }"
        v-model="form.legalPersonIdCardNo"
        :inputBorder="false"
        text="right"
        placeholder="请输入法人/实控人身份证号"
      ></qn-easyinput>
    </qn-form-item>
    <qn-form-item label="身份证照片" size="large" required>
      <view class="upload-area">
        <image class="idCard" @click="selectedImage('legalPersonIdCardFrontImg')" :src="frontIDCard" />
        <image class="idCard" @click="selectedImage('legalPersonIdCardBackImg')" :src="backIDCard" />
      </view>
    </qn-form-item>
    <qn-form-item label="营业执照" required>
      <text v-if="!form.businessLicenseImg" @click="selectedImage('businessLicenseImg')" style="font-size: 28rpx; color: #007aff">点击上传</text>
      <text v-if="form.businessLicenseImg" @click="selectedImage('businessLicenseImg')" style="font-size: 28rpx; color: #f5222d; margin-right: 16rpx">
        重新上传
      </text>
      <text v-if="form.businessLicenseImg" @click="showImage" style="font-size: 28rpx; color: #007aff">预览</text>
    </qn-form-item>
    <qn-form-item label="结算账户(公账)" type="title"></qn-form-item>
    <qn-form-item label="账户名" required>
      <qn-easyinput
        :maxlength="50"
        :styles="{ disableColor: '#fff' }"
        v-model="form.bankAccountName"
        :inputBorder="false"
        text="right"
        placeholder="请输入账户名"
      ></qn-easyinput>
    </qn-form-item>
    <qn-form-item label="对公账户" required>
      <qn-easyinput
        :maxlength="50"
        :styles="{ disableColor: '#fff' }"
        v-model="form.bankAccount"
        :inputBorder="false"
        text="right"
        placeholder="请输入银行账户"
      ></qn-easyinput>
    </qn-form-item>
    <qn-form-item label="开户行" required>
      <qn-easyinput
        :maxlength="50"
        :styles="{ disableColor: '#fff' }"
        v-model="form.bankName"
        :inputBorder="false"
        text="right"
        placeholder="请输入开户行"
      ></qn-easyinput>
    </qn-form-item>
    <qn-form-item label="结算账户(私账)" type="title"></qn-form-item>
    <qn-form-item label="账户名" required>
      <qn-easyinput
        :maxlength="50"
        :styles="{ disableColor: '#fff' }"
        v-model="form.cardholderName"
        :inputBorder="false"
        text="right"
        placeholder="请输入账户名"
      ></qn-easyinput>
    </qn-form-item>
    <qn-form-item label="对公账户" required>
      <qn-easyinput
        :maxlength="50"
        :styles="{ disableColor: '#fff' }"
        v-model="form.bankCardNumber"
        :inputBorder="false"
        text="right"
        placeholder="请输入银行账户"
      ></qn-easyinput>
    </qn-form-item>
    <qn-form-item label="开户行" required>
      <qn-easyinput
        :maxlength="50"
        :styles="{ disableColor: '#fff' }"
        v-model="form.openingBank"
        :inputBorder="false"
        text="right"
        placeholder="请输入开户行"
      ></qn-easyinput>
    </qn-form-item>
    <qn-footer fixed height="120rpx">
      <view class="button-area">
        <view class="button button__cancel" @click="cancel">
          <text class="text">取消</text>
        </view>
        <view class="button button__submit" @click="saveInfo">
          <text class="text" style="color: white">保存信息</text>
        </view>
      </view>
    </qn-footer>
  </view>
</template>

<script>
import qnForm from '@/components/qn-form/qn-form.vue'
import qnDataPicker from '@/components/qn-data-picker/qn-data-picker.vue'
import qnEasyinput from '@/components/qn-easyinput/qn-easyinput.vue'
import { back, go2, uploadImage } from '@/utils/hook.js'
import { getArea } from '@/apis/commonApi.js'
import { completeInfo } from '@/apis/enterpriseInfoApi.js'

const columns = [
  {
    key: 1,
    type: 'title',
    label: '基础信息'
  },
  {
    key: 'name',
    type: 'item',
    label: '企业名称',
    required: true
  },
  {
    key: 'shortName',
    type: 'item',
    label: '企业简称'
  },
  {
    key: 'locStreetName',
    type: 'item',
    label: '所在地区',
    required: true
  },
  {
    key: 'locDetail',
    type: 'item',
    label: '详细地址',
    required: true
  },
  {
    key: 2,
    type: 'title',
    label: '工商信息'
  },
  {
    key: 'uniformSocialCreditCode',
    type: 'item',
    label: '信用代码',
    required: true
  },
  {
    key: 'legalPersonName',
    type: 'item',
    label: '法人/实控人',
    required: true
  },
  {
    key: 'legalPersonMobile',
    type: 'item',
    label: '法人/实控人手机',
    required: true
  },
  {
    key: 'legalPersonIdCardNo',
    type: 'item',
    label: '法人/实控人身份证号',
    required: true
  },
  {
    key: 'legalPersonIdCardFrontImg',
    type: 'item',
    label: '身份证照片',
    required: true,
    size: 'large'
  },
  {
    key: 'businessLicenseImg',
    type: 'item',
    label: '营业执照',
    required: true
  },
  {
    key: 3,
    type: 'title',
    label: '结算账户(公账)'
  },
  {
    key: 'bankAccountName',
    type: 'item',
    label: '账户名',
    required: true
  },
  {
    key: 'bankAccount',
    type: 'item',
    label: '对公账户',
    required: true
  },
  {
    key: 'bankName',
    type: 'item',
    label: '开户行',
    required: true
  },
  {
    key: 4,
    type: 'title',
    label: '结算账户(私账)'
  },
  {
    key: 'cardholderName',
    type: 'item',
    label: '账户名',
    required: true
  },
  {
    key: 'bankCardNumber',
    type: 'item',
    label: '对公账户',
    required: true
  },
  {
    key: 'openingBank',
    type: 'item',
    label: '开户行',
    required: true
  }
]
export default {
  components: {
    qnForm,
    qnDataPicker,
    qnEasyinput
  },
  data() {
    return {
      operation: 'add',
      columns: Object.freeze(columns),
      form: {
        name: '',
        shortName: '',
        locProvinceId: null,
        locCityId: null,
        locDistrictId: null,
        locStreetId: null,
        locProvinceName: null,
        locCityName: null,
        locDistrictName: null,
        locStreetName: null,
        locDetail: '',
        uniformSocialCreditCode: '',
        legalPersonName: '',
        legalPersonMobile: '',
        legalPersonIdCardNo: '',
        legalPersonIdCardFrontImg: '',
        legalPersonIdCardBackImg: '',
        businessLicenseImg: '',
        bankAccountName: '',
        bankAccount: '',
        bankName: '',
        cardholderName: '',
        bankCardNumber: ''
      },
      items: [],
      canSubmit: false
    }
  },
  methods: {
    back,
    jump() {
      go2('client')
    },
    onAreaChange(e) {
      if (e.detail.value && e.detail.value.length > 0) {
        const [province, city, district, street] = e.detail.value
        this.form.locProvinceId = province.value
        this.form.locProvinceName = province.text
        this.form.locCityId = city.value
        this.form.locCityName = city.text
        this.form.locDistrictId = district.value
        this.form.locDistrictName = district.text
        this.form.locStreetId = street.value
        this.form.locStreetName = street.text
      } else {
        this.form.locProvinceId = null
        this.form.locProvinceName = null
        this.form.locCityId = null
        this.form.locCityName = null
        this.form.locDistrictId = null
        this.form.locDistrictName = null
        this.form.locStreetId = null
        this.form.locStreetName = null
      }
    },
    showImage() {
      uni.previewImage({
        urls: [this.form.businessLicenseImg]
      })
    },
    selectedImage(type) {
      uploadImage()
        .then((urls) => {
          if (urls) {
            this.form[type] = urls[0]
            console.log('urls', urls)
          }
        })
        .catch((e) => {
          uni.showToast({
            title: '上传失败',
            icon: 'fail'
          })
        })
    },
    cancel() {
      // 登录时取消则回到首页
      if (this.operation === 'add') {
        go2('client', {}, true)
      } else {
        back()
      }
    },
    saveInfo() {
      // 校验
      for (let i = 0; i < columns.length; i++) {
        const item = columns[i]
        if (item.required && !this.form[item.key]) {
          uni.showToast({
            title: `${item.label}不能为空`,
            icon: 'none'
          })
          return
        }
      }
      // 先手动判断身份证反面
      if (!this.form.legalPersonIdCardBackImg) {
        uni.showToast({
          title: `身份证反面不能为空`,
          icon: 'none'
        })
      }
      completeInfo(this.form).then((res) => {
        if (res) {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
          go2('client', true)
        }
      })
    }
  },
  onLoad(option) {
    if (option) {
      this.operation = option.operation
    }
  },
  mounted() {
    getArea().then((res) => {
      if (res) {
        this.items = res
      }
    })
  },
  computed: {
    frontIDCard() {
      let url = 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/frontIDCard.png'
      if (!this.form.legalPersonIdCardFrontImg) {
        return url
      }
      return this.form.legalPersonIdCardFrontImg
    },
    backIDCard() {
      let url = 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/backDCard.png'
      if (!this.form.legalPersonIdCardBackImg) {
        return url
      }
      return this.form.legalPersonIdCardBackImg
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 10rpx;
  margin-bottom: 24rpx;
  .idCard {
    width: 324rpx;
    height: 280rpx;
    flex-grow: 0;
    flex-shrink: 0;
  }
}
.button-area {
  width: 750rpx;
  padding: 0 32rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .button {
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rpx;
    .text {
      font-size: 30rpx;
      font-weight: 500;
      text-align: center;
    }
  }
  .button__cancel {
    width: 270rpx;
    height: 88rpx;
    border: 2rpx solid #979797;
  }
  .button__submit {
    width: 400rpx;
    height: 88rpx;
    background: #007aff;
  }
}
</style>
