<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.num" :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.brandList" :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.num"></u-number-box>
        </view>
        <view class="brandList-tip u-m-t-20 u-m-b-20">
          需求款式总数  {{total}}款
        </view>
        <u-button plain @click="addBrandList"  type="primary">+添加风格</u-button>
      </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.date" @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.brand"></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.desc"></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">保存</view>
          <view class="custom-style-right submit">
            <view class="title">立即发布</view>
          </view>
        </view>
      </view>
    </view>
    <!--风格款数选择-->
    <u-select
        @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 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},
  data(){
    return{
      timePickerShow: false,
      brandSelectShow: false,
      colorPickerShow: false,
      modal:{
        show: false,
        content: "确认删除?"
      },
      activeIndex: -1,
      detail:{
        num: 12,
        brandList: [
          {name: '男装｜上装｜25～35岁｜时尚休闲', num: 12},
          {name: '男装｜上装｜15～25岁｜时尚休闲时尚休闲时', num: 12},
        ],
        colors: [],
        date: "2020-02-12",
        brand: "",
        desc: "",
      },
      brandSelectList: [
        {
          value: 1,
          label: '男装',
          children: [
            {
              value: 11,
              label: '上装',
              children:[
                {
                  value: 21,
                  label: '18-25岁',
                  children:[
                    {
                      value: 31,
                      label: '时尚休闲',
                    },
                    {
                      value: 32,
                      label: '运动',
                    }
                  ]
                },
                {
                  value: 22,
                  label: '25-35岁',
                  children:[
                    {
                      value: 33,
                      label: '时尚休闲',
                    },
                    {
                      value: 34,
                      label: '运动',
                    }
                  ]
                },
              ]
            }
          ]
        }
      ],
      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.colors || [])
                .map(($item) => {
                  return $item.id
                })
                .indexOf(item.id) > -1
          }
        }
      })
    },
    // 选中的颜色id List
    activeColorIds(){
      return this.detail.colors.map((item) =>{
        return item.id
      });
    },
    // 选中的颜色id List
    activeColorText(){
      return this.detail.colors.map((item) =>{
        return item.colour
      }).join("｜");
    },
    // 最小颜色长度
    minColorsLength(){
      return this.detail.colors.length
    },
    // 风格款数 总数
    total(){
      return this.detail.brandList
        .filter((item) =>{
          return item.isDeleted !== true
        })
        .reduce((total,currentValue) =>{
          return total + currentValue.num;
        },0)
    }
  },
  created() {
    // 获取颜色组
    this.getColors();
  },
  mounted() {
    this.uGetRect("#footer").then(res =>{
      this.footerHeight = res.height;
    })
    this.uGetRect("#header").then(res =>{
      this.headerHeight = res.height;
    })
  },
  methods:{
    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.colors = []
    },
    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.colors.findIndex((item) => {
          return item.id === treeItem.id
        });
        if(index > -1){
          this.detail.colors.splice(index,1)
        }else {
          this.detail.colors.push(treeItem);
        }
        // this.detail.colors.push(treeItem);
        // console.log(treeItem)
      }else{
        this.colorDialog.levels.push(index);
      }
    },
    colorDialogLevelPop(){
      this.colorDialog.levels.pop();
    },
    getColors(){
      this.colors = [
        {
          "id": 1,
          "colourGroup": "黑色",
          "colour": "土黑色",
          "colourCode": "101",
          "selfCode": "bm101",
          "pantoneEncode": "Black A"
        },
        {
          "id": 2,
          "colourGroup": "黑色",
          "colour": "煤黑色",
          "colourCode": "102",
          "selfCode": "bm102",
          "pantoneEncode": "Black B"
        },
        {
          "id": 3,
          "colourGroup": "黑色",
          "colour": "炭黑色",
          "colourCode": "103",
          "selfCode": "bm103",
          "pantoneEncode": "Black C"
        },
        {
          "id": 4,
          "colourGroup": "黑色",
          "colour": "古铜黑",
          "colourCode": "104",
          "selfCode": "bm104",
          "pantoneEncode": "Black B"
        },
        {
          "id": 5,
          "colourGroup": "黑色",
          "colour": "铁黑色",
          "colourCode": "105",
          "selfCode": "bm105",
          "pantoneEncode": "Black B"
        },
        {
          "id": 6,
          "colourGroup": "黑色",
          "colour": "橄榄黑",
          "colourCode": "106",
          "selfCode": "bm106",
          "pantoneEncode": ""
        },
        {
          "id": 7,
          "colourGroup": "黑色",
          "colour": "棕黑色",
          "colourCode": "107",
          "selfCode": "bm107",
          "pantoneEncode": ""
        },
        {
          "id": 8,
          "colourGroup": "黑色",
          "colour": "青黑色",
          "colourCode": "108",
          "selfCode": "bm108",
          "pantoneEncode": ""
        },
        {
          "id": 9,
          "colourGroup": "黑色",
          "colour": "深黑色",
          "colourCode": "109",
          "selfCode": "bm109",
          "pantoneEncode": "潘通色号3"
        },
        {
          "id": 10,
          "colourGroup": "蓝色",
          "colour": "土蓝色",
          "colourCode": "201",
          "selfCode": "bm201",
          "pantoneEncode": "Black A"
        },
        {
          "id": 11,
          "colourGroup": "蓝色",
          "colour": "煤蓝色",
          "colourCode": "202",
          "selfCode": "bm202",
          "pantoneEncode": "Black B"
        },
        {
          "id": 12,
          "colourGroup": "蓝色",
          "colour": "炭蓝色",
          "colourCode": "203",
          "selfCode": "bm203",
          "pantoneEncode": "Black C"
        },
        {
          "id": 13,
          "colourGroup": "蓝色",
          "colour": "古铜蓝",
          "colourCode": "204",
          "selfCode": "bm204",
          "pantoneEncode": "Black B"
        },
        {
          "id": 14,
          "colourGroup": "蓝色",
          "colour": "铁蓝色",
          "colourCode": "205",
          "selfCode": "bm205",
          "pantoneEncode": "Black B"
        },
        {
          "id": 15,
          "colourGroup": "蓝色",
          "colour": "橄榄蓝",
          "colourCode": "206",
          "selfCode": "bm206",
          "pantoneEncode": ""
        },
        {
          "id": 16,
          "colourGroup": "蓝色",
          "colour": "棕蓝色",
          "colourCode": "207",
          "selfCode": "bm207",
          "pantoneEncode": ""
        },
        {
          "id": 17,
          "colourGroup": "蓝色",
          "colour": "青蓝色",
          "colourCode": "208",
          "selfCode": "bm208",
          "pantoneEncode": ""
        },
        {
          "id": 18,
          "colourGroup": "蓝色",
          "colour": "深蓝色",
          "colourCode": "209",
          "selfCode": "bm209",
          "pantoneEncode": "潘通色号3"
        },
        {
          "id": 19,
          "colourGroup": "绿色",
          "colour": "土绿色",
          "colourCode": "301",
          "selfCode": "bm301",
          "pantoneEncode": "Black A"
        },
        {
          "id": 20,
          "colourGroup": "绿色",
          "colour": "煤绿色",
          "colourCode": "302",
          "selfCode": "绿色",
          "pantoneEncode": "Black B"
        },
        {
          "id": 21,
          "colourGroup": "绿色",
          "colour": "炭绿色",
          "colourCode": "303",
          "selfCode": "bm303",
          "pantoneEncode": "Black C"
        },
        {
          "id": 22,
          "colourGroup": "绿色",
          "colour": "古铜绿",
          "colourCode": "304",
          "selfCode": "bm30",
          "pantoneEncode": "Black B"
        },
        {
          "id": 23,
          "colourGroup": "绿色",
          "colour": "铁绿色",
          "colourCode": "305",
          "selfCode": "bm305",
          "pantoneEncode": "Black B"
        },
        {
          "id": 24,
          "colourGroup": "绿色",
          "colour": "橄榄绿",
          "colourCode": "306",
          "selfCode": "bm306",
          "pantoneEncode": ""
        },
        {
          "id": 25,
          "colourGroup": "绿色",
          "colour": "棕绿色",
          "colourCode": "307",
          "selfCode": "bm307",
          "pantoneEncode": ""
        },
        {
          "id": 26,
          "colourGroup": "绿色",
          "colour": "青绿色",
          "colourCode": "308",
          "selfCode": "bm308",
          "pantoneEncode": ""
        },
        {
          "id": 27,
          "colourGroup": "绿色",
          "colour": "深绿色",
          "colourCode": "309",
          "selfCode": "bm309",
          "pantoneEncode": "潘通色号3"
        },
        {
          "id": 28,
          "colourGroup": "红色",
          "colour": "土红色",
          "colourCode": "401",
          "selfCode": "bm401",
          "pantoneEncode": "Black A"
        },
        {
          "id": 37,
          "colourGroup": "白色",
          "colour": "乳白色",
          "colourCode": "501",
          "selfCode": "bm501",
          "pantoneEncode": "Black A"
        },
        {
          "id": 43,
          "colourGroup": "其他色",
          "colour": "迷彩色",
          "colourCode": "601",
          "selfCode": "bm601",
          "pantoneEncode": "Black A"
        },
        {
          "id": 29,
          "colourGroup": "红色",
          "colour": "煤红色",
          "colourCode": "402",
          "selfCode": "bm402",
          "pantoneEncode": "Black B"
        },
        {
          "id": 38,
          "colourGroup": "白色",
          "colour": "奶白色",
          "colourCode": "502",
          "selfCode": "bm502",
          "pantoneEncode": "Black B"
        },
        {
          "id": 44,
          "colourGroup": "其他色",
          "colour": "扎染色",
          "colourCode": "602",
          "selfCode": "bm602",
          "pantoneEncode": "Black B"
        },
        {
          "id": 30,
          "colourGroup": "红色",
          "colour": "炭红色",
          "colourCode": "403",
          "selfCode": "bm403",
          "pantoneEncode": "Black C"
        },
        {
          "id": 39,
          "colourGroup": "白色",
          "colour": "银白色",
          "colourCode": "503",
          "selfCode": "白色",
          "pantoneEncode": "Black C"
        },
        {
          "id": 45,
          "colourGroup": "其他色",
          "colour": "其他色",
          "colourCode": "603",
          "selfCode": "bm603",
          "pantoneEncode": "Black C"
        },
        {
          "id": 31,
          "colourGroup": "红色",
          "colour": "古铜红",
          "colourCode": "404",
          "selfCode": "bm404",
          "pantoneEncode": "Black B"
        },
        {
          "id": 40,
          "colourGroup": "白色",
          "colour": "苍白色",
          "colourCode": "504",
          "selfCode": "bm504",
          "pantoneEncode": "Black B"
        },
        {
          "id": 46,
          "colourGroup": "其他色",
          "colour": "水洗色",
          "colourCode": "604",
          "selfCode": "bm604",
          "pantoneEncode": "Black B"
        },
        {
          "id": 32,
          "colourGroup": "红色",
          "colour": "铁红色",
          "colourCode": "405",
          "selfCode": "bm405",
          "pantoneEncode": "Black B"
        },
        {
          "id": 41,
          "colourGroup": "白色",
          "colour": "葱白色",
          "colourCode": "505",
          "selfCode": "bm505",
          "pantoneEncode": "Black B"
        },
        {
          "id": 47,
          "colourGroup": "其他色",
          "colour": "皮肤色",
          "colourCode": "605",
          "selfCode": "bm605",
          "pantoneEncode": "Black B"
        },
        {
          "id": 33,
          "colourGroup": "红色",
          "colour": "橄榄红",
          "colourCode": "406",
          "selfCode": "bm406",
          "pantoneEncode": ""
        },
        {
          "id": 42,
          "colourGroup": "白色",
          "colour": "月白红",
          "colourCode": "506",
          "selfCode": "bm506",
          "pantoneEncode": ""
        },
        {
          "id": 34,
          "colourGroup": "红色",
          "colour": "棕红色",
          "colourCode": "407",
          "selfCode": "bm407",
          "pantoneEncode": ""
        },
        {
          "id": 35,
          "colourGroup": "红色",
          "colour": "青红色",
          "colourCode": "408",
          "selfCode": "bm408",
          "pantoneEncode": ""
        },
        {
          "id": 36,
          "colourGroup": "红色",
          "colour": "深红色",
          "colourCode": "409",
          "selfCode": "bm409",
          "pantoneEncode": "潘通色号3"
        }
      ]
    },
    uGetRect(selector, all) {
      return new Promise((resolve) => {
        uni.createSelectorQuery()
            .in(this)[all ? 'selectAll' : 'select'](selector)
            .boundingClientRect((rect) => {
              if (all && Array.isArray(rect) && rect.length) {
                resolve(rect)
              }
              if (!all && rect) {
                resolve(rect)
              }
            })
            .exec()
      })
    },
    addBrandList(){
      this.brandSelectShow = true;
    },
    brandSelectCallback(e){
      this.detail.brandList.push({
        num: 0,
        name: e.map((item) => {
          return item.label
        }).join("｜")
      })
    },
    // 显示删除模态框
    showDelModal(index){
      this.model.show = true;
      this.activeIndex = index;
    },
    // 显示删除模态框
    modalConfirm(){
      this.delBrandRow(this.activeIndex);
    },
    delBrandRow(index) {
      this.detail.brandList.splice(index,1)
    },
    timePickerCallback(e){
      let {
        day,
        month,
        year,
      } = e;
      this.detail.date = [year,month,day].join("-")
    }
  }
}
</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>
