<template>
  <pb-layout class="manage-goods" title="发布商品" leftIcon="leftIcon" navbar="normal" :bgStyle="bgStyle"
    opacityBgUi="bg-white" color="black">
    <view class="goods-form">
      <uni-forms ref="formRef" v-model="formData" :rules="rules" label-position="top" label-width="160">
        <uni-forms-item label="商品封面图" name="picUrl" required>
          <p-uploader v-model:url="formData.picUrl" fileMediatype="image" limit="1" mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }" />
        </uni-forms-item>
        <uni-forms-item label="商品轮播图" name="sliderPicUrls" required>
          <p-uploader v-model:url="formData.sliderPicUrls" fileMediatype="image" limit="6" mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }" />
        </uni-forms-item>
        <uni-forms-item label="商品名称" name="name" required>
          <uni-easyinput type="text" trim="all" v-model="formData.name" placeholder="请输入商品名称" />
        </uni-forms-item>
        <uni-forms-item label="商品分类" name="categoryId" label-position="left" required>
          <uni-easyinput type="text" v-model="formData.categoryId" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
            :clearable="false" :inputBorder="false" placeholder="请选择商品分类" disabled>
            <template v-slot:right>
              <uni-icons type="right" />
            </template>
          </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="商品品牌" name="brandId" label-position="left" required>
          <uni-easyinput type="text" v-model="formData.brandId" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
            :clearable="false" :inputBorder="false" placeholder="请选择商品品牌" disabled>
            <template v-slot:right>
              <uni-icons type="right" />
            </template>
          </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="商品规格" name="skus" label-position="left" required>
          <uni-easyinput type="text" v-model="formData.skus" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
            :clearable="false" :inputBorder="false" placeholder="请添加商品规格" disabled>
            <template v-slot:right>
              <uni-icons type="right" /> </template></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="商品关键词" name="keyword" required>
          <uni-easyinput type="text" v-model="formData.keyword" placeholder="请输入商品关键词" />
        </uni-forms-item>
        <uni-forms-item label="商品简介" name="introduction" required>
          <uni-easyinput type="textarea" trim="all" autoHeight v-model="formData.introduction" placeholder="请输入商品简介" />
        </uni-forms-item>
        <uni-forms-item label="物流设置" @click="openPicker" name="deliveryTypes" label-position="left" required>
          <uni-easyinput type="text" :clearable="false" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
            :inputBorder="false" v-model="formData.keyword" placeholder="请选择配送方式" disabled>
            <template v-slot:right>
              <uni-icons type="right" />
            </template>
          </uni-easyinput>
        </uni-forms-item>
      </uni-forms>
    </view>


    <uni-popup ref="popupRef" type="bottom" border-radius="10px 10px 0 0">
      <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
        class="picker-view">
        <picker-view-column>
          <view class="item" v-for="(item, index) in DELIVERY_TYPES" :key="index">{{ item.label }}</view>
        </picker-view-column>
      </picker-view>
    </uni-popup>
  </pb-layout>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import peach from '@/peach'
import GoodsApi from '@/peach/api/trade/goods'
import _ from 'lodash'

const bgStyle = {
  backgroundImage: '',
  backgroundColor: '#fff',
  description: '',
}

const DELIVERY_TYPES = [{
  value: 3,
  label: '到店核销'
}, {
  value: 4,
  label: '商家配送'
}]

const indicatorStyle = 'height: 50px'

const selfStyles = {
  backgroundColor: '#f9f9f9',
}

const popupRef = ref()
const formData = ref({
  picUrl: 'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
  sliderPicUrls: [
    'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
    'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
    'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
  ],
  name: '测试商品',
  categoryId: 91,
  brandId: 4,
  keyword: '香酥鸭，但家',
  deliveryTypes: [3],
  introduction: '但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭',
})

const rules = {
  name: {
    rules: [
      {
        required: true,
        errorMessage: '请输入商品名称',
      },
    ],
  },
  picUrl: {
    rules: [
      {
        required: true,
        errorMessage: '请上传商品封面图',
      },
    ],
  },
  sliderPicUrls: {
    rules: [
      {
        required: true,
        errorMessage: '请上传商品轮播图',
      },
    ],
  },
  categoryId: {
    rules: [
      {
        required: true,
        errorMessage: '请选择商品分类',
      },
    ],
  },
  brandId: {
    rules: [
      {
        required: true,
        errorMessage: '请选择商品品牌',
      },
    ],
  },
  skus: {
    rules: [
      {
        required: true,
        errorMessage: '请选择商品规格',
      },
    ],
  },
  keyword: {
    rules: [
      {
        required: true,
        errorMessage: '请输入商品关键字',
      },
    ],
  },
  introduction: {
    rules: [
      {
        required: true,
        errorMessage: '请输入商品简介',
      },
    ],
  },
  deliveryTypes: {
    rules: [
      {
        required: true,
        errorMessage: '请选择商品物流',
      },
    ],
  },
}

const formRef = ref(null)

function openPicker() {
  console.log('123')
  popupRef.value.open()
}

function onSubmit() {
  console.log('res', formData.value)

  formRef.value
    .validate()
    .then(async (res) => {
      let tempObj = { ...res }

      if (formData.value.id) {
        tempObj.id = formData.value.id
        await GoodsApi.editProduct(tempObj)
      } else {
        await GoodsApi.addProduct(tempObj)
      }
    })
    .catch((err) => {
      console.log('err', err)
    })
}

// 获取商品详情
function getGoodsInfo() { }

onLoad((options) => {
  if (options.id) {
    getProduct()
  }
})
</script>

<style lang="scss" scoped>
.manage-goods {
  .goods-form {
    margin: 40rpx;

    :deep() {
      .uni-easyinput__content-input {
        font-size: 28rpx !important;
        color: #333333 !important;
        line-height: normal !important;
      }

      .uni-easyinput__placeholder-class {
        font-size: 14px;
      }

      .is-direction-left {
        .uni-forms-item__label {
          padding-left: 10px;
          background-color: #f9f9f9;
          border-radius: 10px 0 0 10px;
        }

        uni-icons {
          margin-right: 10px;
        }

        .uni-easyinput__content {
          border-radius: 0 10px 10px 0;
        }
      }

      .is-disabled {
        color: #333333;
        text-align: right;
      }
    }
  }

  .picker-view {
    width: 750rpx;
    height: 600rpx;
    margin-top: 20rpx;
  }

  .item {
    line-height: 100rpx;
    text-align: center;
  }
}
</style>
