<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"
              :class="[
                  detail.status >=3 && detail.status <= 7 ? 'warning':
                  [1,2].indexOf(detail.oddStatus) > -1 ? 'error': ''
              ]">
          {{ status }}
        </view>
        <text class="item-status u-flex-1 text-right">
          完工日期:{{detail.expirationDate}}
        </text>
      </view>
      <!--面料模型-->
      <view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 u-m-b-20" v-if="detail.status >= 7">
        <view class="u-border-bottom ">
          <view class="u-l-height-44 u-flex">
            <view class="u-flex-1">面料模型</view>

            <view class="lightgrey"
                  v-if="detail.status === 8"
                  @click="$Router.push({
                path: '/pages/modeling/tags',
                query: {id:detail.id}
              })">
              编辑标签
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
          <view v-if="detail.modelingTaskLabelList.length > 0" class="u-p-b-32">
            <view class="tag" v-for="(modelingTaskLabel) in detail.modelingTaskLabelList">
              {{modelingTaskLabel.labelName}}
            </view>
          </view>
        </view>
        <view class="u-m-t-18 u-p-b-18 u-border-bottom">
          <view class="u-m-r-40">指定面料颜色模型({{detail.clothRowColourQuantity}}种)</view>
          <view class="overflow">
            <view v-for="(item, index) in modelingTaskMaterialColourList_type1"
                  @click="previewImage(`${imgUrl}${item.pictureCode}`)"
                  :key="index" class="float-left">
              <view class="pre-item pre-item--80 u-relative" >
                <image class="pre-item-image" :src="`${imgUrl}${item.pictureCode}`" mode="aspectFill" ></image>
                <text class="u-absolute pre-item-text text-center">{{ item.colorCode}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="u-m-t-18 u-m-b-8">
          <view class="u-m-r-40">指定面料颜色模型({{designAgencyColourQuantity}}种)</view>
          <view class="overflow">
            <view v-for="(item, index) in modelingTaskMaterialColourList_type2"
                  @click="previewImage(`${imgUrl}${item.pictureCode}`)"
                  :key="index" class="float-left">
              <view class="pre-item pre-item--80 u-relative" >
                <image class="pre-item-image" :src="`${imgUrl}${item.pictureCode}`" mode="aspectFill" ></image>
                <text class="u-absolute pre-item-text text-center">{{ item.colorCode}}</text>
              </view>
            </view>
          </view>
        </view>
        <template v-if="detail.status === 7">
          <view class="u-m-t-18 u-m-b-8">
            <view class="u-m-r-40 label">标签<text class="color_cda475 u-font-xs">(若建模合格,则必须选择标签)</text></view>
            <view class="u-line-1 u-flex-1 content" @click="$Router.push({
                path: '/pages/modeling/tags',
                query: {id:detail.id}
              })">
              {{labelNames ? labelNames: '请选择标签'}}
            </view>
          </view>
          <view class="u-m-t-18 u-m-b-8">
            <view class="label">
              <view>
                建模评审
                <text class="color_cda475 u-font-xs">(若驳回,则必须填写意见)</text>
                <text style="float: right"
                      @click="$Router.push({
                path: '/pages/modeling/reviewHistory',
                query: {id:detail.id}
              })">
                  评审历史</text>
              </view>
            </view>
            <view class="u-line-1 u-flex-1 content">
              <u-input v-model="modelingTaskReviewer.reviewerComment" placeholder="请输入评审意见"></u-input>
            </view>
          </view>
        </template>
        <template v-if="detail.status === 8">
          <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.modelingTaskReviewerList[0] ? detail.modelingTaskReviewerList[0].reviewerComment: '无'}}
            </view>
          </view>
        </template>
      </view>
      <!--委托建模服务商-->
      <view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 u-m-b-20" v-if="detail.status >= 4">
        <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.enterpriseName}}
          </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.contactName}}
          </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" @click="callPhone(detail.contactPhone)">
            {{detail.contactPhone}}
          </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.address}}
          </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.orderTime}}
          </view>
        </view>
        <template v-if="detail.status > 4">
          <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">
              {{
                (courierList.find((item) => item.value == detail.modelingTaskSampleInformation.courier) || { label: ''}).label

              }}
            </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.modelingTaskSampleInformation.trackingNumber}}
            </view>
          </view>
        </template>
        <template v-if="detail.status === 4">
          <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">
              <u-input v-model="formData.courierText" readonly placeholder="请选择快递" type="select" :select-open="show" @click="show = true;"/>
            </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">
              <u-input v-model="formData.trackingNumber" placeholder="请选择快递" />
            </view>
          </view>
        </template>
      </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">
            {{detail.materialName}}
          </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.modelingCategoryText}}
          </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.clothWidth }}{{detail.clothWidthUnit}}
          </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.component}}
          </view>
        </view>
        <view class="u-flex u-m-t-18 u-m-b-8 u-col-top">
          <view class="u-m-r-40 label">面料图片</view>
          <view class="u-line-1 u-flex-1 content">
            <view v-for="(item, index) in detail.modelingTaskPictureDTOList"
                  @click="previewImage(`${imgUrl}${item.pictureCode}`)"
                  :key="index" class="float-left">
              <view class="pre-item pre-item--60 u-relative" >
                <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>
            </view>
          </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 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.createTime}}
          </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.releaseDate}}
          </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.expirationDate}}
          </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.price}}元
          </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 class="u-flex u-m-t-18 u-m-b-8">
          <view class="u-m-r-40 label width_300">指定面料颜色数量</view>
          <view class="u-line-1 u-flex-1 content">{{ detail.clothRowColourQuantity }}种</view>
        </view>
        <view class="u-flex u-m-t-18 u-m-b-8 align-start">
          <view class="u-m-r-40 label width_300">指定面料颜色名称</view>
          <view class="u-flex-1 content wordKeepAll">{{ colourNameList }}</view>
        </view>
        <view class="u-flex u-m-t-18 u-m-b-8">
          <view class="u-m-r-40 label width_300">设计机构提供颜色数量</view>
          <view class="u-line-1 u-flex-1 content ">{{ designAgencyColourQuantity }}种</view>
        </view>
        <view class="u-flex u-m-t-18 u-m-b-8">
          <view class="u-m-r-40 label width_300">设计机构提供颜色名称</view>
          <view class="u-flex-1 content wordKeepAll">
            {{taskColorNames}}
          </view>
        </view>
      </view>
    </view>

    <!--底部按钮-->
    <view v-if="detail.status < 8">

      <view class="footer" id="footer" >
        <view class="footer-btn">
          <!---->
          <view class="custom-style-round-circle custom-style-btn custom-style" v-if="detail.status === 4">
            <view class="custom-style-right submit">
              <view class="title" v-if="detail.status === 4" @click="sendSamples">寄样</view>
            </view>
          </view>
          <view class="custom-style-round-circle custom-style-btn custom-style" v-if="detail.status === 7">
            <view class="custom-style-left save" @click="taskConfirm(3)">驳回</view>
            <view class="custom-style-right submit" @click="taskConfirm(2)">
              <view class="title">建模合格</view>
            </view>
          </view>
          <view class="custom-style-round-circle custom-style-btn custom-style" v-if="detail.status === 3">
<!--            <view class="custom-style-left save" @click="cancel(3)">撤回</view>-->
            <view class="custom-style-right submit" @click="cancel">
              <view class="title">撤回</view>
            </view>
          </view>
        </view>

      </view>
    </view>

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

    <!--建模品类选择-->
    <u-select mode="single-column" :list="courierList" v-model="show" @confirm="confirm">
    </u-select>

  </view>
</template>

<script>

import dom from "../../mixins/dom"
import utils from "../../mixins/utils"
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,utils],
  data(){
    return {
      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: [] ,   // 建模任务的标签
      },

      imgUrl: this.$IMG_URL, // 上传地址

      formData: {
        trackingNumber: '',
        courier: '',
      },
      show: false,
      courierList: [
        { label: '顺丰', value: "0"},
        { label: 'EMS', value: "1"},
        { label: '邮政包裹', value: "2"},
        { label: '百世汇通', value: "3"},
        { label: '申通', value: "4"},
        { label: '中通', value: "5"},
        { label: '圆通', value: "6"},
        { label: '国通', value: "7"},
        { label: '韵达', value: "8"},
        { label: '天天', value: "9"},
        { label: '优速', value: "10"},
        { label: '京东', value: "11"},
        { label: '宅急送', value: "12"},
      ],
      modelingTaskReviewer:{
        isDeleted: false,
        reviewerComment: '',
      }
    }
  },
  computed:{
    labelNames(){
      return this.detail.modelingTaskLabelList
          .filter(item => item.isDeleted === false)
          .map((item) => item.labelName).join("|")
    },
    activeTaskMaterialColour(){
      return this.detail.modelingTaskMaterialColourList
          .filter((item) => item.isDeleted === false && item.type === 2)
    },
    colourNameList(){
      return this.detail.modelingTaskColourDTOList
          .map((item) => item.colourName).join("|")
    },
    taskColorNames(){
      return this.activeTaskMaterialColour
          .map((item) => item.colorName).join("|")
    },
    designAgencyColourQuantity(){
      return 10 - this.detail.clothRowColourQuantity
    },
    // 1-布行指定颜色
    modelingTaskMaterialColourList_type1(){
      return this.detail.modelingTaskMaterialColourList.filter(item => item.type === 1)
    },
    // 2-设计机构提供颜色
    modelingTaskMaterialColourList_type2(){
      return this.detail.modelingTaskMaterialColourList.filter(item => item.type === 3 )
    },
    status(){
      if([1,2].indexOf(this.detail.oddStatus) > -1){
        return ["","两天无人接单","未及时完成"][this.detail.oddStatus]
      }
      let status = ["","待发布","任务待审批","待接单","待寄样","建模中","建模待审批","待确认","已完成"]
      return status[this.detail.status];
    }
  },
  onLoad({id}){
    if(id){
      this.getDetail(id)
    }
  },
  mounted() {

  },
  methods:{
    confirm(data){
      let { value, label} = data[0];
      this.formData.courierText = label
      this.formData.courier = value
    },
    // 寄样
    sendSamples(){
      this.$http("modeling.sendSamples",{
        ...this.formData,
        modelingTaskId: this.detail.id
      }).then(res =>{
        let {
          code ,msg
        } = data;
        if(code === 200){
          this.$refs.uToast.show({
            title: msg,
            back: true
          });
        }else{
          this.$refs.uToast.show({
            title: msg
          });
        }
      })
    },
    confirmHttp(data){
      this.$http("modeling.confirm",{
        ...this.detail,
        ...data,
        modelingTaskReviewer:this.modelingTaskReviewer
      }).then(res =>{
        this.$refs.uToast.show({
          title: msg,
          back: true
        });
      })
    },
    validate(operationType,callback){
      if(operationType === 3){
        if(!this.modelingTaskReviewer.reviewerComment){
          this.$refs.uToast.show({
            title: '驳回理由不能为空'
          })
        } else{
          callback();
        }
      }else{
        if(this.detail.modelingTaskLabelList.length === 0){
          this.$refs.uToast.show({
            title: '建模标签不能为空'
          })
        } else {
          callback();
        }
      }
    },
    cancel(){
      this.$http("modeling.withdraw", {
        ...this.detail
      }).then(res =>{
        let {
          code,msg
        } = res;
        if(code === 200){
          this.$refs.uToast.show({
            title: msg,
            back: true
          });
        }else{
          this.$refs.uToast.show({
            title: msg,
          });
        }
      })
    },
    taskConfirm(operationType){

      this.validate(operationType,() =>{
        this.confirmHttp({operationType})
      })
    },
    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'],
                // modelingTaskSampleInformation:
              });
              // 委托建模服务商
              let info = data.modelingTaskSampleInformation;
              this.formData = {
                trackingNumber: info.trackingNumber,
                courier: info.courier,
                id: info.id,
                courierText: (this.courierList.find((item) => item.value == info.courier) || { label: ''}).label
              }
            }
          })
    },
  }
}
</script>

<style scoped lang="scss">
.error{
  color: #f95253;
}
.warning{
  color: rgb(95 81 64);
}

.lightgrey{
  color: lightgrey;
  font-size: 28rpx;
  line-height: 40rpx;
}
.color_e1c19d{
  color: #e1c19d;
}
.color_cda475{ color: #cda475;}

.wordKeepAll{
  word-break: keep-all;
}
.width_300{
  width: 300rpx;
}
.tag{
  display: inline-block;
  font-size: 20rpx;
  background: #e5e5e5;
  color: #747474;
  padding: 4rpx;
  margin-right: 20rpx;
}
@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;
}
.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: 120rpx;
  }
  &--60{

    width: 120rpx;
    height: 120rpx;
    display: inline-block;
  }
  &--80{

    width: 160rpx;
    height: 160rpx;
    display: inline-block;
  }
}
.float-left{ display: inline-block}

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

.overflow{
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
</style>