<template>
  <div class="order-details">
    <title-block class="titile-d" :title="type==='detail'?'详情':'确认订单'">
      <template #left>
        <div>
          <image style="width: 112rpx;height: 52rpx"
                 src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/785cf885-c4c9-44b3-8155-4b39988c7ef8.png"
                 @click="back"></image>
        </div>
      </template>
    </title-block>
    <div class="content-list" v-if="listPaintings.length>1">
      <div class="wrap1">*请注意确认寄存结束时间</div>
      <div class="wrap2">
        <div  class="wrap2_1" :style="{height:`${listHeight}rpx`}">
          <div :class="['item',index===currentIndex?'active':'']" @click="itemClick(index)" v-for="(item,index) of listPaintings">
            <div class="item_1">{{index+1}}</div>
            <div class="item_2">
              <div class="item_2_1">
                <img :src="listPaintings[index].fileList1[0].url" alt="">
              </div>
              <div class="item_2_2">{{listPaintings[index].artworkNum}}</div>
            </div>
            <div class="item_3">{{listPaintings[index].artworkName}}</div>
            <div class="item_4">{{listPaintings[index].warehouseID?addressList.find(x=>x.ID===listPaintings[index].warehouseID).address:''}}</div>
            <div class="item_5">{{listPaintings[index].endAt}}</div>
          </div>
        </div>
        <div class="wrap2_2" @click="expand">
          <div class="wrap2_2_1" v-if="listPaintings.length>2" :style="{transform:`${isExpand?'rotate(180deg)':''}`}">
            <img src="https://cdns.fontree.cn/fonchain-main/prod/image/default/approval/13639162-2871-4187-abc5-71c2d9f01ac2.png" alt="">
          </div>
          <div class="wrap2_2_2">共计{{listPaintings.length}}幅画作</div>
        </div>
      </div>
    </div>
    <scroll-view class="content-center" :style="{marginTop:`${contentListHeight+10}px`,marginBottom:type==='detail'?'30rpx':'180rpx'}"  @scroll="scrollDetail" :scroll-into-view="scrollId" scroll-y="true">
      <div class="content-scroll" v-for="(item,index) of listPaintings" :id="`item-${index}`">
        <div class="painting-name" v-if="listPaintings.length>1">
          <div class="wrap1">画作{{index+1}}:</div>
          <div class="wrap2" style="display: none" @click="itemDelete">删除</div>
        </div>
        <div class="content2">
          <u-upload
              :fileList="listPaintings[index].fileList1"
              @afterRead="(e)=>{afterRead(e,index)}"
              @delete="(e)=>{deletePic(e,index)}"
              name="6"
              multiple
              :maxCount="1"
              width="404rpx"
              height="306rpx"
          >
            <div style="width: 404rpx;height: 306rpx;background: #000;border-radius: 20rpx;display: flex;flex-direction: column;align-items: center;justify-content: center">
              <div style="margin-bottom: 14rpx">
                <image style="width: 38.32rpx;height: 38.2rpx" src="../../static/zu142@3x.png"></image>
              </div>
              <div style="font-size: 32rpx;color: #fff">上传画作图片</div>
            </div>

          </u-upload>
        </div>
        <div class="content3">
          <div class="prompt">*扫描自动填入</div>
          <div class="wrap1">
            <div class="wrap1_1">
              <div class="wrap1_1_1">画作编号</div>
              <div class="wrap1_1_2"></div>
              <div class="wrap1_1_3">
                <input style="color: #939393;font-size: 24rpx;" disabled v-model="listPaintings[index].artworkNum"  placeholder-style="color: #939393;font-size: 24rpx;" placeholder="请输入画作编号"/>
              </div>
              <div class="wrap1_1_4"></div>
            </div>
            <div class="wrap1_1">
              <div class="wrap1_1_1">画作名称</div>
              <div class="wrap1_1_2"></div>
              <div class="wrap1_1_3">
                <input style="color: #939393;font-size: 24rpx;" disabled  v-model="listPaintings[index].artworkName" placeholder-style="color: #939393;font-size: 24rpx;" placeholder="请输入画作名称"/>
              </div>
              <div class="wrap1_1_4"></div>
            </div>
            <div class="wrap1_1">
              <div class="wrap1_1_1">画家名称</div>
              <div class="wrap1_1_2"></div>
              <div class="wrap1_1_3">
                <input style="color: #939393;font-size: 24rpx;" disabled v-model="listPaintings[index].artistName"   placeholder-style="color: #939393;font-size: 24rpx;" placeholder="请输入画家名称"/>
              </div>
              <div class="wrap1_1_4">
              </div>
            </div>
            <div class="wrap1_1">
              <div class="wrap1_1_1">画作平尺数</div>
              <div class="wrap1_1_2"></div>
              <div class="wrap1_1_3">
                <input style="color: #939393;font-size: 24rpx;" disabled v-model="listPaintings[index].artworkSquareSize"  placeholder-style="color: #939393;font-size: 24rpx;" placeholder="请输入画作平尺数"/>
              </div>
            </div>
          </div>
          <div class="wrap2"></div>
        </div>
        <div class="content4">
          <div class="wrap1">
            <div class="wrap1_1">
              <div class="wrap1_1_1">寄存地址</div>
              <div class="wrap1_1_2"></div>
              <div class="wrap1_1_3">
                <input style="color: #939393;font-size: 24rpx;" disabled :value="listPaintings[index].warehouseID?addressList.find(x=>x.ID===listPaintings[index].warehouseID).address:''"  placeholder-style="color: #939393;font-size: 24rpx;"
                       placeholder="请选择寄存地址"/>
              </div>
              <div class="wrap1_1_4"></div>
<!--              <div  class="wrap1_1_5">
                <image src="../../static/zu611@3x.png"></image>
              </div>-->
            </div>
            <div class="wrap1_1">
              <div class="wrap1_1_1">寄存时长</div>
              <div class="wrap1_1_2"></div>
              <div class="wrap1_1_3">
                <input style="color: #939393;font-size: 24rpx;" :value="listPaintings[index].endAt" disabled placeholder-style="color: #939393;font-size: 24rpx;" placeholder="请选择寄存时长"/>
              </div>
<!--              <div  class="wrap1_1_5">
                <image src="../../static/zu612@3x.png"></image>
              </div>-->

            </div>

          </div>
          <div class="wrap2"></div>
        </div>
<!--        <div class="content7" @click="addPainting">
          <div class="wrap1">
            <div class="horizontal"></div>
            <div class="vertical"></div>
          </div>
          <div class="wrap2">添加</div>
        </div>-->
      </div>
    </scroll-view>


    <div class="content5" v-if="type!=='detail'">
      <div class="wrap4" v-show="isExpand1" :style="{top:`-${152*listPaintings.length}rpx`}">
        <div class="item" v-for="(item,index) in listPaintings">
          <div class="item_1">{{index+1}}</div>
          <div class="item_2">{{item.artworkNum}}</div>
          <div class="item_3">{{item.artworkName}}</div>
          <div class="item_4">¥ {{item.expectedPayment}}</div>
        </div>
      </div>
      <div class="wrap3" @click="expand1" :style="{transform:`${isExpand1?'':'rotate(180deg)'}`}">  <img src="https://cdns.fontree.cn/fonchain-main/prod/image/default/approval/13639162-2871-4187-abc5-71c2d9f01ac2.png" alt=""></div>
      <div class="wrap1">
        <div class="wrap1_1">*仅微信付款</div>
        <div class="wrap1_2">预计 ¥{{totalMoney||'0'}}</div>
      </div>
      <div class="wrap2" @click="signContract">付款</div>
    </div>
    <u-popup :round="15" :show="show_2" mode="bottom"  @open="()=>{show_2=true}">
      <div class="poup1" >
        <div class="content1">
          <div class="wrap1">更换您的寄存地址</div>
          <div @click="show_2=false" class="wrap2">
            <image
                src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/d84593b3-10a8-4d86-be8c-b048b03b22c7.png"></image>
          </div>
        </div>
        <div class="content2"></div>
        <div class="content3">
          <div v-for="(item,index) in addressList" @click="selectAddress(item)"
               :class="[listPaintings[currentIndex].warehouseID===item.ID?'active':'']" :key="index" class="wrap1">
            <div class="wrap1_1">{{ item.address }}</div>
            <div class="wrap1_2">*剩余{{ item.leftNum }}位置</div>
          </div>
          <!--          <div class="wrap1 active">
                      <div class="wrap1_1">某某某某某某某地方</div>
                      <div class="wrap1_2">剩余12位置</div>
                    </div>-->
          <!--          <div class="wrap1 disabled">
                      <div class="wrap1_1">某某某某某某某地方</div>
                      <div class="wrap1_2">*已满员</div>
                    </div>-->
        </div>
        <div class="content2"></div>
        <div class="content6" @click="confirmAddress">
          <div class="wrap1">确定</div>
        </div>
      </div>
    </u-popup>

    <!--    <u-popup :round="15" :show="show_1" mode="bottom"  @open="()=>{show_1=true}">
          <div class="poup">
            <div class="content1" style="margin-top: 20rpx">
              <div class="wrap1">寄存时长</div>
              <div @click="show_1=false" class="wrap2">
                <image
                    src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/d84593b3-10a8-4d86-be8c-b048b03b22c7.png"></image>
              </div>

            </div>
            <div class="content2"></div>
            <div class="content7" @click="show = true">
              <u-datetime-picker
                  :show="show"
                  @confirm="confirmDate"
                  mode="date"
                  @cancel="show=false"
                  :minDate="minDate"
              ></u-datetime-picker>
              <u&#45;&#45;input
                  readonly
                  placeholder="点击选择"
                  border="surround"
                  v-model="listPaintings[currentIndex].endAt"
              ></u&#45;&#45;input>
            </div>


            &lt;!&ndash;        <div class="content2"></div>
                    <div class="content4">起始日期</div>
                    <div class="content5">
                      <div class="wrap1">年份</div>
                      <div class="wrap2">月</div>
                      <div class="wrap3">日</div>
                    </div>&ndash;&gt;
            &lt;!&ndash;        <div style="margin-left: -30rpx;margin-right: -30rpx">
                      <picker-view indicator-class="test" :value="value" @change="changeData" class="picker-view">
                        <picker-view-column>
                          <view style="display: flex;align-items: center;justify-content: center" class="item"
                                :class="[isDateFont(item,0)?'fontDate':'']" v-for="(item,index) in years" :key="index">{{ item }}年
                          </view>
                        </picker-view-column>
                        <picker-view-column>
                          <view style="display: flex;align-items: center;justify-content: center" class="item"
                                :class="[isDateFont(item,1)?'fontDate':'']" v-for="(item,index) in months" :key="index">{{ item }}月
                          </view>
                        </picker-view-column>
                        <picker-view-column>
                          <view style="display: flex;align-items: center;justify-content: center" class="item"
                                :class="[isDateFont(item,2)?'fontDate':'']" v-for="(item,index) in days" :key="index">{{ item }}日
                          </view>
                        </picker-view-column>
                      </picker-view>
                    </div>
                    <div class="content2"></div>&ndash;&gt;
            <div class="content6" @click="confirmCycle">
              <div class="wrap1">确定</div>
            </div>
          </div>
        </u-popup>-->
    <u-picker :show="show_1" ref="uPicker" :columns="columns" @confirm="confirmDate" @close="show_1=false" @change="changeHandler"></u-picker>
    <u-loading-page bgColor="rgba(0,0,0,0.5)" :loading="loading" loading-text="正在调起微信付款..."></u-loading-page>
  </div>
</template>
<script>
import http from "@/http/api";
import {postDataByParams} from "../../http/service";
import {type} from "../../uni_modules/uni-forms/components/uni-forms/utils";

export default {
  name: "order-details",
  data() {
    const date = new Date()
    const years = []
    const year = date.getFullYear()
    const months = []
    const month = date.getMonth() + 1
    const days = []
    const day = date.getDate()
    for (let i = 1990; i <= date.getFullYear(); i++) {
      years.push(i)
    }
    for (let i = 1; i <= 12; i++) {
      months.push(i)
    }
    for (let i = 1; i <= 31; i++) {
      days.push(i)
    }
    return {
      itemHeight:0,
      scrollId:'item-0',
      columns: [
        [180],
        ['*'],
        [1,2,3,4,5],
        ['='],
        [180]
      ],
      currentIndex:0,
      listPaintings:[{
        expectedPayment:'',
        fileList1:[],
        artworkNum:'',
        artworkName:'',
        artistName:'',
        artworkSquareSize:'',
        warehouseID:'',
        endAt:''
      }],
      contentListHeight: 0,
      isExpand:false,
      isExpand1:false,
      listHeight:308,
      minDate:'',
      type:'',
      show: false,
      value1: '',
      loading:false,
      fileList1:[],
      dayMoney:'',
      expectedPayment:'',
      warehouseID: '',
      cycleId: '',
      cycleList: [],
      addressList: [],
      info: {},
      show_2: false,
      data: [],
      show_1: false,
      title: 'picker-view',
      years,
      year,
      months,
      month,
      days,
      day,
      value: [9999, month - 1, day - 1],
      visible: true,
      url: ''
    }
  },
  computed: {
    totalMoney(){
      return this.listPaintings.reduce((total, item) => {
        return total + Number(item.expectedPayment);
      }, 0);
    },
    currentArtworkSquareSize() {
      if (
          this.currentIndex >= 0 &&
          this.currentIndex < this.listPaintings.length
      ) {
        return this.listPaintings[this.currentIndex].artworkSquareSize;
      }
      return null;
    },
    currentEndAt() {
      if (
          this.currentIndex >= 0 &&
          this.currentIndex < this.listPaintings.length
      ) {
        return this.listPaintings[this.currentIndex].endAt;
      }
      return null;
    },
  },
  watch:{
    currentArtworkSquareSize(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.obtainAmount()
      }
    },
    currentEndAt(newValue, oldValue) {
      console.log(newValue,oldValue)
      if (newValue !== oldValue) {
        this.obtainAmount()
      }
    },
  },
  onLoad(load){
    if (load.url){
      this.url=load.url
      this.getDetailUrl()
    }
    if (load.type==='detail'){
      this.getData()
      this.type=load.type
    }

    if (load.type==='scan'){
      this.listPaintings=uni.getStorageSync('scanlist')?.map((x)=>{
        return {
          ...x,
          expectedPayment:'',
          warehouseID:'',
          fileList1:[ { url:x.artworkImg }]
        }
      })
    }
    this.listPaintings=uni.getStorageSync('orderingInfo').listPaintings

  },
  mounted() {
    this.getCycle()
    if (this.$mp.query.url){
      this.url=this.$mp.query.url
      this.getDetailUrl()
    }
    this.getAddress()
    this.$nextTick(async ()=>{
      this.itemHeight=  await this.getElementHeight('.content-scroll')
      this.getheight()
    })
  },
  methods: {
    getElementHeight(selector) {
      return new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery();
        query.select(selector).boundingClientRect(data => {
          if (data) {
            resolve(data.height); // 成功获取高度时,通过 Promise 返回
          } else {
            reject(new Error('无法获取元素高度')); // 如果找不到元素或获取高度失败时,通过 Promise 返回错误
          }
        }).exec();
      });
    },
    async scrollDetail(event){
      const scrollTop = event.detail.scrollTop;  // 获取当前滚动位置
      const totalHeight = this.listPaintings.length * this.itemHeight;
      const scrollPercent = (scrollTop / totalHeight) * 100;
      const index = Math.floor(scrollTop / this.itemHeight); // 计算索引
      /* console.log(`滚动了 ${scrollPercent}%`);
       console.log(`滚动到了第 ${index} 个元素的位置`);*/
      this.currentIndex=index
    },
    async getData() {
      const data1 = {
        ID: Number(this.$mp.query.ID)
      }
      const res1 = await postDataByParams('/api/v2/warehouse/detail', data1)
      if (res1.code === 200) {
        this.info = res1.data
      }
    },
    changeHandler(e) {
      const {
        columnIndex,
        value,
        values,
        index,
        picker = this.$refs.uPicker
      } = e
      if (columnIndex === 2) {
        picker.setColumnValues(this.columns.length-1, [this.columns[2][e.index]*this.columns[0][0]])
      }
    },
    itemDelete(){
      this.listPaintings.splice(this.currentIndex,1)
      this.currentIndex=0
      if (this.listPaintings.length===1){
        this.contentListHeight=0
      }
      this.$nextTick(()=>{
        this.getheight()
      })


    },
    itemClick(index){
      this.scrollId=`item-${index}`
      this.currentIndex=index
    },
    addPainting(){
      this.listPaintings.push({
        expectedPayment:'',
        fileList1:[],
        artworkNum:'',
        artworkName:'',
        artistName:'',
        artworkSquareSize:'',
        warehouseID: this.listPaintings[0].warehouseID,
        endAt:this.listPaintings[0].endAt
      })
      this.$nextTick(()=>{
        this.getheight()
      })
      this.currentIndex=this.currentIndex+1
    },
    getheight(){
      let query = uni.createSelectorQuery().in(this);
      query.select('.content-list').boundingClientRect(data => {
        if (data) {
          let query = uni.createSelectorQuery().in(this);
          query.select('.titile-d').boundingClientRect(data1 => {
            if (data1) {
              this.contentListHeight=data.bottom-data1.bottom
            }
          }).exec();
        }
      }).exec();
    },
    expand1(){
      this.isExpand1=!this.isExpand1
    },
    expand(){
      if (this.isExpand){
        this.listHeight=154*2
      }else {
        this.listHeight=154*(this.listPaintings.length<=7?this.listPaintings.length:7)
      }
      this.isExpand=!this.isExpand
    },
    timestampToDateString(timestamp) {
      const date = new Date(timestamp ); // 把时间戳乘以1000转换为Date对象需要的毫秒数
      const year = date.getFullYear();
      const month = ("0" + (date.getMonth() + 1)).slice(-2);     // 月份是从0开始的,所以加1,用slice保证格式是2位数
      const day = ("0" + date.getDate()).slice(-2);              // 用slice保证格式是2位数
      return year + "-" + month + "-" + day;
    },
    confirmDate(data){
      this.listPaintings[this.currentIndex].endAt=data.value[data.value.length-1]
      this.obtainAmount()
      this.show_1=false
    },
    openShow1(){
      if (!this.listPaintings[this.currentIndex].artworkSquareSize){
        uni.showToast({
          title: "请先填写画作平尺数",
          duration: 2000,
          icon: "none",
        });
        return
      }
      this.show_1=true
    },
    uploadFilePromise(url, type = null) {
      return new Promise((resolve) => {
        uni.uploadFile({
          url: http.baseUrl + "/api/wxuser/uploadpic",
          filePath: url,
          name: "file",
          success: (res) => {
            const { path } = JSON.parse(res.data).data;
            resolve(path);
          },
        });
      })
    },
    deletePic() {
      this.fileList1=[]
    },
    // 新增图片
    async afterRead(event,index) {
      // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this.listPaintings[index].fileList1.length
      lists.map((item) => {
        this.listPaintings[index].fileList1.push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url, 'check')
        let item = this.listPaintings[index].fileList1[fileListLen]
        this.listPaintings[index].fileList1.splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }))
        fileListLen++
      }
    },
    async  signContract(){
      this.loading=true
      const data1={
        batchId:uni.getStorageSync('orderingInfo').transactionId,
      }
      const res1 = await postDataByParams('/api/v2/warehouse/create',data1)
      if (res1.code===200){
        const res2 = await postDataByParams('/api/v2/warehouse/paid',{
          ID:res1.data.ID
        })
        if (res2.code===200){
          uni.requestPayment({...res2.data,fail:(res)=>{
              this.loading=false
            },success:()=>{
              this.loading=false
              uni.navigateTo({
                url: `/pages/paySuccess/paySuccess?ID=${res1.data.ID}`,
              });
            }})
        }
      }
    },
    async obtainAmount(){
      uni.setStorageSync("endAt",new Date(Date.now() + this.listPaintings[this.currentIndex].endAt * 86400000)?.toISOString()?.slice(0, 10))
      const data={
        orders:[
          {    artworkSquareSize:Number(this.listPaintings[this.currentIndex].artworkSquareSize),
            endAt:new Date(Date.now() + this.listPaintings[this.currentIndex].endAt * 86400000)?.toISOString()?.slice(0, 10)}
        ]
      }
      const res = await postDataByParams('/api/v2/warehouse/calculate',data)
      if (res.code===200){
        this.listPaintings[this.currentIndex].expectedPayment=res.data.orders?.[0]?.money
      }
    },
    confirmCycle() {
      this.show_1 = false
    },
    confirmAddress() {
      this.show_2 = false
    },
    selectAddress(item) {
      this.listPaintings[this.currentIndex].warehouseID = item.ID
    },
    selectionPeriod(item) {
      this.cycleId = item.ID
    },
    async getCycle() {
      const res = await postDataByParams('/api/warehouse/cycle')
      if (res.code === 200) {
        this.cycleList = res.data.data
      }
    },
    async getAddress() {
      const res = await postDataByParams('/api/warehouse/address')
      if (res.code === 200) {
        this.addressList = res.data.data
      }
    },
    async getDetailUrl() {
      const data = {
        url: this.url
      }
      const res = await postDataByParams('/api/warehouse/ocr', data)
      if (res.code === 200) {
        this.info = res.data
        this.fileList1=[{url:this.info.artworkImg}]
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    },
    isDateFont(item, num) {
      if (Array.isArray && this.data.length === 3) {
        return this.data[num] === item
      }
    },
    changeData(e) {
      this.data = [e.detail.value[0] + 1990, e.detail.value[1] + 1, e.detail.value[2] + 1]
    },
    back() {
      if (this.type==='detail'){
        uni.switchTab({url: '/pages/home/index'})
      }else {
        uni.navigateBack({delta: 2})
      }
    }
  }
}
</script>
<style scoped lang="scss">
.fontDate {
  color: #fff;
}

/deep/ .pickerSelected {
  color: #ffffff !important;
  z-index: 2;
}

/deep/ .test {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
  background: #A9D897;
  color: #fff;
  height: 62rpx;
}

uni-picker-view {
  display: block;
}

uni-picker-view .uni-picker-view-wrapper {
  display: flex;
  position: relative;
  overflow: hidden;
  height: 100%;
  background-color: white;
}

uni-picker-view[hidden] {
  display: none;
}

picker-view {
  width: 100%;
  // height: 600upx;
  height: 400rpx;
  margin-top: 20 upx;
}

.item {
  line-height: 100 upx;
  text-align: center;
}

.order-details {
  background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/4fdc9a0f-d72a-46b6-a04d-ed56d5465213.png");
  box-sizing: border-box;
  overflow: hidden;
  padding-left: 30rpx;
  padding-right: 30rpx;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  .content-list{
    top: 130rpx;
    z-index: 999;
    position: absolute;
    width: 686rpx;
    margin-top: 34rpx;
    text-align: right;
    .wrap1{
      margin-bottom: 10rpx;
      font-size: 24rpx;
      color: rgba(78, 150, 77, 1);
    }
    .wrap2{
      box-sizing: border-box;


      border-radius: 20rpx;
      background-color: #fff;
      padding-left: 18rpx;
      padding-right: 32rpx;
      .wrap2_2{
        height: 60rpx;
        position: relative;
        .wrap2_2_2{
          line-height: 60rpx;
          color: rgba(118, 196, 88, 1);
          font-size: 24rpx;
        }
        .wrap2_2_1{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-repeat: no-repeat;
          background-size: cover;
          img{
            width: 30rpx;
            height: 16rpx;
          }
        }
      }
      .wrap2_1{
        z-index: 999;
        overflow-y: scroll;
        .item{
          height: 154rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-left: 10rpx;
          padding-right: 10rpx;
          &.active{
            background-color:rgb(245, 251, 242);
          }
          .item_5{
            width: 134rpx;
            color: rgba(98, 98, 98, 1);
            font-size: 24rpx;
          }
          .item_4{
            margin-right: 28rpx;
            width: 192rpx;
            color: rgba(98, 98, 98, 1);
            font-size: 24rpx;
          }
          .item_3{
            margin-right: 48rpx;
            width: 78rpx;
            color: rgba(98, 98, 98, 1);
            font-size: 24rpx;
          }
          .item_2{
            margin-right: 24rpx;
            width: 68rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            .item_2_2{
              color: rgba(147, 147, 147, 1);
              font-size: 20rpx;
            }
            .item_2_1{
              background-color: #000;
              width: 68rpx;
              height: 68rpx;
              img{
                width: 100%;
                height: 100%;
              }
            }
          }
          .item_1{
            margin-right: 18rpx;
            color: rgba(88, 166, 107, 1);
            font-size: 24rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 36rpx;
            height: 36rpx;
            border: 5rpx solid rgba(118, 196, 88, 1);
            border-radius: 50%;
            background: transparent;
          }
        }
      }
    }
  }

  & > .content5 {
    align-items: center;
    left: 0;
    background: #fff;
    width: 750rpx;
    position: fixed;
    bottom: 0;
    height: 172rpx;
    display: flex;
    .wrap4{
      z-index: 999;
      width: 100%;
      background-color: #fff;
      position: absolute;
      .item{
        height: 152rpx;
        display: flex;
        align-items: center;
        .item_4{
          margin-right: 64rpx;
          margin-left: auto;
          color: rgba(118, 196, 88, 1);
          font-size: 24rpx;
          font-weight: bold;
        }
        .item_3{
          width: 100rpx;
          margin-left: 48rpx;
          color: rgba(98, 98, 98, 1);
          font-size: 24rpx;
        }
        .item_2{
          width: 100rpx;
          margin-left: 34rpx;
          color: rgba(98, 98, 98, 1);
          font-size: 24rpx;
        }
        .item_1{
          margin-left: 56rpx;
          color: rgba(88, 166, 107, 1);
          font-size: 24rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 36rpx;
          height: 36rpx;
          border: 5rpx solid rgba(118, 196, 88, 1);
          border-radius: 50%;
          background: transparent;
        }
      }
    }
    .wrap3{
      margin-left: 32rpx;
      img{
        width: 30rpx;
        height: 16rpx;
      }
    }
    .wrap2 {
      border-radius: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 392rpx;
      height: 56rpx;
      color: #fff;
      font-size: 32rpx;
      background: #76C458;
    }

    .wrap1 {
      margin-left: 18rpx;
      margin-right: 70rpx;
      display: flex;
      flex-direction: column;
      align-items: start;

      .wrap1_1 {
        color: #939393;
        font-size: 16rpx;
      }

      .wrap1_2 {
        font-size: 32rpx;
        color: #76C458;
      }
    }
  }

  .poup1 {
    padding-top: 28rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    margin-bottom: 72rpx;

    & > .content6 {
      margin-top: 26rpx;
      display: flex;
      justify-content: center;

      .wrap1 {
        color: #fff;
        font-size: 28rpx;
        width: 436rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #76C458;
        border-radius: 30rpx;
      }
    }

    & > .content3 {
      margin-bottom: 70rpx;

      .wrap1 {
        margin-bottom: 18rpx;
        border-radius: 32rpx;
        height: 80rpx;
        box-sizing: border-box;
        border: 2px solid #76C458;
        padding-left: 44rpx;
        padding-right: 42rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .wrap1_2 {
          color: #76C458;
          font-size: 26rpx;
        }

        .wrap1_1 {
          font-size: 28rpx;
          color: #000;
        }

        &.disabled {
          border: none;
          background: #D8D8D8;

          .wrap1_1 {
            color: #626262;
            font-size: 28rpx;
          }

          .wrap1_2 {
            color: #626262;
            font-size: 16rpx;
          }
        }

        &.active {
          background: #76C458;

          .wrap1_2 {
            color: #fff;
            font-size: 26rpx;
          }

          .wrap1_1 {
            font-size: 28rpx;
            color: #fff;
          }
        }
      }
    }

    & > .content1 {
      margin-bottom: 36rpx;
      display: flex;
      justify-content: space-between;

      .wrap1 {
        color: #000;
        font-size: 32rpx;
      }

      .wrap2 {
        image {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }

    & > .content2 {
      margin-bottom: 36rpx;
      height: 1rpx;
      background: #626262;
    }
  }

  .poup {
    margin-bottom: 72rpx;
    padding-top: 28rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    &> .content7{

    }
    & > .content3 {
      display: flex;
      flex-wrap: wrap;

      .wrap4 {
        margin-bottom: 40rpx;
        border-radius: 32rpx;
        margin-top: 30rpx;
        width: 220rpx;
        height: 84rpx;
        background: #D8D8D8;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .wrap4_1 {
          color: #626262;
          font-size: 28rpx;
        }

        .wrap4_2 {
          color: #BE7E7E;
          font-size: 16rpx;
        }
      }

      .wrap1 {
        box-sizing: border-box;
        flex-shrink: 0;
        margin-right: 16rpx;
        font-size: 28rpx;
        border-radius: 32rpx;
        border: 2rpx solid #76C458;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 220rpx;
        height: 84rpx;

        &:nth-child(3) {
          margin-right: 0;
        }

        &.active {
          color: #fff;
          background: #76C458;
        }
      }
    }

    & > .content6 {
      margin-top: 26rpx;
      display: flex;
      justify-content: center;

      .wrap1 {
        color: #fff;
        font-size: 28rpx;
        width: 436rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #76C458;
        border-radius: 30rpx;
      }
    }

    & > .content5 {
      margin-top: 36rpx;
      height: 66rpx;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #BABABA;
      border-top: 1rpx solid #BABABA;

      .wrap1 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        color: #4E964D;
        font-size: 28rpx;
      }

      .wrap2 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        color: #4E964D;
        font-size: 28rpx;
      }

      .wrap3 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        color: #4E964D;
        font-size: 28rpx;
      }
    }

    & > .content4 {
      font-size: 32rpx;
      color: #000;
    }

    & > .content2 {
      margin-bottom: 36rpx;
      height: 1rpx;
      background: #626262;
    }

    & > .content1 {
      margin-bottom: 36rpx;
      display: flex;
      justify-content: space-between;

      .wrap1 {
        color: #000;
        font-size: 32rpx;
      }

      .wrap2 {
        image {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }
  }

  .content-center{
    overflow-y: scroll;

    .content-scroll{
      .painting-name{
        margin-top: 48rpx;
        align-items: center;
        display: flex;
        justify-content: space-between;
        .wrap1{
          color: rgba(0, 0, 0, 1);
          font-size: 28rpx;
        }
        .wrap2{
          font-size: 28rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          color: rgba(118, 196, 88, 1);
          border-radius: 40rpx;
          background-color: #fff;
          width: 148rpx;
          height: 56rpx;
          border: 1px solid rgba(118, 196, 88, 1);
        }
      }
      & > .content4 {
        margin-bottom: 24rpx;
        margin-top: 60rpx;

        .wrap1 {
          border: 1rpx dashed #DFE9F0;
          background-color: #fff;

          .wrap1_1 {
            position: relative;
            height: 114rpx;
            display: flex;
            align-items: center;

            .wrap1_1_4 {
              left: 50%;
              transform: translateX(-50%);
              bottom: 0;
              position: absolute;
              height: 0;
              width: 636rpx;
              border-bottom: 0.5px solid #626262;
            }

            .wrap1_1_5 {
              right: 42rpx;
              position: absolute;

              image {
                width: 46.34rpx;
                height: 20rpx;
              }
            }

            .wrap1_1_2 {
              margin-right: 36rpx;
              width: 0;
              height: 66rpx;
              border-left: 0.5px solid #626262;

            }

            .wrap1_1_1 {
              width: 210rpx;
              padding-left: 32rpx;

              color: #626262;
              font-size: 24rpx;
            }
          }
        }
      }

      & > .content3 {
        margin-top: 60rpx;

        .prompt {
          color: #4E964D;
          font-size: 16rpx;
          margin-bottom: 4rpx;
        }

        .wrap1 {
          border: 1rpx dashed #DFE9F0;
          background-color: #fff;

          .wrap1_1 {
            position: relative;
            height: 114rpx;
            display: flex;
            align-items: center;

            .wrap1_1_4 {
              left: 50%;
              transform: translateX(-50%);
              bottom: 0;
              position: absolute;
              height: 0;
              width: 636rpx;
              border-bottom: 0.5px solid #626262;
            }

            .wrap1_1_2 {
              margin-right: 36rpx;
              width: 0;
              height: 66rpx;
              border-left: 0.5px solid #626262;

            }

            .wrap1_1_1 {
              width: 210rpx;
              padding-left: 32rpx;

              color: #626262;
              font-size: 24rpx;
            }
          }
        }
      }

      & > .content2 {

        display: flex;
        justify-content: center;

        image {
          width: 404rpx;
          height: 306rpx;
        }
      }
      &>.content7{
        margin: 0 auto;
        background-color: #fff;
        border-radius: 40rpx;
        width: 228rpx;
        height: 56rpx;
        border: 3rpx solid rgba(118, 196, 88, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        .wrap2{
          color: rgba(118, 196, 88, 1);
          font-size: 28rpx;
        }
        .wrap1{
          margin-right: 20rpx;
          box-sizing: border-box;
          width: 32rpx;
          height: 32rpx;
          border: 3rpx solid rgba(118, 196, 88, 1);
          border-radius: 50%;
          background: transparent;

          position: relative;
          .horizontal {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 18rpx;
            height: 2rpx;
            background-color: rgba(118, 196, 88, 1);
          }

          .vertical {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 2rpx;
            height: 18rpx;
            background-color: rgba(118, 196, 88, 1);
          }


        }
      }
    }



  }
}
</style>