<template>
  <div class="order_detail">
    <el-row :gutter="20">
      <el-col :md="24" class="order_detail_body">
        <el-card shadow="hover">
          <el-col :md="21">
            <h1 class="title"><svg-icon class="title_icon" icon-class="hongqi" />订单编号：{{ orderDetailData.F_Id }}</h1>
            <!-- <p class="title_sub"><span class="green">{{ name }}</span> 	河南足力健老人鞋 {{ createtime }}</p>
            <p class="title_sub">催单次数：<span class="red">10</span>次 | 工单状态： <span class="done">已完成</span></p> -->
          </el-col>
          <el-col :md="24" class="order_detail_content">
            <el-col :md="6" class="order_detail_item">
              客户姓名：{{ orderDetailData.F_Customer }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              手机号码：{{ orderDetailData.F_CustomerPhone }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              消息来源：{{ orderDetailData.F_ADFrom }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              下单日期：{{ orderDetailData.F_AddTime }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              下单员工：{{ orderDetailData.F_AddUserName }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              归属员工：{{ orderDetailData.F_BelongName }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              订单类型：{{ orderDetailData.F_Type }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              快递公司：{{ orderDetailData.F_Express }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              地址：{{ orderDetailData.address }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              出货仓库：{{ orderDetailData.F_Stock }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              收件人：{{ orderDetailData.F_Addressee }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              收件人手机号：{{ orderDetailData.F_AddPhone }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              送货说明：{{ orderDetailData.F_AddDes }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              邮编：{{ orderDetailData.F_PostalCode }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              快递：{{ orderDetailData.F_Express }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              运费：{{ orderDetailData.F_ExpressFee }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              支付方式：{{ orderDetailData.F_PayType }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              使用积分：{{ orderDetailData.F_Score }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              推荐人：{{ orderDetailData.F_RecommendName }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              归属人：{{ orderDetailData.F_BelongName }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              实付金额：{{ orderDetailData.F_RealPrice }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              应付金额：{{ orderDetailData.F_ShouldPrice }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              备注：{{ orderDetailData.F_Remark }}
            </el-col>
            <el-col :md="24">
              <el-table :data="orderDetailData.OrderDetailList" stripe border style="width: 100%">
                <el-table-column prop="F_ProductName" label="商品名称" align="center"></el-table-column>
                <el-table-column prop="F_Count" label="商品数量" align="center"></el-table-column>
              </el-table>
            </el-col>
            <el-col :md="24" class="order_detail_item">
              用户订单支付审核：
              <div class="order_content" v-html="content"/>
            </el-col>
            <el-col :md="24">
              <el-table :data="orderPaymentReviewList" stripe border style="width: 100%">
                <el-table-column prop="F_PayUser" label="付款人" align="center"></el-table-column>
                <el-table-column prop="F_PayType" label="付款方式" align="center"></el-table-column>
                <el-table-column prop="F_State" label="审核状态" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.F_State | judgmentAuditState }}
                  </template>
                </el-table-column>
                <el-table-column prop="F_PayTime" label="支付时间" align="center"></el-table-column>
                <el-table-column prop="F_Money" label="付款金额" align="center"></el-table-column>
                <el-table-column prop="F_RemarkXS" label="备注" align="center"></el-table-column>
                <el-table-column label="操作" align="center" class-name="oparate_btn" fixed="right">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" v-if="authority_audit(scope.row.F_State)" @click="btn_audit(scope.row.F_Id, 1, scope.row.F_OrderId, scope.row.F_Money)">通过</el-button>
                    <el-button size="mini" type="text" v-if="authority_audit(scope.row.F_State)" @click="btn_audit(scope.row.F_Id, 2, scope.row.F_OrderId, scope.row.F_Money)">不通过</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <!-- <el-col :md="24" class="order_detail_item">
              工单内容：
              <div class="order_content" v-html="content"/>
            </el-col> -->
            <!-- <el-col :md="6">
              <i class="el-icon-time"/>
              已持续 <span class="red">20</span> 小时 <span class="red">20</span> 分 <span class="red">20</span> 秒
            </el-col> -->
            <!-- <el-col :md="8" :offset="16"> -->
              <!-- <el-button type="primary" size="mini" plain>申请</el-button> -->
              <!-- <el-button type="primary" size="mini" plain @click="edit()">修改</el-button> -->
              <!-- <el-button type="primary" size="mini" plain>取消</el-button>
              <el-button type="primary" size="mini" plain>售后</el-button>
              <el-button type="primary" size="mini" plain>关联订单</el-button> -->
            <!-- </el-col> -->
          </el-col>
        </el-card>
      </el-col>

      <!-- <el-col :md="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>工单动态</span>
          </div>
          <div class="order_steps">
            <el-steps :active="0" :space="100" direction="vertical" process-status="success">
              <el-step title="已完成" description="2018-10-23 10:30:20 这是一段很长很长很长的描述性文字"/>
              <el-step title="已转派" description="2018-10-23 10:30:20 这是一段很长很长很长的描述性文字"/>
              <el-step title="已创建" description="2018-10-23 10:30:20 这是一段很长很长很长的描述性文字"/>
            </el-steps>
          </div>
        </el-card>
      </el-col> -->
      <!-- <el-col :md="12">
        <el-card shadow="hover" class="order_record">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="催单记录(2)" name="first">
              <div class="tab_body">
                催单记录
              </div>
            </el-tab-pane>
            <el-tab-pane label="录音记录(3)" name="second">
              <div class="tab_body">
                录音记录
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col> -->
    </el-row>
  </div>
</template>

<script>
import { getOrder } from '@/api/orderManagement/orderList'
import { userOrderPaymentReviewList } from '@/api/customerServiceManagement/orderListCustomerService'
import { mapGetters } from 'vuex'
import checkOrderMoney from './checkOrderMoney'

export default {
  name: 'Detail',
  filters: {
    judgmentAuditState(status) {
      const statusMap = {
        '0': '未审核',
        '1': '审核通过',
        '2': '审核不通过'
      }
      return statusMap[status]
    }
  },
  props: {
    rowid: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeName: 'first',
      orderDetailData: {
        F_Customer: '', //客户姓名
        F_CustomerPhone: '', //手机号码
        F_ADFrom: '', //消息来源
        F_Type: '', //订单类型
        F_Id: '', //订单号
        OrderDetailList: [], //订单详情list
        UseActList: [], //活动详情list
        F_State: '', //订单状态
        F_TrackingNo: '', //快递单号
        F_Addressee: '', //收件人
        F_AddPhone: '', //收件人手机号
        F_AddDes: '', //送货说明
        F_PostalCode: '', //邮编
        F_Express: '', //选择的快递
        F_ExpressFee: '', //运费
        F_PayType: '', //支付方式
        F_Stock: '', //出货仓库
        F_RealPrice: '', //实收金额
        F_VipId: '', //关联会员id
        F_Score: '', //使用积分
        F_AddTime: '', //添加时间
        F_AddUserName: '', //下单员工
        F_RecommendName: '', //推荐人名称
        F_BelongName: '', //归属员工
        F_Remark: '', //备注
        address: '', //地址
        F_ShouldPrice: '', //应付金额
      },
      ordercode: '', // 工单编号
      name: '', // 姓名
      phone: '', // 电话
      sex: '', // 性别
      address: '', // 地址
      sourcename: '', // 工单来源
      sourcetype: '', // 工单类型
      content: '', // 工单内容
      createtime: '', // 创建时间
      createuser: '', // 创建人
      orderPaymentReviewList: [], //订单支付审核列表
    }
  },
  computed: {
    ...mapGetters([
      'avatar'
    ])
  },
  created() {
    if (this.rowid) {
      this.getDetail(this.rowid)
      this.getOrderPaymentReviewList(this.rowid)
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 详情
    getDetail(rid) {
      getOrder(rid).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data
          this.orderDetailData.F_Customer = res.F_Customer //客户姓名
          this.orderDetailData.F_CustomerPhone = res.F_CustomerPhone //手机号码
          this.orderDetailData.F_ADFrom = res.F_ADFrom //消息来源
          this.orderDetailData.F_Id = res.F_Id //订单号
          this.orderDetailData.OrderDetailList = res.OrderDetailList //订单详情list
          this.commodityTableData = res.OrderDetailList
          this.orderDetailData.UseActList = res.UseActList //活动详情list
          this.activityAccountData = res.UseActList
          this.orderDetailData.F_State = res.F_State + ''//订单状态
          this.orderDetailData.F_TrackingNo = res.F_TrackingNo //快递单号
          this.orderDetailData.F_Addressee = res.F_Addressee //收件人
          this.orderDetailData.F_AddPhone = res.F_AddPhone //收件人手机号
          this.orderDetailData.F_AddDes = res.F_AddDes //送货说明
          res.F_AddProvince = res.F_AddProvince === null ? '' : res.F_AddProvince //省
          res.F_AddCity = res.F_AddCity === null ? '' : res.F_AddCity //市
          res.F_AddArea = res.F_AddArea === null ? '' : res.F_AddArea //县/区
          res.F_AddTown = res.F_AddTown === null ? '' : res.F_AddTown //乡/镇
          res.F_Address = res.F_Address === null ? '' : res.F_Address //详细地址
          this.orderDetailData.address = res.F_AddProvince + res.F_AddCity + res.F_AddArea + res.F_AddTown + res.F_Address // 地址
          this.orderDetailData.F_PostalCode = res.F_PostalCode //邮编
          this.orderDetailData.F_Express = res.F_Express + '' //选择的快递
          this.orderDetailData.F_ExpressFee = res.F_ExpressFee //运费
          this.orderDetailData.F_PayType = res.F_PayType //支付方式
          this.orderDetailData.F_Stock = res.F_Stock //出货仓库
          this.orderDetailData.F_RealPrice = res.F_RealPrice //实收金额
          this.orderDetailData.F_VipId = res.F_VipId //关联会员id
          this.orderDetailData.F_Score = res.F_UseScore //使用积分
          this.orderDetailData.F_AddTime = res.F_AddTime //添加时间
          this.orderDetailData.F_RecommendName = res.F_RecommendName//推荐人名称
          this.orderDetailData.F_AddUserName = res.F_AddUserName //下单员工
          this.orderDetailData.F_BelongName = res.F_BelongName //归属员工
          this.orderDetailData.F_Type = res.F_Type //订单类型
          this.orderDetailData.F_Remark = res.F_Remark //备注
          this.orderDetailData.F_ShouldPrice = res.F_ShouldPrice //应付金额
          if (res.F_Type === '1') {
            this.orderDetailData.F_Type = '保存' //订单类型
          } else if(res.F_Type === '2') {
            this.orderDetailData.F_Type = '销售审核提交' //订单类型
          }
        }
      })
    },
    edit(){
      debugger
      this.$router.push({path:'/edit',query:{id:this.ordercode}})
    },
    getOrderPaymentReviewList(rid) {
      const params= {
        F_OrderId: rid
      }
      userOrderPaymentReviewList(params).then(response => {
        if (response.state.toLowerCase() === 'success') {
          this.orderPaymentReviewList = response.data
        }
      })
    },
    btn_audit(id, state, orderId, money) {
      this.$layer.iframe({
        content: {
          content: checkOrderMoney, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': id, 'state': state, 'orderId': orderId, 'money': money }// props
        },
        area: ['50%', '50%'],
        title: '订单支付审核'
      })
    },
    authority_audit(state) {
      if ( state == 0 ) {
        return true
      } else if ( state == 1 || state ==2 ) {
        return false
      }
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
	.order_detail{
		.el-col{
			margin-bottom: 20px;
		}
		.el-icon-time{
			color: #d81e06;
		}
		.el-card__header{
			padding-top: 14px;
			padding-bottom: 14px;
			background-color: #F5F5F6;
		}
		.order_file{
			.el-card__body{
				padding: 22px 0 0 0;
				text-align: center;
			}
		}
		.order_steps{
			.el-step__icon-inner{
				display: none;
			}
		}
		.order_record {
			.el-card__body{
				padding: 0;
			}
			.el-tabs__header{
				padding: 0px 20px;
				background-color: #F5F5F6;
					.el-tabs__item{
						font-size: 16px;
						height: 47px;
						line-height: 47px;
					}
			}
		}
	}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
	.order_detail{
		.order_detail_body{
			margin-bottom: 20px;
			.round_img{
				width: 90px;
				height: 90px;
				border-radius: 50%;
				overflow: hidden;
				margin: 14px;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.title{
				font-size: 20px;
				.title_icon{
					color: #d81e06;
					font-size: 16px;
					margin-right: 20px;
				}
			}
			.title_sub{
				font-size: 14px;
				color: #666666;
			}
			.order_detail_content{
				background-color: #F5F5F6;
				padding-top: 20px;
				color: #4c4c4c;
				font-size: 14px;
				.order_detail_item{
					margin-bottom: 10px;
					.order_content{
						margin-top: 10px;
					}
					.order_file {
						position: relative;
						cursor: pointer;
						.img_mask {
							display: none;
							position: absolute;
							left: 0px;
							top: 0px;
							background-color: rgba(0, 0, 0, 0.3);
							width: 100%;
							height: 22px;
							text-align: right;
							z-index: 1;
							i {
								font-size: 20px;
								line-height: 22px;
								display: inline-block;
								margin-right: 15px;
								color: #fff;
							}
						}
						p {
							margin-top: 5px;
							padding-left: 14px;
							padding-right: 14px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.file_icon{
							height: 68px;
							line-height: 68px;
							font-size: 68px;
							color: #409EFF;
						}
					}
					.order_file:hover .img_mask {
						display: block;
					}
				}
			}
		}
		.green {
			color: #00c1de;
		}
		.done {
			color: #198120;
		}
		.red {
			color: #d81e06;
		}
		.yellow{
			color: #e6a23c;
		}
		.order_steps{
			// height: 240px;
			.el-step__icon-inner{
				display: none;
			}
		}

		.tab_body{
			padding: 0 20px 20px 20px;
		}
	}
</style>
