<template>
  <!-- 订单详情 -->
  <div>
    <el-dialog title="订单详情" :visible.sync="staffDialogVisible" width="60%" :close-on-click-modal="false">
      <div class="card_order_details">
        <el-row type="flex" class="order_row">
          <el-col class="order_col" :span="item.colWidth" v-for="(item,index) in list" :key="index">
            <div style="display: flex;">
              <div v-if="item.field == 'logistics'">
                {{item.title}} <span class="order_look" @click="goLook">查看物流详情</span>
              </div>
              <div class="grid-content bg-purple" v-else-if="item.field == 'status' && !mywaybill">
                <div class="describe">{{item.title}}</div>
                <div style="text-align: left;" :style="{color: filterColor(waybillData,WaybillType,item.field)}">
                  {{waybillStatus(waybillData[`${item.field}`])}}
                </div>
              </div>
              <div class="grid-content bg-purple" v-else-if="item.field == 'status' && mywaybill">
                <div class="describe">{{item.title}}</div>
                <div style="text-align: left;" :style="{color: myfilterColor(waybillData,myOrder,item.field)}">
                  {{mywaybillStatus(waybillData)}}
                </div>
              </div>
              <div class="grid-content bg-purple" v-else-if="item.field == 'ReceiptImg'">
                <div class="describe" v-if="waybillData[`${item.field}`]">{{item.title}}</div>
                <el-image style="width: 100px; height: 100px" :src="waybillData[`${item.field}`]"
                  v-if="waybillData[`${item.field}`]"></el-image>
              </div>
              <div class="grid-content bg-purple" v-else>
                <div class="describe">{{item.title}}</div>
                <div style="text-align: left;">{{waybillData[`${item.field}`]}}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    WaybillStatus,
    myOrder
  } from '@/assets/js/blockSort'
  export default {
    props: {
      // 运单详情数据
      waybillData: {
        type: Object,
        default: () => {},
      },
      mywaybill: {
        type: Boolean,
        default: () => false,
      },
    },
    data() {
      return {
        staffDialogVisible: false,
        list: [{
          title: '运单号:',
          field: 'waybillNo',
          colWidth: 8,
        }, {
          title: '运单状态:',
          field: 'status',
          colWidth: 8,
        }, {
          title: '制单人:',
          field: 'nickName',
          colWidth: 8,
        }, {
          title: '寄件人:',
          field: 'senderAddressName',
          colWidth: 8,
        }, {
          title: '寄件人电话:',
          field: 'senderAddressPhone',
          colWidth: 8,
        }, {
          title: '寄件地址:',
          field: 'senderAddressDetails',
          colWidth: 8,
        }, {
          title: '收件人:',
          field: 'consigneeAddressName',
          colWidth: 8,
        }, {
          title: '收件人电话:',
          field: 'consigneeAddressPhone',
          colWidth: 8,
        }, {
          title: '收件地址:',
          field: 'consigneeAddressDetails',
          colWidth: 8,
        }, {
          title: '温度需求:',
          field: 'temperatureInterval',
          colWidth: 8,
        }, {
          title: '配送要求:',
          field: 'deliveryCondition',
          colWidth: 8,
        }, {
          title: '货物类型:',
          field: 'cargoType',
          colWidth: 8,
        }, {
          title: '入库/装车时间:',
          field: 'order',
          colWidth: 8,
        }, {
          title: '下单时间:',
          field: 'orderTime',
          colWidth: 8,
        }, {
          title: '签收时间:',
          field: 'receiptTime',
          colWidth: 8,
        }, {
          title: '备注:',
          field: 'remark',
          colWidth: 24,
        }, {
          title: '签收图片:',
          field: 'ReceiptImg',
          colWidth: 24,
        }, {
          title: '物流详情:',
          field: 'logistics',
          colWidth: 24,
        }, ],
        WaybillType: WaybillStatus(),
        myOrder: myOrder(),
        userType: '',
      }
    },
    mounted() {
      const arr = localStorage.getItem('userList')
      const arr1 = JSON.parse(arr)
      this.userType = arr1.userType
    },
    methods: {
      // 查看物流详情
      goLook() {
        const arr = this.waybillData.waybillNo
        this.staffDialogVisible = false
        if (this.userType != 'customer') {
          const href = this.$router.resolve({
            name: 'newInquiry',
            query: {
              waybillNo: arr
            }
          }).href;
          window.open(href, "_blank");
        } else {
          const href = this.$router.resolve({
            name: 'WaybillInquiry',
            query: {
              waybillNo: arr
            }
          }).href;
          window.open(href, "_blank");
        }
      },
      waybillStatus(value) {
        let label = ''
        this.WaybillType.forEach(item => {
          if (item.value == value) {
            label = item.label
          }
        })
        return label
      },
      // tag颜色获取
      filterColor(value, list, type) {
        let color = ''
        list.forEach(item => {
          if (value[type] === item.value) {
            color = item.bgcolor
          }
        })
        return color
      },
      mywaybillStatus(value) {
        const list = this.myOrder
        if ([1, 2, 3].includes(value.status)) {
          return list[0].label
        } else if ([4, 5, 6, 7].includes(value.status)) {
          return list[1].label
        } else if (value.status == 8) {
          return list[2].label
        }
      },
      // tag颜色获取
      myfilterColor(value, list, type) {
        if ([1, 2, 3].includes(value.status)) {
          return list[0].bgcolor
        } else if ([4, 5, 6, 7].includes(value.status)) {
          return list[1].bgcolor
        } else if (value.status == 8) {
          return list[2].bgcolor
        }
      },
    }
  }
</script>

<style lang="scss">
  .card_order_details {
    padding: 20px;
    border: 1px solid #EBEEF5;
  }

  .order_row {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .order_col {
    padding: 10px;
  }

  .order_look {
    cursor: pointer;
    color: #409EFF;
  }

  .bg-purple {
    display: flex;
    align-items: flex-start;
  }

  .describe {
    flex: none;
    margin-right: 5px;
  }
</style>
