<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="cons.trackingRecord && cons.trackingRecord.length" :reverse="true">
            <el-timeline-item v-for="(activity, index) in cons.trackingRecord" :key="index" :color="activity.color" v-show="activity.isShow!==1" :timestamp="parseTime(activity.trackingTime)">
              <dict-tag :type="DICT_TYPE.CONS_BUSINESS_NODE" :value="$l(activity, 'businessNode')" /><el-button v-if="activity.businessNode===1" @click="showSignImage" style="margin-left: 5px" size="small" type="primary">签收图片</el-button>
              <div :class="{ red: !!activity.businessDescription }">{{ $l(activity, "businessDescription") }}</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="three">
            <el-table :data="cons.feeList">
              <el-table-column :label="$t('费用类型')">
                <template slot-scope="{ row }">
                  <dict-tag :type="DICT_TYPE.FEE_TYPE" :value="row.feeType" />
                </template>
              </el-table-column>
              <el-table-column :label="$t('金额')">
                <template slot-scope="{ row }">
                  {{ row.fee }}
                </template>
              </el-table-column>
              <el-table-column :label="$t('货币类型')">
                <template slot-scope="{ row }">
                  {{ currencyMap[row.feeCurrency] }}
                </template>
              </el-table-column>
              <el-table-column :label="$t('付款类型')">
                <template slot-scope="{ row }">
                  <dict-tag :type="DICT_TYPE.PAYMENT_TYPE" :value="row.payType" />
                </template>
              </el-table-column>
              <el-table-column :label="$t('备注')">
                <template slot-scope="{ row }">
                  {{ row.remarks }}
                </template>
              </el-table-column>
              <el-table-column :label="$t('转运订单号')">
                <template slot-scope="scope">
                  <a href="javascript:void(0);"  @click="jumpOrderDetail()">{{ cons.orderNo }}</a>
                </template>
              </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane :label="$t('日志')" name="four">

        </el-tab-pane>
        <el-tab-pane :label="$t('审批列表')" name="five">
          <el-table :data="taskList">
            <el-table-column :label="$t('流程编号')" align="center" prop="id" width="320"/>
            <el-table-column :label="$t('流程名称')" align="center" prop="name"/>
            <el-table-column :label="$t('业务编号')" align="center" prop="businessNo"/>
            <el-table-column :label="$t('流程分类')" align="center" prop="category">
              <template slot-scope="scope">
                <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category"/>
              </template>
            </el-table-column>
            <el-table-column :label="$t('当前审批节点')" align="center" prop="tasks">
              <template slot-scope="scope">
                <el-button v-for="(task, taskIndex) in scope.row.tasks" type="text" @click="handleFormDetail(task.id)"
                           :key="taskIndex">
                  <span>{{ task.name }}</span>
                </el-button>
              </template>
            </el-table-column>
            <el-table-column :label="$t('状态')" align="center" prop="status">
              <template slot-scope="scope">
                <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status"/>
              </template>
            </el-table-column>
            <el-table-column :label="$t('结果')" align="center" prop="result">
              <template slot-scope="scope">
                <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result"/>
              </template>
            </el-table-column>
            <el-table-column :label="$t('提交时间')" align="center" prop="createTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('结束时间')" align="center" prop="createTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.endTime) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </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>
    <el-dialog :title="$t('签收图片')" :visible.sync="mvShow" :before-close="closeMv" :close-on-click-modal="false">
      <image-and-video-upload readonly :fileSize="50" :isShowTip="true" :value="cons.mediaUrl" ></image-and-video-upload>
    </el-dialog>
<!--    <pack-detail ></pack-detail>-->
  </div>
</template>

<script>
import {getCons} from "@/api/ecw/cons";
import { getDictDatas, DICT_TYPE, getDictData } from "@/utils/dict"
import DetailConsProd from "@/views/ecw/cons/DetailConsProd.vue";
import ImageAndVideoUpload from "@/components/ImageAndVideoUpload/index.vue";
import Template from "@/views/cms/template/index.vue";
import {getCurrencyList} from "@/api/ecw/currency";
import {getCopyTaskPage} from "@/api/bpm/task";
import {getProcessInstancePage} from "@/api/bpm/processInstance";

export default {
  name: "EcwConsDetail",
  props: {},
  components: {Template, ImageAndVideoUpload, DetailConsProd},
  data() {
    return {
      cons:null,
      type: 1,
      activeName: "first",
      mvShow:false,
      taskList: [],
      taskTotal: 0,
    }
  },
  watch: {},
  computed: {
    currencyMap() {
      let map = {}
      this.currencyList.forEach((item) => {
        map[item.id] = this.$l(item, "title")
      })
      return map
    },
    getDictData() {
      return (type, value) => getDictData(type, value) || {}
    },
    DICT_TYPE() {
      return DICT_TYPE
    }
  },
  created() {
    getCurrencyList().then((res) => (this.currencyList = res.data))
    if (this.$route.query.consId) {
      this.consId = this.$route.query.consId
      this.getCons()
    }
  },
  methods: {
    /* 跳转订单详情 */
    jumpOrderDetail() {
      this.$router.push({
        path: "/order/detail",
        query: { orderId: this.cons.orderId },
      });
    },
    // 显示入仓记录
    showWarehouseLogs(row, type) {
      this.type = type
      this.showWarehouseInItemId = row.orderItemId
    },
    getCons() {
      getCons(this.consId).then(res => {
        this.cons = res.data
        if (this.cons.trackingRecord && this.cons.trackingRecord.length){
          this.cons.trackingRecord[this.cons.trackingRecord.length-1].color='#0bbd87';
        }
        this.getTaskList();
      })
    },
    getTaskList(){
      getProcessInstancePage({businessNo: this.cons.consNum}).then(response => {
        this.taskList = response.data.list;
        this.taskTotal = response.data.total;
        this.loading = false;
      });
    },
    closeMv(){
      this.mvShow = false
    },
    showSignImage(){
      this.mvShow = true
    }
  }
}
</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>
