<template>
  <view>
    <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="bg-fff u-p-30" >
        <view class="u-m-b-16">已有标签</view>
        <view class="u-flex ">
          <view class="tags overflow">
            <view v-for="item in computedModelingTaskLabelList"  class="tag active">
              {{item.labelName}}
            </view>
          </view>
          <view class="u-p-l-20">
            <u-input v-model="key" @confirm="enter" placeholder="选择或输入标签"></u-input>
          </view>
        </view>
      </view>
      <view class="u-p-30">
        <view class="u-m-b-20">可选标签</view>
        <view class="">
          <view class="tag u-p-l-42 u-p-r-42" v-for="item in materialLabelList"
                :class="[computedModelingTaskLabelIds.indexOf(item.materialLabelId) > -1 ? 'active':'']"
                @click="triggerClick(item)">
            {{item.labelName}}
          </view>
        </view>

      </view>
    </view>
    <view class="footer" id="footer">
<!--      <view class="u-flex">-->
<!--        <view class="u-flex-1"></view>-->
<!--        <view class="custom-style-round-circle custom-style-btn custom-style dialog-btn">-->
<!--          <view class="custom-style-right" @click="submitLabel">确定</view>-->
<!--        </view>-->
<!--      </view>-->
      <view class="u-p-t-18 u-p-r-30 u-p-b-18 u-p-l-30">
        <view class="u-flex">
          <view class="u-flex-1"></view>
          <view class="custom-style-round-circle custom-style-btn custom-style dialog-btn u-m-r-20 ">
            <view class="custom-style-right cancel" @click="$Router.back()">取消</view>
          </view>
          <view class="custom-style-round-circle custom-style-btn custom-style dialog-btn">
            <view class="custom-style-right" @click="submitLabel">确定</view>
          </view>
        </view>
      </view>
    </view>

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

<script>
import dom from "../../mixins/dom";
export default {
  name: "tags",
  mixins: [dom],
  data(){
    return {
      key: '',
      id: '',
      detail:{
        clothRowColourQuantity: 0, // 布行指定面料颜色数量
        clothWidth: 0, // 门幅
        clothWidthUnit: 'cm', // 	门幅单位
        component: '', // 成分
        // designAgencyColourQuantity: '', // 	设计机构提供的颜色数量
        expirationDate: '', // 截止日期
        materialName: '', // 面料名称
        modelingCategoryId: '', // 建模品类id
        modelingCategoryText: '', // 建模品类文本
        modelingTaskColourDTOList: [], // 布行指定面料颜色名称集合
        modelingTaskPictureDTOList: [
          {pictureType: 1},
          {pictureType: 2},
        ], // 建模单 图片信息
        price: 0,
        modelingTaskSampleInformation: {},
        modelingTaskMaterialColourList: [],
        modelingTaskLabelList: [] ,   // 建模任务的标签
        modelingTaskReviewerList: [] , // 历史评论
      },
      materialLabelList: [],
    }
  },
  computed:{
    // selectedTagIdList(){
    //   return this.detail.modelingTaskLabelList.map((item) => item.id);
    // },
    // computedMaterialLabelList(){
    //   return this.materialLabelList.filter((item) => !item.isDeleted && this.selectedTagIdList.indexOf(item.id) === -1)
    // },
    computedModelingTaskLabelList(){
      return this.detail.modelingTaskLabelList.filter((item) => !item.isDeleted)
    },
    computedModelingTaskLabelIds(){
      return this.computedModelingTaskLabelList.map((item) => item.materialLabelId);
    }
  },
  onLoad({id}){
    this.labelListTo();

    if(id){
      this.id = id;
      this.getDetail(id)
    }
  },
  methods:{
    enter(value){
      // let data = {
      //   createTime: "2021-12-31 16:45:43",
      //   createUser: "钱星",
      //   enterpriseId: 26,
      //   id: 4,
      //   isDeleted: false,
      //   labelName: "11",
      //   labelType: 0,
      //   updateTime: "",
      //   updateUser: "",
      // }
      // this.materialLabelList.push(data);
      // let { id ,...other} = data;
      // this.detail.modelingTaskLabelList.push({
      //   ...other,
      //   materialLabelId: data.id,
      //   modelingTaskId: this.detail.id
      // })
      this.$http("materialLabel.save",{
        "labelName": value,
        "labelType": 0
      }).then(res =>{
         let {
           code, data,msg
         } = res;
         if(code === 200){
           this.materialLabelList.push(data);
           let { id ,...other} = data;
           this.this.detail.modelingTaskLabelList.push({
             ...other,
             materialLabelId: data.id,
             modelingTaskId: this.id
           })
         }else{
           this.$refs.uToast.show({
             title: msg
           })
           this.labelListTo();
         }
      })
    },
    triggerClick(item){
      let list = this.detail.modelingTaskLabelList;
      let $Item = list.find(($i) => $i.materialLabelId === item.materialLabelId);
      // debugger
      if($Item){
        if($Item.id){
          this.$set($Item,'isDeleted',true)
        }else{
          let index = this.detail.modelingTaskLabelList.findIndex(($v) => $v === $Item)
          if(index > -1){
            this.detail.modelingTaskLabelList.splice(index,1)
          }
        }
      }else{
        this.detail.modelingTaskLabelList.push(item)
      }
    },
    submitLabel(){
      // console.log(this.detail.modelingTaskLabelList)

      this.$http("modeling.saveOrUpdateLabel",  this.detail.modelingTaskLabelList)
        .then(res =>{
              let {
                code, data,msg
              } = res;
              if(code === 200){

              }
        })
    },
    labelListTo(){
      this.$http("materialLabel.list",{
        isDeleted: 0
      }).then(res =>{
        let {
          code, data
        } = res;
         if(
             code === 200
         ){
           this.materialLabelList = data.platformLabel.map(($item) => {
             let { id, ...item} = $item;
             return {
               ...item,
               materialLabelId: id,
               modelingTaskId: this.id
             }
           });
           // console.log(this.materialLabelList)
         }
      })
    },
    getDetail(id){
      this.$http("modeling.detail",{ modelingTaskId:id })
          .then(res => {
            let {
              code, data
            } = res;
            if(code === 200){
              this.detail = Object.assign({},data,{
                modelingCategoryText: data['modelingCategory']['name'],
                modelingTaskColourDTOList: data['modelingTaskColourList'],
                modelingTaskPictureDTOList: data['modelingTaskPictureList']
              });
            }
          })
    },
  }
}
</script>

<style scoped lang="scss">
.bg-fff{
  background: #fff;
}
.dialog-btn{
  width: 160rpx;
  height: 64rpx;
}
.overflow{
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: scroll;
}
.tags{
  max-width: 80%;
}

.tag{
  border-radius: 32rpx;
  color: #818181;
  background: #e4e4e4;
  display: inline-block;
  min-width: 100rpx;
  text-align: center;
  line-height: 64rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  &.active{
    color: #b89874;
    background: #efe8e0;
  }
}
.body{
  background: #f4f4f4;
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow-y: auto;
}
.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;
  }
}

@mixin vue-flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-direction: $direction;
  /* #endif */
}
.custom-style{
  color: #fff; height: 88rpx; line-height: 88rpx;
  @include vue-flex;
  &-btn{
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.80);
  }
  &-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;
  }
  .cancel{
    font-size: 34rpx;
    color: rgba(0,0,0,0.80);
    background: #fff;
  }
  .submit{
    font-weight: 500;
    font-size: 34rpx;
    .desc{
      font-size: 20rpx;
      .color{
        color: #DDA973;
      }
    }
  }
}

</style>
