<template>
  <page-header-wrapper
    @back="() => $router.go(-1)"
    :title="('订单号: ' + infos.order_no)"
    v-if="!loading"
  >
    <!-- 订单详情 -->
    <template v-slot:content>
      <a-descriptions size="small">
        <a-descriptions-item label="实习顾问"> {{ infos.manager || '-' }} </a-descriptions-item>
        <a-descriptions-item label="法务助理"> {{ infos.tutor || '-' }} </a-descriptions-item>
        <a-descriptions-item label="法务老师"> {{ infos.teachers || '-' }} </a-descriptions-item>
        <a-descriptions-item label="协办人"> {{ infos.transactor || '-' }} </a-descriptions-item>
        <a-descriptions-item label="下单时间"> {{ infos.created_at || '-' }} </a-descriptions-item>
        <a-descriptions-item label="提交审核次数" v-if="(infos.logs_sum>0)"> {{ infos.logs_sum || '-' }} 次 </a-descriptions-item>
        <a-descriptions-item label="驳回待审总数" v-if="infos.log_count">
          <a-tooltip>
            <template slot="title">驳回信息全部都确认后<br/>才可以操作初审/复审通过！</template>
            <span count="">{{ infos.log_count || '-' }}</span>
            <a-icon type="info-circle" :style="{ fontSize: '15px', color: '#ff4d4f',padding:'0 0 0 6px' }" />
          </a-tooltip>
        </a-descriptions-item>
        <a-descriptions-item label="订单状态" v-if="infos.status"> {{ infos.status.text || '-' }} </a-descriptions-item>
        <!-- <a-descriptions-item label="指派签收地址">
          <span v-if="infos.can&&infos.can.edit_sign_address">
            <a @click="selectAddr(infos)" class="change">{{ infos.express ==''?'指派':'更改' }}地址 </a>
            <a @click="$router.push({ name: 'AddressCreate'})" class="plus">( <a-icon type="plus" /> )</a>
          </span>
          <span v-else>-</span>
        </a-descriptions-item> -->
        <a-descriptions-item label="资料签收地址" :span="2" v-if="infos.express!=''">{{ infos.express }}</a-descriptions-item>
        <a-descriptions-item label="查看邮寄进度" v-if="infos.express!=''">
          <router-link tag="a" target="_blank" :to="{ name: 'DetailLogistics', params: { id: infos.business_order_id } }"> 查看详情 </router-link>
        </a-descriptions-item>
      </a-descriptions>
    </template>
    <!-- 右上角审核功能 -->
    <template v-slot:extra>
      <!-- 复审按钮 -->
      <a-popconfirm
        v-if="infos.can && infos.can.first && infos.can.recheck"
        placement="bottomLeft"
        title="是否确认通过当前审核"
        ok-text="确认"
        cancel-text="取消"
        @confirm="firstPassActions"
      >
        <a-button :loading="loading" type="primary" >复审核通过</a-button>
      </a-popconfirm>
      <!-- 初审按钮 -->
      <a-popconfirm
        v-if="infos.can && infos.can.first && !infos.can.recheck"
        placement="bottomLeft"
        title="是否确认通过当前审核"
        ok-text="确认"
        cancel-text="取消"
        @confirm="firstPassActions"
      >
        <a-button :loading="loading" type="primary" >初审核通过</a-button>
      </a-popconfirm>

      <!-- 法务老师确认按钮展示 -->
      <a-popconfirm
        v-if="infos.can && infos.can.teacher_makesure"
        placement="bottomLeft"
        title="是否确认通过当前审核"
        ok-text="确认"
        cancel-text="取消"
        @confirm="teachearSure(infos)"
      >
        <a-button :loading="loading" type="primary" >法务助理确认复审</a-button>
      </a-popconfirm>
    </template>

    <!-- 流程进度 -->
    <OrderSteps :steps="infos.steps" :stepsCount="stepsCount" />

    <!-- 用户实名信息 -->
    <RealName :id="$route.params.id + ''" :can="infos.can" :count="infos.log_user"/>

    <!-- 申请信用卡待处理 -->
    <BankList :id="$route.params.id + ''" :can="infos.can" :count="infos.log_items" />

    <!-- 服务包 -->
    <Services v-if="infos.can && infos.can.service" :id="$route.params.id + ''" :can="infos.can" :count="infos.un_diff" />

  </page-header-wrapper>
</template>

<script>
// can: {
// first: true,  是否展示初审按钮 初审复审公用一个按钮
// params: false, 是否展示银行 params信息，就是银行列表没有 bank、
// check: true, 是否能修改
// diff: true   是否显示补差价
// service:true  是否显示服务包
// edit_sign_address:true  是否可修改地址！
// recheck:true,  //调用复审按钮
// }

import {
  orderInfo, firstPass, secondPass, teachermakesure
} from '@/api/order'
import RealName from '@/components/OrderDetailInfo/RealName.vue'
import Services from '@/components/OrderDetailInfo/Services.vue'
import BankList from '@/components/OrderDetailInfo/BankList.vue'
import OrderSteps from '@/components/OrderDetailInfo/OrderSteps.vue'

export default {
  name: 'Detail',
  components: {
    RealName, Services, BankList, OrderSteps
  },
  data () {
    return {
      infos: {},
      id: '',
      loading: false,
      stepsCount: 0,
      IdCardVisible: false
    }
  },
  activated () {
    this.getInfo()
    this.eventBus.$on('updateOrderInfo', (res) => {
      this.getInfo()
    })
  },
  deactivated () {
    this.eventBus.$off('updateOrderInfo')
  },
  filters: {
    statusFilter (status) {
      const statusMap = {
        'agree': '成功',
        'reject': '驳回'
      }
      return statusMap[status]
    },
    statusTypeFilter (type) {
      const statusTypeMap = {
        'agree': 'success',
        'reject': 'error'
      }
      return statusTypeMap[type]
    }
  },
  methods: {
    // 老师确认复审
    teachearSure (item) {
      teachermakesure(item.business_order_id).then(res => {
        this.$notification.success({
            message: '助理复审确认成功',
            description: '审核通过'
        })
        this.getInfo()
      }).catch(err => {
        this.$notification.error(err)
      })
    },
    // 初审复审操作
    firstPassActions () {
      // 复审
      if (this.infos.can.recheck) {
        if (this.infos.alert) {
          const key = `open${Date.now()}`
          this.$notification.open({
            message: '温馨提示',
            description: '该订单存在减免结清业务，请确认是否通过.',
            btn: h => {
              return h(
                'a-button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      secondPass(this.$route.params.id).then(res => {
                        this.$notification.success({
                          message: '成功',
                          description: '复审核通过'
                        })
                        this.getInfo()
                        this.$notification.close(key)
                      }).catch(err => {
                        if (err.status_code === 400) {
                            this.$notification.error({
                            message: '失败',
                            description: err.message
                          })
                        }
                        this.$notification.close(key)
                      })
                    }
                  }
                },
                '确认通过'
              )
            },
            key,
            onClose: () => {}
          })
        } else {
          // 复审
          secondPass(this.$route.params.id).then(res => {
            this.$notification.success({
              message: '成功',
              description: '复审核通过'
            })
            this.getInfo()
          }).catch(err => {
            if (err.status_code === 400) {
                this.$notification.error({
                message: '失败',
                description: err.message
              })
            }
          })
        }
      } else {
        // 初审
         firstPass(this.$route.params.id).then(res => {
          this.$notification.success({
            message: '成功',
            description: '初审核通过'
          })
          this.getInfo()
        }).catch(err => {
          if (err.status_code === 400) {
              this.$notification.error({
              message: '失败',
              description: err.message
            })
          }
        })
      }
    },
    // 获取订单信息
    getInfo () {
      orderInfo(this.$route.params.id).then(res => {
        this.infos = res
        let stepsCount = 0
        res.steps.map(item => {
          if (item.status) {
            stepsCount = stepsCount + 1
          }
        })
        this.stepsCount = stepsCount
      })
    },
    // 选择邮寄地址操作
    selectAddr (order) {
      this.$dialog(
        // SelctAddr,
        {
          order,
          on: {
            ok: () => {
              // this.eventBus.$emit('editRealName', { data: true })
            },
            cancel: () => {
            }
          }
        },
        {
          title: '指派签收地址',
          width: 500,
          maskClosable: true,
          closable: true,
          okText: '确认',
          cancelText: '取消'
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>

.detail-layout {
  margin-left: 44px;
}

.text {
  color: rgba(0, 0, 0, .45);
}

.heading {
  color: rgba(0, 0, 0, .85);
  font-size: 20px;
}

.no-data {
  color: rgba(0, 0, 0, .25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}

.mobile {
  .detail-layout {
    margin-left: unset;
  }

  .status-list {
    text-align: left;
  }
}
.active{
  font-size: 10px;
  color: rgb(9, 100, 237);
  cursor: pointer;
}

.plus{
  padding-top: 8px;
  padding-left: 8px;
  color: rgb(9, 100, 237);
  cursor: pointer;
}
.change{
  cursor: pointer;
}
.count{
  color:#ff4d4f;font-size: 16px;font-weight: bold;
}
</style>
