<template>
  <jx-empty title="未获取到调价包" v-if="empty" />
  <view v-else>
    <view v-show="!showmodal">
      <view class="price-value" v-for="(item, i) in pricePack" :key="i">
        <view class="price-item">
          <view class="s1 common">
            <text>开始价格:</text>
            <text class="num">¥{{ item.beginPrice / 100 }}</text>
          </view>
          <view class="s2 common">
            <text>提高:</text>
            <text class="num">{{ item.pricePercentage }}%</text>
          </view>
          <view class="s3 common">
            <text>再加:</text>
            <text class="num">{{ item.priceAdd ? item.priceAdd : 0 }}</text>
          </view>
        </view>
      </view>
      <button class="btn" @tap="isShowmodal">修改</button>
    </view>

    <view class="modal" v-show="showmodal">
      <view class="price-value" v-for="(price, index) in current" :key="index">
        <view class="price-item">
          <view class="news1 common">
            <text>开始价格:</text>
            <input
              type="number"
              class="num num-ipt"
              v-model="price.beginPrice"
            />¥
          </view>
          <view class="news2 common">
            <text>提高:</text>
            <input
              type="number"
              class="num num-ipt"
              v-model="price.pricePercentage"
            />%
          </view>
          <view class="news3 common">
            <text>再加:</text>
            <input
              type="number"
              class="num num-ipt3"
              v-model="price.priceAdd"
            />¥
          </view>
          <jx-icon
            class="icon-x common"
            icon="shanchu"
            @tap="delrow(price.id, index)"
            color="rgb(230, 3, 3)"
          ></jx-icon>
        </view>
      </view>
      <view class="btn-group">
        <button size="mini" class="btn2" @tap="showmodal = false">取消</button>
        <button size="mini" class="btn2" @tap="add">添加区间</button>
        <button size="mini" class="btn2 btn-update" @tap="confirm">修改</button>
      </view>
    </view>
  </view>

  <!-- 公共组件 -->
  <jx-loading />
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { computed, onBeforeUnmount, ref } from 'vue'
import jxEmpty from '@/components/jx-empty/jx-empty.vue'
import jxIcon from '@/components/jx-icon/jx-icon.vue'
import merchant from '@/api/https/merchant'
import toast from '@/utils/toast'
import { store } from '@/store'
import { getStorage } from '@/utils/storage'
/**
 * 页面获取参数
 */
const vendorID = ref('') // vendorID
const key = ref('') // key关键词
onLoad(async (options) => {
  vendorID.value = options?.vendorID
  key.value = options?.key
  await getConfig()
})

/**
 * 获取调价包
 */
const pricePack = ref<Array<AnyObject>>([])
const current = ref<AnyObject>([])
const empty = ref<boolean>(true)
async function getConfig() {
  let data = {
    type: 'PricePack',
    key: key.value,
  }
  let configRes = await merchant.query_configs(data)
  if (configRes.code == 0) {
    empty.value = false
    let arr = JSON.parse(configRes.data[0].value)
    for (let item of arr) {
      item.priceAdd = (item.priceAdd / 100).toFixed(2)
    }
    pricePack.value = arr
    current.value = JSON.parse(JSON.stringify(arr))
    current.value = current.value.map((item: AnyObject) => ({
      beginPrice: item.beginPrice / 100,
      pricePercentage: item.pricePercentage,
      priceAdd: item.priceAdd ? item.priceAdd : 0,
      id: Math.random().toString(16).slice(8),
    }))
  } else {
    empty.value = true
    toast('调价包数据错误', 2)
  }
}

/**
 * 修改按钮
 */
const showmodal = ref<boolean>(false)
function isShowmodal() {
  if (isPointStore.value) {
    showmodal.value = true
  } else {
    uni.jxAlert({
      title: '提示',
      content: '无法修改调价包',
    })
  }
}

/**
 * 确定修改
 */
let confirmTimer: any = null
function confirm() {
  uni.jxConfirm({
    title: '提示',
    content: '确定要修改调价包吗?',
    success: async () => {
      let data = {
        storeID: +getStorage('storeID'),
        vendorID: +vendorID.value,
        pricePack: key.value,
        value: JSON.stringify(
          current.value.map((item: AnyObject) => ({
            beginPrice: item.beginPrice * 100,
            pricePercentage: item.pricePercentage,
            priceAdd: item.priceAdd * 100,
          }))
        ),
      }

      let priceRes = await merchant.update_store_price_pack(data)
      if (priceRes.code == 0) {
        toast('修改成功', 1)
        clearTimeout(confirmTimer)
        confirmTimer = setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      } else {
        toast('修改失败', 2)
      }
    },
  })
}

/**
 * 删除调价包
 */
function delrow(id: string, index: number | string) {
  if (index == 0) return toast('禁止删除', 2)
  current.value = current.value.filter((item: AnyObject) => item.id !== id)
}

/**
 * 门店做折扣小于50不允许修改
 */
const isPointStore = computed(() => {
  return store.getters['storeInfo/isPointStore']
})

/**
 * 添加区间
 */
function add() {
  // 合并新旧数组
  current.value = current.value.concat({
    id: Math.random().toString(16).slice(8),
    beginPrice: 0,
    pricePercentage: 100,
    priceAdd: 0,
  })
}

/*************************************************
 * 收尾工作
 */
onBeforeUnmount(() => {
  clearTimeout(confirmTimer)
})
</script>

<style lang="scss" scoped>
@import './modifyPrice.scss';
</style>