<!-- 新增线下订单-->
<template>
  <view class="content">
    <view style="width: 100%; height: 44px;"></view>
    <view class="top-heder">
      <view class="t-left" @click="getback()">
        <uni-icons type="left" size="18"></uni-icons>
      </view>
      <view class="t-title">
        <text>{{ title }}</text>
      </view>
      <view class="t-you"></view>
    </view>

    <view class="mub">
      <view class="top-ail">
        <u-upload
            :fileList="fileList"
            @afterRead="afterRead1"
            @delete="deletePic1"
            multiple
            :maxCount="1"
        >
          <view class="dlanniu" style="width: 345px;">
            <uni-icons type="scan" size="20" color="#ffffff"></uni-icons>
            <text style="margin-left: 10px;">行驶证扫描</text>
          </view>
        </u-upload>

        <!-- 名称 -->

        <view class="box-list">
          <view class="list-box">
            <view class="l-left">客户姓名</view>
            <view class="l-right">
              <input type="text" v-model="buyName" placeholder="请输入客户姓名">
            </view>
          </view>
          <view class="list-box">
            <view class="l-left">住址</view>
            <view class="l-right">
              <input type="text" v-model="userAddress" placeholder="请输入住址">
            </view>
          </view>
          <view class="list-box">
            <view class="l-left">
              <text style="color: red;font-weight: bold;text-align: center;">*</text>
              车牌号
            </view>
            <view class="l-right">
              <input type="text" v-model="carNum" placeholder="请输入车牌号">
            </view>
          </view>
          <view class="list-box">
            <view class="l-left" @click="showzhi = true">使用性质
              <text class="xixi">点击选择</text>
            </view>
            <view class="l-right">
              <input type="text" v-model="carNature" placeholder="请输入使用性质">
            </view>
          </view>
          <view class="list-box">
            <view class="l-left">品牌型号</view>
            <view class="l-right">
              <input type="text" v-model="carModel" placeholder="请输入品牌型号">
            </view>
          </view>
          <view class="list-box">
            <view class="l-left">车辆识别代号</view>
            <view class="l-right">
              <input type="text" v-model="carIdNo" placeholder="请输入车辆识别代号">
            </view>
          </view>
          <view class="list-box">
            <view class="l-left" @click="show = true">
              <text style="color: red;font-weight: bold;text-align: center;">*</text>
              客户来源
              <text class="xixi">点击选择</text>
            </view>
            <view class="l-right">
              <input type="text" v-model="customerSource" placeholder="请输入客户来源">
            </view>
          </view>
          <view class="list-box">
            <view class="l-left">代办人手机号</view>
            <view class="l-right">
              <input type="text" v-model="otherPhone" placeholder="请输入品牌型号">
            </view>
          </view>
          <view class="list-box">
            <view class="l-left" @click="handleClick">
              <text style="color: red;font-weight: bold;text-align: center;">*</text>
              商品选择
              <text class="xixi">点击选择</text>
            </view>
            <view class="l-right">
              <text>{{ goodstext }}</text>
              <!-- 	<input type="text" v-model="goodstext"  placeholder="请选择商品"> -->
            </view>
          </view>


          <view class="list-box">
            <view class="l-left" @click="showxin = true">新旧车
              <text class="xixi">点击选择</text>
            </view>
            <view class="l-right">
              <input type="text" v-model="carStatus" placeholder="请输入新旧车">
            </view>
          </view>
          <view class="list-box">
            <view class="l-left">联系方式</view>
            <view class="l-right">
              <input type="text" v-model="buyPhone" placeholder="请输入联系方式">
            </view>
          </view>
          <view class="list-box">
            <view class="l-left">单位</view>
            <view class="l-right">
              <input type="text" v-model="unitName" placeholder="请输入单位">
            </view>
          </view>
          <view class="list-box">
            <view class="l-left" @click="showLeadMan = true">
              <text style="color: red;font-weight: bold;text-align: center;">*</text>
              引车员
              <text class="xixi">点击选择</text>
            </view>
            <view class="l-right">
              <input type="text" v-model="nickname" placeholder="请输入引车员">
            </view>

          </view>

<!--          <view class="list-box">-->
<!--            <view class="l-left">是否补录</view>-->
<!--            <view class="l-right">-->
<!--              <u-radio-group-->
<!--                  v-model="radioValue"-->
<!--                  iconPlacement="right"-->
<!--                  @change="handleRadioChange"-->
<!--              >-->
<!--                <u-radio label="否" name="0" style="padding-right: 10rpx"></u-radio>-->
<!--                <u-radio label="是" name="1"></u-radio>-->
<!--              </u-radio-group>-->
<!--            </view>-->
<!--          </view>-->

<!--          <view class="list-box" v-if="radioValue === '1'">-->
<!--            <view class="l-left" @click="showRecord = true">-->
<!--              <text style="color: red;font-weight: bold;text-align: center;">*</text>-->
<!--              选择补录时间-->
<!--              <text class="xixi">点击选择</text>-->
<!--            </view>-->
<!--            <view class="l-right">-->
<!--              <input type="text" v-model="recordTimeStr" placeholder="请选择补录时间">-->
<!--            </view>-->

<!--          </view>-->

          <view class="list-box" @click="toSelectProject()" v-if="isInsert">
            <view class="l-left">检测流程</view>
            <view class="l-right">

              <input type="textarea" v-model="inspectionWorkNodeStr" placeholder="点击选择检测流程">
            </view>
          </view>
        </view>


        <view class="dlanniu" @click="getgoodes()" v-if="isInsert">
          <text>开始检测</text>
        </view>
        <view class="dlanniu" @click="edit()" v-else>
          <text>确认修改</text>
        </view>
        <u-picker :show="show" :columns="columns" :defaultIndex="kehuDefaultIndex" @confirm="confirms" @cancel="cancels"
                  keyName="label"></u-picker>

        <u-picker :show="showgoods" ref="uPicker" :columns="goodsone" :defaultIndex="goodsDefaultIndex"
                  @confirm="confirmgoods" @cancel="cancelgoods"
                  @change="changeHandler" keyName="label"></u-picker>

        <u-picker :show="shownature" :columns="nature" @confirm="confirmsnature" @cancel="cancelsnature"
                  keyName="label"></u-picker>

        <u-picker :show="showxin" :columns="xinlist" :defaultIndex="xinDefaultIndex" @confirm="confirmxin"
                  @cancel="cancelxin"
                  keyName="label"></u-picker>
        <u-picker :show="showzhi" :columns="zhilist" @confirm="confirmzhi" @cancel="cancelzhi"
                  keyName="label"></u-picker>
        <u-picker :show="showLeadMan" :columns="leadManList" :defaultIndex="defaultIndex" @confirm="confirmLeadMan"
                  @cancel="cancelLeadMan"
                  keyName="nickname"></u-picker>
<!--        <u-datetime-picker-->
<!--            :show="showRecord"-->
<!--            v-model="recordTime"-->
<!--            :formatter="formatter"-->
<!--            @cancel="cancelRecord"-->
<!--            @confirm="confirmRecord"-->
<!--            mode="datetime"-->
<!--        ></u-datetime-picker>-->
      </view>
    </view>

    <!-- 底部 -->


  </view>
</template>

<script>
import config from '@/config';
import request from '../../utils/request';
import upload from '@/utils/upload.js'
import {getToken, getTenantId} from '@/utils/auth'

export default {
  data() {
    return {
      imagePath: '',
      fileList: [],
      title: '新增线下订单',
      customerSource: '',
      buyName: '',
      nickname: '',
      buyPhone: '',
      userAddress: '',
      carNum: '',
      carStatus: '',
      carIdNo: '',
      radioValue: '0',
      carModel: '',
      carNature: '',
      otherPhone: '',
      show: false,
      shownature: false,
      showgoods: false,
      showxin: false,
      showzhi: false,
      showRecord: false,
      showLeadMan: false,
      skuId: 0,
      inspectionWorkNodes: [],
      defaultIndex: [0],
      kehuDefaultIndex: [0],
      goodsDefaultIndex: [0, 0],
      columns: [],
      options: [],
      nature: [],
      goodsone: [],
      goodstwo: [],
      columnData: [],
      xinlist: [],
      zhilist: [],
      recordTime: Number(new Date()),
      baseUrl: this.$baseImageUrl,
      goodsId: '',
      msg: '3',
      tapnum: 0,
      fenlist: [],
      goodstext: '',
      ftitle: null,
      shopImages: [],
      shoplist: {},
      province: '',
      unitName: '',
      kehui: '',
      naturetext: '',
      customerData: [],
      inspectionWorkNodeStr: "",
      leadManId: undefined,
      leadManList: [],
      isInsert: true,
      inspectionId: undefined,
      xinDefaultIndex: [0],
      recordTimeStr: '',
    }
  },
  onLoad(options) {
    this.getinitialize()
    this.getLeadeMan()
    uni.$on('selectProject', (data) => {
      this.inspectionWorkNodes = data
      for (var i = 0; i < this.inspectionWorkNodes.length; i++) {
        this.inspectionWorkNodeStr = this.inspectionWorkNodeStr + this.inspectionWorkNodes[i].projectName + "  "
        this.inspectionWorkNodes[i].orderNum = i + 1
      }
    });
    if (options.inspectionInfoId) {
      this.isInsert = false
      this.inspectionId = options.inspectionInfoId
      this.title = '修改线下订单'
      this.getInspectionInfo()
    }
  },
  onShow() {

  },

  methods: {
    handleClick() {
      if (this.isInsert) {
        this.showgoods = true;
      } else {
        uni.showToast({
          title: '不可修改商品',
          icon: 'none'
        })
      }
    },
    handleRadioChange(newValue) {
      if (newValue === '0') {
        this.recordTime = ''
      }
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    changeHandler(e) {
      const {
        columnIndex,
        value,
        values, // values为当前变化列的数组内容
        index,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker
      } = e
      // 当第一列值发生变化时，变化第二列(后一列)对应的选项
      if (columnIndex === 0) {
        // picker为选择器this实例，变化第二列对应的选项
        picker.setColumnValues(1, this.columnData[index])
      }
    },
    confirms(e) {
      this.customerSource = e.value[0].label
      this.show = false
    },
    cancels() {
      this.show = false
    },
    // xin
    confirmxin(e) {
      this.carStatus = e.value[0].label
      this.showxin = false
    },
    cancelxin() {
      this.showxin = false
    },
    //zhi
    confirmzhi(e) {
      this.carNature = e.value[0].label
      this.showzhi = false
    },
    confirmLeadMan(e) {
      this.nickname = e.value[0].nickname
      this.leadManId = e.value[0].id
      this.showLeadMan = false
    },
    confirmRecord(e) {
      //将时间戳转换
      this.recordTime = e.value
      this.recordTimeStr = this.formatTimestamp(e)
      this.showRecord = false
    },
    cancelzhi() {
      this.showzhi = false
    },
    formatTimestamp(e) {
      if (!e || !e.value) {
        console.error('Invalid input');
        return null;
      }

      const timestamp = parseInt(e.value, 10); // 确保时间戳为整数
      if (isNaN(timestamp)) {
        console.error('Invalid timestamp');
        return null;
      }

      const date = new Date(timestamp); // 将时间戳转换为 Date 对象
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      // const seconds = String(date.getSeconds()).padStart(2, '0');

      // 格式化为 YYYY-MM-DD HH:mm:ss
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    cancelLeadMan() {
      this.showLeadMan = false
    },
    cancelRecord() {
      this.showRecord = false
    },
    /*获取引车员信息*/
    getLeadeMan() {
      request({
        url: '/system/role/getUsersByRoleCode',
        method: 'get',
        params: {
          code: "jcycy"
        }
      }).then(res => {
        this.leadManList.push(res.data)
      })
    },

    confirmsnature(e) {
      this.naturetext = e.value[0].label
      this.shownature = false
    },
    cancelsnature() {
      this.shownature = false
    },
    confirmgoods(e) {
      this.goodstext = e.value[1].label
      this.skuId = e.value[1].value
      this.showgoods = false
    },
    cancelgoods() {
      this.showgoods = false
    },
    async getinitialize() {
      let res = await request({
        url: '/partnerOwn/partner/getCustomerSource',
        method: 'get',
      })
      this.columns.push(res.data)
      let rescar = await request({
        url: '/rescue/dict/data/type/car_nature',
        method: 'get',
      })
      this.nature.push(rescar.data)
      let resx = await request({
        url: '/system/inspectionGoods/partnerGoodsListCol',
        method: 'get',
      })
      this.goodsone.push(resx.data.goodsList)
      this.goodsone.push(resx.data.skuList[0])
      this.columnData = resx.data.skuList
      let resxin = await request({
        url: '/rescue/dict/data/type/car_status',
        method: 'get',
      })
      this.xinlist.push(resxin.data)
      let reszhi = await request({
        url: '/rescue/dict/data/type/car_use_nature',
        method: 'get',
      })
      this.zhilist.push(reszhi.data)

    },
    toSelectProject() {
      uni.navigateTo({
        url: `/pages/index/selectProject?selectProject=${JSON.stringify(this.inspectionWorkNodes)}`
      })
    },
    async getgoodes() {
      if (this.carNum == '' || this.customerSource == "" || this.skuId == '' || this.leadManId == undefined) {
        uni.showToast({
          title: '车牌号 客户来源 商品 引车员 必填！',
          icon: 'none'
        })
        return
      }
      if (this.inspectionWorkNodes.length == 0) {
        uni.showToast({
          title: '请选择检测流程！',
          icon: 'none'
        })
        return
      }

      this.inspectionWorkNodes.map(item => {
        item.id = undefined
      })
      let data = {
        partnerId: uni.getStorageSync('partnerId'),
        buyName: this.buyName,
        buyPhone: this.buyPhone,
        userAddress: this.userAddress,
        unitName: this.unitName,
        carNum: this.carNum,
        carModel: this.carModel,
        carStatus: this.carStatus,
        carIdNo: this.carIdNo,
        customerSource: this.customerSource,
        skuId: this.skuId,
        carNature: this.carNature,
        inspectionWorkNodes: this.inspectionWorkNodes,
        leadManId: this.leadManId,
        startTime: this.recordTime,
        otherPhone: this.otherPhone,
      }

      let res = await request({
        url: '/system/info/add',
        method: 'post',
        data: data
      })
      if (res.code == 200) {
        uni.showToast({
          title: "检测已开始"
        })
      }
      setTimeout(() => {
        uni.navigateBack()
      }, 2000);
    },
    async edit() {
      if (this.carNum == '' || this.customerSource == "" || this.leadManId == undefined) {
        uni.showToast({
          title: '车牌号 客户来源 引车员 必填！',
          icon: 'none'
        })
        return
      }

      let data = {
        partnerId: uni.getStorageSync('partnerId'),
        id: this.inspectionId,
        buyName: this.buyName,
        buyPhone: this.buyPhone,
        userAddress: this.userAddress,
        unitName: this.unitName,
        carNum: this.carNum,
        carModel: this.carModel,
        carStatus: this.carStatus,
        carIdNo: this.carIdNo,
        customerSource: this.customerSource,
        skuId: this.skuId,
        carNature: this.carNature,
        inspectionWorkNodes: this.inspectionWorkNodes,
        leadManId: this.leadManId
      }

      let res = await request({
        url: '/system/info/update',
        method: 'post',
        data: data
      })
      if (res.code == 200) {
        uni.showToast({
          title: "修改成功"
        })
        let resp = await request({
          url: '/system/info/getWeorkNodesById',
          method: 'get',
          params: {
            inspectionId: this.inspectionId
          }
        })
        //调用重新检测
        let res = await request({
          url: '/system/info/recheck',
          method: 'post',
          data: {
            inspectionInfoId: this.inspectionId,
            workNodes: resp.data
          }
        })
      }
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/staff/staff'
        })
      }, 2000);
    },
    /*根据工单Id查询工单详情*/
    getInspectionInfo() {
      request({
        url: '/system/info/' + this.inspectionId,
        method: 'get'
      }).then(res => {
        this.shoplist = res.data
        this.buyName = res.data.buyName
        this.buyPhone = res.data.buyPhone
        this.userAddress = res.data.userAddress
        this.unitName = res.data.unitName
        this.carNum = res.data.carNum
        this.carModel = res.data.carModel
        this.carStatus = res.data.carStatus
        this.carIdNo = res.data.carIdNo
        this.customerSource = res.data.customerSource
        this.skuId = res.data.skuId
        this.carNature = res.data.carNature
        this.leadManId = res.data.leadManId
        setTimeout(() => {
          let result = this.leadManList
              .map((subArray, subArrayIndex) => {
                const index = subArray.findIndex(item => item.id === res.data.leadManId);
                if (index !== -1) {
                  // 返回的是子数组的索引和匹配项的索引
                  return {subArrayIndex, itemIndex: index};
                } else {
                  // 没有找到匹配项，返回 null 或 undefined
                  return null;
                }
              })
              .filter(item => item !== null);  // 过滤掉没有匹配的项
          let index = result[0].itemIndex
          let subArrayIndex = result[0].subArrayIndex
          this.defaultIndex = [index]
          this.nickname = this.leadManList[subArrayIndex][index].nickname

          //客户来源
          let kehuResult = this.columns
              .map((subArray, subArrayIndex) => {
                const index = subArray.findIndex(item => item.label === res.data.customerSource);
                if (index !== -1) {
                  // 返回的是子数组的索引和匹配项的索引
                  return {subArrayIndex, itemIndex: index};
                } else {
                  // 没有找到匹配项，返回 null 或 undefined
                  return null;
                }
              })
              .filter(item => item !== null);  // 过滤掉没有匹配的项
          this.kehuDefaultIndex = [kehuResult[0].itemIndex]

          // 新旧车
          //客户来源
          let xinResult = this.xinlist
              .map((subArray, subArrayIndex) => {
                const index = subArray.findIndex(item => item.label === res.data.carStatus);
                if (index !== -1) {
                  // 返回的是子数组的索引和匹配项的索引
                  return {subArrayIndex, itemIndex: index};
                } else {
                  // 没有找到匹配项，返回 null 或 undefined
                  return null;
                }
              })
              .filter(item => item !== null);  // 过滤掉没有匹配的项
          let a = [kehuResult[0]]
          this.xinDefaultIndex = [a.itemIndex]
        }, 1000);
      })
    },

    // 提交
    async getgoods() {

      let res = await request({
        url: '/partnerOwn/partner/editPartnerInfo',
        method: 'post',
        data: this.shoplist
      })
      if (res.code == 200) {
        uni.showToast({
          title: "修改成功"
        })
      }
      setTimeout(() => {
        uni.navigateBack()
      }, 2000);
    },
    getxz(e) {
      this.releasebox.goodsCategoryId = e.value[0].id
      this.ftitle = e.value[0].categoryName
    },
    gettapindex(index) {
      this.tapnum = index
    },
    getback() {
      uni.navigateBack()
    },
    getyes() {
      this.show = false
    },
    open() {
    },
    close() {
      this.guige = false
    },
    deletePic1(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    async afterRead1(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,

        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise1(lists[i].url)
        let item = this[`fileList${event.name}`][fileListLen]
        this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }))
        fileListLen++
      }
    },
    uploadFilePromise1(url) {
      uni.showLoading({

        title: '扫描中',

      });

      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: this.$baseUrl + '/common/uploadImg', // 仅为示例，非真实的接口地址
          filePath: url,
          name: 'file',
          header: {
            'Tenant-Id': getTenantId(),
            'Authorization': 'Bearer ' + getToken()
          },
          formData: {
            user: 'test'
          },
          success: (res) => {
            try {
              let img = JSON.parse(res.data);
              this.imagePath = img.data.url

              setTimeout(() => {
                this.vehicleLicenseOCR()
              }, 1000)

            } catch (e) {
              //TODO handle the exception
            }
            setTimeout(() => {
              resolve(res.data.data)
            }, 1000)
          }
        });
      })
    },
    async vehicleLicenseOCR() {
      let data = {
        imagePath: this.baseUrl + '/' + this.imagePath
        //imagePath :'http://www.nuoyunr.com/lananRsc/detection/jsz.jpg'
      }
      let res = await request({
        url: '/partnerOwn/partner/vehicleLicenseOCR',
        method: 'post',
        params: data
      })
      this.buyName = res.data.FrontInfo.Owner
      this.userAddress = res.data.FrontInfo.Address
      this.carNum = res.data.FrontInfo.PlateNo
      this.carModel = res.data.FrontInfo.Model
      this.carIdNo = res.data.FrontInfo.Vin
      this.carNature = res.data.FrontInfo.UseCharacter
      uni.hideLoading();
      uni.showToast({
        title: '识别成功',
      });


    }


  }
}
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh);
  background: white;
}

.top-heder {
  width: 100%;
  height: 46px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 5px 15px;
}

.t-title {
  font-size: 17px;
  font-weight: bold;
  color: #333333;
}

.t-left {
  width: 10%;
}

.t-you {
  height: 100%;
  width: 20%;
}

.t-input {
  width: 80%;
  height: 36px;
  background: #F0F0F0;
  border-radius: 50px;
  box-sizing: border-box;
  padding: 0 15px;
  display: flex;
  align-items: center;

}

.top-ail {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  background-color: #F4F4F4;
  // height: calc(100vh);
}

.mub {
  background-color: #F4F4F4;
  height: calc(100vh);
}

.dix {
  display: flex;
  align-items: center;
}

.upimg {
  width: 100%;
  height: 126px;
  border-radius: 8px;
  box-sizing: border-box;

  background-color: white;

  image {
    width: 100%;
    height: 100%;
  }
}

.box-list {
  width: 100%;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 10px;
  background-color: white;
  margin: 10px auto;
}

.list-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 15px 5px;
  border-bottom: 1px solid #EEEEEE;
}

.l-left {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
}

.l-right {
  font-size: 16px;
  font-weight: 400;
  color: #999999;
  text-align: right;
}

.xiaolan {
  // width: 109px;
  // height: 30px;
  background: #E2EAFF;
  border-radius: 50px;
  display: flex;
  align-content: center;
  justify-self: center;
  box-sizing: border-box;
  padding: 5px;
  font-size: 14px;
  font-weight: 400;
  color: #0D2E8D;
}

.xiaohui {
  // width: 141px;
  // height: 30px;
  box-sizing: border-box;
  padding: 0px 10px;
  background: #F7F7F7;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;

}

.hui-right {
  border-left: 1px solid #DDDDDD;
  padding: 5px;
  margin-left: 5px;
}

.wrap-box {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}

.bottom-di {
  width: 100%;
  height: 56px;
  background: #FFFFFF;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0px 20px;
  margin-bottom: 10px;
}

.thui {
  font-size: 16px;
  font-weight: 400;
  color: #666666;
  margin-top: 10px;
  margin-left: 8px;
}

.imgs {
  box-sizing: border-box;
  margin-top: 20px;
}

.p-box {
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  background-color: white;
}

.p-top {
  width: 100%;
  text-align: center;
  font-size: 17px;
  font-weight: bold;
  color: #000000;
  margin-bottom: 20px;
}

.on-input {
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;

}

.ipt-kuang {
  width: 70%;
  height: 30px;
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid #DDDDDD;
  display: flex;
  align-items: center;
  margin: 10px auto;
  box-sizing: border-box;
  padding: 0px 10px;
}

.t-left {
  width: 20%;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
}

.dlanniu {
  width: 80%;
  height: 45px;
  background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  color: white;
}

.da {
  font-size: 16px;
}

//
.top {
  box-sizing: border-box;
  padding: 0px 15px;
  width: 100%;
  border-radius: 10px;
  margin: 10px auto;
  background-color: white;
}

.top-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 20px 0px;
}

.tb-left {
  height: 100%;
  width: 80%;
  display: flex;
  align-items: center;
}

.uicon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  color: white;
  background: orangered;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  margin-right: 6px;
}

.tb-right {
  width: 20px;
  height: 26px;

  image {
    width: 100%;
    height: 100%;
  }
}

.text1 {
  font-size: 16px;
  font-weight: bold;
  color: #363636;
}

.hong1 {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;
  color: #FF5453;
}

.hong2 {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;

}

.tinput {
  width: 100%;
  display: flex;
  background: white;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 16px;
  margin-top: 14px;
}

.xixi {
  font-size: 12px;
  color: #0D2E8D;
  margin-left: 10px;
}
</style>
