<template>
  <view>
    <!--导航栏 navbar-->
    <u-navbar :title="detail.id ? '修改委托':'新增委托'" id="header"
              :border-bottom="false"
              :background="{backgroundColor: 'whitesmoke'}">
    </u-navbar>
    <!--主体内容-->
    <view class="body" :style="{ bottom: footerHeight + 'px', top: headerHeight+ 'px'}">
      <!--所选面料-->
      <view class="u-p-30 bg-fff u-m-b-20">
        <hs-tip-title title="所选面料"></hs-tip-title>
        <view >
          <hs-material-thumbnail :item="item"></hs-material-thumbnail>
        </view>
      </view>
      <!--面料颜色要求-->
      <view class="u-p-30 u-m-b-20 bg-fff">
        <hs-tip-title title="面料颜色要求"></hs-tip-title>
        <view>
          <view class="u-border-bottom">
            <view class="u-font-28 u-m-t-18 u-m-b-8">已指定颜色</view>
            <view class="u-flex" @click="colorDialog.show = true;">
              <view class="u-line-1 u-flex-1 u-font-32 u-l-height-32">
                {{activeColorText}}
              </view>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
          <view>
            <view class="u-font-28 u-m-t-18 u-m-b-8">含指定颜色，共可用颜色数量</view>
            <view class="u-flex">
              <u-number-box v-model="detail.colourQuantity" :min="minColorsLength"></u-number-box>
            </view>
          </view>
        </view>
      </view>
      <!--风格款数要求-->
      <view class="u-p-t-30 u-p-r-30 u-p-l-30 u-m-b-20 bg-fff">
        <hs-tip-title title="风格款数要求"></hs-tip-title>
        <view v-for="(item,index) in brandList" :key="item.id" 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(item)">删除</text>
          </view>
          <u-number-box v-model="item.quantity"></u-number-box>
        </view>
        <view class="brandList-tip u-m-t-20 u-m-b-20">
          需求款式总数  <text class="u-m-l-40">{{total}}</text>款
        </view>
        <view class="u-border-top">
          <view @click="addBrandList" class="button-plain">+添加风格</view>
        </view>

      </view>
      <!--截止日期-->
      <view class="u-p-30 bg-fff">
        <hs-tip-title title="截止日期"></hs-tip-title>
        <view>
          <view class="u-font-28 u-m-t-18 u-m-b-8"></view>
          <view class="u-flex">
            <view class="u-line-1 u-flex-1 u-font-32">
              <input v-model="detail.expirationDate" @click="timePickerShow = true" readonly disabled/>
            </view>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
      <!--其他要求-->
      <view class="u-p-30 bg-fff">
        <hs-tip-title title="其他要求"></hs-tip-title>
        <view class="u-border-bottom">
          <view class="u-font-28 u-m-t-18 u-m-b-8">参考品牌(选填)</view>
          <view class="u-flex">
            <view class="u-line-1 u-flex-1 u-font-32">
              <u-input v-model="detail.referToBrand"></u-input>
            </view>
          </view>
        </view>
        <view class="u-border-bottom">
          <view class="u-font-28 u-m-t-18 u-m-b-8">其他描述(选填)</view>
          <view class="u-flex">
            <view class="u-line-1 u-flex-1 u-font-32">
              <u-input v-model="detail.otherDescribe"></u-input>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--底部按钮-->
    <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>
        </view>
      </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-picker v-model="timePickerShow" mode="time" @confirm="timePickerCallback"></u-picker>

    <!-- 删除风格款数模态框 -->
    <u-modal v-model="modal.show" :content="modal.content"  @confirm="modalConfirm" ></u-modal>

    <u-popup v-model="colorDialog.show" mode="bottom" height="100%">
      <!--导航栏 navbar-->
      <u-navbar title="颜色选择" id="header"
                :border-bottom="false"
                :background="{backgroundColor: 'whitesmoke'}">
        <template v-slot:right>
          <view class="u-p-40">
            <u-icon name="close" @click="colorDialog.show = false;"></u-icon>
          </view>
        </template>
      </u-navbar>
      <view class="body" :style="{ bottom: footerHeight + 'px', top: headerHeight+ 'px'}">
        <view class="tree">
          <view class="tree-level u-border-bottom u-flex u-p-30" v-for="(item,index) in activeColorTree" :key="item.id">
            <u-checkbox v-if="!item.children" v-model="item.checked" @change="(value) => {treeClick(item,index,true)}"></u-checkbox>
            <view class="tree-level-text u-flex" @click="treeClick(item,index)">
              {{item.colour}}
              <text class="u-m-l-75" v-if="item.colourCode">
                {{ item.colourCode}}
              </text>
              <text v-if="item.selectLength > 0" class="active-text">
                已选择{{
                  item.selectLength
                }} 条
              </text>
              <text v-if="item.selectLength > 0" class="u-m-l-53 u-flex-1 text-right u-line-1">
                {{ item.selectText }}
              </text>
            </view>
            <u-icon name="arrow-right" size="30"
                    v-if="item.children && item.children.length > 0"
                    @click="treeClick(item,index)"></u-icon>
          </view>
        </view>
      </view>
      <!--底部按钮-->
      <view class="footer">
        <view class="footer-btn">
          <view class="custom-style-round-circle custom-style-btn custom-style">
            <view class="custom-style-left save" @click="colorsReset">重置</view>
            <view class="custom-style-right submit">
              <view class="title" @click="colorsConfirm">确认</view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>

    <!--提示-->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import dom from "./mixins/dom"
import styleTree from "./mixins/styleTree"
import HsTipTitle from "../../components/hs-tip-title/hs-tip-title";
import HsMaterialThumbnail from "../../components/hs-material-thumbnail/hs-material-thumbnail";
export default {
  name: "index",
  components: {HsMaterialThumbnail, HsTipTitle},
  mixins:[dom,styleTree],
  data(){
    return{
      timePickerShow: false,
      brandSelectShow: false,
      colorPickerShow: false,
      modal:{
        show: false,
        content: "确认删除?"
      },
      activeIndex: -1,
      detail:{
        materialId: 1, // todo 主数据面料id
        fileCode: '',  // 面料主图code
        colourQuantity: 0, //可用颜色数量
        designRequirementsDTOList: [
          // {
          //   "styleId": 1, //风格要求id
          //   "quantity": 20 //风格要求款数
          // }
        ],
        colourList: [],     //选中颜色
        expirationDate: "", //截止日期
        referToBrand: "",  // 参考品牌
        otherDescribe: "", //其他描述
      },
      brandSelectList: [], // 风格 tree
      colors: [], //颜色组
      colorDialog:{
        show: false,
        levels: [0],
        selectList: [],
      },
      footerHeight: 0,
      headerHeight: 0,
      item :{}
    }
  },
  computed:{
    // 风格款数
    brandList(){
      return this.detail.designRequirementsDTOList.filter((item) => {
        return item.isDeleted === false
      })
    },
    // 总的颜色数据源
    colorTree(){
      function arr2Tree(data, id = "colourGroup") {
        const newList = [],
            map = Array.from(
                new Set(
                    data.map((item) => {
                      return item["colourGroup"];
                    })
                )
            );
        for (let i = 0; i < data.length; i++) {
          let item = data[i],
              name = item[id],
              index = map.indexOf(name);
          if (newList[index]) {
            newList[index]["children"].push(item);
          } else {
            newList.push({
              colour: name,
              children: [item]
            });
          }
        }
        return newList;
      };

      return arr2Tree(this.colors);
    },
    // 当前页选择颜色显示的内容
    activeColorTree(){
      let {
        levels
      } = this.colorDialog;
      function filter(data,levels){
        let active = [];
        function f(data,level,index){
          let {children} = data[level[index]];
          if(index === level.length - 1){
            active = children
            return;
          }else{
            index++;
            f(children,level,index)
          }
        }
        if(data.length > 0){
          f(data,levels,0)
        }
        return active;
      }
      let data = filter([{children:this.colorTree}] || [],levels);
      return data.map((item) => {
        return {
          ...item,
          ...{
            selectLength:  this.setLength(item,this.activeColorIds),
            selectText: this.setText(item,this.activeColorIds),
            checked: this.detail.colourList
                .filter((item) =>{
                  return item.isDeleted === false
                })
                .map(($item) => {
                  return $item.mdmColourId
                })
                .indexOf(item.mdmColourId) > -1
          }
        }
      })
    },
    // 选中的颜色id List
    activeColorIds(){
      return this.detail.colourList
          .filter((item) =>{
            return item.isDeleted === false
          })
          .map((item) =>{
            return item.mdmColourId
          });
    },
    // 选中的颜色id List
    activeColorText(){
      return this.detail.colourList
          .filter((item) =>{
            return item.isDeleted === false
          })
          .map((item) =>{
            return item.colour
          })
          .join("｜");
    },
    // 最小颜色长度
    minColorsLength(){
      return this.detail.colourList.length
    },
    // 风格款数 总数
    total(){
      return this.detail.designRequirementsDTOList
        .filter((item) =>{
          return item.isDeleted !== true
        })
        .reduce((total,currentValue) =>{
          return total + currentValue.quantity;
        },0)
    }
  },
  async onLoad({id,_id}) {
    // 获取颜色组
    this.getColors();
    // 获取风格数据
    await this.getStyleTreeList();
    // 获取详情
    this.item = uni.getStorageSync("_item") || {};
    if(id && id !== 'undefined'){
      this.getItemMsg(id);
    }else{
      this.detail.materialId = this.item.materialId;
      this.detail.fileCode = this.item.materialCode;
    }

    // if(_id && _id !== 'undefined'){
    //   this.getMaterialDetail(id);
    // }
  },
  mounted() {
    this.uGetRect("#footer").then(res =>{
      this.footerHeight = res.height;
    })
    this.uGetRect("#header").then(res =>{
      this.headerHeight = res.height;
    })
  },
  methods:{
    getMaterialDetail(){
      // this.$http('orderTicket.materialList', this.id).then(res => {
      //   let { code, data } = res;
      //   if (code == 200) {
      //     this.item = data.data;
      //   }
      // });
    },
    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)
              }
            }),
            colourList: data.orderTicketColourVOList.map((item) =>{
              return {
                ...item,
                ...{
                  colour : item.mdmColourName
                }
              }
            }),
            id: data.id,
            materialId: data.mdmMaterialId,
            expirationDate: data.expirationDate,
            referToBrand: data.referToBrand,
            otherDescribe: data.otherDescribe
          }
        }
      })
    },
    getColors(){
      this.$http("colors.getColors").then(res =>{
        let {
          code, data
        } = res;
        if(code === 200){
          this.colors = data.map((item) =>{
            let res = {
              ...item,
              mdmColourId: item.id
            };
            delete res.id;
            return res;
          });
        }
      })
    },


    setLength(item,target){
      if(item.children){
        return item.children.filter($item =>{
          return target.indexOf($item.mdmColourId) > -1
        }).length
      }else{
        return 0
      }
    },
    setText(item,target){
      if(item.children){
        return item.children.filter($item =>{
          return target.indexOf($item.mdmColourId) > -1
        }).map(($item) =>{
          return $item.colour
        }).join(" | ")
      }else{
        return ""
      }
    },
    colorsReset(){
      this.detail.colourList = []
    },
    colorsConfirm(){
      if(this.colorDialog.levels.length > 1){
        this.colorDialogLevelPop()
      }else{
        this.colorDialog.show = false;
      }
    },
    // 层级选择
    treeClick(treeItem,index) {
      if(this.colorDialog.levels.length > 1){
        let $list = this.detail.colourList;
        let $index = $list.findIndex(($item) => {
          return $item.mdmColourId === treeItem.mdmColourId
        });

        if($index > -1){
          let item = $list[$index];
          if(item.id){
            this.$set($list,$index,{
              ...item,
              isDeleted: !item.isDeleted,
            })
          }else{
            $list.splice($index,1)
          }
        }else{
          this.detail.colourList.push({
            ...treeItem,
            isDeleted: false
          })
        }
        this.detail.colourQuantity = this.detail.colourList.length
      }else{
        this.colorDialog.levels.push(index);
      }
    },
    colorDialogLevelPop(){
      this.colorDialog.levels.pop();
    },

    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("｜")
      })
    },
    // 显示删除模态框
    showDelModal(item){
      this.modal.show = true;
      this.activeIndex = item;
    },
    // 显示删除模态框
    modalConfirm(){
      this.delBrandRow();
    },
    delBrandRow() {
      let { id } = this.activeIndex;
      if(id){
        let $data = this.detail.designRequirementsDTOList;
        let index = $data.findIndex((item) => {
          return item === this.activeIndex
        });
        this.$set($data,index,{
          ...$data[index],
          isDeleted: true
        })
      }else{
        let index = this.brandList.findIndex((item) => {
          return item === this.activeIndex
        })
        if(index > -1){
          this.detail.designRequirementsDTOList.splice(index,1)
        }
      }
    },
    timePickerCallback(e){
      let {
        day,
        month,
        year,
      } = e;
      this.detail.expirationDate = [year,month,day].join("-")
    },
    toBack(){
      this.$Router.back();
    },
    toast(msg,callback){
      this.$refs.uToast.show({
        title: msg,
        callback: ()=>{
          callback && callback();
        }
      });
    },
    validate(){
      let {colourList,designRequirementsDTOList,expirationDate} = this.detail;
      if(!expirationDate){
        this.toast("截止日期不能为空");
        return false;
      }

      if(
          designRequirementsDTOList.filter((item) =>{
             return item.isDeleted === false
          }).length === 0
      ){
        this.toast("风格款数要求不能为空");
        return false;
      }

      if(
          colourList.filter((item) =>{
            return item.isDeleted === false
          }).length === 0
      ){
        this.toast("指定颜色数量不能为空");
        return false;
      }
    },
    submit(data){
      if(this.validate() === false) return;
      let submitStatus = this.detail.id ? "orderTicket.update":"orderTicket.save"
      this.$http(submitStatus,{
        ...data,
        ...this.detail
      }).then(res => {
         let {
           code, msg
         } = res;
         if(code === 200){
           this.toast(msg,()=>{
             this.toBack();
           })
         }else{
           this.toast(msg)
         }
      })
    },
    saveData(){
      this.submit({
        operationType: 1
      })
    },
    submitData(){
      this.submit({
        operationType: 2
      })
    }
  }
}
</script>

<style scoped lang="scss">
@mixin vue-flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-direction: $direction;
  /* #endif */
}
.u-l-height-32{
  height: 64rpx;
  line-height: 64rpx;
}
.u-m-l-75{ margin-left: 150rpx;}
.u-m-l-53{ margin-left: 108rpx;}
.del{
  color: #FA5353;
}
.bg-fff{
  background: #fff;
}
.button-plain{
  text-align: center;
  color: #DDA973;
  line-height: 88rpx;
}
.body{
  background: #fafafa;
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow-y: auto;
}
.tree {
  @include vue-flex;
  flex-wrap: wrap;

  .tree-level {
    @include vue-flex;
    width: 100%;
    font-size: 32rpx;

    .active-text{
      color: #DDA973;
    }
    .tree-level-text {
      flex: 1;
      overflow: hidden;
      .tree-level-text--selected {
        font-size: 28rpx;
        color: red;
      }
    }
  }
}
.brandList-tip{
  height: 88rpx;
  background: #fcfaf7;
  border: 1px solid rgba(68,53,37,0.10);
  border-radius: 8rpx;
  line-height: 88rpx;
  padding-left: 30rpx;
}
.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>
