<template>
  <page-header-wrapper
    :title="('订单号: ' + info.order_no)"
    v-if="!loading"
  >
    <!-- 订单详情 -->
    <template v-slot:content>
      <a-descriptions size="small">
        <a-descriptions-item label="实习顾问"> {{ info.manager || '-' }} </a-descriptions-item>
        <a-descriptions-item label="法务助理"> {{ info.tutor || '-' }} </a-descriptions-item>
        <a-descriptions-item label="法务老师"> {{ info.teachers || '-' }} </a-descriptions-item>
        <a-descriptions-item label="下单时间"> {{ info.created_at || '-' }} </a-descriptions-item>
        <a-descriptions-item label="提交审核次数" v-if="(info.logs_sum>0)"> {{ info.logs_sum || '-' }} </a-descriptions-item>
        <a-descriptions-item label="驳回待审总数" v-if="info.log_count">
          <a-tooltip>
            <template slot="title">驳回信息全部都确认后<br/>才可以操作初审/复审通过！</template>
            <template count="">{{ info.log_count || '-' }}</template>
            <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="info.status"> {{ info.status.text || '-' }} </a-descriptions-item>
        <a-descriptions-item label="资料签收地址" v-if="info.express!=''">{{ info.express }}</a-descriptions-item>
      </a-descriptions>
    </template>
    <div>
      <a-card :bordered="true" style="margin-top: 24px" title="物流进度">
        <!-- :expandRowByClick="true" -->
        <a class="extra" v-if="info.can && info.can.outline" slot="extra" href="#" @click="downSignIn(info)">线下签收</a>
        <s-table
          ref="table"
          :columns="columns"
          :data="loadData"
          :rowKey="(row) => row.express_id"
          showPagination="auto"
          bordered
          @expand="onExpand"
          :expandedRowKeys="expandedRowKeys"
          size="default">
          <div slot="actions" slot-scope="text, record">
            {{ record.status_text }}
            <span v-if="(record.status == 0)">
              <a-divider type="vertical" />
              <a-popconfirm
                placement="top"
                title="是否确认签收"
                ok-text="确认"
                cancel-text="取消"
                @confirm="sure(record)"
              >
                <a> 签收 </a>
              </a-popconfirm>
            </span>
          </div>

          <span slot="express_name" slot-scope="text, record"> {{ record.express_name!=='' ?record.express_name : '-' }}</span>
          <span slot="express_number" slot-scope="text, record"> {{ record.express_number!=='' ?record.express_number : '-' }}</span>

          <div slot="expandedRowRender" style="margin: 0">
            <a-timeline v-if="logistics !== ''">
              <a-timeline-item v-for="( item, index ) in logistics" :key="index">
                <a-icon v-if="(index == 0)" slot="dot" type="clock-circle-o" style="font-size: 16px;" />
                <div class="time">{{ item.ftime }}</div>
                <div class="status" :style="index == 0?'color:#1890ff;':'color:#333;'">{{ item.status }}</div>
                <div>{{ item.context }}</div>
              </a-timeline-item>
            </a-timeline>
            <a-result v-else status="404" title="抱歉！" sub-title="未查任何信息..." />
          </div>
        </s-table>
      </a-card>
    </div>
  </page-header-wrapper>
</template>

<script>
import {
  orderInfo,
  getExpressesList,
  getLogistic,
  signInLogistic
  // getOrderList
} from '@/api/order'
import { STable } from '@/components'
import SelctAddrDrow from '@/views/address/modules/SelctAddrDrow.vue'
const columns = [
  { title: '快递名称', key: 'express_name', scopedSlots: { customRender: 'express_name' }, align: 'center' },
  { title: '快递号码', key: 'express_number', scopedSlots: { customRender: 'express_number' }, align: 'center' },
  { title: '邮寄材料类型', dataIndex: 'type', key: 'type', align: 'center' },
  { title: '邮寄时间', dataIndex: 'deliver_at', key: 'deliver_at', align: 'center' },
  { title: '签收方式', dataIndex: 'sign_type', key: 'sign_type', align: 'center' },
  { title: '签收状态', scopedSlots: { customRender: 'actions' }, align: 'center' }
]
export default {
  name: 'Logistics',
  components: {
    STable
  },
  data () {
    return {
      id: '',
      info: {},
      columns,
      expandedRowKeys: [],
      loading: false,
      logistics: [],
      queryParam: {},
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getExpressesList(this.id, requestParameters)
      }
    }
  },
  created () {
    this.id = this.$route.params.id
  },
  watch: {
    $route (to, from) {
      if (to.name === 'DetailLogistics') {
        this.id = this.$route.params.id
        this.$refs.table.loadData()
      }
    }
  },
  activated () {
    this.id = this.$route.params.id
    this.getInfo()
  },
  methods: {
    onExpand (expanded, record) {
      if (expanded) {
        this.detailsData = []
        this.expandedRowKeys = []
        this.detailsData.push(record)
        this.onExpandedRowsChange(record)
      } else {
        this.expandedRowKeys = []
      }
    },
    onExpandedRowsChange (rows) {
      const expressId = rows.express_id
      // 获取物流信息
      getLogistic(expressId).then(res => {
        this.logistics = res.logistics || ''
        this.expandedRowKeys = [expressId]
      }).catch(() => {
        this.logistics = ''
        this.expandedRowKeys = [expressId]
      })
    },
    // 确认签收物流
    sure (record) {
      signInLogistic(this.id, record.express_id).then(res => {
        this.$notification.success({
          message: '成功',
          description: '资料签收成功'
        })
        this.getInfo()
        this.$refs.table.loadData()
      }).catch((err) => {
        this.$notification.error({
          message: '资料签收失败',
          description: err.message
        })
      })
    },

    // 获取订单信息
    getInfo () {
      orderInfo(this.$route.params.id).then(res => {
        this.info = res
      })
    },
    // 线下签收
    downSignIn (order) {
      // 选择邮寄地址操作
      this.$dialog(
        SelctAddrDrow,
        {
          order,
          on: {
            ok: () => {
              this.$refs.table.loadData()
            },
            cancel: () => {
            }
          }
        },
        {
          title: '指派签收地址',
          width: 500,
          maskClosable: true,
          closable: true,
          okText: '确认',
          cancelText: '取消'
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
.status{
  font-size: 17px;
  font-weight: bold;
  padding-left: 6px;
}
.time{
  padding-left: 8px;
  color:#666;
}
</style>
