<template>
  <view class="card base-item">
    <view class="top-item">
      <view class="left">
        <view :class="['tag', { active: order.orderServiceType == '安装' }]">{{
          order.orderServiceType
        }}</view>
        <text class="title">{{ order.categoryName }}</text>
      </view>
      <view class="right">{{ order.orderBusinessTypeText }}</view>
    </view>
    <view class="order-cell">
      <text>订单编号：</text>
      <text @longpress="handleLongpress(order.partnerSerialNumber)">{{
        order.partnerSerialNumber
      }}</text>
    </view>
    <view class="order-cell">
      <text>合作厂商：</text>
      <text>{{ order.partnerCompanyName }}</text>
    </view>
    <view class="order-cell between-cell">
      <view class="left">
        <text>客户信息：</text>
        <text>{{ order.contactName }}</text>
      </view>
      <image
        v-if="showOperate"
        style="width: 84rpx;height: 56rpx;"
        :src="phoneIcon"
        @click="phoneToCustomer(order.contactPhone)"
      >
      </image>
    </view>
    <view class="order-cell">
      <text>联系方式：</text>
      <text>{{ order.contactPhone }}</text>
    </view>
    <view class="order-cell">
      <text>扳手会工单：</text>
      <text>{{ order.orderNumber }}</text>
    </view>
    <view class="between-cell address-cell">
      <view class="left-address">
        <u-icon name="map" size="28"></u-icon>
        <text class="address-txt">{{ formatAddress || '' }}</text>
      </view>
      <image
        v-if="showOperate"
        style="width: 84rpx;height: 56rpx;"
        :src="navigationIcon"
        @click="openLocation(order.contactAddress)"
      ></image>
    </view>
    <view v-if="readMore" @click="handleClick(false)" class="read-more-toggle">
      <u-icon name="arrow-down"></u-icon>
      <text class="read-more-text">查看更多</text>
    </view>
    <view v-else class="order-item-more">
      <view class="line-view"></view>
      <view class="order-cell between-cell">
        <text class="cell-title">品牌：</text>
        <text>{{ order.brandName }}</text>
      </view>
      <view class="order-cell between-cell">
        <text class="cell-title">数量：</text>
        <text>x{{ order.orderProductCount }}</text>
      </view>
      <view class="order-cell between-cell">
        <text class="cell-title">充电桩信息：</text>
        <text>{{ order.serviceContent }}</text>
      </view>
      <view class="read-more-toggle" @click="handleClick(true)">
        <u-icon name="arrow-up"></u-icon>
        <text class="read-more-text">点击收起</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 履约记录
    order: {
      type: Object,
      default() {
        return {}
      },
    },
    // true 显示「查看更多」按钮， false 显示「点击收起」按钮
    readMore: {
      type: Boolean,
      default: true,
    },
    // 可以点击电话和地址
    operate: {
      type: Boolean,
      default: true,
    },

    // 显示点击电话和地址
    showOperate: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {}
  },
  computed: {
    formatAddress() {
      let order = this.order
      let address = order.customerAddress || ''
      if (address === '') {
        address = order.contactProvinceText || ''
        address += order.contactCityText || ''
        address += order.contactCommunityText || ''
        address += order.contactStreetText || ''
        address += order.contactAddress || ''
      }
      return address
    },
    phoneIcon() {
      //self-support/icon/dianhua-0@2x.png
      if (this.operate) {
        return process.uniEnv.qn_base_url + 'dianhua.png'
      } else {
        return process.uniEnv.qn_base_url + 'dianhua-d.png'
      }
    },
    navigationIcon() {
      //self-support/icon/daohang-0@2x.png
      if (this.operate) {
        return process.uniEnv.qn_base_url + 'daohang.png'
      } else {
        return process.uniEnv.qn_base_url + 'daohang-d.png'
      }
    },
  },
  methods: {
    openLocation(address) {
      if (this.operate) {
        const latitude = this.order.contactAddressLatitud //res.latitude;
        const longitude = this.order.contactAddressLongitud //res.longitude;
        getApp().track('order_open_location', { address: address })
        uni.openLocation({
          latitude: Number(latitude),
          longitude: Number(longitude),
          success: function() {
            console.log('success')
          },
        })
      }
    },
    phoneToCustomer(phone) {
      // 联系客户
      if (this.operate) {
        getApp().track('order_make_phone_call', { phone: phone })
        uni.makePhoneCall({
          phoneNumber: phone, //仅为示例
          complete() {},
        })
        this.contactTime()
      }
    },
    contactTime() {
      let self = this
      var data = {}
      if (this.submitType === 'workerAppointment') {
        self.$u.api.contactTime(data, this.order.orderId)
      }
    },
    handleClick(val) {
      this.$emit('update:readMore', val)
    },
    handleLongpress(text) {
      uni.setClipboardData({
        data: text,
        success: function() {
          console.log('success')
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.base-item {
  padding-bottom: 6rpx;
  background-color: #ffffff;
  margin-bottom: 20rpx;
  // padding: 30rpx 30rpx 0 30rpx;
  border-radius: 6px;

  .top-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;

    .left {
      display: flex;
      align-items: center;

      .tag {
        text-align: center;
        width: 84rpx;
        height: 40rpx;
        border-radius: 8rpx;
        font-size: 22rpx;
        font-weight: 500;
        color: #ffffff;
        line-height: 40rpx;
        background-image: linear-gradient(to right, #ff930d, #ffc174);

        &.active {
          background-image: linear-gradient(to right, #2272ff, #47abff);
        }
      }

      .title {
        margin-left: 20rpx;
        height: 36rpx;
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
        line-height: 36rpx;
      }
    }

    .right {
      text-align: center;
      width: 100rpx;
      height: 40rpx;
      background: #f4f5f7;
      border-radius: 22rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: #333333;
      line-height: 40rpx;
    }
  }

  .address-cell {
    font-size: 24rpx;
    font-weight: 400;
    color: #333333;
    line-height: 24rpx;
    margin-top: 20rpx;
    margin-bottom: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left-address {
      display: flex;
      align-items: flex-start;

      .address-txt {
        line-height: 30rpx;
        margin-left: 8rpx;
        margin-right: 30rpx;
      }
    }
  }
}

.read-more-toggle {
  text-align: center;
  color: #2272ff;
  font-size: 26rpx;
  margin-top: 30rpx;
  padding-bottom: 30rpx;
}

.read-more-text {
  padding-left: 8rpx;
}

.order-item-more {
  font-size: 26rpx;
  color: #333333;
  text-align: right;

  .line-view {
    background-color: #f4f5f7;
    height: 2rpx;
    margin-bottom: 20rpx;
  }
}

.order-cell {
  font-size: 26rpx;
  font-weight: 400;
  color: #333333;
  line-height: 48rpx;
  margin-bottom: 10rpx;
}

.between-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.display-cell {
  display: flex;
}

.cell-title {
  text-align: left;
  flex-shrink: 0;
}
</style>
