<template>
  <view>
    <!--导航栏 navbar-->
    <u-navbar title="委托详情" id="header"
              :border-bottom="false"
              :background="{backgroundColor: 'whitesmoke'}">
    </u-navbar>
    <!--主体内容-->
    <view class="body u-p-30" :style="{ bottom: footerHeight + 'px', top: headerHeight+ 'px'}">
      <view class="u-flex u-p-b-20">
        <view class="item-status">
          {{
            this.statusList[this.detail.status]
          }}
        </view>
        <text class="item-status u-flex-1 text-right">
          截止日期: {{this.detail.expirationDate }}
        </text>
      </view>
      <!--所选面料-->
      <view class="u-p-r-30 u-p-b-30 u-p-l-30 bg-fff u-m-b-20">
        <view class="u-l-height-44">所选面料</view>
        <view >
          <hs-material-thumbnail :item="item"></hs-material-thumbnail>
        </view>
      </view>
      <!--面料颜色要求-->
      <view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 u-m-b-20">
        <view class="u-border-bottom u-l-height-44">面料颜色要求</view>
        <view class="u-flex u-m-t-18 u-m-b-8">
          <view class="u-m-r-40 label">已指定颜色</view>
          <view class="u-line-1 u-flex-1 content">
            {{
              activeColorText
            }}
          </view>
        </view>
        <view class="u-flex u-m-t-18 u-m-b-8">
          <view class="u-m-r-40 label">可用颜色数</view>
          <view class="u-line-1 u-flex-1 content">
            {{detail.colourQuantity}}个
          </view>
        </view>
      </view>
      <!--风格款数要求-->
      <view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 u-m-b-20">
        <view class="u-border-bottom u-l-height-44">风格款数要求</view>
        <view v-for="(item,index) in brandList" :key="item.id">

          <view class="u-flex u-m-t-18 u-m-b-8">
            <view class="u-m-r-40 label">风格{{index+1}}</view>
            <view class="u-line-1 u-flex-1 content">
              {{item.name}}
            </view>
          </view>
          <view class="u-flex u-m-t-18 u-m-b-8">
            <view class="u-m-r-40 label">风格{{index+1}}款数</view>
            <view class="u-line-1 u-flex-1 content">
              {{item.quantity}}款
            </view>
          </view>
        </view>
      </view>
      <!--其他要求-->
      <view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 ">
        <view class="u-border-bottom u-l-height-44">其他要求</view>

        <view class="u-flex u-m-t-18 u-m-b-8">
          <view class="u-m-r-40 label">参考品牌</view>
          <view class="u-line-1 u-flex-1 content">
            {{
              detail.referToBrand
            }}
          </view>
        </view>
        <view class="u-flex u-m-t-18 u-m-b-8">
          <view class="u-m-r-40 label">其他描述</view>
          <view class="u-line-1 u-flex-1 content">
            {{
              detail.otherDescribe
            }}
          </view>
        </view>
      </view>
    </view>

    <!--底部按钮-->
    <view class="footer" id="footer" v-if="footerShow">
      <view class="footer-btn">
        <!--待选款 显示选款按钮 状态9 -->
        <view class="custom-style-round-circle custom-style-btn custom-style"
              v-if="this.detail.status === 9">
          <view class="custom-style-right submit" @click="submitData">
            <view class="title">选款</view>
            <view class="desc">已完成数量:<text class="color">11</text></view>
          </view>
        </view>
        <!--拆单 拆单按钮 状态 1 5 6 -->
        <view class="custom-style-round-circle custom-style-btn custom-style"
              v-if="this.detail.status === 1 || this.detail.status === 5 || this.detail.status === 6">
          <view class="custom-style-left save" @click="toBack">返回</view>
          <view class="custom-style-right submit" @click="toSplitItem">
              拆单
          </view>
        </view>
        <!--待发布 立即按钮 状态 4 -->
        <view class="custom-style-round-circle custom-style-btn custom-style"
              v-if="this.detail.status === 4">
          <view class="custom-style-left save" @click="toEditItem">编辑</view>
          <view class="custom-style-right submit" @click="submitData">
            立即发布
          </view>
        </view>
      </view>

    </view>
    <!--提示-->
    <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{
      // 1-无人接单、2-延误、3-待定超过、4-待发布、5-审核中、6-待接单、7-已接单、8-已寄样、9-待选款、10-已结束
      // 拆单 [无人接单 1、]
      // 延误 [延误 2]
      // 选款 [待定超过 3]
      // 撤回 编辑 [待发布 4]
      // 取消 拆单 [审核中 5]
      // 撤回 拆单 [待接单 6]
      // 寄样    已接单 7
      // 没有按钮 已寄样 8
      // 选款 待选款 9
      // 没有按钮 已结束 10
      statusList: ["","无人接单","延误","待定超过","待发布","审核中","待接单","已接单","已寄样","待选款","已结束"],
      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 //风格要求款数
          // }
        ],
        status: 1,
        colourList: [],     //选中颜色
        expirationDate: "", //截止日期
        referToBrand: "",  // 参考品牌
        otherDescribe: "", //其他描述
      },
      brandSelectList: [], // 风格 tree
      colors: [], //颜色组
      colorDialog:{
        show: false,
        levels: [0],
        selectList: [],
      },
      footerHeight: 0,
      headerHeight: 0,
    }
  },
  computed:{
    item(){
      // console.log(this.detail)
      return{
        materialName: this.detail.mdmMaterialName,
        materialCategory: this.detail.mdmMaterialCategory,
        materialDoorWidth: this.detail.mdmMaterialClothWidth,
        materialElement: this.detail.mdmMaterialComponent,
      }
    },
    footerShow(){
      let status = this.detail.status;
      return status !== 8 || status !== 10
    },
    // 风格款数
    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}) {
    // 获取颜色组
    this.getColors();
    // 获取风格数据
    await this.getStyleTreeList();
    // 获取详情
    if(id){
      this.getItemMsg(id);
    }

  },
  mounted() {
    this.uGetRect("#footer").then(res =>{
      this.footerHeight = res.height;
    })
    this.uGetRect("#header").then(res =>{
      this.headerHeight = res.height;
    })
  },
  methods:{
    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){
          if(Object.keys(data).length > 0){
            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,
              colourQuantity: data.colourQuantity,
              status: data.status,
              mdmMaterialName: data.mdmMaterialName,
              mdmMaterialCategory: data.mdmMaterialCategory,
              mdmMaterialClothWidth: data.mdmMaterialClothWidth,
              mdmMaterialComponent: data.mdmMaterialComponent,
            }
          }else{
            this.$refs.uToast.show({
              title: res.msg,
              callback: ()=>{
                this.toBack();
              }
            });
          }
        }
      })
    },
    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;
          });
        }
      })
    },
    // !----
    // 返回
    toBack(){
       this.$Router.back();
    },
    // 取消发布
    cancel(){
      this.$http('orderTicket.abolishByIds', [this.detail.id]).then(res => {
        let { code, data } = res;
        if (code === 200) {
          this.$refs.uToast.show({
            title: '取消成功'
          });
          this.toBack();
        }
      });
    },
    // 删除
    toDel(){
      this.$http('orderTicket.del', [this.detail.id]).then(res => {
        let { code, data } = res;
        if (code === 200) {
          this.$refs.uToast.show({
            title: '删除成功'
          });
          this.toBack();
        }
      });
    },
    // 跳转到拆单
    toSplitItem(){
      this.$Router.push({
        path: '/pages/designCommissioned/splitItem',
        query: {
          id: this.detail.id
        }
      })
    },
    // 跳转到详情 编辑
    toEditItem(){
      this.$Router.push({
        path: '/pages/designCommissioned/addItem',
        query: {
          id: this.detail.id
        }
      })
    },
    // 跳转到选款
    toSelectItem(){

    },
    // ----!
    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("-")
    },
    submit(data){
      let submitStatus = this.detail.id ? "orderTicket.update":"orderTicket.save"
      this.$http(submitStatus,{
        ...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 */
}
.label{
  color: rgba(0,0,0,0.40);
  font-size: 28rpx;
  min-width: 140rpx;
}
.context{
  color: #000;
  font-size: 28rpx;
}
.u-l-height-32{
  height: 64rpx;
  line-height: 64rpx;
}
.u-l-height-44{
  height: 88rpx;
  line-height: 88rpx;
}
.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>