<!--
  @description:订单评价列表
  @Modifier：qink / dijia
  @routerPath:/personalCenter/supplierSummaryDetail
  @date：  2020/4/13 15:46
-->
<template>
  <div>
    <!--当前位置-面包屑-->
    <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="{ path: '/personalCenter/supplierSummary' ,query:{}}">
          评价汇总
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span>订单评价列表</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="search-content clearfix">
      <section class="fl">
        <el-form ref="orderFrom" :inline="true" :model="orderFrom">
          <el-form-item label="订单编号" prop="orderNo">
            <el-input v-model.trim="orderFrom.orderNo" placeholder="请输入..." />
          </el-form-item>
          <el-form-item label="评价创建时间" prop="date">
            <el-date-picker
              v-model="date"
              value-format="yyyy-MM"
              type="monthrange"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
            />
          </el-form-item>
        </el-form>
      </section>
      <div class="fr">
        <el-button type="purple" @click.native="searchOrderBtn">
          搜索
        </el-button>
        <el-button type="gray" @click.native="resetOrderBtn">
          重置
        </el-button>
      </div>
    </div>
    <div class="shopmall-view">
      <el-table
        :header-cell-style="{color:'#666666'}"
        :data="orderList"
        class="el-table--striped-border"
      >
        <el-table-column label="序号" width="60" type="index" align="center" />
        <el-table-column prop="orderNo" min-width="120" label="订单编号" />
        <el-table-column prop="expressPackaging" label="快递包装" align="center" />
        <el-table-column prop="distributorSpeed" label="配送员速度" align="center" />
        <el-table-column prop="deliverySpeed" label="送货速度" align="center" />
        <el-table-column prop="createBy" label="创建人" align="center" />
        <el-table-column prop="createTime" label="创建时间" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-link type="primary" @click="orderDetail(scope.row)">
              [订单详情]
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页组件-->
    <pagination :pagination-data="paginationData" shopmall-pagination="shopmall-pagination" @change="initData" />
    <!-- 订单详情弹框
    <el-dialog
      :visible.sync="dialog"
      title="订单详情"
      width="60%"
    >
      <el-table
        :data="item"
        class="el-table--striped-border"
        style="margin: 0 auto;width:98%;"
      >
        <el-table-column label="序号" width="60" type="index" />
        <el-table-column label="商品图片">
          <template slot-scope="scope">
            <img :src="scope.row.productPicture" style="width:95px;height:95px;" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="商品名称" />
        <el-table-column prop="number" label="购买数量" />
        <el-table-column prop="productPrice" label="商品价格" />
        <el-table-column prop="productMark" label="商品评分" />
        <el-table-column label="商品评价">
          <template slot-scope="scope">
            <span>{{ scope.row.productAssess ? scope.row.productAssess : '无' }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog> -->
    <supplierDialog v-if="dialog.visible" :dialog="dialog" :product-list="productList" />
  </div>
</template>
<script>
// api
import { getAssessReckonBySupplier, getProductAssessByAssessId } from '@/api/shoppingmall/order.js'
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页
import supplierDialog from './supplierSummaryDetail-dialog'
/* 公用方法*/
import { filterObj } from '@/assets/js/utils'// 常用方法
export default {
  components: {
    pagination,
    supplierDialog
  },
  data() {
    return {
      productList: [],
      date: '',
      dialog: {
        visible: false
      },
      orderFrom: {
        pageNo: 1, // 当前页
        pageSize: 10, // 每页数目条数
        supplierName: this.$route.query.name, // 供应商名称
        startYear: '', // 开始时间
        endYear: '',
        orderNo: ''
      },
      // 分页数据
      paginationData: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      // table数据
      orderList: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 获取列表数据
    initData() {
      const params = this.getQueryParams()// 查询条件
      getAssessReckonBySupplier(params).then((res) => {
        if (res.header.ret === '0') {
          this.orderList = res.data.records
          this.paginationData.total = res.data.total
        }
      }).catch((err) => {
        throw new Error('获取订单列表数据失败' + err)
      })
    },
    // 查询条件
    getQueryParams() {
      this.orderFrom.startYear = this.date[0]
      this.orderFrom.endYear = this.date[1]
      const param = Object.assign({}, this.orderFrom)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    },
    // 搜索
    searchOrderBtn() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.initData()
    },
    // 重置
    resetOrderBtn() {
      this.date = ''
      this.orderFrom.startYear = ''
      this.orderFrom.endYear = ''
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.$refs.orderFrom.resetFields()
      this.initData()
    },
    // 订单详情
    orderDetail(row) {
      getProductAssessByAssessId(row.id, row.supplierName).then(res => {
        if (res.header.ret === '0') {
          this.productList = res.data
          this.dialog.visible = true
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.pagination_padding {
  padding-left: 12px;
  padding-right: 12px;
}
.crumbs_nav_main {
    padding: 10px 12px;
    font-size: 14px;
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-weight: 400;
    font-style: normal;
  }

  .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;
  }
/deep/.el-dialog__body {
  padding-bottom: 20px;
}
</style>
