<template>
  <view class="business-license">
    <!-- title -->
    <view class="title">营业执照相关</view>
    <view class="cell">
      <text>营业执照编号:</text>
      <input
        type="text"
        v-model.trim="businessData.licenceCode"
        placeholder="请输入营业执照编号"
      />
    </view>
    <!-- 营业执照类型 licenceType -->
    <picker @change="typeChange" :range="businessData.typeArr">
      <view class="cell">
        <text>营业执照类型:</text>
        <view class="licence-type">{{ licenceTypeText }}</view>
      </view>
    </picker>
    <!-- 公司名称 -->
    <view class="cell">
      <text>公司名称:</text>
      <input
        type="text"
        v-model.trim="businessData.licenceCorpName"
        placeholder="请输入营业执照公司名称"
      />
    </view>
    <!-- 法人名称 -->
    <view class="cell">
      <text>法人姓名:</text>
      <input
        type="text"
        v-model.trim="businessData.licenceOwnerName"
        placeholder="请输入营业执照公法人姓名"
      />
    </view>
    <!-- 地址 -->
    <view class="cell">
      <text>地址:</text>
      <input
        type="text"
        v-model.trim="businessData.licenceAddress"
        placeholder="请输入营业执照地址"
      />
    </view>
    <!-- 有效期 -->
    <view class="cell">
      <text>有效期:</text>
      <view class="range-date">
        <!-- 开始时间 -->
        <picker
          mode="date"
          :value="businessData.licenceValid"
          @change="fnDateChange($event, 1)"
        >
          <view class="time">{{ businessData.licenceValid || '请选择' }}</view>
        </picker>
        <view class="">至</view>
        <!-- 结束时间 -->
        <picker
          mode="date"
          :value="businessData.licenceExpire"
          @change="fnDateChange($event, 2)"
        >
          <view class="time">{{ businessData.licenceExpire || '请选择' }}</view>
        </picker>
      </view>
    </view>
    <!-- 营业执照图片 -->
    <jx-upload-img
      :title="'营业执照:'"
      :type="'licence'"
      :img="imgUrls.licence"
      @imgChange="imgChangeLicence"
    ></jx-upload-img>
    <!-- title -->
    <view class="title">食品经营许可证相关</view>
    <!-- 证件编号 -->
    <view class="cell">
      <text>证件编号:</text>
      <input
        type="text"
        v-model.trim="businessData.licence2Code"
        placeholder="请输入食品经营许可证编号"
      />
    </view>
    <!-- 有效期 -->
    <view class="cell">
      <text>有效期:</text>
      <view class="range-date">
        <!-- 开始时间 -->
        <picker
          mode="date"
          :value="businessData.licence2Valid"
          @change="fnDateChange($event, 3)"
        >
          <view class="time">{{ businessData.licence2Valid || '请选择' }}</view>
        </picker>
        <view class="">至</view>
        <!-- 结束时间 -->
        <picker
          mode="date"
          :value="businessData.licence2Expire"
          @change="fnDateChange($event, 4)"
        >
          <view class="time">{{
            businessData.licence2Expire || '请选择'
          }}</view>
        </picker>
      </view>
    </view>
    <!-- 证件图片 -->
    <jx-upload-img
      :title="'食品经营许可证图片:'"
      :type="'licence2Image'"
      :img="imgUrls.licence2Image"
      @imgChange="imgChangeLicence2Image"
    ></jx-upload-img>
    <!-- 提交按钮 -->
    <view style="height: 120rpx"></view>
    <view class="submit-btn" @click="confirmSubmit">提 交</view>

    <!-- 公共组件 -->
    <jx-loading />
  </view>
</template>

<script lang="ts" setup>
import businessLicense from './businessLicense'
const {
  businessData, // 营业资质信息
  typeChange, // 修改营业执照类型
  licenceTypeText, // 营业执照类型
  fnDateChange, // 修改时间
  imgChangeLicence, // 上传图片
  imgChangeLicence2Image, // 上传图片
  confirmSubmit, // 提交修改
  imgUrls, // 上传的图片
} = businessLicense()
</script>

<style lang="scss" scoped>
@import './businessLicense.scss';
</style>