<template>
  <!-- 订单详情 -->
  <div class="order_details_dialog">
    <el-dialog top="5vh" title="订单详情" :visible.sync="staffDialogVisible" width="900px">
      <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 v-else-if="item.field == 'deliveryDuration'">
                {{item.title}}{{formatMinutes(waybillData[`${item.field}`])}}
              </div>
              <div style="width: 100%;" v-else-if="item.field == 'divider'">
                <el-divider>{{item.title}}</el-divider>
                <el-table :data="tableData" stripe style="width: 100%">
                  <el-table-column align="center" prop="physic_name" label="商品名称"></el-table-column>
                  <!-- <el-table-column align="center" prop="address" label="药品图片" width="100">
                      <el-image style="width: 90px; height: 75px"
                        :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']"
                        src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
                    </el-table-column> -->
                  <el-table-column align="center" prop="physic_type_desc" label="商品类型"></el-table-column>
                  <el-table-column align="center" prop="pkg_spec_crit" label="商品规格"></el-table-column>
                  <el-table-column align="center" prop="ent_name" label="生产厂家"></el-table-column>
                  <el-table-column align="center" prop="isAssignment" label="分配状态"
                    v-if="[4,5,6,8].includes(waybillData.status) && !waybillData.isChild">
                    <template slot-scope="scope">
                      <div v-if="scope.row.isAssignment">
                        <el-tag size="medium">已分配</el-tag>
                      </div>
                      <div v-else>
                        <el-tag size="danger">未分配</el-tag>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="grid-content bg-purple"
                v-else-if="['status','paymentType','paymentStatus'].includes(item.field) && !mywaybill">
                <div class="describe">{{item.title}}</div>
                <div style="text-align: left;line-height: 19px;"
                  :style="{color: filterColor(waybillData,item.options,item.field)}">
                  {{waybillStatus(waybillData[`${item.field}`],item.options)}}
                </div>
              </div>
              <div style="display: flex;align-items: center;flex-wrap: wrap;"
                v-else-if="waybillData.prescription && item.field == 'prescription'">
                <div class="describe">{{item.title}}</div>
                <div v-for="(item,index) in waybillData.prescription" :key="index">
                  <el-image style="width: 100px; height: 100px;border-radius: 5px;margin-right: 10px;" :src="item"
                    :preview-src-list="[item]">
                  </el-image>
                </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;line-height: 19px;"
                  :style="{color: myfilterColor(waybillData,myOrder,item.field)}">
                  {{mywaybillStatus(waybillData)}}
                </div>
              </div>
              <div class="grid-content bg-purple1"
                v-else-if="['tamperProofLabelImg','receiptImg','receiptsign'].includes(item.field)">
                <div class="describe1">{{item.title}}</div>
                <div class="card_item_image" v-for="(item1,index1) in getReceipt(waybillData[`${item.field}`])"
                  :key="index1" v-if="waybillData[`${item.field}`]">
                  <el-image style="width: 120px; height: 120px;border-radius: 4px;" :src="item1"
                    :preview-src-list="[item1]" v-if="item1"></el-image>
                </div>
              </div>
              <div class="grid-content bg-purple" v-else>
                <div class="describe">{{item.title}}</div>
                <div style="text-align: left;line-height: 19px;">{{waybillData[`${item.field}`]}}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    WaybillStatus,
    myOrder,
    radiolist,
    stateList
  } from '@/assets/js/blockSort'
  import {
    encryptData,
    decryptData
  } from '@/assets/js/aes.js'
  export default {
    props: {
      // 订单详情数据
      waybillData: {
        type: Object,
        default: () => {},
      },
      mywaybill: {
        type: Boolean,
        default: () => false,
      },
    },
    data() {
      return {
        tableData: [],
        staffDialogVisible: false,
        list: [{
          title: '运单号:',
          field: 'waybillNo',
          colWidth: 8,
        }, {
          title: '订单号:',
          field: 'orderNo',
          colWidth: 8,
        }, {
          title: '订单状态:',
          field: 'status',
          colWidth: 8,
          options: WaybillStatus(),
        }, {
          title: '患者姓名:',
          field: 'consigneeAddressName',
          colWidth: 8,
        }, {
          title: '患者电话:',
          field: 'consigneeAddressPhone',
          colWidth: 8,
        }, {
          title: '收件地址:',
          field: 'consigneeAddressDetails',
          colWidth: 24,
        }, {
          title: '配送员姓名:',
          field: 'courierName',
          colWidth: 8,
        }, {
          title: '配送员电话:',
          field: 'courierPhone',
          colWidth: 16,
        }, {
          title: '复核人姓名:',
          field: 'reCheckName',
          colWidth: 8,
        }, {
          title: '复核人电话:',
          field: 'reCheckPhone',
          colWidth: 8,
        }, {
          title: '下单时间:',
          field: 'orderTime',
          colWidth: 8,
        }, {
          title: '订购商品信息',
          field: 'divider',
          colWidth: 24,
        }, {
          title: '处方:',
          field: 'prescription',
          colWidth: 24,
        }, {
          title: '出发时间:',
          field: 'deliveryTime',
          colWidth: 8,
        }, {
          title: '保温箱:',
          field: 'coolerBoxName',
          colWidth: 8,
        }, {
          title: '冰排:',
          field: 'iceRaftCode',
          colWidth: 8,
        }, {
          title: '配送耗时:',
          field: 'deliveryDuration',
          colWidth: 8,
        }, {
          title: '签收时间:',
          field: 'deliveryTime',
          colWidth: 8,
        }, {
          title: '防拆标签码:',
          field: 'tamperProofLabel',
          colWidth: 8,
        }, {
          title: '防拆标签图片:',
          field: 'tamperProofLabelImg',
          colWidth: 24,
        }, {
          title: '签收图片:',
          field: 'receiptImg',
          colWidth: 12,
        }, {
          title: '客户签字图片:',
          field: 'receiptsign',
          colWidth: 12,
        }, {
          title: '支付方式:',
          field: 'paymentType',
          colWidth: 8,
          options: radiolist(),
        }, {
          title: '支付状态:',
          field: 'paymentStatus',
          colWidth: 8,
          options: stateList(),
        }, {
          title: '未结清备注:',
          field: 'paymentremark',
          colWidth: 8,
        }, {
          title: '服务评价:',
          field: 'assessContent',
          colWidth: 24,
        }, {
          title: '备注:',
          field: 'remark',
          colWidth: 24,
        }, {
          title: '物流详情:',
          field: 'logistics',
          colWidth: 24,
        }, ],
        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',
            name: 'WaybillInquiry',
            query: {
              waybillNo: encryptData(arr)
            }
          }).href;
          window.open(href, "_blank");
        } else {
          const href = this.$router.resolve({
            name: 'WaybillInquiry',
            query: {
              waybillNo: arr
            }
          }).href;
          window.open(href, "_blank");
        }
      },
      waybillStatus(value, list) {
        let label = ''
        list.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
      },
      getReceipt(value) {
        if (value) {
          const arrList = value.split(',')
          return arrList
        }
      },
      // 总分钟格式化
      formatMinutes(totalMinutes) {
        const hours = Math.floor(totalMinutes / 60); // 计算小时
        const minutes = totalMinutes % 60; // 计算分钟（余数）
        return `${hours}h${minutes}m`;
      },
      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" scoped>
  .card_order_details {
    padding: 20px;
    border: 1px solid rgba(95, 99, 127, 0.8);
  }

  .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;
  }

  .bg-purple1 {
    display: flex;
    align-items: center;
  }

  .describe {
    flex: none;
    margin-right: 5px;
  }

  .card_item_image {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
  }

  .describe1 {
    text-align: right;
    width: 60px;
    flex: none;
    margin-right: 5px;
  }
</style>
