
<!--
  @description: 供应商-桌面-确认订单组件
  @Modifier：wxy，ysg
  @routerPath:/procurement/procurementDesktopSupplier
  @date：  2020-09-01 14:27:18
-->
<template>
  <div class="contentFram clearfix">
    <div class="contentt p0-16">
      <p class="title fl titles">
        <i class="iconfonts iconfont icon-dayi" />待确认订单
        <span v-if="num>0" class="num">{{ num }}</span>
      </p>
      <p class="fr">
        <!-- <i class="iconfonts iconfont icon-shuaxin pointer" @click="refresh" /> -->
        <span class="pointer" @click="toConfirmOrder">更多</span>
      </p>
    </div>
    <div v-for="(item,index) in tableData" :key="index" class="contentb p16">
      <div class="contentbl">
        <p>
          <span>{{ item.orderNo }}</span><span class="ml10">{{ item.orderName }}</span>
        </p>
        <p class="contentblb">
          <span>
            <!-- <i class="iconfontss iconfont icon-people" /> -->
            <i class="iconfontss el-icon-user" />
            {{ item.orderDepartName }}</span><span><i class="iconfontss iconfont icon-time" /> 发布时间:{{ item.relDate }}</span>
        </p>
      </div>
      <span class="contentbr pointer" @click="confirmOrder(item,'01')">
        <!-- <i class="iconfonts iconfont icon-mouse" /> -->
        <i class="iconfonts  iconfont icon-jianshexiangmu" />
        去确认
      </span>
    </div>
  </div>
</template>

<script>
import { getRuOrderList } from '@/api/procurement/commonDesk'
export default {
  data() {
    return {
      // 确认订单数据
      tableData: [],
      num: '', // 订单数量
      paginationData: {
        pageNo: 1,
        pageSize: 2
      }
    }
  },
  created() {
    this.getRuOrderList()
  },
  methods: {
    // 获取消息列表
    getRuOrderList() {
      getRuOrderList(this.paginationData).then(res => {
        if (res.header.ret === '0') {
          this.tableData = [...res.data.records]
          this.num = res.data.total
          this.tableData.forEach(item => {
            item.relDate = this.$Moment(item.relDate).format(this.momentSaveFormat)
          })
        }
      })
    },
    // 跳转待确认订单页面
    toConfirmOrder() {
      this.$router.push({
        path: '/procurement/procurementOrderList'
      })
    },
    // 刷新
    refresh() {
      this.$forceUpdate() // 数据强制刷新
    },
    // 确认订单
    confirmOrder(row, linkStatus) {
      this.$router.push({
        name: 'procurementOrderNotarize',
        params: {
          linkStatus: linkStatus, // 操作状态
          status: '02', // 供应商桌面
          orderId: row.orderBizId, // 订单id
          orderStatus: '04' // 订单状态 后端说写死 如果 为04 则有确认接单按钮
          // row.orderStatus
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
  @import '~@assets/style/common/public.less';
  div.contentFram{
    background: #fff;
    width: 100%;
    margin: 14px 0;
    border-left: 1px solid @cut-off;
    border-right: 1px solid @cut-off;
    border-bottom: 1px solid @cut-off;
    padding-bottom: 10px;
    min-height: 187px;
    .contentt{
      margin-bottom: 6px;
      border-top: 1px solid @hyacinthine;
      width: 100%;
      height: 40px;
      background: @french-grey;
      p{
        line-height: 40px;
        .iconfonts{
          color:@hyacinthine;
          margin-right:8px;
        }
      }
      .titles{
        position: relative;
      }
      .num{
        position: absolute;
        right: -32px;
        top: 10px;
        display: inline-block;
        width: 30px;
        height: 15px;
        text-align: center;
        line-height: 15px;
        background: #E72620;
        border-radius:6px 6px 6px 0;
        color: @white;
        font-size: 12px;
        font-weight: normal;
      }

    }
    .contentb{
      width: 97%;
      margin-left: 1.6%;
      display: flex;
      align-content: space-around;
      border-bottom: 1px solid @border-gray;
      padding: 10px 0px 9px 0px;
      .iconfonts{
        color:@hyacinthine;
        margin-right:8px;
      }
      .iconfontss{
        color:@light-font;
        margin-right:4px;
      }
      .contentbl{
        line-height: 20px;
        display: inline-block;
        width: 92%;
        .ml10{
          margin-left: 10px;
        }
        .contentblb{
          color: @light-font;
          span{
            margin-right: 60px;
          }
        }
      }
      .contentbr{
        color:@hyacinthine;
        display: inline-block;
        width: 8%;
        line-height: 40px;
      }
    }
  }
</style>
