<template>
  <div class="app-container" v-if="cons">
    <el-card class="card">
      <div slot="header" class="card-title">
        {{ $t("快递单号") }}：{{ cons.expressNo }} - <dict-tag :type="DICT_TYPE.CONS_STATUS" :value="cons.status" />
      </div>
      <el-row :gutter="24">
        <el-col :span="12" style="font-size: 16px">
          {{ $t("ID") }}:{{ cons.consNum }}
        </el-col>
      </el-row>
    </el-card>
    <el-card class="card">
      <div slot="header" class="card-title">
        {{$t('发货人')}}
      </div>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-descriptions class="margin-top" border  :column="3" :labelStyle="{ width: '110px' }" :contentStyle="{ width: '150px' }">
            <el-descriptions-item :label="$t('名称')">
              <component :is="'router-link'"
                         :to="`/customer/query/${cons.customerId}`">{{ cons.customerName }}-{{cons.customerNumber}}
              </component>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="card">
      <el-descriptions border :title="$t('运输')" :column="5" :labelStyle="{ width: '110px' }" :contentStyle="{ width: '150px' }">
        <el-descriptions-item :label="$t('始发仓')">{{ $l(this.cons.initialLogisticsInfoDto, "startTitle") }}</el-descriptions-item>
        <el-descriptions-item :label="$t('目的仓')">
          <div class="w-300">
            {{ $l(this.cons.initialLogisticsInfoDto, "destCountryTitle") }} - {{ $l(this.cons.initialLogisticsInfoDto, "destCityTitle") }} -
            {{ $l(this.cons.initialLogisticsInfoDto, "destTitle") }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('运输方式')">
          <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="cons.transportId" />
        </el-descriptions-item>
        <el-descriptions-item v-if="getDictData(DICT_TYPE.ECW_TRANSPORT_TYPE, cons.transportId).cssClass == 'channel'" :label="$t('出货渠道')">{{ cons.channelName }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="card">
      <el-descriptions class="mr-10" border :title="$t('基础')" :column="2" :labelStyle="{ width: '110px' }" :contentStyle="{ width: '150px' }">
        <el-descriptions-item :label="$t('总货值')">{{ cons.worth }}</el-descriptions-item>
        <el-descriptions-item :label="$t('填单总数据')"> {{ cons.sumQuantity }} {{ $t("箱") }}</el-descriptions-item>
        <el-descriptions-item :label="$t('入库总数据')"> {{ cons.sumQuantity }}{{ $t("箱") }} {{ cons.sumQuantity }}Kg {{ cons.sumQuantity }}m³ {{ cons.sumQuantity }}{{ $t("个") }} </el-descriptions-item>
        <el-descriptions-item :label="$t('备注')" >{{ cons.remarks }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="card">
      <el-tabs v-model="activeName">
        <el-tab-pane :label="$t('货物详情')" name="first">
          <detail-cons-prod
            :list="cons.consItemVOList"
            @showWarehouseLogs="showWarehouseLogs"
          ></detail-cons-prod>
        </el-tab-pane>
<!--        <el-tab-pane :label="$t('订单动态')" name="second">-->
<!--          <el-timeline v-if="order.orderTimeVOList && order.orderTimeVOList.length" :reverse="true">-->
<!--            <el-timeline-item v-for="(activity, index) in order.orderTimeVOList" :key="index" :timestamp="parseTime(activity.businessTime)">-->
<!--              {{ $l(activity, "title") }}-->
<!--              <div :class="{ red: !!activity.mark }">{{ $l(activity, "remarks") }}</div>-->
<!--            </el-timeline-item>-->
<!--          </el-timeline>-->
<!--          <el-result v-else icon="info " :title="$t('暂无数据')" :subTitle="$t('暂无订单动态数据')" />-->
<!--        </el-tab-pane>-->
<!--        <el-tab-pane :label="$t('操作日志')" name="five" v-if="checkPermi(['ecw:order:logs'])">-->
<!--          <el-table :data="logs" v-loading="logsLoading">-->
<!--            <el-table-column :label="$t('时间')" width="150">-->
<!--              <template slot-scope="{ row }">{{ row.createTime | parseTime }}</template>-->
<!--            </el-table-column>-->
<!--            <el-table-column :label="$t('操作人')" prop="creatorName" width="150"> </el-table-column>-->
<!--            <el-table-column :label="$t('操作人类型')" width="100">-->
<!--              <template slot-scope="{ row }">{{ row.userType == 1 ? $t("会员") : $t("管理员") }}</template>-->
<!--            </el-table-column>-->
<!--            <el-table-column :label="$t('操作类型')" prop="type" width="150"></el-table-column>-->
<!--            <el-table-column :label="$t('操作描述')" prop="msg" width="300"></el-table-column>-->
<!--            <el-table-column :label="$t('备注')" prop="note">-->
<!--              <template slot-scope="{ row }">-->
<!--                <div v-if="row.note">-->
<!--                  <div v-for="item in parseLogNote(row.note)">-->
<!--                    <template v-if="item.orgValue">-->
<!--                      {{ $t("【{name}】从【{orgValue}】修改为【{newValue}】", item) }}-->
<!--                    </template>-->
<!--                    <template v-else>-->
<!--                      {{ $t("【{name}】设置为【{newValue}】", item) }}-->
<!--                    </template>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column :label="$t('操作')" prop="note">-->
<!--              <template slot-scope="{ row }">-->
<!--                <el-link type="primary" @click="showLogDetailId = row.id">{{ $t("详情") }}</el-link>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--        </el-tab-pane>-->
<!--        <el-tab-pane :label="$t('到仓详情')" name="seven">-->
<!--          <check-detail-prod :list="warehouseCheckInfoData" :attr-list="attrList" :prod-type-list="prodTypeList" :currency-map="currencyMap" :unit-map="unitMap" :transport-id="order.transportId" :unload-time="order.unloadTime | parseTime"></check-detail-prod>-->
<!--        </el-tab-pane>-->
      </el-tabs>
    </el-card>
    <pack-detail ></pack-detail>
  </div>
</template>

<script>
import {getCons} from "@/api/ecw/cons";
import { getDictDatas, DICT_TYPE, getDictData } from "@/utils/dict"
import CheckDetailProd from "@/views/ecw/order/components/CheckDetailProd.vue";
import DetailConsProd from "@/views/ecw/cons/DetailConsProd.vue";
import PackHistory from "@/views/ecw/order/components/PackHistory.vue";
import PackDetail from "@/views/ecw/cons/PackDetail.vue";

export default {
  name: "EcwConsDetail",
  props: {},
  components: {PackDetail, PackHistory, DetailConsProd,CheckDetailProd},
  data() {
    return {
      cons:null,
      type: 1,
      activeName: "first",
    }
  },
  watch: {},
  computed: {
    getDictData() {
      return (type, value) => getDictData(type, value) || {}
    },
    DICT_TYPE() {
      return DICT_TYPE
    }
  },
  created() {
    if (this.$route.query.consId) {
      this.consId = this.$route.query.consId
      this.getCons()
    }
  },
  methods: {
    // 显示入仓记录
    showWarehouseLogs(row, type) {
      this.type = type
      this.showWarehouseInItemId = row.orderItemId
    },
    getCons() {
      getCons(this.consId).then(res => {
        this.cons = res.data
        console.log(this.cons)
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.red {
  color: red;
}

.card {
  margin-bottom: 20px;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.hiddenInfo {
  display: none;
}

.showInfo {
  display: block;
}
</style>
