<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j page-prod-message">
    <view class="content">
      <view
        v-for="(item,index) in virtualRemark"
        :key="index"
        class="list"
      >
        <view class="header">
          <text>{{ $t('ziDuan')+([$t('yi'), $t('er'), $t('san'), $t('si'), $t('wu'), $t('liu'), $t('qi'), $t('ba'), $t('jiu'), $t('shi')][index]) }}</text><text
            class="del"
            @click="del(index)"
          >
            {{ $t('shanChu') }}
          </text>
        </view>
        <view class="main">
          <view
            :class="['parameter-name',item.isRequired?'active':'']"
            @click="change(index)"
          >
            <text class="name">
              {{ $t('shiFouBiTian') }}
            </text>
            <view class="right iconfont">
              &#xe659;
            </view>
          </view>
          <view class="parameter-values">
            <text class="name">
              {{ $t('shuRuZiDuan') }}
            </text><input
              v-model="item.name"
              type="text"
              maxlength="20"
              :placeholder="$t('qingShuRu')"
              placeholder-style="color:#999;font-size:28rpx"
              @blur="item.name=item.name.trim()"
            >
          </view>
        </view>
      </view>

      <view
        v-if="virtualRemark.length>0"
        class="text"
      >
        {{ $t('gouMaiShangPinShiRangMaiJiaShuRuLiuYanZuiDuoKeSheZhi_10Tiao') }}
      </view>
      <empty-tips
        v-show="virtualRemark.length<1"
        :tips-list="[$t('zanWuShuJu')]"
      />
    </view>

    <view class="footer-btn">
      <common-btn
        :btn-config="virtualRemark.length>0?parameterBtnConfig:oneParameterBtnConfig"
        @handle-click-more-btn="handleClickMoreBtn"
        @handle-click-btn="handleClickMoreBtn"
      />
    </view>
  </view>
</template>

<script setup>
import { onMounted, reactive } from 'vue'

const Data = reactive({
  parameterBtnConfig: {
    btnList: [
      {
        btnText: $t('jiXuTianJia'),
        isPlain: true
      },
      {
        btnText: $t('tianJiaWanCheng'),
        isPlain: false
      }
    ]
  },
  oneParameterBtnConfig: {
    btnList: [
      {
        btnText: $t('tianJiaZiDuan'),
        isPlain: true
      },
      {
        btnText: $t('tianJiaWanCheng-0'),
        isPlain: false
      }
    ]
  },
  virtualRemark: []
})

const { parameterBtnConfig, oneParameterBtnConfig, virtualRemark } = toRefs(Data)

const prodStore = useProdStore()

onMounted(() => {
  Data.virtualRemark = JSON.parse(JSON.stringify(prodStore.dataForm.virtualRemark))
  uni.setNavigationBarTitle({
    title: $t('yongHuLiuYan')
  })
})

// 点击底部按钮（批量，发布）
const handleClickMoreBtn = (index) => {
  if (index === 2) {
    const isNull = Data.virtualRemark.some(item => !item.name || item.name === '')
    if (isNull) {
      uni.showToast({
        title: $t('qingTianXieZiDuan'),
        icon: 'none'
      })
    } else {
      prodStore.dataForm.virtualRemark = Data.virtualRemark
      uni.redirectTo({
        url: '/package-prod/pages/post-prod/post-prod'
      })
    }

    return
  }
  if (Data.virtualRemark.length >= 10) {
    uni.showToast({
      title: $t('zuiDuoSheZhi_10TiaoLiuYan'),
      icon: 'none'
    })
    return
  }
  Data.virtualRemark.push({})
}
const del = (index) => {
  Data.virtualRemark.splice(index, 1)
}
const change = (index) => {
  if (Data.virtualRemark[index].isRequired) {
    Data.virtualRemark[index].isRequired = false
  } else {
    Data.virtualRemark[index].isRequired = true
  }
}
</script>

<style lang="scss" scoped>
 .page-prod-message{
   height: 100vh;
   display: flex;
   flex-direction: column;
 }

 .content{
   overflow: auto;

   flex: 1;
   background-color: #F2F3F7;
   color: #333;
   font-size: 28rpx;

  .header{
    padding: 0 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    display: flex;
    justify-content: space-between;

    .del{
      color: #082BA6;
    }
  }

  .text{
    padding: 20rpx 30rpx;
    font-size: 24rpx;
    color: #999999;
  }

  .main{
    padding: 0 30rpx;
    border-radius: 10rpx;
    background-color: #fff;

    .right{
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        border: 2rpx solid #D1D1D1;
        box-sizing: border-box;
        text-align: center;
        font-size: 12rpx;
        line-height: 36rpx;
        color: #fff;
      }

      .active{
      .right{
        border: none;
        background-color: #082BA6;
      }
    }

    .parameter-name{
      height: 44rpx;
      padding: 22rpx 0;
      border-bottom:2rpx solid #F2F2F2 ;
      display: flex;
      justify-content: space-between;

      .name{
        color: #333;
        margin-right: 20rpx;
      }

      input{
        font-size: 28rpx;
      }
    }

    .parameter-values{
      justify-content: space-between;

      height: 44rpx;

      padding: 22rpx 0;
      display: flex;

      .name{
        color: #333;
        margin-right: 20rpx;
      }

      input{
        text-align: right;
        font-size: 28rpx;
      }
    }
  }
 }
</style>
