<template>
  <div class="app-container">
      <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/search/order' }">订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单明细</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="order-details">
        <TitleTip :titleText="`订单流程`" />

        <div style="padding: 20px 40px">
            <el-steps
                :active="currentActive"
                :finish-status="isReject ? 'wait' : 'success'"
                :process-status="isReject ? 'error' : 'process'"
                align-center
            >
                <el-step
                    v-for="item in stepList"
                    :key="item.index"
                    :title="item.title"
                    :description="item.description"
                />
            </el-steps>
        </div>
        <TitleTip :titleText="`租赁信息`" />
        <el-row style="padding: 4px 40px; font-size: 14px">
            <el-col :span="8">
                <span> 订单编号： </span>
                <span>
                    {{ orderDetails.code }}
                </span>
            </el-col>
            <el-col :span="8">
                <span> 下单时间： </span>
                <span>
                    {{ orderDetails.orderTime }}
                </span>
            </el-col>
            <el-col :span="8">
                <span> 出租单位： </span>
                <span>
                    {{ orderDetails.czcompanyName }}
                </span>
            </el-col>
        </el-row>
        <el-row style="padding: 4px 40px; font-size: 14px">
            <el-col :span="8">
                <span> 出租人： </span>
                <span>
                    {{ orderDetails.person }}
                </span>
            </el-col>
            <el-col :span="8">
                <span> 出租人电话： </span>
                <span>
                    {{ orderDetails.personPhone }}
                </span>
            </el-col>
            <el-col :span="8">
                <span> 承租单位： </span>
                <span>
                    {{ orderDetails.companyName }}
                </span>
            </el-col>
        </el-row>
        <el-row style="padding: 4px 40px; font-size: 14px">
            <el-col :span="8">
                <span> 承租人： </span>
                <span>
                    {{ orderDetails.nickName }}
                </span>
            </el-col>
            <el-col :span="8">
                <span> 承租人电话： </span>
                <span>
                    {{ orderDetails.phoneNumber }}
                </span>
            </el-col>
            <el-col :span="8">
                <span> 租赁协议： </span>
                <span> ** </span>
            </el-col>
        </el-row>

        <el-row
            style="
                background: #fff;
                padding: 4px 12px;
                margin: 4px;
                border: 1px solid #ccc;
                border-radius: 20px;
            "
        >
            <el-col :span="12" style="padding-left: 30px">
                <div
                    v-for="(goods, j) in orderDetails.detailsList"
                    :key="j"
                    class="order-items order-info"
                    :style="
                        j != orderDetails.detailsList.length - 1
                            ? 'border-bottom:1px solid #eee'
                            : ''
                    "
                    style="min-height: 80px"
                >
                    <el-image
                        :src="goods.url"
                        style="width: 110px; height: 70px"
                        alt="#"
                        fit="cover"
                    />
                    <div
                        style="
                            min-height: 80px;
                            flex: 1;
                            display: flex;
                            justify-content: space-around;
                            flex-direction: column;
                            padding-left: 50px;
                            font-size: 13px;
                        "
                    >
                        <el-row style="font-weight: bold">
                            {{ goods.deviceName }}
                        </el-row>
                        <el-row>
                            <el-col :span="3"> 租期 :</el-col>
                            <el-col :span="18">
                                <span style="margin-right: 10px" :style="isOrderComplete">
                                    {{ goods.days }}{{ ' ' + '天' }}
                                </span>
                                <span v-if="orderStatus == 20">
                                    {{
                                        momentInit(goods.takeOverTime).diff(
                                            goods.rentOverTime,
                                            'day',
                                        ) == 0
                                            ? 1
                                            : momentInit(goods.takeOverTime).diff(
                                                  goods.rentOverTime,
                                                  'day',
                                              )
                                    }}{{ ' ' + '天' }}
                                </span>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="3"> 租金 ：</el-col>
                            <el-col :span="8">
                                {{ goods.dayLeasePrice }}{{ ' ' + '元 / 天' }}
                            </el-col>
                            <el-col :span="3"> 数量 ：</el-col>
                            <el-col :span="8"> {{ goods.num }}{{ ' ' + '台' }} </el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>

            <el-col :span="7" class="order-items-info">
                <div
                    v-for="(goods, j) in orderDetails.detailsList"
                    :key="j"
                    class="order-items order-info"
                    :style="
                        j != orderDetails.detailsList.length - 1
                            ? 'border-bottom:1px solid #eee'
                            : ''
                    "
                    style="min-height: 80px; width: 100%; font-size: 13px"
                >
                    <div
                        style="
                            width: 100%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            flex-direction: column;
                        "
                    >
                        <div>租期</div>
                        <div
                            style="font-weight: bold; margin-top: 10px"
                            :style="isOrderComplete"
                        >
                            {{ goods.rentBeginTime }}至{{ goods.rentEndTime }}
                        </div>
                        <div
                            style="font-weight: bold; margin-top: 10px"
                            v-if="orderStatus == 20"
                        >
                            {{ goods.takeOverTime.slice(0, 10) }}至{{
                                goods.rentOverTime.slice(0, 10)
                            }}
                        </div>
                    </div>
                </div>
            </el-col>

            <el-col :span="5" class="order-items-info" style="border: none; font-size: 13px">
                <div>总费用</div>
                <div class="red-font" >{{ orderDetails.cost }} 元</div>
                <div class="red-font" v-if="orderStatus == 20">
                    {{ overhaulDetails.totalCost }} 元
                </div>
            </el-col>
        </el-row>

        <TitleTip :titleText="`退租检测/费用结算信息`" v-if="orderStatus == 20" />

        <div style="padding: 0 15px" v-if="orderStatus == 20">
            <div style="padding: 6px 0 0 0; font-size: 18px; color: #eb190a; font-weight: bold">
                总费用(元)： <span>{{ overhaulDetails.totalCost }}</span>
            </div>
            <TitleTip :titleText="`租赁费用明细`" />
            <el-table
                border
                :data="orderDetailDtoList"
                show-overflow-tooltip
                :header-cell-style="{
                    color: '#fff',
                    background: '#00a288',
                }"
            >
                <el-table-column prop="deviceName" align="center" label="装备名称" />
                <el-table-column prop="typeName" align="center" label="型号" />
                <el-table-column prop="num" align="center" label="数量" />
                <el-table-column align="center" label="租赁单价(元/天)">
                    <template #default="{ row }">
                        <span style="color: #eb190a">
                            {{ row.dayLeasePrice }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="days" align="center" label="租赁天数" />
                <el-table-column prop="days" align="center" label="租期">
                    <template #default="{ row }">
                        {{ `${row.preOutboundTime}至${row.rentOverTime} ` }}
                    </template>
                </el-table-column>
                <el-table-column prop="costs" align="center" label="租赁费用(元)" width="160">
                </el-table-column>
                <el-table-column prop="changeCost" align="center" label="改价后实际费用(元)" />
            </el-table>

            <TitleTip :titleText="`维修费用明细`" />
            <el-table
                :data="repairRecordList"
                border
                show-overflow-tooltip
                :header-cell-style="{
                    background: '#00a288',
                    color: '#fff',
                }"
            >
                <el-table-column prop="deviceName" align="center" label="装备名称" />
                <el-table-column prop="typeName" align="center" label="型号" />
                <el-table-column prop="repairNum" align="center" label="维修数量" />
                <el-table-column align="center" prop="repairPrice" label="维修费用(元)">
                </el-table-column>
                <el-table-column
                    prop="repairChangePrice"
                    align="center"
                    label="改价后实际费用(元)"
                />
                <el-table-column align="center" label="附件" width="160">
                    <template #default="{ row }">
                        <el-button type="primary" size="small" @click="onViewFileImg(row, 0)"
                            >查看</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <TitleTip :titleText="`报废费用明细`" />
            <el-table
                :data="scrapRecordList"
                border
                show-overflow-tooltip
                :header-cell-style="{
                    background: '#00a288',
                    color: '#fff',
                }"
            >
                <el-table-column prop="deviceName" align="center" label="装备名称" />
                <el-table-column prop="typeName" align="center" label="型号" />
                <el-table-column prop="scrapNum" align="center" label="报废数量" />
                <el-table-column prop="scrapReason" align="center" label="报废原因" />
                <el-table-column prop="scrapPrice" align="center" label="报废费用(元)">
                </el-table-column>
                <el-table-column
                    prop="scrapChangePrice"
                    align="center"
                    label="改价后费用(元)"
                />
                <el-table-column align="center" label="附件" width="160">
                    <template #default="{ row }">
                        <el-button type="primary" size="small" @click="onViewFileImg(row, 1)"
                            >查看</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <TitleTip :titleText="`丢失费用明细`" />
            <el-table
                :data="lossRecordList"
                border
                show-overflow-tooltip
                :header-cell-style="{
                    background: '#00a288',
                    color: '#fff',
                }"
            >
                <el-table-column prop="deviceName" align="center" label="装备名称" />
                <el-table-column prop="typeName" align="center" label="型号" />
                <el-table-column prop="lossNum" align="center" label="丢失数量" />
                <el-table-column prop="lossPrice" align="center" label="丢失费用(元)">
                </el-table-column>
                <el-table-column prop="lossChangePrice" align="center" label="改价后费用(元)" />
                <el-table-column align="center" label="附件" width="160">
                    <template #default="{ row }">
                        <el-button type="primary" size="small" @click="onViewFileImg(row, 2)">
                            查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>  

    <el-dialog :visible.sync="innerVisible" width="500" title="附件详情" append-to-body>
        <el-table
            :data="viewFileInfoList"
            border
            show-overflow-tooltip
            :header-cell-style="{
                background: '#00a288',
                color: '#fff',
            }"
        >
            <el-table-column prop="fileName" align="center" label="文件名称" />
            <el-table-column align="center" label="操作" width="120">
                <template #default="{ row }">
                    <el-image
                        style="width: 60px; height: 60px"
                        :src="row.fileUrl"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :preview-src-list="[row.fileUrl]"
                        :initial-index="0"
                        fit="cover"
                        :z-index="9999999999"
                        :preview-teleported="true"
                    />
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
  </div>


</template> 
  
  <script>
import TitleTip from '@/components/TitleTip'
import { getOrderListInfoApi,getOverhaulApi } from "@/api/search/order"; 
import moment from 'moment'
export default {
  components: { TitleTip },
  name: "orderDetail",
  data() {
    return {
      orderStatus: undefined,
      orderId:undefined,
      // 遮罩层
      loading: false,
      dialogLoading: false,
      isView: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      ids: [],
      checkList: [],
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      titleStaus:"",
      // 查询参数
      queryParams: {
        typeId: undefined,
        supplierId: undefined,
        productionTime: undefined,
      },
      orderDetails:{},
      momentInit : moment,
      orderDetailDtoList: [],
      repairRecordList: [],
      scrapRecordList: [],
      lossRecordList: [],
      overhaulDetails: {},
      fileListAll: [],
      cardList:[],
      //描述信息
       stepList:[
    {
        title: '待接单',
        description: '',
    },
    {
        title: '待出库',
        description: '',
    },
    {
        title: '待收货',
        description: '',
    },
    {
        title: '租赁中',
        description: '',
    },
    {
        title: '已退租待检修',
        description: '',
    },
    {
        title: '已检修待结算',
        description: '',
    },

    {
        title: '订单完成',
        description: '',
    },
  ],
       isReject:false,
       currentActive:0,
       isOrderComplete:undefined,
       viewFileInfoList:[],
       innerVisible:false,
    };
  },
  mounted() {
    this.orderStatus = Number(this.$route.query && this.$route.query.orderStatus);
    this.orderId = Number(this.$route.query && this.$route.query.orderId);
    this.stepList=[
    {
        title: '待接单',
        description: '',
    },
    {
        title: '待出库',
        description: '',
    },
    {
        title: '待收货',
        description: '',
    },
    {
        title: '租赁中',
        description: '',
    },
    {
        title: '已退租待检修',
        description: '',
    },
    {
        title: '已检修待结算',
        description: '',
    },

    {
        title: '订单完成',
        description: '',
    },
  ];
    if (this.orderStatus == 1) {
    this.currentActive = 0
    }
    if (this.orderStatus == 2) {
        this.currentActive = 1
        this.stepList[0].title = '已接单'
    }
    if (this.orderStatus == 3) {
        this.stepList[0].title = '已接单'
        this.stepList[1].title = '已出库'
        this.currentActive = 2
    }
    if (this.orderStatus == 4) {
        this.stepList[0].title = '已接单'
        this.stepList[1].title = '已出库'
        this.stepList[2].title = '已收货'
        this.currentActive = 3
    }
    if (this.orderStatus == 5) {
        this.stepList[0].title = '已接单'
        this.stepList[1].title = '已出库'
        this.stepList[2].title = '已收货'
        this.currentActive = 4
    }
    if (this.orderStatus == 10) {
      this.stepList[0].title = '已接单'
      this.stepList[1].title = '已出库'
      this.stepList[2].title = '已收货'
      this.stepList[3].title = '租赁结束'
      this.stepList[4].title = '退租已检修'
      this.currentActive = 5
    }
    if (this.orderStatus == 15) {
        this.stepList[0].title = '已接单'
        this.stepList[1].title = '已出库'
        this.stepList[2].title = '已收货'
        this.stepList[3].title = '租赁结束'
        this.stepList[4].title = '退租已检修'
        this.stepList[5].title = '已结算待确认'
        this.currentActive = 5
    }
    if (this.orderStatus == 20) {
        this.stepList[0].title = '已接单'
        this.stepList[1].title = '已出库'
        this.stepList[2].title = '已收货'
        this.stepList[3].title = '租赁结束'
        this.stepList[4].title = '退租已检修'
        this.stepList[5].title = '结算完成'
        this.currentActive = 7
    }
    this.$forceUpdate();
    this.getList();
  },

  watch:{
  },
  methods: {
    /** 查询列表 */
    getList() {
      getOrderListInfoApi({orderId:this.orderId}).then(async(res) => {
                this.orderDetails = res.data;
                if(this.orderStatus == 20){
                await getOverhaulApi(this.orderId).then((resTwo) => {
                  this.orderDetailDtoList = resTwo.data.orderDetailDtoList;
                  this.repairRecordList = resTwo.data.repairRecordList;
                  this.scrapRecordList = resTwo.data.scrapRecordList;
                  this.lossRecordList = resTwo.data.lossRecordList;
                  this.fileListAll = resTwo.data.fileInfoList;
                  this.overhaulDetails = resTwo.data;
                })}
                console.log('12',this.orderDetails)
                console.log('14',this.overhaulDetails)
            });
    },

    onViewFileImg(row, index) {
      this.viewFileInfoList = [];
      if(this.fileListAll){
        this.fileListAll.forEach((e) => {
          if (e.fileType == index) {
            this.viewFileInfoList.push(e);
          }
        });
      }
      // if(this.fileListAll){
      //   this.viewFileInfoList = this.fileListAll.find((e) => e.fileType == index);
      // }
      console.log('12131',this.viewFileInfoList)
      this.innerVisible = true;
    },

  },
};
</script>
  <style lang="scss" scoped>
   .order-details {
        flex: 1;
        overflow-y: auto;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        padding: 0 12px;
        margin-top: 20px;
    }

    .step {
        margin-left: 80px;
    }

    .section {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .cart-tbody {
        background: #fff;
        padding: 8px 12px;
        margin: 10px;
        border: 1px solid #ccc;
        border-radius: 20px;
        .cart-user-info {
            display: flex;
            align-items: center;
            font-size: 13px;

            .user-name,
            .user-phone {
                padding: 3px 18px;
                border: 1px solid #ccc;
            }

            .user-name {
                margin-left: 20px;
                border-right: none;
            }
        }

        .cart-list {
            margin: 15px 0;
            display: flex;
            align-items: center;

            div {
                text-align: center;
            }

            .goods-info {
                display: flex;
                align-content: center;
                border-bottom: 1px solid #00a288;
                img {
                    width: 140px;
                    height: 80px;
                }

                .goods-code {
                    margin-left: 70px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    div {
                        text-align: left;
                    }
                }
            }

            .lease-date {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 12px;
            }

            .red-font {
                color: #ff4800;
                font-weight: bold;
            }
        }
    }
    .cart-listAll {
        margin: 15px 0;
        display: flex;
        align-items: center;
        font-size: 13px;

        div {
            text-align: center;
        }
        .cart-list {
            margin: 15px 0;
            display: flex;
            align-items: center;
            font-size: 13px;

            div {
                text-align: center;
            }

            .goods-info {
                display: flex;
                align-content: center;

                img {
                    width: 180px;
                    height: 80px;
                }

                .goods-code {
                    margin-left: 110px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    div {
                        text-align: left;
                    }
                }
            }

            .lease-date {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 12px;
            }

            .red-font {
                color: #ff4800;
                font-weight: bold;
            }
        }
        .lease-date {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 12px;
        }

        .red-font {
            color: #ff4800;
            font-weight: bold;
        }
    }
    .order-items {
    border-right: 1px solid #eee;
}

.order-info {
    display: flex;
    padding: 10px 0;
    align-items: center;
}

.order-items-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #eee;
}

.red-font {
    color: #ff4800;
    font-weight: bold;
    margin-top: 10px;
}
</style>