<!--款式委托 拆弹-->
<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.designRequirementsDTOList" :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>
      <view class="button-plain"  @click="addBrandList">
        +添加风格
      </view>
    </view>

    <u-select
        label-name="name"
        value-name="id"
        @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>
    <!--提示-->
    <u-toast ref="uToast" />
    <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="saveData">保存</view>
          <view class="custom-style-right submit" @click="submitData">
            <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: {
        // "id": 1, //委托单id
        // "materialId": 1, //面料id
        // "fileCode": "", //面料主图code
        designRequirementsDTOList: [

        ],
      },
    }
  },
  async onLoad({id}) {
    await this.getStyleTreeList();
    this.getItemMsg(id);

  },
  computed:{
    mdmMaterial(){
       return this.detail
    }
  },
  methods:{
    // 显示删除模态框
    showDelModal(index){
      this.modal.show = true;
      this.activeIndex = index;
    },
    // 显示删除模态框
    modalConfirm(){
      this.delItem(this.activeIndex);
    },
    delItem(index){
      this.detail.orderTicketStyleRequirementsVOList.splice(index,1);
    },
    filterStyleNameById(id){
      /**
       *  回填品类 显示 string => []
       *  @param data
       *  @param value
       *  @return [Array]
       * */
      function filterCategory(data,value){
        let res = [];
        function filters(data,value,parent = []){
          for (let i = 0; i < data.length; i++) {
            if(data[i].id == value){
              res = [].concat(parent,data[i])
            }else{
              if(data[i].children && data[i].children.length > 0){
                filters(
                    data[i].children,
                    value,
                    parent.concat(data[i])
                )
              }
            }
          }
        }
        filters(data,value)
        return res;
      }
       return filterCategory(this.brandSelectList,id).map((item) =>{
         return item.name
       }).join("｜")
    },
    getItemMsg(id){
      this.detail.id = id;
      this.$http("orderTicket.detail", id).then(res =>{
        let {
          code, data
        } = res;
        if(code === 200){
          this.detail = {
            designRequirementsDTOList: data.orderTicketStyleRequirementsVOList.map((item) =>{
              return {
                ...item,
                name: this.filterStyleNameById(item.styleId)
              }
            }),
            id: data.id,
            materialId: data.mdmMaterialId,
          }
        }
      })
    },
    addBrandList(){
      this.brandSelectShow = true;
    },

    brandSelectCallback(e){
      this.detail.designRequirementsDTOList.push({
        quantity: 0,
        styleId: e[e.length - 1].value,
        isDeleted: false,
        name: e.map((item) => {
          return item.label
        }).join("｜")
      })
    },
    toBack(){
      this.$Router.back();
    },
    toast(msg,callback){
      this.$refs.uToast.show({
        title: msg,
        callback: ()=>{
          callback && callback();
        }
      });
    },
    submit(operationType){
      this.$http("orderTicket.split",{
        ...this.detail,
        operationType
      }).then(res => {
         // this.$Router.back();
        let {
          code, msg
        } = res;
        if(code === 200){
          this.toast(msg,()=>{
            this.toBack();
          })
        }else{
          this.toast(msg)
        }
      })
    },
    submitData(){
      this.submit(2)
    },
    saveData(){
      this.submit(1)
    },
  }
}
</script>

<style scoped lang="scss">
@mixin vue-flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-direction: $direction;
  /* #endif */
}
.button-plain{
  text-align: center;
  color: #DDA973;
  line-height: 88rpx;
}
.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>