<!--款式委托 拆弹-->
<template>
  <view>
    <!--navbar-->
    <u-navbar title="拆单"
              :border-bottom="false"
              :background="{backgroundColor: 'whitesmoke'}">
    </u-navbar>

    <view class="u-p-30 bg-fff">
      <hs-tip-title title="所选面料"></hs-tip-title>
      <view >
        <hs-material-thumbnail :item="mdmMaterial"></hs-material-thumbnail>
      </view>
    </view>
    <view class="u-p-30 bg-fff">
      <hs-tip-title title="风格款数要求"></hs-tip-title>
      <view v-for="(item,index) in detail.orderTicketStyleRequirementsVOList" :key="index" class="u-p-t-16 u-p-b-30 u-border-bottom">
        <view class="u-flex u-p-b-16">
          <view class="u-line-1 u-flex-1">
            {{item.name}}
          </view>
          <text class="del" @click="showDelModal(index)">删除</text>
        </view>
        <u-number-box v-model="item.quantity"></u-number-box>
      </view>
      <u-button plain @click="addBrandList"  type="primary">+添加风格</u-button>
    </view>

    <u-select
        @confirm="brandSelectCallback"
        safe-area-inset-bottom v-model="brandSelectShow" :list="brandSelectList" mode="mutil-column-auto"></u-select>
    <!-- 删除风格款数模态框 -->
    <u-modal v-model="modal.show" :content="modal.content"  @confirm="modalConfirm" ></u-modal>

    <view class="footer" id="footer">
      <view class="footer-btn">
        <view class="custom-style-round-circle custom-style-btn custom-style">
          <view class="custom-style-left save" @click="save">保存</view>
          <view class="custom-style-right submit" @click="submit">
            <view class="title">立即发布</view>
            <view class="desc">将被拆分为<text class="color">2个委托</text></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import styleTree from "./mixins/styleTree"
import HsTipTitle from "../../components/hs-tip-title/hs-tip-title";
export default {
  name: "splitItem",
  components: {HsTipTitle},
  mixins:[styleTree],
  data(){
    return{

      modal:{
        show: false,
        content: "确认删除?"
      },
      brandSelectShow: false,
      timePickerShow: true,
      activeIndex: -1,
      brandSelectList: [],
      detail: {
        orderTicketStyleRequirementsVOList: [

        ],
      },
    }
  },
  onLoad({id}) {
    this.getItemMsg(id);
    this.getStyleTreeList();
  },
  computed:{
    mdmMaterial(){
       return {
          name: this.detail.mdmMaterialName,
          ...this.detail,
          // name: item.mdmMaterialName,
      }
    }
  },
  methods:{
    // 显示删除模态框
    showDelModal(index){
      this.modal.show = true;
      this.activeIndex = index;
    },
    // 显示删除模态框
    modalConfirm(){
      this.delItem(this.activeIndex);
    },
    delItem(index){
      this.detail.orderTicketStyleRequirementsVOList.splice(index,1);
    },
    getItemMsg(id){
      this.$http("orderTicket.detail",1).then(res =>{
        let {
          code, data
        } = res;

      })
    },
    addBrandList(){
      this.brandSelectShow = true;
    },

    brandSelectCallback(e){
      this.brandList.push({
        num: 0,
        name: e.map((item) => {
          return item.label
        }).join("｜")
      })
    },
    submit(){

    },
    save(){

    },
  }
}
</script>

<style scoped lang="scss">
@mixin vue-flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-direction: $direction;
  /* #endif */
}
.del{
  color: #FA5353;
}
.bg-fff{
  background: #fff;
}
.custom-style{
  color: #fff; height: 88rpx; line-height: 88rpx;
  @include vue-flex;
  &-btn{
    overflow: hidden;
  }
  &-round-circle{
    border-radius: 100rpx;
  }
  /*background: #000;*/
  .custom-style-left{ width: 240rpx; background: #d6d6d6; text-align: center }
  .custom-style-right{ flex: 1; background: rgba(0,0,0,0.80);text-align: center}
  .save{
    font-size: 34rpx;
    color: #000000;
  }
  .submit{
    font-weight: 500;
    font-size: 34rpx;
    line-height: 100%;
    .title{
      margin: 8rpx 0;
    }
    .desc{

      font-size: 20rpx;
      .color{
        color: #DDA973;
      }
    }
  }
}
.footer {
  position: fixed;
  width: 100%;
  bottom: 0;

  z-index: 998;
  background: #fff;
  box-shadow: 0px -4rpx 6rpx 0px rgba(178,182,214,0.10);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .footer-btn{
    padding: 20rpx 60rpx;
  }
}
</style>
