<!--
@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"
  >
    <el-form
      ref="form"
      :model="formData"
      :inline-message="true"
      style="padding-bottom:15px;"
    >
      <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"
                disabled
                show-score
                score-template="{value}"
              /></span>分
            </p>
            <p>
              送货速度 <span style="margin-left:5px;"><el-rate
                v-model="formData.deliverySpeed"
                disabled
                show-score
                score-template="{value}"
              /></span>分
            </p>
            <p>
              配送员服务<span style="margin-left:5px;"><el-rate
                v-model="formData.distributorSpeed"
                disabled
                show-score
                score-template="{value}"
              /></span>分
            </p>
          </dd>
        </dl>
      </div>
      <div class="evaluelist">
        <dl v-for="(item, index) in formData.skuAssessVo" :key="index">
          <dt @click="goToDetail(item)">
            <div>
              <img :src="item.productPicture" alt="" width="75px" height="75px">
            </div>
            <p>
              <span>{{ item.productName }}</span>
              <span>￥{{ item.productPrice }}</span>
            </p>
          </dt>
          <dd>
            <p>{{ item.createTime }}</p>
            <p style="margin-top:5px;">
              <span><el-rate v-model="item.productMark" disabled show-score score-template="{value}" /></span>分
            </p>
            <p style="margin-top:20px;">
              {{ item.productAssess }}
            </p>
          </dd>
        </dl>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import { getAssess } 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: '',
        skuAssessDto: {
          orderDetailId: '',
          productAssess: '',
          productMark: ''
        }
      },
      status: '',
      taid: ''
    }
  },
  watch: {
    dialogData(val) {
      this.initdata(val)
    }
  },
  methods: {
    goToDetail(val) {
      this.$router.push({
        path: '/shop/goodsClassDetail',
        query: { id: val.goodsId }
      })
      // window.open(routes.href, '_blank')
    },
    initdata(val) {
      if (val.status) {
        this.status = val.status
      } else {
        this.status = ''
      }
      getAssess(val.id).then(res => {
        this.formData = res.data
        // this.taid = res.data[0].orderNo
        // this.formData.orderId = res.data[0].id
        // this.list = res.data[0].orderProductList
      })
    }
  }
}
</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;
      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;
        text-align: center;
        cursor: pointer
      }

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

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