<template>
  <view>
    <!--导航栏 navbar-->
    <u-navbar title="新增委托" 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></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-30 u-m-b-20 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="brandList-tip u-m-t-20 " v-if="total>0">
          需求款式总数  {{total}}款
        </view>
        <view class="u-m-t-20">
          <u-button plain @click="addBrandList"  type="primary">+添加风格</u-button>
        </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 />
            </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>
  </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,
    }
  },
  computed:{
    // 总的颜色数据源
    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 || [])
                .map(($item) => {
                  return $item.mdmColourId
                })
                .indexOf(item.mdmColourId) > -1
          }
        }
      })
    },
    // 选中的颜色id List
    activeColorIds(){
      return this.detail.colourList.map((item) =>{
        return item.mdmColourId
      });
    },
    // 选中的颜色id List
    activeColorText(){
      return this.detail.colourList.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)
    }
  },
  created() {
    // 获取颜色组
    this.getColors();
    // 获取风格数据
    this.getStyleTreeList();
  },
  mounted() {
    this.uGetRect("#footer").then(res =>{
      this.footerHeight = res.height;
    })
    this.uGetRect("#header").then(res =>{
      this.headerHeight = res.height;
    })
  },
  methods:{
    getColors(){
      this.$http("colors.getColors").then(res =>{
        let {
          code, data
        } = res;
        if(code === 200){
          this.colors = data.map((item) =>{
            return {
              ...item,
              mdmColourId: item.id
            }
          });
        }
      })
    },


    setLength(item,target){
      if(item.children){
        return item.children.filter($item =>{
          return target.indexOf($item.id) > -1
        }).length
      }else{
        return 0
      }
    },
    setText(item,target){
      if(item.children){
        return item.children.filter($item =>{
          return target.indexOf($item.id) > -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 index = this.detail.colourList.findIndex((item) => {
          return item.id === treeItem.id
        });
        if(index > -1){
          this.detail.colourList.splice(index,1)
        }else {
          this.detail.colourList.push(treeItem);
        }
        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(index){
      this.modal.show = true;
      this.activeIndex = index;
    },
    // 显示删除模态框
    modalConfirm(){
      this.delBrandRow(this.activeIndex);
    },
    delBrandRow(index) {
      this.detail.designRequirementsDTOList.splice(index,1)
    },
    timePickerCallback(e){
      let {
        day,
        month,
        year,
      } = e;
      this.detail.expirationDate = [year,month,day].join("-")
    },
    submit(data){
      this.$http("orderTicket.save",{
        ...data,
        ...this.detail
      }).then(res => {

      })
    },
    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;
}
.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>
