<template>
  <view class="xd-store-cashier" v-if="uiInfo">
    <view
      class="xd-store-cashier__address"
      v-if="uiAddress"
      @click="handleChange"
    >
      <view class="xd-store-cashier__address-left">
        <view>
          <text>{{uiAddress.name}}</text>
          <text>{{uiAddress.phone}}</text>
        </view>
        <view>
          <view
            v-if="uiAddress['is_default']"
            class="xd-store-cashier__address-left-tag"
            :style="{background: styleMainColor}"
          >默认</view>
          <view
            v-if="uiAddress['tag'] === 1"
            class="xd-store-cashier__address-left-tag"
            :style="{background: styleMainColor}"
          >家庭</view>
          <view
            v-if="uiAddress['tag'] === 2"
            class="xd-store-cashier__address-left-tag"
            :style="{background: styleMainColor}"
          >公司</view>
          <view>{{uiAddress|getAddressInfo}}</view>
        </view>
      </view>
      <view class="xd-store-cashier__address-right">
        <view>
          <xd-font-icon
            icon="iconjiantou"
            size="30"
            color="#666"
          ></xd-font-icon>
        </view>
      </view>
    </view>
    <view class="xd-store-cashier__info">
      <view class="xd-store-cashier__info-title">商品信息</view>
      <view class="xd-store-cashier__info-content">
        <view
          class="xd-store-cashier__info-item"
          v-if="uiInfo.product.length > 0"
          v-for="(item,index) in uiInfo.product"
          :key="index"
        >
          <view :style="{width: productWidth + 'rpx' , height: productHeight + 'rpx' }">
            <image :src="item.thumb"></image>
          </view>
          <view>{{item.product_name}}</view>
          <view>
            <view>
              <xd-unit
                font-weight="normal"
                :font-size="24"
                :iocn-size="0.25"
                :price="item['sale_price']"
                color="#666"
              ></xd-unit>
            </view>
            <view> x{{item.ct}}</view>
          </view>
        </view>
      </view>
      <view class="xd-store-cashier__info-label">
        <view>商品总额</view>
        <view>
          <xd-unit font-weight="normal" :price="uiInfo['price']"></xd-unit>
        </view>
      </view>
      <view class="xd-store-cashier__info-label">
        <view>配送时间</view>
        <view style="flex: 1; width: 0">
          <xd-select
            v-model="receiveTime"
            v-if="uiReceiveTime.length > 0"
            :list="uiReceiveTime"
            :default-value="uiInfo['receive_time']"
            justify-content="flex-end"
            padding="0 0 0 20rpx"
            :text-color="styleMainColor"
          >
            <view class="xd-store-cashier__info-label-icon">
              <xd-font-icon
                icon="iconjiantou"
                size="30"
                color="#666"
              ></xd-font-icon>
            </view>

          </xd-select>
        </view>
      </view>
      <view class="xd-store-cashier__info-label">
        <view>配送费</view>
        <view>
          <xd-unit :price="uiInfo['post_price']" font-weight="normal"></xd-unit>
        </view>
      </view>
      <view
        class="xd-store-cashier__info-label comment"
      >
        <view>订单备注</view>
        <view>
          <input
            class="xd-store-cashier__input"
            placeholder-class="xd-store-cashier__input-placeholder"
            @confirm="doneInput"
            type="text"
            confirm-type="done"
            placeholder="选填: 请先和商家协商一致"
            :adjust-position="true"
            v-model="comment"/>
        </view>
      </view>
    </view>
    <view class="xd-store-cashier__btn">
      <view>实付金额:</view>
      <view>
        <xd-unit
          :price="uiInfo['price']"
          :font-size="36"
          :iocn-size=".45"
        ></xd-unit>
      </view>
      <view>
        <xd-button
          @click="toPay"
          size="mini"
          type="primary"
          radius="10rpx"
        >确认支付</xd-button>
      </view>
    </view>
  </view>
</template>

<script>
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
  import XdUnit from "@/components/XdUnit/XdUnit";
  import XdSelect from "@/components/XdSelect/XdSelect";
  import XdButton from "@/components/XdButton/XdButton";
  import {
    getParentsStyle, //获取页面风格单个键值值
  } from '@/utils/xd.base';

  export default {
    name: "XdStoreCashier",
    components:{
      XdFontIcon,
      XdUnit,
      XdSelect,
      XdButton
    },
    props:{
      address: {
        type: Object | null,
        default(){
          return null
        },
      },
      info: {
        type: Object | null,
        default() {
          return null
        },
      },
      productWidth: {
        type: Number,
        default: 180
      },
      productHeight: {
        type: Number,
        default: 180
      }
    },
    filters: {
      getAddressInfo(item) {
        return `${item.province_name}${item.city_name}${item.area_name}${item.street_name}${item.address_detail}`
      }
    },
    watch:{
      address(val){
        if (val) {
          this.uiAddress = val;
        }
      }
    },
    data(){
      return {
        uiReceiveTime: [],
        uiInfo: null,

        //form
        uiAddress: null,
        receiveTime: null,
        comment: '', //备注

        //测试数据
        testAddress: {
          "select": true,
          "id": 23843,
          "name": "高世勇",
          "province_code": "21",
          "city_code": "1861",
          "area_code": "1866",
          "street_code": "27221",
          "province_name": "\u6c5f\u897f",
          "city_name": "\u4e0a\u9976\u5e02",
          "area_name": "\u5a7a\u6e90\u53bf",
          "street_name": "\u7d2b\u9633\u9547",
          "address_detail": "aaaaa",
          "phone": "15110208397",
          "is_default": 1,
          "tag": 1,
          "tag_name": "\u5bb6\u5ead",
          "dangaoss_addr_id": "1168352"
        },
        testReceiveTime: [
          {
            "value": 1,
            "label": "\u5de5\u4f5c\u65e5\u8282\u5047\u65e5\u5747\u53ef\u6536\u8d27"
          },
          {
            "value": 2,
            "label": "\u5de5\u4f5c\u65e5"
          },
          {
            "value": 3,
            "label": "\u53cc\u4f11\u65e5\u53ca\u8282\u5047\u65e5"
          }
        ],
        testInfo: {
          price: 1259,
          post_price: 0,
          receive_time: '工作日节假日均可收货',
          comment: '',
          product: [
            {
              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210604101103940.jpg?x-oss-process=style\/200_200",
              "product_name": "\u4e2d\u7cae \u798f\u4e34\u95e8\u5c0f\u53a8\u5473\u9053\u7c73\u9762\u793c\u76d2 4.5kg",
              "sale_price": 134,
              "ct": 6,
              "product_id": 1420849,
              "id": 427936,
              "express_number": "",
              "express_comment": "",
              "express_Company": ""
            }, {
              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210428094834724.jpg?x-oss-process=style\/200_200",
              "product_name": "\u6c47\u6d53\u8499\u7530\u7cae\u6cb9\u7ec4\u5408 \u91d1\u9f99\u9c7c+\u80e1\u59ec\u82b1",
              "sale_price": 349,
              "ct": 1,
              "product_id": 1417296,
              "id": 427937,
              "express_number": "",
              "express_comment": "",
              "express_Company": ""
            }, {
              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119151624114.jpg?x-oss-process=style\/200_200",
              "product_name": "JIAJIA\/\u52a0\u52a0 \u8c03\u5473\u54c1\u7ec4\u5408A\u6b3e 210g+900ml",
              "sale_price": 53,
              "ct": 2,
              "product_id": 1409457,
              "id": 427938,
              "express_number": "",
              "express_comment": "",
              "express_Company": ""
            }
          ],
        },
        styleMainColor: '', //插件主题风格样式

      }
    },
    async created() {
      this.styleMainColor = await getParentsStyle(this.$parent, '$mainColor');
      
      this.uiAddress = this.address;
      if(this.address === null) {
        this.uiAddress = this.$xdUniHelper.cloneDeep(this.testAddress);
      }
      
      this.uiInfo = this.info;
      if (this.info === null) {
        this.uiInfo = this.$xdUniHelper.cloneDeep(this.testInfo);
      }

      this.getReceiveTime()
    },
    methods:{

      /**
       * @description 切换配送地址
       */
      handleChange(){
        this.$emit('onChangeAddress')
      },


      /**
       * @description 获取配送时间段列表
       */
      getReceiveTime(){
        this.$emit('onReceiveTime', (res)=>{
          if(res === null) {
            this.uiReceiveTime = this.$xdUniHelper.cloneDeep(this.testReceiveTime);
          }
          else{
            this.uiReceiveTime = res;
          }
        })
      },

      toPay(){
        this.$emit('onConfirm', {receive_time: this.receiveTime['value'], comment: this.comment})
      },

      doneInput() {
        uni.hideKeyboard()
      },
    }
  }
</script>

<style scoped lang="less">
  .xd-store-cashier {
    padding-top: unit(20,rpx);
    padding-bottom: unit(100,rpx);

    &__address {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #efefef;
      margin-bottom: unit(20, rpx);
      padding: unit(20,rpx);
      background: #fff;

      &-select {
        flex-shrink: 0;
        width: unit(50, rpx);
      }

      &-left {
        flex: 1;
        width: 0;
        text-align: left;
        font-size: @xd-font-size-sm - 2;
        line-height: unit(30, rpx);

        &-tag {
          padding: 0 unit(10, rpx);
          color: #fff;
          border-radius: unit(6, rpx);
          transform: scale(.8);
          flex-shrink: 0;
        }

        & > view:first-child {
          margin-left: unit(6, rpx);
          margin-bottom: unit(15, rpx);
          font-size: @xd-font-size-lg;

          & > text:last-child {
            font-size: @xd-font-size-base;
            margin-left: unit(20, rpx);
          }
        }

        & > view:last-child {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;


          & > view:last-child {
            margin-left: unit(10, rpx);
            flex: 1;
            width: 0;
          }

        }
      }

      &-right {
        flex-shrink: 0;
        display: flex;
        justify-content: flex-end;
        padding-left: unit(20, rpx);

        & > view {
          width: unit(50, rpx);
          height: unit(50, rpx);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: unit(10, rpx);
        }
      }
    }

    &__input {
      width: 80%;
      font-size: @xd-font-size-base;

      &-placeholder {
        font-size: @xd-font-size-base;
      }
    }

    &__info {
      background: #fff;

      &-content {
        border-bottom: 1px solid #eee;
        padding-bottom: unit(30, rpx);
      }

      &-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0 unit(20,rpx) unit(20, rpx);
        margin: unit(20,rpx) 0 0 ;
        border-bottom: 1px solid #f8f8f8;

        &:last-child {
          padding-bottom: 0;
          border-bottom: 0;
        }

        & > view:first-child {
          flex-shrink: 0;
          box-shadow: 0 0 unit(10,rpx) rgba(0,0,0,.08);
          margin-right: unit(30,rpx);
          overflow: hidden;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;

          & > image {
            width: 96%;
            height: 96%;
          }
        }

        & > view:nth-child(2) {
          flex: 1;
          width: 0;
          font-size: @xd-font-size-base;
        }

        & > view:last-child {
          font-size: @xd-font-size-sm;
          text-align: right;
          margin-left: unit(30, rpx);
          color: #666;
        }
      }

      &-title {
        border-bottom: 1px solid #eee;
        height: unit(80, rpx);
        line-height: unit(80, rpx);
        font-size: @xd-font-size-lg;
        padding: 0 unit(30, rpx);
      }

      &-label {
        border-bottom: 1px solid #eee;
        height: unit(80,rpx);
        line-height: unit(80,rpx);
        font-size: @xd-font-size-base;
        padding: 0 unit(30,rpx);
        display: flex;
        justify-content: space-between;
        align-items: center;

        & > view:first-child {
          flex-shrink: 0;
        }

        & > view:last-child {

        }

        &-icon {
          margin-left: unit(10,rpx);
        }

        &.comment {
          justify-content: flex-start;

          & > view:last-child {
            padding-left: unit(20, rpx);
            flex: 1;
            width: 0;
          }

        }
      }
    }

    &__btn {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: unit(100,rpx);
      padding: 0 unit(30, rpx);
      box-shadow: 0 0 unit(10, rpx) rgba(0, 0, 0, .15);
      background: #f1f1f1;
      z-index: 3000;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .safe-area();

      & > view {
        margin-left: unit(20,rpx);
        font-size: @xd-font-size-lg;
      }
    }
  }
</style>
