<template>
  <view class="orderCardCss usuallyCard">
    <view class="flex justify-between">
      <view class="text-gray">
        订单编号：{{ orderObj.fDddh || "" }}
      </view>
      <view class="themeColor">
        {{ ddDdzt.get(orderObj.fDdzt) }}
      </view>
    </view>
    <view class="margin-top">
      <u-line></u-line>
    </view>
    <view class="shopItemCss flex" v-for="(item,index) in orderObj.ddxqList" :key="index">
      <view class="">
        <u-image :src="item.image" width="55px" height="55px"></u-image>
      </view>
      <view class="flex flex-direction  margin-left w100">
        <view class="flex justify-between">
          <view class="text-lg text-bold">
            {{ item.fSpmc }}
          </view>
          <view class="">
            <u-tag :text="ddPsfs.get(orderObj.fPsfs)" :bgColor="orderObj.fPsfs==='1'?'#E6F7F7':'#FFF6E6'"
                   borderColor="#fff" :color="orderObj.fPsfs==='1'?'#00AEAA':'#FFA500'"></u-tag>
          </view>
        </view>
        <view class="text-grey margin-top">
          {{ item.fMs || "" }}
        </view>
        <view class="flex justify-between align-center margin-top">
          <view class="text-lg text-bold">
            ￥{{ item.fDj || "0" }}
          </view>
          <view class="flex text-grey">
            X {{ item.fSl || "0" }}
          </view>
        </view>
      </view>
    </view>
    <view>
      <u-line></u-line>
    </view>
    <view class="flex justify-between w100 margin-top align-center" v-if="mode === 'home' || mode ==='order'">
      <view class="text-grey" v-if="orderObj.fDdzt === '202'">
        下单人：{{ orderObj.fShlxr || "" }}({{ orderObj.fShlxrdh || '' }})
      </view>
      <view class="" @click="handlePhone" v-if="orderObj.fDdzt === '202'">
        <u-image src="/static/images/home/dianhua.png" width="18px" height="18px"></u-image>
      </view>
      <view class="text-grey" v-if="orderObj.fDdzt === '204'">
        安装时间：{{ orderObj.fSjwcsj || "" }}
      </view>
    </view>
    <view class="flex justify-between w100 align-center" v-if="mode === 'home' || mode ==='order'">
      <view class="text-grey w80 flex align-start margin-top" v-if="orderObj.fDdzt === '202'">
        <u-icon name="map-fill" color="#8799AC" class="" style="margin:3px 5px 0 0;"></u-icon>
        <view class="">
          {{ orderObj.fShsf || "" }} {{ orderObj.fShs || "" }} {{ orderObj.fShq || "" }} {{ orderObj.fShjd || '' }}
          {{ orderObj.fShxxdz || "" }}

        </view>
      </view>
      <view class="" @click="handleMap" v-if="orderObj.fDdzt === '202'">
        <u-image src="/static/images/home/daohang.png" width="18px" height="18px"></u-image>
      </view>
    </view>
    <!-- <view class="flex justify-between w100 margin-top align-center" v-if="mode === 'order'">
      <view class="text-grey" v-if="orderObj.fDdzt === '待配送'">
        下单人：{{orderObj.fShlxr || ""}}({{orderObj.fShlxrdh || ''}})
      </view>
      <view class="text-grey" v-else-if="orderObj.fDdzt === '已完成'">
        安装时间：{{orderObj.fSjwcsj || ""}}
      </view>
    </view> -->
    <view class="flex justify-between w100 margin-top align-center">
      <view class="text-grey">
        备注信息：{{ orderObj.fMjly || "-" }}
      </view>
      <view class="">
      </view>
    </view>
    <view class="flex justify-end margin-top-sm" v-if="mode === 'order' && orderObj.fMjly !== '无单配送'">
      <view class="text-grey">
        共{{ orderObj.fddsl || "0" }}件商品 合计：
        <text class="themeColor text-lg	">￥{{ orderObj.fDdje || "0" }}</text>
      </view>
    </view>
    <view class="flex justify-end align-center margin-top-lg">
      <!-- <view class="" v-if="orderStatus === 0" @click="goToDetailPage">
        <u-button shape="circle" :customStyle="{color:'#666666'}">查看详情</u-button>
      </view> -->
      <!-- 查看详情 -->
      <view class="margin-left" @click="goToDetailPage">
        <u-button shape="circle" :customStyle="{color:['203','204'].includes(orderObj.fDdzt)?'#fff':'#666666'}"
                  :color="['203','204'].includes(orderObj.fDdzt)?'#EA5504':''">查看详情
        </u-button>
      </view>
      <!-- 员工订单配送（去配送） -->
      <view class="margin-left" v-if="orderObj.fDdzt === '202' && orderStatus === 0 && orderObj.fPsfs === '1'"
            @click="goToAjPage">
        <u-button shape="circle" color="#EA5504">去配送</u-button>
      </view>
      <!-- 管理自提 -->
      <view class="margin-left" v-if="orderObj.fPsfs==='2' && orderObj.fDdzt !=='204'" @click="goToZtPage">
        <u-button shape="circle" color="#EA5504">确认自提</u-button>
      </view>

    </view>
  </view>
</template>

<script>
import {dd_zflx, dd_fkfs, dd_psfs, dd_zffs, dd_ddly, sys_sf, dd_ddzt} from "@/utils/enums";

export default {
  components: {},
  props: {
    mode: {
      type: String,
      default: ""
    },
    orderStatus: {
      type: Number,
      default: 0
    },
    orderObj: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      ddDdzt: new Map(Object.values(dd_ddzt).map(item => [item.code, item.info])),
      ddPsfs: new Map(Object.values(dd_psfs).map(item => [item.code, item.info])),
    };
  },
  async mounted() {
    this.loadImages();
  },
  watch: {
    orderObj: {
      handler() {
        this.$nextTick(() => {
          this.loadImages();
        });
      },
      // immediate:true,
      deep: true, // 深度监听orderList的变化
    },
  },
  methods: {
    async loadImages() {
      let that = this;
      if (this.orderObj.ddxqList && this.orderObj.ddxqList.length > 0) {
        for (let i = 0; i < this.orderObj.ddxqList.length; i++) {
          let JsonParse = JSON.parse(this.orderObj.ddxqList[i].fTp);
          let photoUrl = await this.$getPhotoUrl(JsonParse[0].response.fileId);
          this.orderObj.ddxqList[i].image = photoUrl;
          // console.log('组件data', JSON.parse(JSON.stringify(this.orderObj)));
          this.$forceUpdate();
          // this.$set(this.orderObj.ddxqList[i], 'image', photoUrl);
        }
      }
    },
    goToDetailPage() {
      console.log(this.orderObj);
      let Json = JSON.stringify(this.orderObj)
      uni.navigateTo({
        url: '/pages/home/appList/orderDelivery/orderDetail?detail=' + Json
      })
    },
    // 自提
    goToZtPage() {
      console.log("自提", this.orderObj);
      let Json = JSON.stringify(this.orderObj)
      // let ddid = this.orderObj.id;
      uni.navigateTo({
        url: `/pages/home/appList/orderManagement/gasCylinderSelfPickup?ddObj=${Json}`
      })
    },
    handleMap(item) {
      console.log('orderObj', JSON.parse(JSON.stringify(this.orderObj)));
      this.$viewMapLocation(this.orderObj.fShdzjd, this.orderObj.fShdzwd, this.orderObj.fCzmc);
    },
    handlePhone() {
      // console.log('电话详情',JSON.parse(JSON.stringify(this.orderObj)));
      uni.makePhoneCall({
        phoneNumber: this.orderObj.fShlxrdh, // 电话号码
        success: function () {
          console.log('拨打电话成功！');
        },
        fail: function (err) {
          console.log('拨打电话失败：' + JSON.stringify(err));
        }
      });
    },
    goToAjPage() {
      console.log('订单详情', JSON.parse(JSON.stringify(this.orderObj)));
      let orderParams = {
        ddid: this.orderObj.id,
        khlxdzsf: this.orderObj.fShsf,
        khlxdzs: this.orderObj.fShs,
        khlxdzq: this.orderObj.fShq,
        khlxdzjd: this.orderObj.fShjd,
        ddxqList: this.orderObj.ddxqList
      }
      // console.log('orderParams', JSON.parse(JSON.stringify(orderParams)));
      uni.navigateTo({
        url: '/pages/home/appList/securityCheck/securityCheck?type=0&orderParams=' + JSON.stringify(
            orderParams)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.orderCardCss {
  padding: 12px 15px;

  .shopItemCss {
    height: 108px;
    margin: 15px 0 0 0;
  }
}
</style>