<template>
  <view class="goods-info">
    <view class="title">商品信息</view>
    <view class="goods-content">
      <view v-for="(goods, i) in goodsList" :key="i">
        <view class="flex-row group_9">
          <image :src="goods.productImgUrl" class="image_7" />
          <view class="flex-col items-start group_10">
            <view class="flex-col group_11">
              <text class="text_12">{{ goods.productName }}</text>
              <text class="text_13">¥{{ goods.listUnitPrice }}/{{ goods.skuDesc }}/{{ goods.quantity }}个</text>
            </view>
            <text class="text_14">¥{{ goods.totalAmount }}</text>
          </view>
        </view>
        <view class="remark" v-if="goods.remark">
          <text class="remark-label">商品备注：</text>
          <text class="remark-content">{{ goods.remark || '' }}</text>
        </view>
      </view>
      <view class="postage">
        <text class="label">温馨提示</text>
        <view class="flex-col-end-start">
          <!-- <text class="label">{{ hasArea ? '下单后三天内发货' : '定制商品需要三到五天的制作工期' }}</text> -->
          <text class="label">定制商品需要三到五天的制作工期</text>
          <text class="tip">详情可资讯客服</text>
        </view>
      </view>
      <view class="form">
        <!-- 半天妖的区域选择 -->
        <!-- <view v-if="hasArea" class="form-item">
          <text class="label">下单区域</text>
          <view class="box" @click="showArea">
            <text v-show="areaName">{{ areaName }} {{ areaProvince }} {{ areaCity }}</text>
            <image src="/static/imgs/general/right-arrow.png" style="width: 32rpx; height: 32rpx" v-show="!areaInfo"></image>
          </view>
        </view> -->
        <view class="form-item">
          <text class="label">订单备注</text>
          <input class="value" v-model="form.remark" placeholder="填写备注" />
        </view>
      </view>
    </view>
    <!-- <uni-popup ref="areaPopup" type="bottom" background-color="#fff">
      <view class="popup-content">
        <view v-show="areaName">
          <view class="title-content">
            <text>{{ areaName }}</text>
            <text style="margin-left: 32rpx">{{ areaProvince }}</text>
            <text style="margin-left: 32rpx">{{ areaCity }}</text>
          </view>
        </view>
        <view v-show="!areaName">
          <view class="title-content">
            <text>请选择区域</text>
          </view>
        </view>
        <view class="scroll-title">
          <view class="left">经理</view>
          <view class="center">省</view>
          <view class="right">市</view>
        </view>
        <view class="scroll-content">
          <view class="left">
            <view v-for="item in areaList" :key="item.id" class="item" @click="selectName(item.name)">
              <text :class="{ selected: item.name === areaName }">{{ item.name }}</text>
            </view>
          </view>
          <view class="center">
            <view v-for="item in curProvinceList" :key="item.provinceCode" class="item" @click="selectProvince(item.provinceName)">
              <text :class="{ selected: item.provinceName === areaProvince }">{{ item.provinceName }}</text>
            </view>
          </view>
          <view class="right">
            <view class="item" v-for="city in curCityList" :key="city.cityCode" @click="selectCity(city.cityName)">
              <text :class="{ selected: city.cityName === areaCity }">{{ city.cityName }}</text>
            </view>
          </view>
        </view>
      </view>
    </uni-popup> -->
  </view>
</template>

<script>
  import { getBTAreaList } from '@/apis/commonApi.js'
  export default {
    props: {
      goodsList: {
        type: Array,
        default: () => [
          // {
          //   productImgUrl: 'https://qncloudtest.oss-cn-shenzhen.aliyuncs.com/common/14189212646949759.png',
          //   productName: '网红便当蛋糕提拉米苏包装盒子',
          //   listUnitPrice: 0.01,
          //   skuDesc: '毕业季/水金款',
          //   quantity: 100,
          //   totalAmount: 1,
          //   remark: '备注'
          // },
          // {
          //   productImgUrl: 'https://qncloudtest.oss-cn-shenzhen.aliyuncs.com/common/14189212646949759.png',
          //   productName: '网红便当蛋糕提拉米苏包装盒子',
          //   listUnitPrice: 0.01,
          //   skuDesc: '毕业季/水金款',
          //   quantity: 100,
          //   totalAmount: 1,
          //   remark: '备注'
          // }
        ]
      }
    },
    data() {
      return {
        form: {
          remark: ''
        }
        // areaList: [],
        // curProvinceList: [],
        // curCityList: [],
        // areaName: '',
        // areaProvince: '',
        // areaCity: ''
      }
    },
    // computed: {
    //   hasArea() {
    //     let target = this.goodsList.find((item) => item.type === 'bty')
    //     return !!target
    //   }
    // },
    // mounted() {
    //   this.getAreaList()
    // },
    // watch: {
    //   hasArea(val) {
    //     if (val) {
    //       this.getAreaList()
    //     }
    //   },
    //   // 区域经理
    //   areaName(val) {
    //     this.areaCity = ''
    //     this.areaProvince = ''
    //     if (!val) {
    //       this.curProvinceList = []
    //       this.curCityList = []
    //       return
    //     }
    //     let target = this.areaList.find((item) => item.name === val)
    //     if (!target) {
    //       this.curProvinceList = []
    //       this.curCityList = []
    //       return
    //     }
    //     this.curProvinceList = target.provinces || []
    //   },
    //   areaProvince(val) {
    //     this.areaCity = ''
    //     if (!val) {
    //       this.curCityList = []
    //       return
    //     }
    //     let target = this.curProvinceList.find((item) => item.provinceName === val)
    //     if (!target) {
    //       this.curCityList = []
    //       return
    //     }
    //     this.curCityList = target.cities || []
    //   },
    //   areaCity(val) {
    //     if (!val) {
    //       return
    //     }
    //     this.$refs.areaPopup.close()
    //   }
    // },
    methods: {
      // getAreaList() {
      //   getBTAreaList().then((res) => {
      //     this.areaList = res
      //   })
      // },
      // getBtyRemark() {
      //   let target = this.goodsList[0]
      //   let index = target.productName.lastIndexOf('半天妖')
      //   return target.productName.substring(index + 3) + '版本名称'
      // },
      // selectName(name) {
      //   if (this.areaName === name) {
      //     this.areaName = ''
      //   } else {
      //     this.areaName = name
      //   }
      // },
      // selectProvince(name) {
      //   if (this.areaProvince === name) {
      //     this.areaProvince = ''
      //   } else {
      //     this.areaProvince = name
      //   }
      // },
      // selectCity(name) {
      //   if (this.areaCity === name) {
      //     this.areaCity = ''
      //     return
      //   }
      //   this.areaCity = name
      // },
      // checkForm() {
      // if (this.hasArea) {
      //   if (!this.areaCity) {
      //     uni.showToast({
      //       title: '请选择下单区域',
      //       icon: 'none'
      //     })
      //     return false
      //   }
      //   if (!this.form.remark) {
      //     uni.showToast({
      //       title: '请输入' + this.getBtyRemark(),
      //       icon: 'none'
      //     })
      //     return false
      //   }
      // }
      // return true
      // },
      getForm() {
        // if (!this.checkForm()) {
        //   return {
        //     status: 'fail',
        //     value: null
        //   }
        // }
        // let form = { ...this.form }
        // if (this.hasArea) {
        //   let extraRemark = `经理:${this.areaName}; ${this.areaProvince}省; ${this.areaCity}市; 订单备注:`
        //   form.remark = extraRemark + form.remark
        // }
        return {
          status: 'success',
          value: this.form
        }
      }
      // showArea() {
      //   this.$refs.areaPopup.open('bottom')
      // }
    }
  }
</script>

<style scoped lang="scss">
  .goods-info {
    background-color: #fff;
    width: 100%;
    .title {
      padding: 24rpx;
      font-size: 30rpx;
      color: rgb(0, 0, 0);
      text-align: left;
      border-bottom: 1px solid rgb(221, 221, 221);
    }
    .goods-content {
      padding: 32rpx 24rpx 24rpx;
      .group_9 {
        margin-top: 20rpx;
        padding: 0rpx 24rpx;
        .image_7 {
          border-radius: 16rpx;
          width: 180rpx;
          height: 180rpx;
        }
        .group_10 {
          margin-left: 12rpx;
          flex: 1 1 auto;
          .group_11 {
            width: 420rpx;
            .text_12 {
              color: #333333;
              font-size: 32rpx;
              font-family: 'PingFangSC-Medium';
              font-weight: 500;
              line-height: 45rpx;
              text-align: left;
            }
            .text_13 {
              margin-top: 10rpx;
              align-self: flex-start;
              color: #888888;
              font-size: 22rpx;
              font-family: 'PingFangSC-Medium';
              font-weight: 500;
              line-height: 30rpx;
            }
          }
          .text_14 {
            margin-top: 13rpx;
            color: #ff0000;
            font-size: 26rpx;
            font-family: 'PingFangSC-Medium';
            font-weight: 500;
            line-height: 37rpx;
          }
        }
      }
      .remark {
        display: flex;
        margin-top: 16rpx;
        line-height: 40rpx;
        padding-left: 24rpx;
        .remark-label {
          display: inline-block;
          color: #888888;
          font-size: 24rpx;
        }
        .remark-content {
          display: inline-block;
          color: #333333;
          font-size: 24rpx;
          width: 520rpx;
        }
      }
      .image {
        margin-left: 28rpx;
        width: 60rpx;
        height: 68rpx;
      }
      .postage {
        margin-top: 32rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        .tip {
          font-size: 22rpx;
          color: rgb(136, 136, 136);
          margin-top: 16rpx;
          text-align: left;
        }
      }
      .form {
        margin-top: 32rpx;
        .form-item {
          margin-top: 32rpx;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          .label {
            font-size: 28rpx;
            color: rgb(51, 51, 51);
          }
          .box {
            font-size: 28rpx;
            color: rgb(153, 153, 153);
            text-align: right;
            width: 500rpx;
            display: flex;
            align-items: center;
            justify-content: flex-end;
          }
          .value {
            font-size: 28rpx;
            color: rgb(153, 153, 153);
            text-align: right;
            width: 500rpx;
          }
        }
      }
    }
  }
  .label {
    font-size: 28rpx;
    color: rgb(51, 51, 51);
  }
  .red {
    color: rgb(255, 0, 0);
  }
  .popup-content {
    width: 750rpx;
    height: 800rpx;
    border-radius: 16rpx 16rpx 0 0;
    background-color: #fff;
    overflow: hidden;
    .title-content {
      width: 100%;
      padding: 0 32rpx;
      height: 92rpx;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      color: rgb(51, 51, 51);
    }
    .scroll-title {
      width: 100%;
      height: 92rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      color: rgb(51, 51, 51);
      .left {
        width: 250rpx;
        text-align: center;
      }
      .center {
        width: 250rpx;
        text-align: center;
      }
      .right {
        width: 250rpx;
        text-align: center;
      }
    }
    .scroll-content {
      width: 750rpx;
      height: 508rpx;
      padding-bottom: 32rpx;
      border-top: 1px solid rgba(221, 221, 221, 0.5);
      display: flex;
      align-items: flex-start;
      .left {
        width: 250rpx;
        height: 508rpx;
        overflow-y: auto;
      }
      .center {
        width: 250rpx;
        height: 508rpx;
        overflow-y: auto;
      }
      .right {
        width: 250rpx;
        height: 508rpx;
        overflow-y: auto;
      }
      .item {
        width: 100%;
        font-size: 28rpx;
        line-height: 70rpx;
        color: rgb(51, 51, 51);
        height: 70rpx;
        text-align: center;
      }
      .selected {
        color: #007aff;
      }
    }
  }
</style>
