<template>
  <!--面料建模-->
  <view>
    <!--导航栏 navbar-->
    <view id="header">
      <u-navbar title="面料建模"
                :border-bottom="false"
                :background="{backgroundColor: 'whitesmoke'}">
      </u-navbar>
    </view>
    <!--主题内容-->
    <view class="body" :style="{ bottom: footerHeight + 'px', top: headerHeight+ 'px'}">
      <u-form :model="detail" label-position="top" ref="uForm">
        <view class="u-p-30 bg-fff u-m-b-20">
          <hs-tip-title title="面料建模"></hs-tip-title>
          <u-form-item label="面料名称" prop="materialName" required>
            <u-input v-model="detail.materialName" placeholder="请输入面料名称" />
          </u-form-item>
          <u-form-item label="建模品类" prop="modelingCategoryText" required>
            <u-input v-model="detail.modelingCategoryText" placeholder="请输入建模品类" type="select" :select-open="show" @click="show = true;"/>
          </u-form-item>
          <view class="brandList-tips u-p-t-24 u-p-r-30 u-p-b-24 u-p-l-30" >
            <view>
              项目价格<text class="u-p-l-40">{{detail.price}}元</text>
            </view>
          </view>
          <u-form-item label="面料门幅" prop="clothWidth">
            <u-number-box v-model="detail.clothWidth"></u-number-box>cm
          </u-form-item>
          <u-form-item label="面料成分" prop="component" required>
            <u-input v-model="detail.component" placeholder="请输入面料成分" />
          </u-form-item>
          <u-form-item label="面料图片" prop="modelingTaskPictureDTOList" required>
            <view class="wrap">
              <view>
                <view v-for="(item, index) in detail.modelingTaskPictureDTOList" :key="index" class="float-left ">
                  <view class="pre-item pre-item--80 u-relative" v-if="item.pictureCode" >
                    <image class="pre-item-image" :src="`${imgUrl}${item.pictureCode}`" mode="aspectFill"></image>
                    <text class="u-absolute pre-item-text text-center">{{ item.pictureType === 1 ? '正面': '反面'}}</text>
                    <view class="u-absolute pre-item-del" @click="triggerDel(index)">
                      <u-icon name="close" size="28" color="#fff"></u-icon>
                    </view>
                  </view>
                  <u-upload :custom-btn="true" :ref="`upload${index}`" :disabled="!!item.pictureCode"
                            @on-success="(data) => { uploadSuccess(data,index)}" width="160" height="160"
                            class="pre-item--80 float-left" :header="header"
                            :show-upload-list="true" :action="action" :max-count="1">
                    <view slot="addBtn" class=" slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                      <u-icon name="plus" size="60" color="#c0c4cc"></u-icon>
                    </view>
                  </u-upload>
                </view>

              </view>
            </view>
          </u-form-item>

        </view>
        <!--委托建模信息-->
        <view class="u-p-30 bg-fff u-m-b-20">
          <hs-tip-title title="委托建模信息"></hs-tip-title>
          <u-form-item label="完成期限" prop="expirationDate" required>
            <u-input v-model="detail.expirationDate" readonly @click="timePickerShow = true"/>
          </u-form-item>
          <!--指定面料颜色数量-->
          <u-form-item label="指定面料颜色数量" prop="component" required>
            <u-number-box v-model="detail.clothRowColourQuantity" @blur="addModelingTaskColourDTOList"></u-number-box>
          </u-form-item>
          <view class="brandList-tips u-p-t-24 u-p-r-30 u-p-b-24 u-p-l-30" >
            <view class="u-border-bottom u-flex u-p-b-8 ">
              <view class="u-flex-1">
                <view class="u-flex" @click="showAddColorListDialog">
                  <view class="label u-flex-1">指定面料颜色名称</view>
                  <view class="value u-width-100" >
                    {{colorListNames}}
                  </view>
                </view>
              </view>
              <u-icon name="arrow-right"></u-icon>
            </view>
            <view class="u-border-bottom u-flex u-p-b-8 ">
              <view class="label u-flex-1">设计机构提供颜色数量</view>
              <view class="value">{{designAgencyColourQuantity}}种</view>
            </view>
            <view class="u-border-bottom u-p-b-8"></view>
          </view>

        </view>
      </u-form>
    </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-toast ref="uToast" />

    <!--日期选择-->
    <u-picker v-model="timePickerShow" mode="time" @confirm="timePickerCallback"></u-picker>
    <!--面料颜色-->
    <u-popup v-model="colorListDialogOptions.show" mode="bottom" height="100%">
      <!--导航栏 navbar-->
      <u-navbar title="填写面料颜色"
                :border-bottom="false" :custom-back="() => {colorListDialogOptions.show = false}"
                :background="{backgroundColor: 'whitesmoke'}">
        <template v-slot:right>
          <view class="u-p-40">
            <u-icon name="close" @click="colorListDialogOptions.show = false;"></u-icon>
          </view>
        </template>
      </u-navbar>
      <view class="body" :style="{ bottom: footerHeight + 'px', top: headerHeight+ 'px'}">
        <view class="u-p-t-26 u-p-r-30 u-p-l-30">
          <hs-tip-title title="面料颜色名称"></hs-tip-title>
          <view v-for="(color,index) in modelingTaskColourDTOList" :key="index">

            <view class="u-font-28 u-m-t-18 u-m-b-8 required">颜色{{index+1}}</view>
            <view class="u-flex">
              <u-input v-model="color.colourName" placeholder="请输入面料颜色名称"></u-input>
            </view>
          </view>
        </view>
      </view>
      <!--底部按钮-->
      <view class="footer">
        <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">共填写{{detail.clothRowColourQuantity}}种颜色名称,请不要重名</view>
            <view class="custom-style-round-circle custom-style-btn custom-style dialog-btn">
              <view class="custom-style-right" @click="submitColors">确定</view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <!--建模品类选择-->
    <u-select mode="single-column" :list="modelingTaskCategory" v-model="show" @confirm="confirm">
    </u-select>

    <u-modal v-model="modal.show" :content="modal.content" @confirm="modelConfirm"></u-modal>
  </view>
</template>

<script>
import dom from "../../mixins/dom";
export default {
  name: "addItem",
  mixins: [dom],
  data(){
    return {
      detail:{
        clothRowColourQuantity: 0, // 布行指定面料颜色数量
        clothWidth: 0, // 门幅
        clothWidthUnit: 'cm', // 	门幅单位
        component: '', // 成分
        // designAgencyColourQuantity: '', // 	设计机构提供的颜色数量
        expirationDate: '', // 截止日期
        materialName: '', // 面料名称
        modelingCategoryId: '', // 建模品类id
        modelingCategoryText: '', // 建模品类文本
        modelingTaskColourDTOList: [], // 布行指定面料颜色名称集合
        modelingTaskPictureDTOList: [
          {pictureType: 1},
          {pictureType: 2},
        ], // 建模单 图片信息
        price: 0,
      },

      timePickerShow: false,

      action: this.$UPLOAD_URL, // 上传地址
      imgUrl: this.$IMG_URL, // 上传地址
      header:{
        'blade-auth':"Bearer " +  uni.getStorageSync("token"),
        'Authorization-Basic': "Basic c3dvcmQ6c3dvcmRfc2VjcmV0"
      },

      // 如果将某个ref的组件实例赋值给data中的变量，在小程序中会因为循环引用而报错
      colorListDialogOptions:{
        show: false
      },
      // 表单验证逻辑
      rules: {
        materialName: [
          {
            required: true,
            message: '请输入面料名称',
            // 可以单个或者同时写两个触发验证方式
            trigger: ['change','blur'],
          },
          {
            max: 20,
            message: '文字字数不能超过20字',
            // 可以单个或者同时写两个触发验证方式
            trigger: ['change','blur'],
          },
          // {
          //   rule: '',
          //   message: '请不要输入特殊符号',
          //   trigger: ['change','blur'],
          // }
        ],
        modelingCategoryText: [
          {
            required: true,
            message: '请选择面料品类',
            trigger: 'change'
          }
        ],
        component:{
          required: true,
          message: '请输入面料成分',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change','blur'],
        },
        modelingTaskPictureDTOList: {
          validator: (rule,value) =>{
            return value.filter((item) => {
              return item.pictureCode
            }).length === value.length
          },
          required: true,
          message: '请输入上传图片',
        },
        expirationDate:{
          required: true,
          message: '请选择完成期限',
        }
      },
      // 暂存用的颜色组
      modelingTaskColourDTOList: [],
      // 物料建模品类
      modelingTaskCategory: [],
      show: false,
      delModelingTaskPictureDTOList: [],
      modal:{
        show: false,
        content: '是否删除图片',
        index: '',
      }
    }
  },
  computed:{
    modelingTaskPictureDTOList(){
      return this.detail.modelingTaskPictureDTOList.filter((item) =>{
        return item.isDeleted !== true
      })
    },
    // 设计机构提供的颜色数量
    designAgencyColourQuantity(){
      return 10 - this.detail.clothRowColourQuantity
    },
    activeColors(){
      return this.detail.modelingTaskColourDTOList
          .filter((item) => item.isDeleted === false)
    },
    colorListNames(){
      return this.activeColors
          .map((item) => item.colourName).join("|")
    },

  },
  methods:{
    triggerDel(index){
      this.modal.show = true;
      this.modal.activeIndex = index;
    },
    modelConfirm(){
      this.uploadRemove(this.modal.activeIndex)
    },
    uploadRemove(index){
      let item = this.detail.modelingTaskPictureDTOList[index];
      if(item.id){
        this.delModelingTaskPictureDTOList.push(
            Object.assign({},item,{
              isDeleted: true
            })
        )
      }
      this.$set(this.detail.modelingTaskPictureDTOList,index,{pictureType: index+1});
    },
    uploadSuccess(data, index, lists, name){
      if(data.code === 200){
        let item = this.detail.modelingTaskPictureDTOList[index];
        this.$set(this.detail.modelingTaskPictureDTOList,index,{
           ...item,
          pictureCode: data.data.fileCode,
          pictureId: data.data.id,
        })
        this.$refs[`upload${index}`][0].remove(0)
      }
    },
    confirm(data){
      let { value,extra, label} = data[0];
      this.detail.modelingCategoryId = value;
      this.detail.modelingCategoryText = label;
      this.detail.price = extra;
    },
    init(){
      this.$http("modeling.category",{
        "current": 1,
        "size": 10
      })
      .then(res =>{
        let {
          code,data
        } = res;
        if(code === 200){
          this.modelingTaskCategory = data.records.map((item) =>{
            return {
              label: item.name,
              value: item.id,
              extra: item.price,
            }
          });
          // console.log(data)
        }
      })
    },
    validate(callback){
      this.$refs['uForm'].validate((res) =>{
        if (res) {
          callback()
        }
      })
    },
    saveData(){
      this.submit(0)
    },
    submitData(){
      this.validate(() =>{
        this.submit(1)
      })
    },
    submit(type){
      let {modelingTaskPictureDTOList, ...onther} = this.detail;
      this.$http("modeling.submit",Object.assign({},
          onther,
          { operationType:type, modelingTaskPictureDTOList: modelingTaskPictureDTOList.concat(this.delModelingTaskPictureDTOList)})
      ).then(res =>{

      })
    },

    getDefaultColor(){
      return { colourName: '',isDeleted: false}
    },
    addModelingTaskColourDTOList(item){
      let res = [];
      for (let i = 0; i < item.value; i++) {
        res.push(this.getDefaultColor())
      }
      this.modelingTaskColourDTOList = res;
    },
    validateColors(){
      let res = this.modelingTaskColourDTOList.map((item) => {
        return item.colourName
      });
      let diff = new Set(res)
      return diff.size === res.length;
    },
    submitColors(){
      if(this.validateColors()){
        this.detail.modelingTaskColourDTOList = this.modelingTaskColourDTOList;
        this.colorListDialogOptions.show = false;
      }else{
        this.$refs.uToast.show({
          title: '颜色名称请不要重名'
        });
      }
    },
    showAddColorListDialog(){
      this.colorListDialogOptions.show = true;
    },

    timePickerCallback(e){
      let {
        day,
        month,
        year,
      } = e;
      this.detail.expirationDate = [year,month,day].join("-")
    },
    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']
               });
               console.log(data['modelingTaskPictureList'])
               this.modelingTaskColourList = data['modelingTaskColourList']
             }
          })
    },
  },
  onLoad(options) {
    let id = options.id;
    this.init();
    if(id){
      this.getDetail(id)
    }
  },

  mounted() {
    // 得到整个组件对象，内部图片列表变量为"lists"
    // this.lists = this.$refs.uUpload.lists;

    this.$refs.uForm.setRules(this.rules);
  }
}
</script>

<style scoped lang="scss">
.u-width-100{
  width: 200rpx;
}
.dialog-btn{
  width: 160rpx;
  height: 64rpx;
}
.required::before{
  //position: absolute;
  //left: 8px;
  color: #ee0a24;
  font-size: 14px;
  content: '*';
  margin-right: 4px;
}
.float-left{
  float: left;
  margin-right: 10rpx;
}
.wrap {
  padding: 24rpx;
}

.slot-btn {
  width: 160rpx;
  height: 160rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(244, 245, 246);
  border-radius: 10rpx;
}

.slot-btn__hover {
  background-color: rgb(235, 236, 238);
}

.pre-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.pre-item {
  border-radius: 10rpx;
  //overflow: hidden;
  position: relative;
  margin-right: 30rpx;
  &-text{
    bottom: 0;
    left: 0;
    font-size: 24rpx;
    color: #333;
    width: 100%;
    background: rgba(255,255,255,.7);
  }
  &-image {
    width: 100%;
    height: 160rpx;
  }
  &--80{

    width: 160rpx;
    height: 160rpx;
    display: inline-block;
  }
  &-del{
    right: -20rpx;
    top: -20rpx;
    background: red;
    width: 40rpx;
    height: 40rpx;
    text-align: center;
    border-radius: 50%;
    line-height: 40rpx;
  }
}

@mixin vue-flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-direction: $direction;
  /* #endif */
}
.brandList-tips{
  background: #fcfaf7;
  border: 1px solid rgba(68,53,37,0.10);
  border-radius: 8rpx;
  min-height: 88rpx;
  line-height: 44rpx;
  .brandList-tip{

  }
}

.bg-fff{
  background: #fafafa;
}
.body{
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow-y: auto;
}

.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>
