<template>
  <view class="add-paper">
    <view>
      <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="">
        <view class="add-paper-title">{{ title }}</view>
        <view slot="left"></view>
        <view slot="right"></view>
      </uni-nav-bar>
    </view>
    <view>
      <view class="add-paper-list">
        <view>
          <text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
          <text class="add-paper-text">纸品名称</text>
        </view>
        <view class="add-paper-input">
          <qn-easyinput
            type="text"
            :maxlength="100"
            :styles="{ disableColor: '#fff' }"
            v-model="form.name"
            :inputBorder="false"
            text="right"
            placeholder="请输入纸品名称"
          ></qn-easyinput>
        </view>
      </view>
      <view class="add-paper-border"></view>
      <view class="add-paper-list">
        <view>
          <text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
          <text class="add-paper-text">纸厂信息</text>
        </view>
        <view class="add-paper-input">
          <qn-easyinput
            type="text"
            :styles="{ disableColor: '#fff' }"
            v-model="form.manufacturerName"
            :inputBorder="false"
            text="right"
            :maxlength="100"
            placeholder="请输入纸厂信息"
          ></qn-easyinput>
        </view>
      </view>
      <view class="add-paper-border"></view>
      <view class="add-paper-list">
        <view>
          <text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
          <text class="add-paper-text">品牌信息</text>
        </view>
        <view class="add-paper-input">
          <qn-easyinput
            type="text"
            :styles="{ disableColor: '#fff' }"
            v-model="form.brandName"
            :inputBorder="false"
            text="right"
            :maxlength="50"
            placeholder="请输入品牌信息"
          ></qn-easyinput>
        </view>
      </view>
      <view class="add-paper-border"></view>
      <view class="add-paper-list">
        <view>
          <text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
          <text class="add-paper-text">纸种信息</text>
        </view>
        <qn-easyinput
          type="text"
          :styles="{ disableColor: '#fff' }"
          v-model="form.categoryName"
          :inputBorder="false"
          text="right"
          :maxlength="50"
          placeholder="请输入纸种信息"
        ></qn-easyinput>
      </view>
      <view class="add-paper-border"></view>
      <view class="add-paper-list">
        <view>
          <text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
          <text class="add-paper-text">是否主营</text>
        </view>
        <view><uni-data-checkbox v-model="form.isMainProductRep" :localdata="range"></uni-data-checkbox></view>
      </view>
    </view>
    <uGap></uGap>
    <view class="paper-price">
      <view class="paper-price-main">
        <text class="paper-price-title">纸品售价</text>
        <text class="paper-price-subtitle">(不设置最低起送量则不限制其送量要求)</text>
      </view>
      <view class="paper-price-form" v-for="(item, index) in skuList" :key="index">
        <view class="paper-price-item">
          <view class="label flex">
            <view class="dian"></view>
            <view class="paper-price-title">纸品售价{{ index + 1 }}</view>
          </view>
          <view class="delete-text" @click="deletePrice(index)">删除</view>
        </view>
        <view class="paper-price-item">
          <view class="label">
            <uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
            <text class="label_text">纸品克重：</text>
          </view>
          <view class="label_value">
            <qn-easyinput
              type="number"
              :styles="{ disableColor: '#F7F8FA', borderBottom: '1px solid red' }"
              v-model="item.weight"
              :inputBorder="false"
              text="right"
              :maxlength="9999"
              placeholder="请输入纸品克重"
            ></qn-easyinput>
          </view>
        </view>
        <view class="paper-price-item">
          <view class="label">
            <uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
            <text class="label_text">是否特价：</text>
          </view>
          <view class="label_value">
            <uni-data-checkbox style="float: right; padding-top: 24rpx" v-model="item.isPromoting" :localdata="range"></uni-data-checkbox>
          </view>
        </view>
        <view class="paper-price-item">
          <view class="label">
            <uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
            <text class="label_text">库存单位：</text>
          </view>
          <view class="label_value label-select" @click="popueShow(index)">
            <text class="paper-price-title text-right">{{ item.stockUnit === 1 ? '张' : '吨' }}</text>
            <uni-icons type="bottom" color="#000000" size="18"></uni-icons>
          </view>
        </view>
        <view class="paper-price-item">
          <view class="label">
            <uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
            <text class="label_text">账期售价：</text>
          </view>
          <view class="label_value flex">
            <qn-easyinput
              type="digit"
              :styles="{ disableColor: '#F7F8FA', borderBottom: '1px solid red' }"
              v-model="item.listPrice"
              :inputBorder="false"
              text="right"
              placeholder="请输入账期售价"
            ></qn-easyinput>
            <view class="paper-price-title text-left">元/{{ item.stockUnit === 1 ? '张' : '吨' }}</view>
          </view>
        </view>
        <view class="paper-price-item">
          <view class="label">
            <uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
            <text class="label_text">纸品库存：</text>
          </view>
          <view class="label_value flex">
            <qn-easyinput
              type="digit"
              :styles="{ disableColor: '#F7F8FA', borderBottom: '1px solid red' }"
              v-model="item.stock"
              :inputBorder="false"
              text="right"
              placeholder="请输入纸品库存"
            ></qn-easyinput>
            <view class="paper-price-title text-left">{{ item.stockUnit === 1 ? '张' : '吨' }}</view>
          </view>
        </view>
        <view class="paper-price-item">
          <view class="label">
            <uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
            <text class="label_text">最低起送量：</text>
          </view>
          <view class="label_value flex">
            <qn-easyinput
              type="digit"
              :styles="{ disableColor: '#F7F8FA', borderBottom: '1px solid red' }"
              v-model="item.minimum"
              :inputBorder="false"
              text="right"
              :maxlength="9999999999"
              placeholder="请输入最低起送量"
            ></qn-easyinput>
            <view class="paper-price-title text-left">{{ item.stockUnit === 1 ? '张' : '吨' }}</view>
          </view>
        </view>
      </view>
      <button type="primary" class="add-Btn" plain="true" @click="addPriceClick()">＋ 新增售价</button>
    </view>
    <uGap></uGap>
    <view class="paper-price">
      <view class="paper-price-image-title"><text class="paper-price-title">纸品图片</text></view>
      <view class="paper-price-image">
        <view class="imgs flex-row-start-start">
          <view v-for="(item, index) in imgList" :key="index" class="upload_img">
            <uni-icons type="clear" size="16" class="close-icon" @click="deleteVoucher(index)"></uni-icons>
            <image style="width: 120rpx; height: 120rpx" :src="item"></image>
          </view>
          <view class="default-upload" @click="uploadVoucher()">
            <image src="/static/imgs/order/camera.png" class="icon"></image>
            <text style="font-size: 26rpx; color: #4c4a58">上传图片</text>
          </view>
        </view>
      </view>
    </view>
    <uGap></uGap>
    <view class="paper-price">
      <view class="paper-price-image-title"><text class="paper-price-title">商品卖点</text></view>
      <view class="paper-price-image">
        <qn-easyinput
          class="paper-price-textArea"
          :maxlength="200"
          :styles="{ disableColor: '#F7F8FA' }"
          v-model="form.sellingProposition"
          :inputBorder="false"
          type="textarea"
          placeholder="请输入商品卖点"
        ></qn-easyinput>
      </view>
    </view>

    <uGap></uGap>
    <view class="paper-price">
      <view class="paper-price-image-title"><text class="paper-price-title">商品描述</text></view>
      <view class="paper-price-image">
        <qn-easyinput
          class="paper-price-textArea"
          :maxlength="200"
          :styles="{ disableColor: '#F7F8FA' }"
          v-model="form.description"
          :inputBorder="false"
          type="textarea"
          placeholder="请输入商品描述"
        ></qn-easyinput>
      </view>
    </view>
    <uGap></uGap>
    <view class="paper-price">
      <view class="paper-price-image-title"><text class="paper-price-title">送货说明</text></view>
      <view class="paper-price-image">
        <qn-easyinput
          class="paper-price-textArea"
          :maxlength="200"
          :styles="{ disableColor: '#F7F8FA' }"
          v-model="form.shippingNote"
          :inputBorder="false"
          type="textarea"
          placeholder="请输入送货说明"
        ></qn-easyinput>
      </view>
    </view>
    <uGap></uGap>
    <view class="paper-price">
      <view class="paper-price-image-title"><text class="paper-price-title">其他说明</text></view>
      <view class="paper-price-image">
        <qn-easyinput
          class="paper-price-textArea"
          :maxlength="200"
          :styles="{ disableColor: '#F7F8FA' }"
          v-model="form.otherNote"
          :inputBorder="false"
          type="textarea"
          placeholder="请输入"
        ></qn-easyinput>
      </view>
    </view>
    <uGap></uGap>
    <view class="upload-btn">
      <view><button type="primary" class="btn-class" plain="true" @click="addPriceClick()">取消</button></view>
      <view><button type="primary" class="btn-class-upload" @click="uploadPrice()">上架出售</button></view>
    </view>
    <uni-popup ref="popup" type="bottom">
      <view class="popup_modal">
        <slot name="title"><view class="popup_modal-title">可选择已录入公司</view></slot>
        <scroll-view scroll-y="true" class="popup_modal-scroll">
          <view @click="selectValue(item)" class="popup_modal-scroll-item" v-for="item in searchList" :key="item.id">{{ item.name }}</view>
        </scroll-view>
      </view>
    </uni-popup>
    <uni-popup ref="paperPopup" type="bottom">
      <view class="popup_modal">
        <slot name="title"><view class="popup_modal-title">选择纸种</view></slot>
        <scroll-view scroll-y="true" class="popup_modal-scroll">
          <view @click="paperSelectChange(item)" class="popup_modal-scroll-item" v-for="item in paperList" :key="item.id">{{ item.name }}</view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { back, uploadFile, uploadImage } from '@/utils/hook.js'
import qnEasyinput from '@/components/qn-easyinput/qn-easyinput.vue'
import uGap from '@/components/u-gap/u-gap.vue'
import { getCategoryList, createProduct, getSupplierDetail, updateProduct } from '@/apis/add-paper.js'
const validateFields = ['name', 'isMainProductRep', 'manufacturerName', 'brandName', 'categoryName']
const validatePriceFields = ['isPromoting', 'listPrice', 'minimum', 'stock', 'stockUnit', 'weight']
export default {
  components: {
    uGap,
    qnEasyinput
  },
  data() {
    return {
      title: '添加纸品',
      form: {
        name: null,
        isMainProductRep: 0,
        manufacturerName: null,
        brandName: null,
        categoryName: null,
        sellingProposition: '月结30天价格，不加服务费！',
        description: '售价全部为含税价，支持先用后付，欢迎来电查询！近期价格波动较大，请下单前先咨询价格。',
        shippingNote: '分切纸不足重量的，另加调机费；低于送货重量或超出送货范围的，运费另计。'
      },
      imageStyles: {
        width: 100,
        height: 100,
        border: {
          color: '#f1f1f1',
          width: 1,
          style: 'solid',
          radius: '2rpx'
        }
      },
      range: [
        { value: 0, text: '是' },
        { value: 1, text: '否' }
      ],
      placeholderStyle: 'text-align: right;',
      searchList: [
        {
          name: '张',
          id: 1
        },
        {
          name: '吨',
          id: 2
        }
      ],
      paperList: [],
      skuList: [
        {
          isPromoting: 1,
          listPrice: null,
          minimum: null,
          stock: null,
          stockUnit: 2,
          weight: null,
          categoryName: null
        }
      ],
      imgList: [],
      priceIndex: 0,
      editFor: 0,
      option: ''
    }
  },
  onLoad(option) {
    if (option) {
      this.title = option.title
    }
    this.option = option
    this.getCategoryListQuery()
    this.editFor = 0
    if (this.title === '编辑纸品') {
      setTimeout(() => {
        this.getDetailList()
      }, 200)

      this.editFor = 1
    }
  },
  watch: {},
  methods: {
    back,
    popueShow(item) {
      this.priceIndex = item
      this.$refs.popup.open('bottom')
    },
    selectValue(item) {
      this.$set(this.skuList[this.priceIndex], 'stockUnit', item.id)
      this.$refs.popup.close()
    },
    paperSelectChange(item) {
      this.$set(this.form, 'categoryName', item.name)
      // this.$set(this.form, 'categoryId', item.id)
      this.$refs.paperPopup.close()
    },
    paperPopupShow() {
      this.$refs.paperPopup.open('bottom')
    },
    //获取详情
    getDetailList() {
      let params = {
        mallSupplierIds: this.$store.state.supplierInfo.supplierId,
        productId: this.option.id
      }
      getSupplierDetail(params).then((res) => {
        if (res) {
          this.form = res
          if (this.form.isMainProduct === true) {
            this.$set(this.form, 'isMainProductRep', 0)
          } else {
            this.$set(this.form, 'isMainProductRep', 1)
          }
          this.skuList = res.skuList
          for (let sku of this.skuList) {
            if (sku.isPromoting === true) {
              sku.isPromoting = 0
            } else {
              sku.isPromoting = 1
            }
          }
          this.imgList = res.imgList
          console.log('this.imgList', this.imgList)
        }
      })
    },
    //新增售价
    addPriceClick() {
      this.skuList.push({
        isPromoting: 1,
        listPrice: null,
        minimum: null,
        stock: null,
        stockUnit: 2,
        weight: null,
        categoryName: null
      })
    },
    // 删除售价
    deletePrice(value) {
      this.skuList.splice(value, 1)
    },
    // 上传成功回调
    success(item) {
      console.log(item)
    },
    // 上传失败回调
    fail(item) {
      console.log(item)
    },
    // 图片选择事件
    select(item) {
      this.imgList.push(item.tempFiles[0])
      this.postUploadFile(item.tempFiles[0])
    },
    postUploadFile(path) {
      uploadFile(path.path).then((val) => {
        this.imgList[this.imgList.length - 1].pathUrl = val
      })
    },
    uploadVoucher() {
      uploadImage(['album'], 5)
        .then((urls) => {
          if (urls) {
            this.imgList = urls
          }
        })
        .catch((e) => {
          uni.showToast({
            title: '上传失败',
            icon: 'fail'
          })
        })
    },
    // 删除图片
    deleteImage(item) {
      console.log('deleteImage', item)
      for (let i = 0; i < this.imgList.length; i++) {
        if (this.imgList[i].uuid === item.tempFile.uuid) {
          this.imgList.splice(i, 1)
        }
      }
      console.log(this.imgList)
    },
    deleteVoucher(index) {
      this.imgList.splice(index, 1)
    },
    uploadPrice() {
      if (this.skuList.length === 0) {
        uni.showToast({
          title: '请添加纸品售价',
          icon: 'none'
        })
        return
      }
      for (let validateField of validateFields) {
        if (this.form[validateField] === null || this.form[validateField] === '') {
          uni.showToast({
            title: '请完善纸品基础信息',
            icon: 'none'
          })
          return
        }
      }
      for (let validatePriceField of validatePriceFields) {
        for (let sku of this.skuList) {
          if (sku[validatePriceField] === null || sku[validatePriceField] === '') {
            uni.showToast({
              title: '请完善纸品售价信息',
              icon: 'none'
            })
            return
          }
        }
      }
      for (let sku of this.skuList) {
        if (sku.isPromoting === 0) {
          sku.isPromoting = true
        } else {
          sku.isPromoting = false
        }
      }
      let params = {
        ...this.form,
        isMainProduct: this.form.isMainProductRep === 0 ? true : false,
        skuList: this.skuList,
        imgList: this.imgList,
        supplierId: this.$store.state.supplierInfo.supplierId
      }
      if (this.editFor === 0) {
        createProduct(params).then((res) => {
          if (res) {
            uni.showToast({
              title: '添加成功',
              icon: 'success'
            })
            setTimeout(() => {
              back()
            }, 1000)
          }
        })
      } else {
        updateProduct(params).then((res) => {
          if (res) {
            uni.showToast({
              title: '更新成功',
              icon: 'success'
            })
            setTimeout(() => {
              back()
            }, 1000)
          }
        })
      }
    },
    //获取纸品列表
    getCategoryListQuery() {
      getCategoryList().then((res) => {
        if (res) {
          this.paperList = res
          console.log(res)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.add-paper {
  .image {
    width: 28rpx;
    height: 28rpx;
  }
  .add-paper-title {
    width: 100%;
    font-size: 36rpx;
    color: #000000;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
  }
  .add-paper-list {
    height: 88rpx;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 32rpx;
    padding-right: 32rpx;
  }
  .add-paper-text {
    font-size: 28rpx;
    color: #000000;
    letter-spacing: 0;
    font-weight: 400;
  }
  .add-paper-start {
    font-size: 28rpx;
    color: #f5222d;
    letter-spacing: 0;
    font-weight: 400;
  }
  .add-paper-input {
    width: 40%;
  }
  .add-path-text {
    font-size: 28rpx;
    color: #888888;
    letter-spacing: 0;
    text-align: right;
    font-weight: 400;
  }
  .add-paper-border {
    border-bottom: 2rpx solid #d8d8d8;
    margin-left: 32rpx;
  }
  .paper-price {
    background-color: #ffffff;
    padding-bottom: 20rpx;
    .paper-price-form {
      background: #f7f8fa;
      border-radius: 8rpx;
      margin: 22rpx 32rpx;
      padding: 22rpx 32rpx;
      line-height: 60rpx;
      margin-bottom: 30rpx;
    }
    .paper-price-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .flex {
        display: flex;
        margin-left: 4px;
        align-items: center;
      }
    }
    .delete-text {
      font-size: 28rpx;
      color: #f5222d;
      letter-spacing: 0;
      font-weight: 400;
    }
    .paper-price-main {
      padding: 22rpx 32rpx;
      height: 88rpx;
      align-items: center;
      border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
    }
    .paper-price-image-title {
      padding: 22rpx 32rpx;
      align-items: center;
    }
    .paper-price-image {
      padding: 22rpx 32rpx;
    }
    .paper-upload-image {
      width: 184rpx;
      height: 184rpx;
      background: rgba(220, 222, 224, 0.5);
      border-radius: 10rpx;
    }
    .paper-price-textArea {
      background: #f7f8fa;
      border-radius: 20rpx;
      padding: 10rpx;
    }
    .paper-price-title {
      font-size: 28rpx;
      color: #000000;
      letter-spacing: 0;
      font-weight: 600;
    }
    .paper-price-subtitle {
      font-size: 24rpx;
      color: #888888;
      font-weight: 400;
    }
    .dian {
      background: #adbac9;
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      // margin-top: 28rpx;
      margin-right: 10rpx;
    }
    .label_text {
      font-size: 28rpx;
      color: #888888;
      letter-spacing: 0;
      font-weight: 400;
    }
    .label_value {
      padding-bottom: 5rpx;
      border-bottom: 2rpx solid #d8d8d8;
      width: 65%;
      text-align: right;
    }
    .label-select {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .text-left {
      margin-left: 10rpx;
    }
    .text-right {
      margin-right: 10rpx;
    }
  }
  .popup_modal {
    width: 750rpx;
    height: 600rpx;
    background-color: #fff;
    border-radius: 10rpx 10rpx 0 0;
    .popup_modal-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 750rpx;
      height: 88rpx;
      font-weight: 600;
      border-bottom: 2rpx solid #d8d8d8;
    }
    .popup_modal-scroll {
      width: 750rpx;
      height: 600rpx;
      .popup_modal-scroll-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 750rpx;
        height: 88rpx;
        padding: 0rpx 32rpx;
        border-bottom: 2rpx solid #d8d8d8;
      }
    }
  }
  .add-Btn {
    margin: 10rpx 32rpx;
  }
  .btn-class {
    height: 88rpx;
    border-radius: 10rpx;
    line-height: 80rpx;
    width: 270rpx;
  }
  .btn-class-upload {
    height: 88rpx;
    border-radius: 10rpx;
    line-height: 80rpx;
    width: 400rpx;
  }
  .upload-btn {
    display: flex;
    justify-content: space-between;
    padding: 10rpx 32rpx;
    background-color: #ffffff;
  }
  .paper-backColor {
    background-color: rgba(220, 222, 224, 1);
  }
  .imgs {
    // padding: 16rpx 32rpx 32rpx;
    min-height: 120rpx;
  }
  .default-upload {
    width: 120rpx;
    height: 120rpx;
    border-radius: 10rpx;
    background-color: #dcdee0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .icon {
      width: 56rpx;
      height: 56rpx;
      margin-bottom: 8rpx;
    }
  }
  .upload_img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 10rpx;
    background-color: #dcdee0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-right: 12rpx;
    overflow: hidden;
    .close-icon {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 5;
    }
  }
}
</style>
