<template>
  <view class="product-add-wrapper">
    <view class="headers">
      <headersVue headerTitle="添加商品" @headerJump="headerJump"></headersVue>
      <view class="headers-title">
        <view class="content"> 该功能仅支持单规格商品快速添加，可在PC </view>
      </view>
    </view>
    <view class="content-wrrapper">
      <uploadVue formItemTitle="商品封面" :maxLimit="1"></uploadVue>
      <uploadVue formItemTitle="商品轮播图"></uploadVue>
      <view class="business-box">
        <view class="business-box-txt">商品详情 </view>
        <view class="business-box--arae">
          <textarea
            @blur="bindTextAreaBlur"
            :maxlength="-1"
            auto-height
            class="araebox"
          />
        </view>
        <uploadVue :maxLimit="200" class="upload-boxx"></uploadVue>
      </view>
      <view class="form-box">
        <view class="form-item-box">
          <view class="form-box-txt mustBox">商户商品分类</view>
          <view
            class="form-box--arae"
            @click="handleClick"
            :class="[classification.name == '' ? 'classification' : '']"
          >
            {{ classification.name || "请选择商品分类" }}
          </view>
          <uni-icons
            type="right"
            size="30"
            class="icon-boxx"
            color="#333"
          ></uni-icons>
        </view>
        <view class="form-item-box">
          <view class="form-box-txt mustBox">商品名称</view>
          <view class="form-box--arae">
            <input
              type="text"
              v-model="formData.businessName"
              placeholder="请输入商品名称"
              class="placeholder-class"
            />
          </view>
        </view>
      </view>
      <view class="form-box mr-t">
        <view class="form-item-box">
          <view class="form-box-txt mustBox">商品售价</view>
          <view class="form-box--arae">
            <input
              type="text"
              v-model="formData.businessPrice"
              placeholder="请输入商品售价"
              class="placeholder-class"
            />
          </view>
        </view>
        <view class="form-item-box">
          <view class="form-box-txt mustBox">商品原价</view>
          <view class="form-box--arae">
            <input
              type="text"
              v-model="formData.businessOriginalPrice"
              placeholder="请输入商品原价"
              class="placeholder-class"
            />
          </view>
        </view>
        <view class="form-item-box">
          <view class="form-box-txt mustBox">商品库存</view>
          <view class="form-box--arae">
            <input
              type="text"
              v-model="formData.businessStock"
              placeholder="请输入商品库存"
              class="placeholder-class"
            />
          </view>
        </view>
      </view>
    </view>
    <view class="btn-list">
      <view class="btn quxiao"> 保存草稿 </view>
      <view class="btn primary"> 发布商品 </view>
    </view>
    <cascadePicker
      ref="picker"
      :title="cascadePicker.title"
      :layer="cascadePicker.layer"
      :data="cascadePicker.data"
      @callback="pickerCallback"
    />
  </view>
</template>

<script>
//添加商品
import headersVue from "../components/headers/headers.vue";
import uploadVue from "./components/upload.vue";
import cascadePicker from "../components/cascade-picker.vue";
import { reNameKeys } from "@/utils/index";
import { handleData } from "./mockDataPro";
export default {
  components: {
    headersVue,
    uploadVue,
    cascadePicker,
  },
  data() {
    return {
      cascadeData: [],
      cascadePicker: {
        title: "选择分类",
        layer: null,
        data: [],
      },
      classification: {
        name: "",
        id: "",
      },
      formData: {
        businessName: "", //商品名称
        businessPrice: "", //商品售价
        businessOriginalPrice: "", //商品原价
        businessStock: "", //商品库存
      },
	  selectData:[]
    };
  },
  onLoad() {},
  onShow() {
    this.cascadeData = reNameKeys(handleData);
  },
  methods: {
    headerJump() {
      uni.redirectTo({
        url: "/shop/productManagementModule/productManagement",
      });
    },
    // picker多级联动回调
    pickerCallback(e) {
      const { data } = e;
      const lastItem = data[data.length - 1];
	  this.selectData = data || [];
      console.log(lastItem, "pickerCallback回調");
      this.classification = lastItem || {};
    },
    handleClick() {
      const _this = this;
      _this.cascadePicker.data = _this.cascadeData;
      _this.$refs.picker.open().then(function () {
        console.log("打开成功");
      });
    },
    bindTextAreaBlur(e) {
      console.log(e.detail.value);
    },
  },
};
</script>
<style>
page {
  background-color: #f7f8fc;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.product-add-wrapper {
  height: 100%;
  overflow: hidden;
  .headers {
    .headers-title {
      display: flex;
      align-items: center;
      width: 100%;
      background: #fff9ed;
      padding: 16px 20rpx;
      margin-top: 88rpx;
      .content {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #ff6010;
      }
    }
  }
}
.content-wrrapper {
  height: calc(100% - 350rpx);
  overflow-y: auto;
  padding-bottom: 60rpx;
  .business-box {
    width: calc(100% - 0rpx);
    // border: 2rpx solid #f00;
    margin: 26rpx 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 32rpx 32rpx 0;
    box-sizing: border-box;
    background-color: #ffffff;
    min-height: 500rpx;
    .business-box-txt {
      width: 100%;
      font-weight: 600;
      font-size: 30rpx;
      color: #333333;
      margin-bottom: 20rpx;
      &::after {
        content: "*";
        color: #f00;
        padding-left: 10rpx;
      }
    }
    .upload-boxx {
      padding: 19rpx 0 !important;
    }
    .business-box--arae {
      width: 100%;
      //  border: 2rpx solid #f00;
      background: #f8f8f8;
      border-radius: 9rpx;
      min-height: 208rpx;
      .araebox {
        padding: 20rpx 18rpx 20rpx 26rpx;
        width: calc(100% - 46rpx);
        height: 100%;
      }
    }
  }
}

.btn-list {
  background-color: #fff;
  display: flex;
  gap: 26rpx;
  user-select: none;
  padding: 15rpx 26rpx 0rpx;
  height: 126rpx;
  .btn {
    flex: 1;
    flex-shrink: 0;
    height: 78rpx;
    border-radius: 8rpx;
    font-weight: 400;
    font-size: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .quxiao {
    border: 1rpx solid #999999;
    color: #333333;
  }
  .primary {
    color: #ffffff;
    background: #1f7cff;
  }
}
.form-box {
  min-height: 158rpx;
  background: #ffffff;
  //   border: 2rpx solid #f00;
  padding: 0 32rpx;
  .form-item-box {
    display: flex;
    align-items: center;
    padding: 26rpx 0 18rpx;
    border-bottom: 2rpx solid #f8f8f8;
    position: relative;
    &:last-child {
      border-bottom: none;
    }
    .icon-boxx {
      position: absolute;
      right: -26rpx;
      top: 28rpx;
    }
    .form-box-txt {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #333333;
      //   height: 100%;
      line-height: 42rpx;

      width: 230rpx;
      flex-shrink: 0;
    }
    .form-box--arae {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-weight: 400;
      font-size: 30rpx;
      color: #333333;
      flex: 1;
      padding-right: 20rpx;
      &.classification {
        color: #999;
      }
    }
  }
}
.mustBox {
  &::after {
    content: "*";
    color: #f00;
    padding-left: 10rpx;
  }
}
.placeholder-class {
  width: 100%;
  font-weight: 400;
  font-size: 30rpx;
  color: #333333;
  text-align: right;
  padding: 0rpx 0rpx 0rpx 15rpx;
  /deep/.uni-input-placeholder {
    color: #999;
  }
}
.mr-t {
  margin-top: 26rpx;
}
</style>
