<template>
  <div>
    <a-modal
      class="modalBox"
      title="详情"
      v-model="isshow"
      @cancle="cancel"
      width="70%"
      :centered="true">
      <a-row :gutter="48" >
        <a-col :span="8" class="item-cont">
          <p class="item-label">单号：</p>
          <p class="item-main">{{ pageInfo.orderReserveNo ? pageInfo.orderReserveNo : '--' }}</p>
        </a-col>

        <a-col :span="8" class="item-cont">
          <p class="item-label">状态：</p>
          <p class="item-main">{{ pageInfo.orderStatusDictValue ? pageInfo.orderStatusDictValue : '--' }}</p>
        </a-col>
        <a-col :span="8" class="item-cont">
          <p class="item-label">支付方式：</p>
          <p class="item-main">{{ pageInfo.payTypeDictValue ? pageInfo.payTypeDictValue : '--' }}</p>
        </a-col>
      </a-row>
      <a-row :gutter="48" >
        <a-col :span="8" class="item-cont">
          <p class="item-label">下单时间：</p>
          <p class="item-main">{{ pageInfo.createDate ? pageInfo.createDate : '--' }}</p>
        </a-col>

        <a-col :span="8" class="item-cont">
          <p class="item-label">预约时间：</p>
          <p class="item-main">{{pageInfo.reserveDateBegin ? pageInfo.reserveDateBegin.substring(0,10) :''}} {{pageInfo.reserveTimeTypeDictValue}}</p>
          <p v-if="!pageInfo.reserveDateBegin && !pageInfo.reserveTimeTypeDictValue">--</p>
        </a-col>
        <a-col :span="8" class="item-cont" v-if="pageInfo.orderStatus=='FINISH'">
          <p class="item-label">服务时间：</p>
          <p class="item-main">{{ pageInfo.finishDate ? pageInfo.finishDate : '--' }}</p>
        </a-col>
      </a-row>
      <a-row :gutter="48" >
        <a-col :span="8" class="item-cont">
          <p class="item-label">服务骑手：</p>
          <p class="item-main">{{ pageInfo.name ? pageInfo.name+'-' : '' }}{{ pageInfo.phone? pageInfo.phone :'' }}</p>
          <p v-if="!pageInfo.name && !pageInfo.phone">--</p>
        </a-col>
        <a-col :span="8" class="item-cont">
          <p class="item-label">回收重量(kg)：</p>
          <p class="item-main">{{ pageInfo.TOTAL_WEIGHT ? (pageInfo.TOTAL_WEIGHT/1000).toFixed(3)/1 : '0' }}</p>
        </a-col>
        <a-col :span="8" class="item-cont" v-if="pageInfo.orderStatus=='FINISH'">
          <p class="item-label">支付金额(元)：</p>
          <p class="item-main">{{ pageInfo.originalAmount ? pageInfo.originalAmount : '0' }}</p>
        </a-col>
      </a-row>
      <a-row :gutter="48" >
        <a-col :span="8" class="item-cont">
          <p class="item-label">联系人信息：</p>
          <p class="item-main">{{ pageInfo.contactName ? pageInfo.contactName+'-' : '' }} {{ pageInfo.contactMobile ? pageInfo.contactMobile : '' }}</p>
          <p class="item-main" v-if="!pageInfo.contactName && !pageInfo. contactName">--</p>
        </a-col>
        <a-col :span="8" class="item-cont">
          <p class="item-label">地址：</p>
          <p class="item-main">{{ pageInfo.contactAddress ? pageInfo.contactAddress : '' }}{{pageInfo.houseAddress ? pageInfo.houseAddress : ''}}</p>
        </a-col>
        <a-col :span="8" class="item-cont">
          <p class="item-label">门头照：</p>
          <viewer :image="pageInfo.imageHeader ? pageInfo.imageHeader :[]" class="viewer" ref="viewer" @inited="inited" rebuild>
            <img v-for="src in pageInfo.imageHeader" :src="src" :key="src" class="image1">
          </viewer>
        </a-col>
      </a-row>
      <a-row :gutter="48" >
        <a-col :span="8" class="item-cont">
          <p class="item-label">类型：</p>
          <p class="item-main">{{ pageInfo.addressTypeDictValue ? pageInfo.addressTypeDictValue : '--' }}</p>
        </a-col>
        <a-col :span="8" class="item-cont" v-if="pageInfo.cencelReason=='CANCEL'">
          <p class="item-label">取消原因：</p>
          <p class="item-main">{{ pageInfo.cencelReason ? pageInfo.cencelReason : '--' }}</p>
        </a-col>
        <a-col :span="8" class="item-cont">
          <p class="item-label">图片：</p>
          <viewer :images="pageInfo.imageList? pageInfo.imageList:[]" class="viewer" ref="viewer" @inited="inited" rebuild>
            <img v-for="src in pageInfo.imageList" :src="src" :key="src" class="image">
          </viewer>
          <P style="margin-bottom: 0;">{{ pageInfo.imageList ? pageInfo.imageList.length+' 张' :'0 张' }}</P>
          <!-- <img :src="item" alt="" v-for="item in pageInfo.imageList" style="width: 40px;height: 40px;"/> -->
        </a-col>
      </a-row>
      <a-row :gutter="48" >
        <a-col :span="8" class="item-cont">
          <p class="item-label">下单账号：</p>
          <p class="item-main">{{ pageInfo.mobile ? pageInfo.mobile : '--' }}</p>
        </a-col>
      </a-row>
      <!-- 列表 -->
      <div class="table-title">回收明细</div>
      <!-- 列表 -->
      <a-table
        ref="table"
        :rowKey="(record) => record.id"
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
        :scroll="{ y: 450 }"
        bordered
      >
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import { orderDetails } from '@/api/recoveryManage.js'
export default {
  name: 'RiderOrderModal',
  components: {
    // VSelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    itemOrderNo: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      isshow: this.visible,
      tableData: [], // 列表数据
      image:[],
      images:[],
      pageInfo: {},
      columns: [{ title: '序号', dataIndex: 'no', width: 60, align: 'center' },
        { title: '回收类别', dataIndex: 'rubbishTypeDictValue', width: 200, align: 'center', customRender: (text) => { return text || '--' } },
        { title: '回收名称', dataIndex: 'typeName', width: 200, align: 'center', customRender: (text) => { return text || '--' } },
        { title: '回收价格', dataIndex: 'rubbishPrice', width: 200, align: 'center', customRender: (text) => { return text || '--' } },
        { title: '回收重量(kg)', dataIndex: 'rubbishWeight', width: 150, align: 'center', customRender: (text) => { return (text / 1000).toFixed(3) / 1 || '0' } },
        { title: '交易金额(元)', dataIndex: 'totalAmount', width: 150, align: 'center', customRender: (text) => { return text || 0 } }]
    }
  },
  methods: {
    // 详情数据
    getPageData () {
      orderDetails({ orderReserveNo: this.itemOrderNo }).then(res => {
        if (res.status == 200) {
          this.pageInfo = res.data
          if(res.data.imageHeader){
           this.pageInfo.imageHeader=this.pageInfo.imageHeader.split()
          }
        console.log( this.pageInfo.imageHeader,'---------------v')
          this.tableData = res.data.orderReserveItemEntityList || []
          this.tableData.forEach((item,index)=>{
             item.no=index+1
          })
        }
      })
    },
    inited (viewer) {
      this.$viewer = viewer
    },
    isShow () {
      this.$viewer.update()
    },
    cancel (e) {
      this.clear()
      this.$emit('close')
    },
    // 取消
    handleCancel () {
      this.cancel()
    }

  },
  watch: {
    visible (newValue, oldValue) {
      this.isshow = newValue
    },
    isshow (newValue, oldValue) {
      if (newValue) {
        if (this.itemOrderNo) {
          this.getPageData()
        }
      } else {
        this.$emit('close')
      }
    }
  }
}
</script>

<style lang="less">
  .ant-modal-footer {
    display: none;
  }
  .network-edit-search-jwd{
    margin-top: 8px;
  }
  .table-title{
    margin-bottom: 10px;
  }
  .item-cont{
    display: flex;
  }
  .image1 {
    width:25px;
    height: 25px;
    cursor: pointer;
    margin: 5px;
    display: inline-block;
  }
  .image {
    width:25px;
    height: 25px;
    cursor: pointer;
    margin: 5px;
    display: inline-block;
  }
  .image:not(:first-child){
    display: none;
  }
</style>
