<template>
  <a-drawer width="60%" :visible="visible" title="订单详情" @close="close">
    <ChooseValuator
      ref="ChooseValuator"
      :afterChoose="fetchData"
      :orderId="id"
    />
    <SendPriceModal ref="SendPriceModal" :onSuccess="fetchData" :orderId="id" />
    <ChooseWorker ref="ChooseWorker" :afterChoose="fetchData" :orderId="id" />
    <div id="order-detail-drawer-box">
      <div id="order-detail-drawer-box-info">
        <a-descriptions title="订单信息" layout="vertical" :column="2">
          <a-descriptions-item label="服务类型">
            {{ order.serviceName || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="下单时间">
            {{
              order.createTime
                ? dayjs(order.createTime).format('YYYY-MM-DD HH:mm')
                : '-'
            }}
          </a-descriptions-item>
          <a-descriptions-item label="联系人">
            {{ order.name || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="联系电话">
            {{ order.phone || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="订单编号">
            {{ order.orderNo || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="上门时间">
            {{
              order.expectArrivalTime
                ? dayjs(order.expectArrivalTime).format('YYYY-MM-DD HH:mm')
                : '-'
            }}
          </a-descriptions-item>
          <a-descriptions-item label="数量">
            {{ order.num || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="当前定价(元)">
            {{ order.price || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="地址">
            {{ order.address || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="已支付金额(元)">
            {{ order.totalPrice || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="需求说明" :span="2">
            {{ order.demandDesc || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="现场照片" :span="2">
            <div id="order-images">
              <template v-for="(url, i) in order.demandImgUrls">
                <a :key="i" :href="url">
                  <img width="100" style="margin: 0 5px 5px 0" :src="url" />
                </a>
              </template>
            </div>
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div id="order-detail-drawer-box-timeline">
        <h3>订单流程</h3>
        <a-timeline>
          <template v-for="(log, i) in order.process">
            <a-timeline-item :key="i">
              <p>{{ log.description }}</p>
              <p v-if="log.expectArrivalTime">
                上门估价时间:&nbsp;{{
                  dayjs(log.expectArrivalTime).format('YYYY-MM-DD HH:mm')
                }}
              </p>
              <p v-if="log.remark">备注:&nbsp;{{ log.remark }}</p>
              <p>{{ dayjs(log.createTime).format('YYYY-MM-DD HH:mm') }}</p>
            </a-timeline-item>
          </template>
        </a-timeline>
      </div>
    </div>
    <div class="drawer-form-bottom-toolbar">
      <a-space>
        <a-button
          @click="sendPrice"
          type="primary"
          v-if="
            hasPerm('SYS02201.SEND') &&
            !past &&
            (order.orderStatus == STATUS.RESERVE ||
              order.orderStatus == STATUS.VALUATION ||
              order.orderStatus == STATUS.PAY ||
              order.orderStatus == STATUS.DISPATCH)
          "
        >
          发送订单
        </a-button>
        <a-button
          @click="sendValuator"
          v-if="hasPerm('SYS02201.VALUATOR') && !past && order.orderStatus == STATUS.RESERVE"
        >
          现场估价
        </a-button>
        <a-button
          @click="reSendValuator"
          v-if="hasPerm('SYS02201.VALUATOR') && !past && order.orderStatus == STATUS.VALUATION"
        >
          重新指派估价员
        </a-button>
        <a-button
          v-if="hasPerm('SYS02201.WORKER') && !past && order.orderStatus == STATUS.PAY"
          type="primary"
          @click="dispatch"
        >
          派单
        </a-button>
        <a-button
          v-if="hasPerm('SYS02201.WORKER') && !past && order.orderStatus == STATUS.DISPATCH"
          @click="reDispatch"
        >
          重新派单
        </a-button>
        <a-button
          @click="finish"
          v-if="hasPerm('SYS02201.FINISH') && past && order.orderStatus == STATUS.DISPATCH"
          type="primary"
        >
          完成
        </a-button>
      </a-space>
    </div>
  </a-drawer>
</template>
<script>
import ImageUpload from '@/components/image-upload/ImageUpload'
import { getDetail, STATUS, finishOrder } from '@/api/order'
import SimpleLightbox from 'simple-lightbox'
import ChooseValuator from './ChooseValuator'
import SendPriceModal from './SendPriceModal'
import ChooseWorker from './ChooseWorker'
import dayjs from 'dayjs'

const defaultData = {
  process: [],
  demandImgUrls: []
}

export default {
  name: 'OrderDetail',
  components: { ImageUpload, ChooseValuator, SendPriceModal, ChooseWorker },
  props: { success: Function },
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      id: null,
      order: defaultData,
      STATUS,
      past: false, // 是否已过服务时间
      lightbox: null,
      dayjs
    }
  },
  methods: {
    show(id) {
      this.id = id
      this.visible = true
      if (this.id) {
        this.fetchData()
      }
    },
    close() {
      this.id = null
      this.order = defaultData
      this.lightbox && this.lightbox.destroy()
      this.visible = false
    },
    // 发送订单
    sendPrice() {
      this.$refs.SendPriceModal.show()
    },
    // 指派估价员
    sendValuator() {
      this.$refs.ChooseValuator.show('first')
    },
    // 重新指派估价员
    reSendValuator() {
      this.$refs.ChooseValuator.show('rework')
    },
    dispatch() {
      this.$refs.ChooseWorker.show('first')
    },
    reDispatch() {
      this.$refs.ChooseWorker.show('rework')
    },
    fetchData() {
      getDetail(this.id).then(({ data }) => {
        this.order = data
        // 判断是否已过服务时间
        this.past = dayjs().diff(data.expectArrivalTime, 'day') > 0
        this.$nextTick(() => {
          this.lightbox = new SimpleLightbox({ elements: '#order-images a' })
        })
      })
    },
    finish() {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '是否结束此订单',
        onOk() {
          finishOrder({ id: _this.id }).then(({ code }) => {
            if (code == 200) {
              _this.$message.success('订单已完成')
              _this.fetchData()
            }
          })
        }
      })
    }
  },
  mounted() {}
}
</script>
<style lang="less">
#order-detail-drawer-box {
  height: 100%;
  display: flex;
  #order-detail-drawer-box-info {
    width: 60%;
  }
  #order-detail-drawer-box-timeline {
    width: 40%;
    max-height: 100%;
    overflow-y: auto;
    h3 {
      margin-bottom: 30px;
      font-weight: bold;
    }
  }
  .ant-descriptions-item-label {
    margin-top: 5px;
    font-weight: bold;
  }
}
</style>