<template>
  <view class="invoice-wrap" :class="[`${themeInfo.theme}-theme`]">
    <navBar></navBar>
    <view class="content">
      <view class="info">
        <view class="i-header">
          <view class="tabbox">
            <view class="li">
              {{ $t("common.goodsList") }}
            </view>
          </view>
          <view class="tips">
            {{ $t("goodsList.info") }}
          </view>
          <view> </view>
        </view>
        <view class="infobox">
          <uv-checkbox-group v-model="state.goodsIds" shape="circle" activeColor="var(--main-color)">
            <view class="selectbox" v-for="(item, index) in state.dataList" :key="index">
              <view class="li-title" @click="hadelShowHide(index)">
                <view class="left"> {{ item.name }}（{{ $t("goodsList.multi") }}）</view>
                <view class="right"> {{ item.show?'-':'+' }} </view>
              </view>
              <template v-if="item.show&&item.tree.length>0">
                <view class="li-box" v-for="(item2, index2) in item.tree" :key="index2">
                <view class="li2-title">
                  <view class="text"> [ {{item2.name}} ] </view>
                  <view class="line"> </view>
                </view>
                <view class="radioBox" v-if="item2.tree.length>0">
                  <uv-checkbox
                    :customStyle="{ marginBottom: '8px',marginRight:'8px' }"
                    v-for="(item3, index3) in item2.tree"
                    :key="index"
                    :label="item3.name"
                    :name="item3.id"
                  ></uv-checkbox>
                </view>
              </view>
              </template>
            </view>
          </uv-checkbox-group>
          <view class="selectbox" style="margin-bottom: 20rpx;">
            <view class="li-title">
                <view class="left"> 其他（{{ $t("goodsList.note") }}）</view>
                <view class="right"> &nbsp; </view>
              </view>
          </view>
          <view class="textareaBox">
					<uv-textarea 
						v-model="state.goodsListRemark"
						height="140.8rpx"
						:placeholder="$t('goodsList.note')"
						customStyle="background: transparent; border-radius: 16rpx; border:none;"
						textStyle="font-size: 24rpx; color: rgb(15, 34, 50); font-weight: 400; line-height: 35rpx;"

					>
					</uv-textarea>
				</view>	
        <view class="tipsInfo">
            <view class="p">
              {{ $t("goodsList.tip1") }}
            </view>
            <view class="p">{{ $t("goodsList.tip2") }}</view>
            <view class="p">{{ $t("goodsList.tip3") }}</view>
            <view class="p">{{ $t("goodsList.tip4") }}</view>
          </view>	
				<button  class="btn" @click="submit" :disabled="state.goodsListRemark==''&&state.goodsIds.length==0">
					{{ $t('goodsList.submit') }}
				</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 主题色配置
import { useMainStore } from "@/store/index.js";
const { themeInfo } = useMainStore();
import navBar from "@/components/navBar.vue";
import { useGoodsApi } from "@/Apis/goodsList.js";
import { onLoad } from '@dcloudio/uni-app';
import { navigateBack } from '@/utils/common.js';
const getApi = useGoodsApi();
import { reactive } from "vue";
const state = reactive({
  goodsIds: [],
  orderId: "",
  dataList: [],
  goodsListRemark:"",
});
const hadelShowHide = (index) => {
  state.dataList[index].show = !state.dataList[index].show;
};
const getDataList = ()=>{
		uni.showLoading()
		getApi.GetGoodsList().then(res=>{
			if(res.code == 200){
        getDetails();
				state.dataList = res.data;
        state.dataList.forEach(item=>{
          item.show = true;
        })

			}
		}).finally(()=>{
				uni.hideLoading()
			})
	}

  const submit = ()=>{
    uni.showLoading()
    getApi.SubmitGoodsList({
      goodsIds:state.goodsIds,
      orderId:state.orderId,
      goodsListRemark:state.goodsListRemark
    }).then(res=>{
      if(res.code == 200){
        uni.showToast({
          title:res.msg,
          icon:"none"
        })
        setTimeout(()=>{
          navigateBack()
        },500)
      } else {
        uni.showToast({
          title:res.msg,
          icon:"none"
        })
      }
        })
    }
const getDetails = ()=>{
  uni.showLoading()
  getApi.GetSubmitGoodsList(state.orderId).then(res=>{
    if(res.code == 200){
     state.goodsIds = res.data.filter(item=>!item.isRemark).map(item=>item.value);
     state.goodsListRemark = res.data.find(item=>item.isRemark)?.value
    }
  }).finally(()=>{
    uni.hideLoading()
  })
}
onLoad ((option) => {
  state.orderId = option.orderId;
  getDataList();
})

</script>

<style lang="scss" scoped>
@import "@/static/style/theme.scss";

.invoice-wrap {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40rpx;
  padding-bottom: 20rpx;
  background: linear-gradient(
    to bottom,
    var(--right-linear),
    var(--left-linear2)
  );

  .content {
    width: 100%;

    .infobox {
      width: 100%;
      padding: 20rpx 40rpx;
      background-color: #ffffff;
      position: relative;
      .selectbox {
        width: 100%;

        .li-title{
          padding: 8rpx 40rpx;
          color: var(--text-color);
          border-radius: 999rpx;
          font-weight: bold;
          font-size: 28rpx;
          background: var(--active-color);
          display: flex;
          justify-content: space-between;
          margin-bottom: 20rpx;
        }
        .li2-title{
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          margin-bottom: 20rpx;

          .text{
            color: var(--stress-text);
            font-weight: bold;
            font-size: 28rpx;
          }
          .line{
            height: 1px;
            flex: 1;
            background: var(--stress-text);
            margin-left: 20rpx;
          }
        }
        .radioBox {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
        }
      }

      .textareaBox {
		margin-top: 20rpx;
		width: 100%;
		height: 220rpx;
		background: #F2F2F2;
		border-radius: 8rpx;
	}

      &::before {
        content: "";
        z-index: 9;
        position: absolute;
        bottom: -7px;
        left: 0;
        width: 100%;
        height: 14px;
        background: radial-gradient(
          var(--left-linear2) 0px,
          var(--left-linear2) 5px,
          transparent 5px,
          transparent
        );
        background-size: 14px 14px;
      }
      .tipsInfo{
      padding: 40rpx 0rpx;
      font-size: 24rpx;
      font-weight: bold;
      .p{
        margin-top: 8rpx;
      }
    }
    }

    .btn {
      margin-bottom: 40rpx;
      border-radius: 2px;
      background: var(--active-color);
      height: 90rpx;
      line-height: 90rpx;
      color: var(--text-color);
      font-size: 28rpx;
      font-weight: bold;
    }
  }

  .i-header {
    position: relative;
    font-weight: bold;

    .tips {
      padding: 0 40rpx;
      font-size: 22rpx;
      font-weight: bold;
    }
    

    &::before {
      content: "";
      position: absolute;
      top: -7px;
      left: 0;
      width: 100%;
      height: 14px;
      background: radial-gradient(
        var(--right-linear) 0px,
        var(--right-linear) 5px,
        transparent 5px,
        transparent
      );
      background-size: 14px 14px;
      z-index: 9;
    }

    padding: 30upx 0;
    width: 100%;
    background-color: #f7f7f7;
    color: #242e42;

    .tabbox {
      position: relative;
      padding: 20upx 10%;
      display: flex;
      justify-content: space-around;

      .li {
        width: 50%;
        background-color: transparent;
        font-size: 32upx;
        outline: none;
        text-align: center;
      }

      .li.active {
        font-weight: bold;
      }

      .bottom-line {
        position: absolute;
        left: calc(50% - 220rpx);
        bottom: 0;
        width: 160rpx;
        height: 2.5px;
        border-radius: 20px;
        background: var(--main-color);
        transition: left 0.5s ease;

        &.right {
          left: calc(50% + 60rpx);
        }
      }
    }
  }
}
</style>
