<template>
  <div v-loading="loading">
    <el-table :data="dataLists" border stripe>
      <el-table-column type="index" label="编号" align="center" fixed width="80" />
      <el-table-column prop="F_Id" label="订单编号" align="center" min-width="140">
        <template slot-scope="scope">
          <!-- <el-tooltip content="点击查看工单详情" placement="top"> -->
          <el-button type="text" @click="btn_detail((scope.row.F_Id))">{{ (scope.row.F_Id) }}</el-button>
          <!-- </el-tooltip> -->
        </template>
      </el-table-column>
      <el-table-column prop="F_Customer" label="客户姓名" align="center" min-width />
      <el-table-column prop="F_CustomerPhone" label="手机号码" align="center" min-width="140" />
      <el-table-column label="订购商品" align="center" min-width>
        <template slot-scope="scope">{{ scope.row.OrderDetailList | judgmentOrderGoods }}</template>
      </el-table-column>
      <el-table-column prop="F_AddTime" label="下单日期" align="center" />
      <el-table-column label="订单状态" align="center">
        <template slot-scope="scope">{{ scope.row.F_State | judgmentStateName }}</template>
      </el-table-column>
      <el-table-column prop="F_AddUserName" label="下单员工" align="center" />
      <el-table-column prop="F_BelongName" label="归属员工" align="center" />
      <el-table-column prop="F_Type" label="订单类型" align="center" />
      <el-table-column prop="F_Express" label="快递公司" align="center" />
      <el-table-column label="物流状态" align="center">
        <template slot-scope="scope">{{ scope.row.F_Status | judgmentStatusName }}</template>
      </el-table-column>
      <!-- <el-table-column label="操作" width="240" align="center" class-name="oparate_btn" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            v-show="orderTrue"
            v-if="authority_afterSale(scope.row.F_Status)"
            @click="btn_afterSale(scope.row.F_Id)"
          >售后</el-button>
          <el-button
            type="text"
            v-if="authority_collection(scope.row.F_Status)"
            @click="btn_collection(scope.row.F_Id)"
          >改代收</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <pagination
      v-show="pageParams.total > 0"
      :total="pageParams.total"
      :pageindex.sync="pageParams.pageindex"
      :pagesize.sync="pageParams.pagesize"
      :auto-scroll="false"
      class="pagination"
      @pagination="getList"
    />
  </div>
</template>
<script>

import { orderStateFilter, orderStateTypeFilter, formatterContent } from '@/filters'
import { getOrderLists } from '@/api/orderManagement/orderList'
import detail from '@/views/orderManagement/orderList/detail'
import afterSale from './afterSale'
import Pagination from '@/components/Pagination' // 对el-pagination 二次封装

export default {
  name: 'OrderList',
  components: {
    Pagination
  },
  filters: {
    judgmentStateName (status) {
      const statusMap = {
        '-1': '无效',
        '0': '暂存',
        '1': '提交',
        '2': '退回',
        '3': '通过',
        '4': '无货',
        '5': '已分拣',
        '6': '已发货'
      }
      return statusMap[status]
    },
    judgmentOrderGoods (status) {
      let orderGoodsNameQuantity = ''
      for (let i = 0; i < status.length; i++) {
        orderGoodsNameQuantity = `${orderGoodsNameQuantity}${status[i].F_ProductName}*${status[i].F_Count},`
      }
      orderGoodsNameQuantity = orderGoodsNameQuantity.substring(0, orderGoodsNameQuantity.length - 1)
      return orderGoodsNameQuantity
    },
    judgmentStatusName (status) {
      const statusMap = {
        '0': '未发出',
        '1': '未签收',
        '2': '签收',
        '3': '改代收',
        '4': '拒收',
      }
      return statusMap[status]
    },
  },
  props: {
    callinNum: {
      type: String,
      default: ''
    },
    callid: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      loading: false,
      activeName: "-2", //标签切换首页
      orderTrue: false,
      pageParams: {
        pageindex: 1, // 当前第几页
        pagesize: Number(this.$store.getters.serverConfig.PAGESIZE), // 每页几条数据
        total: 0 // 总共多少数据
      },
      dataLists: [] // 列表数据
    }
  },
  created () {
    this.getList()
    if (window.localStorage.getItem("roleCode") === 'SH') {
      this.orderTrue = true
    }
  },
  methods: {
    getList () {
      this.loading = true
      return new Promise(resolve => {
        const params = {
          F_State: this.activeName, //订单状态
          pageindex: this.pageParams.pageindex, // int 第几页
          pagesize: this.pageParams.pagesize, // int 每页几条信息
          phone: this.callinNum //	否	string	模糊查询（号码）
        }
        getOrderLists(params).then(response => {
          this.loading = false
          if (response.state.toLowerCase() === 'success') {
            this.pageParams.total = response.data.Totals
            this.dataLists = response.data.Rows
          }
        })
        resolve()
      })
    },
    btn_detail (editId) {
      this.$layer.iframe({
        content: {
          content: detail, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': editId, 'isCallin': true, 'callid': this.callid }// props
        },
        area: ['65%', '70%'],
        title: '工单详情',
        cancel: () => {
          this.getList()
        }
      })
    },
    //售后
    btn_afterSale (afterSalesId) {
      this.$layer.iframe({
        content: {
          content: afterSale, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowid: afterSalesId } // props
        },
        area: ["80%", "80%"],
        title: "售后内容"
      });
    },
    //改代收
    btn_collection (collectionId) {
      this.$layer.iframe({
        content: {
          content: afterSale, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowid: collectionId, collectionAfterSalesReasonType: '改代收' } // props
        },
        area: ["80%", "80%"],
        title: "改代收"
      });
    },
    authority_collection (status) {
      if (status == 1 && this.orderTrue) {
        return true
      } else {
        return false
      }
    },
    authority_afterSale (status) {
      if (status == 2 && this.orderTrue) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
