<template>
  <view class="container">
    <view class="content-box">
      <view class="content-item">
        <view class="item-l"> 法人名称 </view>
        <view class="item-r">
          <u--input placeholder="请输入法人名称" border="surround" v-model="value"></u--input>
        </view>
      </view>
      <view class="content-item">
        <view class="item-l"> 性别 </view>
        <view class="item-r2">
          <view class="sex-item" v-for="(item,index) of sex_list"
                :class="current == index ? 'act-sex' : ''"
                :key="index" @click="handlerSelectGender(item)">
            {{ item.name }}
          </view>
        </view>
      </view>
      <view class="content-item">
        <view class="item-l"> 证件号 </view>
        <view class="item-r">
          <u--input placeholder="请输入证件号" border="surround" v-model="value" type='number'></u--input>
        </view>
      </view>
      <view class="content-item">
        <view class="item-l"> 证件类型 </view>
        <view class="item-r2"> 居民身份证 </view>
      </view>
      <view class="content-item">
        <view class="item-l"> 有效期 </view>
        <view class="item-r">
          <u--input placeholder="请输入证件有效期" border="surround" v-model="value" type='number'></u--input>
        </view>
      </view>
    </view>


    <view class="content-box">
      <imgs-upload :filelist.sync="filelist"></imgs-upload>
      <p class='upload-text'>证件正面图(国徽图)</p>
    </view>

    <view class="content-box">
      <imgs-upload :filelist.sync="filelist"></imgs-upload>
      <p class='upload-text'>证件反面图(人像图)</p>
    </view>


    <button class="btn" @click="handlerSkipNext">下一步</button>
  </view>
</template>

<script>
  import ImgsUpload from "@/pages/tabbar/mine/openStore/components/ImgsUpload.vue"
  export default {
    data() {
      return {
        value: '',
        current: 0,
        sex_list:[
          {name:'男',id:0},
          {name:'女',id:1},
          {name:'沃尔玛塑料袋',id:2},
        ],
        filelist: [],
      }
    },
    components:{ImgsUpload},
    methods: {
      // 跳转到4/4资质信息
      handlerSkipNext() {
        uni.navigateTo({
          url: '/pages/tabbar/mine/openStore/qualificationInformation'
        })
      },
      change(e) {
        console.log("e:", e);
      },
      // 选择性别
      handlerSelectGender(item){
        this.current = item.id
        console.log('current',this.current);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: #F7F7F7 !important;
    padding-bottom: 40rpx;
    .top-box {
      color: #666666;
      font-size: 26rpx;
      text-align: center;
      padding: 20rpx 40rpx;
      background-color: #fff;
    }

    .content-box {
      padding: 20rpx 40rpx;
      background-color: #fff;
      margin: 10rpx 0;

      .content-item {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        margin: 20rpx 0;

        .item-l {
          width: 30%;
        }

        .item-r,.item-r2 {
          width: 70%;
          background-color: #F7F7F7;
          border-radius: 20rpx;
          display: flex;

          .data_select {
            width: 90%;
          }
        }
        .item-r2{
          background-color: #fff;
          display: flex;
          justify-content: space-between;
          .sex-item{
            padding: 20rpx 30rpx;
            background-color: #F7F7F7;
            border-radius: 10rpx;
            text-align: center;
            font-size: 28rpx;
          }
          .act-sex{
            border: 2rpx solid #5992BB;
            background-color: #5992BB;
            color: #fff !important;
          }
        }

      }
      .upload-text{
        text-align: center;
        color: #666666;
        font-size:28rpx;
        margin-top: 20rpx;
      }
    }

    .btn {
      background-color: #5992BB !important;
      color: #fff;
      font-size: 32rpx;
      border-radius: 40rpx;
      margin-top: 40rpx;
      width: 95%;
    }
  }

  ::v-deep .u-input__content__field-wrapper__field.data-v-fdbb9fe6 {}

  ::v-deep .uni-select {
    border: none !important;
  }

  ::v-deep .uni-select__input-placeholder {
    font-size: 28rpx !important;
    color: #CBCED4 !important;
  }
</style>
