<!--
  @description: 发表评价
  @Modifier: wy
  @routerPath: /personalCenter/publishEvaluation
  @date: 2022-1-5
-->
<template>
  <div class="publishEvaluation">
    <div class="nav">
      <!--当前位置-面包屑-->
      <div class="crumbs_nav_main">
        <span class="pos_title">
          <i class="iconfont icon-dizhi" />
        </span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="toBack()">
            {{ breadcrumbTitle }}
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span>发表评价</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <i class="el-icon-close pointer" title="关闭详情" style="font-size:20px;" @click="closePage" />
    </div>
    <div class="main-content">
      <el-row>
        <el-col class="table-title">
          <span>订单号: 121323213</span>
          <span>2022-1-5 18:00</span>
        </el-col>
      </el-row>
      <el-row class="logisticsServerRate">
        <el-col :span="6" class="flex-col border-r">
          <img src="@/assets/img/shopmall/rose.png" width="32px" alt="">
          <span class="margin-l-15">物流服务评价</span>
        </el-col>
        <el-col :span="6" class="flex-col">
          <span class="flex-span">
            <span class="margin-r-15">快递包装</span>
            <el-rate
              v-model="formData.expressPackaging"
              show-score
              score-template="{value}分"
            />
          </span>
        </el-col>
        <el-col :span="6" class="flex-col">
          <span class="flex-span">
            <span class="margin-r-15">送货速度</span>
            <el-rate
              v-model="formData.deliverySpeed"
              show-score
              score-template="{value}分"
            />
          </span>
        </el-col>
        <el-col :span="6" class="flex-col">
          <span class="flex-span">
            <span class="margin-r-15">配送员服务</span>
            <el-rate
              v-model="formData.distributorSpeed"
              show-score
              score-template="{value}分"
            />
          </span>
        </el-col>
      </el-row>
      <el-row v-for="(item, index) in formData.skuAssessVo" :key="item.id" :class="['skuAssessVo', index !== 0 ? 'border-top-transparent' : '']">
        <el-col :span="6" class="flex-col">
          <div class="shop-img margin-b-15" @click="goToDetail(item)">
            <img :src="item.productPicture" alt="" width="75px" height="75px">
          </div>
          <div class="shop-name margin-b-15" @click="goToDetail(item)" v-text="item.productName" />
          <div class="shop-price" @click="goToDetail(item)" v-text="'￥' + item.productPrice" />
        </el-col>
        <el-col :span="18" class="border-l">
          <div class="flex-div padding-t-30 padding-l-30">
            <span class="margin-r-15">商品评分</span>
            <el-rate
              v-model="item.expressPackaging"
              show-score
              score-template="{value}分"
            />
          </div>
          <div class="productAssess padding-l-30">
            <div class="margin-b-15">
              商品评价
            </div>
            <el-input
              v-model="item.productAssess"
              :rows="3"
              type="textarea"
              placeholder="请留下您的评论以便我们更好的为您服务"
              show-word-limit
              style="width:80%"
              maxlength="500"
              :autosize="{ minRows: 3, maxRows: 3}"
            />
          </div>
          <!--     上传图片此处不完善，后期需与后端协调新增字段     -->
          <div class="padding-l-30">
            <upload
              ref="upload"
              list-type="picture"
              :limit="9"
              :on-change="supplierFileChange"
              :data="supplierFileType"
              :file-list="fileList"
              :auto-delete="true"
              :auto-upload="true"
              file-ref="supplierFileRef"
              but-text="图片上传"
              :title="''"
              accept="image/jpg,image/jpeg,image/png"
              :class="{ 'showDeleteBtn': editFlag }"
            />
          </div>
        </el-col>
      </el-row>
      <el-row class="margin-t">
        <el-col :span="2" :offset="11">
          <gx-button @click="ensure">
            发表评价
          </gx-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getAssessInfo } from '@/api/shoppingmall/order'
/* 公共组件*/
import upload from '@comp/common/updownload/upload'
import { orderAssess } from '../../../../api/shoppingmall/order'
// 文件上传组件
export default {
  name: 'PublishEvaluation',
  components: {
    upload
  },
  data() {
    return {
      formData: {
        expressPackaging: 0, // 快递包装
        deliverySpeed: 0, // 送货速度
        distributorSpeed: 0, // 配送员服务
        orderId: '',
        skuAssessVo: [{
          orderDetailId: '',
          productAssess: '',
          productMark: 5
        }]
      },
      status: '',
      skuAssessVo: [], // 商品信息
      fileList: [],
      supplierFileType: {
        bizId: '', // 业务主键Id
        fileType: 'ds_supllier_log' // 文件类型
      },
      // 是否上传图片
      imgFlag: false,
      editFlag: true
    }
  },
  computed: {
    // 面包屑标题
    breadcrumbTitle() {
      return '电商直采'
    }
  },
  mounted() {
    this.getOrderAssessInfo(this.$route.query.id, this.$route.query.status)
  },
  methods: {
    supplierFileChange(file, fileList) {
      fileList.length > 0 ? this.imgFlag = true : this.imgFlag = false
    },
    // 面包屑跳转
    toBack() {
      const type = { path: this.$route.query.from, query: { menuIndex: this.$route.query.menuIndex }}
      return type
    },
    // 点右上角关闭时跳转
    closePage() {
      this.$router.push(this.toBack())
    },
    getOrderAssessInfo(id, status) {
      if (status === '00') {
        status = ''
      }
      getAssessInfo(id, status).then(res => {
        if (res.header.ret === '0') {
          // eslint-disable-next-line no-console
          console.log(res.data, 'res.data')
          this.formData = res.data
          this.formData.skuAssessVo.forEach((item, index) => {
            this.$set(this.formData.skuAssessVo[index], 'productMark', 5)
          })
        }
      })
    },
    goToDetail(val) {
      this.$router.push({
        path: '/shop/goodsClassDetail',
        query: { id: val.productId }
      })
    },
    ensure() {
      const vm = this
      if (!this.formData.expressPackaging) {
        this.$message.warning('请选择快递包装评分!')
        return
      }
      if (!this.formData.deliverySpeed) {
        this.$message.warning('请选择送货速度评分!')
        return
      }
      if (!this.formData.distributorSpeed) {
        this.$message.warning('请选择配送员服务评分!')
        return
      }
      orderAssess(this.formData).then(res => {
        if (res.header.ret === '0') {
          this.$message({
            message: res.data,
            type: 'success'
          })
          vm.$route.push({
            path: '/personalCenter/myorder'
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.publishEvaluation {
  padding: 20px 50px;
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .crumbs_nav_main {
    padding: 10px 0;
    font-size: 14px;
  }
  .crumbs_nav_main .pos_title {
    display: inline-block;
    vertical-align: middle;
    color: #666;
  }
  .crumbs_nav_main .pos_title .iconfont {
    margin-right: 8px;
    color: #00AACA;
  }
  .crumbs_nav_main .el-breadcrumb {
    vertical-align: middle;
    display: inline-block;
  }
  .m{
    margin-bottom: 20px;
  }
  .order_title{
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    line-height: 40px;
  }
  .btn-area {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .main-content {
    .table-title {
      border: 1px solid #e9e9eb;
      background-color: #f7f7f7;
      padding: 10px;
      span {
        margin-right: 10px;
      }
    }
    .logisticsServerRate {
      border: 1px solid #e9e9eb;
      border-top-color: transparent;
      margin-bottom: 20px;
      .flex-col {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 130px;
      }
      .flex-span {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 130px;
        font-weight: normal;
      }
    }
    .skuAssessVo {
      border: 1px solid #e9e9eb;
      height: 100%;
      .flex-col {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        padding: 10px 30px;
        height: 100%;
        .shop-img, .shop-name, .shop-price {
          cursor: pointer;
        }
        .shop-price {
          font-weight: bold;
        }
      }
      .flex-div {
        display: flex;
        align-items: center;
        height: 100%;
      }
    }
    .margin-l-15 {
      margin-left: 15px;
    }
    .margin-r-15 {
      margin-right: 15px;
    }
    .marin-t-15 {
      margin-top: 15px;
    }
    .margin-b-15 {
      margin-bottom: 15px;
    }
    .padding-l-30 {
      padding-left: 30px;
    }
    .padding-t-30 {
      padding-top: 30px;
    }
    .border-l {
      border-left: 1px solid #e9e9eb;
    }
    .border-r {
      border-right: 1px solid #e9e9eb;
    }
    .border-top-transparent {
      border-top-color: transparent;
    }
  }
}
</style>
