<!--
@description: 订单评价
@Modifier: qink
@routerPath:
@date: 2020-4-9 13:20:35
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.consignContractVisible"
    :close-on-click-modal="false"
    title="订单评价"
    width="1000px"
    custom-class="shop_mall_dialog"
  >
    <el-form
      ref="form"
      :model="formData"
      :inline-message="true"
      style="margin-bottom:20px;"
    >
      <p>订单号：{{ formData.orderNo }}</p>
      <div class="evalue">
        <dl>
          <dt>
            <img :src="url" alt="" style="width:50px;height:50px;margin-right:10px;">
            物流服务评价
          </dt>
          <dd>
            <p>
              快递包装 <span style="margin-left:5px;"><el-rate
                v-model="formData.expressPackaging"
                show-score
                score-template="{value}"
              /></span>分
            </p>
            <p>
              送货速度 <span style="margin-left:5px;"><el-rate
                v-model="formData.deliverySpeed"
                show-score
                score-template="{value}"
              /></span>分
            </p>
            <p>
              配送员服务<span style="margin-left:5px;"><el-rate
                v-model="formData.distributorSpeed"
                show-score
                score-template="{value}"
              /></span>分
            </p>
          </dd>
        </dl>
      </div>
      <div class="evaluelist">
        <dl v-for="(item, index) in formData.skuAssessVo" :key="index">
          <dt>
            <div @click="goToDetail(item)">
              <img :src="item.productPicture" alt="" width="75px" height="75px">
            </div>
            <p>
              <span class="goods_item_title_two" @click="goToDetail(item)">{{ item.productName }}</span>
              <span>￥{{ item.productPrice }}</span>
            </p>
          </dt>
          <dd>
            <p style="margin-top:5px;">
              商品评分 <span style="margin-left:10px;"><el-rate
                v-model="item.productMark"
                show-score
                score-template="{value}"
              /></span>分
            </p>
            <p style="margin-top:20px;">
              商品评价
              <el-input
                v-model="item.productAssess"
                :rows="2"
                type="textarea"
                placeholder="请输入内容"
                show-word-limit
                style="width:80%;margin-left:10px;"
                maxlength="200"
                :autosize="{ minRows: 2, maxRows: 2}"
              />
            </p>
          </dd>
        </dl>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="purple" @click="ensure">完成评价</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getAssessInfo, orderAssess } from '@/api/shoppingmall/order'

export default {
  name: 'ConsignContractSelectDialog',
  components: {},
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {

      }
    }
  },
  data() {
    return {
      url: require('../../../../assets/img/shopmall/wuliu.png'),
      value: 0,
      list: [],
      formData: {
        expressPackaging: 0, // 快递包装
        deliverySpeed: 0, // 送货速度
        distributorSpeed: 0, // 配送员服务
        orderId: '',
        skuAssessVo: [{
          orderDetailId: '',
          productAssess: '',
          productMark: 5
        }]
      },
      status: '',
      taid: ''
    }
  },
  watch: {
    dialogData(val) {
      this.initdata(val)
    }
  },
  methods: {
    goToDetail(val) {
      this.$router.push({
        path: '/shop/goodsClassDetail',
        query: { id: val.productId }
      })
      // window.open(routes.href, '_blank')
    },
    ensure() {
      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.dialogData.consignContractVisible = false
          this.$emit('callback')
          this.$message({
            message: res.data,
            type: 'success'
          })
        }
      })
    },
    initdata(val) {
      if (val.status) {
        this.status = val.status
      } else {
        this.status = ''
      }
      getAssessInfo(val.id, this.status).then(res => {
        if (res.header.ret === '0') {
          this.formData = res.data
          this.formData.skuAssessVo.forEach((item, index) => {
            this.$set(this.formData.skuAssessVo[index], 'productMark', 5)
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">

.dialog-footer {
  display: flex;
  justify-content: center;
}

.evalue {
  margin-top: 10px;

  dl {
    width: 100%;
    border: 1px solid #ccc;
    display: flex;
    height: 80px;

    dt {
      align-items: center;
      flex: 3;
      border-right: 1px solid #ccc;
      line-height: 80px;
      height: 100%;
      font-size: 18px;
      font-weight: 600;
      display: flex;
      justify-content: center;
    }

    dd {
      flex: 7;
      display: flex;
      height: 100%;
      line-height: 80px;
      padding: 0 5px;

      p {
        flex: 3.2;
        display: flex;
        align-items: center;
      }
    }
  }
}

.evaluelist {
  margin-top: 10px;

  dl {
    width: 100%;
    border: 1px solid #ccc;
    display: flex;
    min-height: 120px;

    dt {
      flex: 3;
      height: 100%;
      display: flex;
      align-items: center;

      > div {
        flex: 4;
        cursor: pointer;
        text-align: center;
      }

      p {
        flex: 6;
        display: flex;
        margin-right: 10px;
        flex-direction: column;

        span:nth-child(1) {
          margin-bottom: 15px;
          cursor: pointer;

          &:hover {
            color: #00aaca;
          }
        }
      }
    }

    dd {
      flex: 7;
      height: 100%;
      padding: 0 5px;
      border-left: 1px solid #ccc;
      p {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
