import dayjs from 'dayjs';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      posterCss: { width: '150rpx', height: '150rpx', padding: '11rpx', backgroundColor: '#FFFFFF', borderRadius: '50%', objectFit: 'cover' }, // 二维码大小样式
      QRcss: { position: 'fixed', left: '32rpx', bottom: '24rpx', display: 'flex' }, // 二维码定位样式
    };
  },
  computed: {
    ...mapGetters(['dictValue']),
  },
  methods: {
    saveQrImage() {
      this.$refs.painter.canvasToTempFilePathSync({
        fileType: 'jpg',
        // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
        pathType: 'url',
        quality: 1,
        success: res => {
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              this.qrShow = false;
              uni.showToast({ title: '保存成功', icon: 'none' });
            },
          });
        },
      });
    },
    formatVanType(vanType) {
      let res = [];
      for (let v of vanType.split(',')) {
        if (v === 'ALL') {
          res.push('不限');
        } else {
          res.push(this.dictValue('VEHICLE_COMPARTMENT_TYPE', v));
        }
      }
      return res.join(',');
    },
    formatSpecification(specification) {
      let res = [];
      for (let v of specification.split(',')) {
        if (v === 'ALL') {
          res.push('不限');
        } else {
          res.push(this.dictValue('VEHICLE_SPECIFICATION', v));
        }
      }
      return res.join(',');
    },
    getPoster(detail, wxcode) {
      let formatVanType = this.formatVanType(detail.vanType);
      let formatSpecification = this.formatSpecification(detail.specification);
      return {
        css: {
          width: '660rpx',
          height: '919rpx',
          backgroundImage: 'url(https://zeyi-tms-product.oss-cn-hangzhou.aliyuncs.com/image/tms/f8cefac5-86cd-4f13-89f3-66fe2c6a0ea5.png)',
          objectFit: 'cover',
        },
        views: [
          {
            type: 'view',
            css: {
              width: '660rpx',
              height: '919rpx',
              padding: '10rpx',
            },
            views: [
              {
                type: 'text',
                text: '则一飞牛货源码',
                css: {
                  width: '550rpx',
                  height: '70rpx',
                  padding: '15rpx 30rpx',
                  fontSize: '30rpx',
                  color: '#000000',
                },
              },
              {
                type: 'view',
                css: {
                  width: '580rpx',
                  height: '40rpx',
                  padding: '20rpx 30rpx 15rpx 30rpx',
                },
                views: [
                  {
                    type: 'view',
                    css: {
                      display: 'inline-block',
                      width: '410rpx',
                      fontSize: '22rpx',
                      lineHeight: '1em',
                      verticalAlign: 'bottom',
                    },
                    views: [
                      {
                        type: 'text',
                        text: '货源单号：',
                        css: {
                          color: '#999999',
                          verticalAlign: 'bottom',
                        },
                      },
                      {
                        type: 'text',
                        text: detail.code,
                        css: {
                          color: '#000000',
                          verticalAlign: 'bottom',
                        },
                      },
                    ],
                  },
                  {
                    type: 'view',
                    css: {
                      display: 'inline-block',
                      width: '170rpx',
                      lineHeight: '1em',
                      textAlign: 'right',
                      verticalAlign: 'bottom',
                    },
                    views: [
                      {
                        type: 'text',
                        text: detail.priceType === 'TON' ? detail.weightUnitPrice : detail.vehicleUnitPrice,
                        css: {
                          color: '#ed3f3f',
                          fontSize: '28rpx',
                          verticalAlign: 'bottom',
                        },
                      },
                      {
                        type: 'text',
                        text: detail.priceType === 'TON' ? '元/吨' : '元/车',
                        css: {
                          color: '#2b2b2b',
                          fontSize: '20rpx',
                          verticalAlign: 'bottom',
                        },
                      },
                    ],
                  },
                ],
              },
              {
                type: 'text',
                text: detail.startProvinceName + '-' + detail.startCityName,
                css: {
                  width: '440rpx',
                  height: '40rpx',
                  fontSize: '28rpx',
                  paddingLeft: '80rpx',
                  color: '#000000',
                },
              },
              {
                type: 'text',
                text: '总里程：' + detail.distance + 'km',
                css: {
                  width: '440rpx',
                  height: '20rpx',
                  fontSize: '20rpx',
                  padding: '20rpx 80rpx',
                  color: '#999999',
                },
              },
              {
                type: 'text',
                text: detail.endProvinceName + '-' + detail.endCityName,
                css: {
                  width: '440rpx',
                  height: '50rpx',
                  fontSize: '28rpx',
                  paddingLeft: '80rpx',
                  color: '#000000',
                },
              },
              {
                type: 'text',
                text: dayjs(detail.startTime).format('YYYY-MM-DD HH:mm') + ' 到 ' + dayjs(detail.endTime).format('YYYY-MM-DD HH:mm') + ' 期间装货',
                css: {
                  width: '540rpx',
                  height: '40rpx',
                  fontSize: '22rpx',
                  padding: '15rpx 40rpx',
                  color: '#999999',
                },
              },
              {
                type: 'view',
                css: {
                  width: '600rpx',
                  paddingLeft: '30rpx',
                  display: 'inline-block',
                  paddingTop: '20rpx',
                  height: '35rpx',
                  fontSize: '26rpx',
                  lineHeight: '1em',
                },
                views: [
                  {
                    type: 'text',
                    text: '需求车型:',
                    css: {
                      color: '#999999',
                    },
                  },
                  {
                    type: 'text',
                    text: formatSpecification,
                    css: {
                      paddingLeft: '15rpx',
                      color: '#2b2b2b',
                    },
                  },
                ],
              },
              {
                type: 'view',
                css: {
                  width: '600rpx',
                  paddingLeft: '30rpx',
                  display: 'inline-block',
                  paddingTop: '20rpx',
                  height: '35rpx',
                  fontSize: '26rpx',
                  lineHeight: '1em',
                },
                views: [
                  {
                    type: 'text',
                    text: '需求箱型:',
                    css: {
                      color: '#999999',
                    },
                  },
                  {
                    type: 'text',
                    text: formatVanType,
                    css: {
                      paddingLeft: '15rpx',
                      color: '#2b2b2b',
                    },
                  },
                ],
              },
              {
                type: 'view',
                css: {
                  width: '600rpx',
                  paddingLeft: '30rpx',
                  display: 'inline-block',
                  paddingTop: '20rpx',
                  height: '35rpx',
                  fontSize: '26rpx',
                  lineHeight: '1em',
                },
                views: [
                  {
                    type: 'text',
                    text: '货物信息:',
                    css: {
                      color: '#999999',
                    },
                  },
                  {
                    type: 'text',
                    text: detail.goodsName,
                    css: {
                      paddingLeft: '15rpx',
                      color: '#2b2b2b',
                    },
                  },
                ],
              },
              {
                type: 'view',
                css: {
                  width: '600rpx',
                  paddingLeft: '30rpx',
                  display: 'inline-block',
                  paddingTop: '20rpx',
                  height: '35rpx',
                  fontSize: '26rpx',
                  lineHeight: '1em',
                },
                views: [
                  {
                    type: 'text',
                    text: '找车需求:',
                    css: {
                      color: '#999999',
                    },
                  },
                  {
                    type: 'text',
                    text: detail.priceType !== 'TON' ? `共${detail.vehicleNumber}车（` : `共${detail.goodsWeight}吨（`,
                    css: {
                      paddingLeft: '15rpx',
                      color: '#2b2b2b',
                    },
                  },
                  {
                    type: 'text',
                    text: detail.priceType !== 'TON' ? `还需${detail.remainVehicleNumber}车` : `剩余${detail.remainGoodsWeight}吨`,
                    css: {
                      paddingLeft: '15rpx',
                      color: '#ed3f3f',
                    },
                  },
                  {
                    type: 'text',
                    text: '）',
                    css: {
                      paddingLeft: '15rpx',
                      color: '#2b2b2b',
                    },
                  },
                ],
              },
              {
                type: 'view',
                css: {
                  width: '600rpx',
                  paddingLeft: '30rpx',
                  display: 'inline-block',
                  paddingTop: '20rpx',
                  height: '35rpx',
                  fontSize: '26rpx',
                  lineHeight: '1em',
                },
                views: [
                  {
                    type: 'text',
                    text: '运单备注:',
                    css: {
                      color: '#999999',
                    },
                  },
                  {
                    type: 'text',
                    text: detail.remark,
                    css: {
                      paddingLeft: '15rpx',
                      color: '#2b2b2b',
                      lineClamp: 1,
                    },
                  },
                ],
              },
            ],
          },
          {
            type: 'view',
            css: this.QRcss,
            views: [
              {
                src: wxcode,
                type: 'image',
                css: this.posterCss,
              },
            ],
          },
        ],
      };
    },
  },
};