<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-10-18 09:55:36
-->
<template>
  <view class="content">
    <view class="kuang"
          v-for="(item,index) in oldGoodsList"
          :key="item.pkId">
      <view class="kuang_i">
        <view class="flex_i">
          <view>{{ '产品名称' }}</view>
          <view>{{ item.productName }}</view>
        </view>
        <view class="flex_i">
          <view>{{ '产品编号' }}</view>
          <view>{{ item.productCode }}</view>
        </view>
        <view class="flex_i">
          <view>{{ '产品规格' }}</view>
          <view>{{ item.specsName }}</view>
        </view>
        <view class="flex_i">
          <view>{{ '数量' }}</view>
          <view>{{ item.quantity }}</view>
        </view>
        <view class="flex_i">
          <view>{{ '产品单价' }}(￥)</view>
          <view>{{ item.price |toThousandthAndKeepDecimal}}</view>
        </view>
        <view class="flex_i">
          <view>{{ '产品业绩' }}({{ isLocalSymbol() }})</view>
          <view>{{ item.achievement |toThousandthAndKeepDecimal}}</view>
        </view>
        <view class="flex_i">
          <view>{{ '产品业绩' }}(BV)</view>
          <view>{{ item.assAchievement |toThousandthAndKeepDecimal}}</view>
        </view>
      </view>
    </view>
    <view class="kuang">
      <view class="kuang_i">
        <view class="flex_i">
          <view>{{ '邮费' }}</view>
        </view>
        <view class="flex_i">
          <view>{{ oldData.postage |toThousandthAndKeepDecimal}}</view>
        </view>
        <view class="flex_i">
          <view>{{ '订单编号' }}</view>
        </view>
        <view class="flex_i">
          <view>{{ oldData.orderCode }}</view>
        </view>
        <view class="flex_i">
          <view>{{ '商品总价' }}({{ isLocalSymbol() }})</view>
        </view>
        <view class="flex_i">
          <view>{{ oldData.orderAmount |toThousandthAndKeepDecimal}}</view>
        </view>
        <view class="flex_i">
          <view>{{ '商品业绩' }}({{ isLocalSymbol() }})</view>
        </view>
        <view class="flex_i">
          <view>{{ oldData.orderAchieve |toThousandthAndKeepDecimal}}</view>
        </view>
        <view class="flex_i">
          <view>{{ '商品业绩' }}(BV)</view>
        </view>
        <view class="flex_i">
          <view>{{ oldData.orderAssAchievement |toThousandthAndKeepDecimal}}</view>
        </view>
        <view class="flex_i">
          <view>{{ '扣款币种' }}</view>
        </view>
        <view class="flex_i">
          <view>{{ oldData.accountKeyVal }}</view>
        </view>
        <view class="flex_i">
          <view>扣款金额(￥)</view>
        </view>
        <view class="flex_i">
          <view>{{ oldData.cost |toThousandthAndKeepDecimal}}</view>
        </view>
      </view>
    </view>

    <!-- 新数据 -->
    <view class="kuang"
          v-for="(item,index) in newGoodsList"
          :key="index">
      <view class="delImg"
            @click="delTableList(index)">x</view>
      <view class="kuang_i">
        <view class="flex_ii">
          <view class="flex_iit">{{ '产品名称' }}</view>
          <view class="flex_iib"
                @click="changeProduct(index)">
            <u--input disabled
                      fontSize="12"
                      disabledColor="#ffffff"
                      v-model="item.productName"
                      suffixIcon="arrow-down"
                      suffixIconStyle="font-size: 12px;"></u--input>
          </view>
        </view>
        <view class="flex_ii">
          <view class="flex_iit">{{ '产品编号' }}</view>
          <view class="flex_iib">
            <u--input disabled
                      fontSize="12"
                      v-model="item.productCode"></u--input>
          </view>
        </view>
        <view class="flex_ii">
          <view class="flex_iit">{{ '产品规格' }}</view>
          <view class="flex_iib"
                @click="sureSpecs(index)">
            <u--input disabled
                      fontSize="12"
                      disabledColor="#ffffff"
                      v-model="item.specsName"
                      suffixIcon="arrow-down"
                      suffixIconStyle="font-size: 12px;"></u--input>
          </view>
        </view>
        <view class="flex_ii">
          <view class="flex_iit">{{ '数量' }}</view>
          <view class="flex_iib">
            <u-number-box buttonSize="25"
                          v-model="item.quantity"></u-number-box>
          </view>
        </view>
        <view class="flex_ii">
          <view class="flex_iit">{{ '产品单价' }}(￥)</view>
          <view class="flex_iib">
            <u--input fontSize="12"
                      v-model="item.price">
            </u--input>
          </view>
        </view>
        <view class="flex_ii">
          <view class="flex_iit">{{ '产品业绩' }}({{ isLocalSymbol() }})</view>
          <view class="flex_iib">
            <u--input fontSize="12"
                      v-model="item.achievement">
            </u--input>
          </view>
        </view>
        <view class="flex_ii">
          <view class="flex_iit">{{ '产品业绩' }}(BV)</view>
          <view class="flex_iib">
            <u--input fontSize="12"
                      v-model="item.assAchievement">
            </u--input>
          </view>
        </view>
      </view>
    </view>
    <view class="addProduct"
          @click="addNewItem">
      <u-icon size="20"
              name="plus-circle"></u-icon>
    </view>
    <view class="kuang">
      <view class="kuang_i">
        <view class="flex_ii">
          <view>{{ '邮费' }}</view>
        </view>
        <view class="flex_ii">
          <u--input fontSize="12"
                    v-model="allGoodsList.postage">
          </u--input>
        </view>
      </view>
    </view>
    <view class="kuang">
      <view class="kuang_i">
        <!-- <view class="flex_i">
          <view>{{ '邮费' }}</view>
        </view>
        <view class="flex_i">
          <view>{{ newData.postage |toThousandthAndKeepDecimal}}</view>
        </view> -->
        <view class="flex_i">
          <view>{{ '订单编号' }}</view>
        </view>
        <view class="flex_i">
          <view>{{ newData.orderCode }}</view>
        </view>
        <view class="flex_i">
          <view>{{ '商品总价' }}({{ isLocalSymbol() }})</view>
        </view>
        <view class="flex_i">
          <view>{{ newData.orderAmount |toThousandthAndKeepDecimal}}</view>
        </view>
        <view class="flex_i">
          <view>{{ '商品业绩' }}({{ isLocalSymbol() }})</view>
        </view>
        <view class="flex_i">
          <view>{{ newData.orderAchieve |toThousandthAndKeepDecimal}}</view>
        </view>
        <view class="flex_i">
          <view>{{ '商品业绩' }}(BV)</view>
        </view>
        <view class="flex_i">
          <view>{{ newData.orderAssAchievement |toThousandthAndKeepDecimal}}</view>
        </view>
        <view class="flex_i">
          <view>{{ '扣款币种' }}</view>
        </view>
        <view class="flex_i">
          <view>{{ newData.accountKeyVal }}</view>
        </view>
        <view class="flex_i">
          <view>扣款金额(￥)</view>
        </view>
        <view class="flex_i">
          <view>{{ newData.cost |toThousandthAndKeepDecimal}}</view>
        </view>
      </view>
    </view>
    <view class="kuang">
      <u--textarea v-model="returnRemark"
                   placeholder="请输入备注"></u--textarea>
    </view>

    <view class="zhan"></view>
    <view class="table_a">
      <view class="table_f">
        <u-button size="small"
                  @click="toBack"
                  :text="'取消'"></u-button>
        <u-button size="small"
                  @click="saveGoods(1)"
                  color="rgba(0, 155, 88, 1)"
                  v-hasButtons="['orderChangeMq']"
                  :text="'免签'"></u-button>
        <u-button size="small"
                  @click="saveGoods(2)"
                  color="rgba(243, 169, 0, 1)"
                  v-hasButtons="['orderChangeMf']"
                  :text="'免付'"></u-button>
        <u-button size="small"
                  @click="saveGoods(3)"
                  color="rgba(228, 27, 27, 1)"
                  v-hasButtons="['orderChangeQm']"
                  :text="'全免'"></u-button>
        <u-button size="small"
                  @click="saveGoods(0)"
                  color="rgba(72, 178, 253, 1)"
                  v-hasButtons="['orderChangeQr']"
                  :text="'确认'"></u-button>
      </view>
    </view>
    <!-- 商品弹框 -->
    <u-popup :show="isProduct"
             mode="center"
             :closeable="true"
             @close="isProduct=false">
      <view class="pop_box">
        <view class="pop_t">
          <u--input fontSize="12"
                    @change="searchProduct"
                    v-model="productVal">
          </u--input>
        </view>
        <view class="pop_it">
          <view>{{ '产品名称' }}</view>
          <view>{{ '产品编号' }}</view>
        </view>
        <u-radio-group v-model="radiovalue"
                       placement="column"
                       @change="checkboxChange">
          <view v-for="item,index in productList"
                :key="item.pkId"
                :class="[index%2?'pop_i':'pop']">

            <view class="yy">
              <u-radio :key="index"
                       :name="item.productCode">
              </u-radio>{{ item.productName }}
            </view>
            <view class="yy">{{ item.productCode }}</view>
          </view>
        </u-radio-group>

      </view>
      <view class="footer">
        <u-button @click="isProduct=false"
                  text="取消"></u-button>
        <u-button @click="checkTrue"
                  color="#C8161D"
                  text="确认"
                  class="btnn"></u-button>
      </view>
    </u-popup>
    <!-- 规格 -->
    <u-popup :show="isSku"
             mode="center"
             :closeable="true"
             @close="isSku=false">
      <view class="pop_box">
        <div v-for="item,index in skuPopList"
             :key="index">
          <div class="tit">{{ item.typeName }}</div>
          <u-radio-group v-model="item.radio">
            <u-radio :name="ctem.specsId"
                     :key="cindex"
                     v-for="ctem,cindex in item.specsList">{{ ctem.value }}</u-radio>
          </u-radio-group>
        </div>
      </view>
      <view class="footer">
        <u-button @click="isSku=false"
                  text="取消"></u-button>
        <u-button @click="sureSku"
                  color="#C8161D"
                  text="确认"
                  class="btnn"></u-button>

      </view>
    </u-popup>
  </view>
</template>

<script>
import * as api from '@/api/information'
import * as goods from '@/api/goods'
import { isLocals, isLocalSymbol } from '@/util/numberToCurrency'
export default {
  data() {
    return {
      changeIndex: 0,
      methodsIndex: 0,
      order: '',
      backCodeList: [],
      returnRemark: '',
      memberCode: '',
      memberName: '',

      allGoodsList: [],
      oldGoodsList: [],
      oldData: {},
      newData: {},
      newGoodsList: [],
      isProduct: false,
      isSku: false,
      productList: [],
      productListCopy: [],
      productVal: '',
      radiovalue: '',
      selIndex: -1,
      skuPopList: [],
    }
  },
  onLoad(options) {
    this.order = options.order
    this.changeGoods()
    this.getProduct()
  },
  methods: {
    isLocalSymbol,
    searchProduct(e) {
      let arr = []
      if (e) {
        this.productList.forEach((item) => {
          if (item.productName.includes(e) || item.productCode.includes(e)) {
            arr.push(item)
          }
        })
        this.productList = arr
      } else {
        this.productList = this.productListCopy
      }
    },
    checkTrue() {
      this.productList.forEach((item) => {
        if (this.radiovalue == item.productCode) {
          this.newGoodsList[this.selIndex].productName = item.productName
          this.newGoodsList[this.selIndex].productCode = item.productCode
          this.newGoodsList[this.selIndex].pkProduct = item.pkId
        }
      })
      this.isProduct = false
      this.getSku([this.radiovalue])
    },
    getSku(arr) {
      goods.getProductCodeSpecs({ productCodes: arr }).then((res) => {
        this.newGoodsList.forEach((item) => {
          arr.forEach((ctem) => {
            res.data.forEach((stem) => {
              if (item.productCode == ctem && ctem == stem.productCode) {
                // item.specs = stem.specsTypeData
                this.$set(item, 'specs', stem.specsTypeData)
              }
            })
          })
        })
        if (this.selIndex != -1) {
          this.sureSpecs1(this.selIndex)
        }
        this.$forceUpdate()
      })
    },
    // 选择产品后付默认规格（第一个）
    sureSpecs1(index) {
      this.newGoodsList[index].specs.forEach((item) => {
        this.$set(item, 'radio', item.specsList[0].specsId)
        this.$set(item, 'radioVal', item.specsList[0].value)
      })
      this.newGoodsList[index].specsNameArr = []
      this.newGoodsList[index].specificationsArr = []
      this.newGoodsList[index].specs.forEach((item) => {
        this.newGoodsList[index].specsNameArr.push(item.radioVal)
        this.newGoodsList[index].specificationsArr.push(item.radio)
      })
      this.newGoodsList[index].specsNameId = this.newGoodsList[
        index
      ].specificationsArr
        .sort()
        .join(',')
      this.newGoodsList[index].specsName =
        this.newGoodsList[index].specsNameArr.join(',')
      // this.newGoodsList[index].visible = false
    },
    // 打开规格弹框选择规格
    sureSpecs(index) {
      this.selIndex = index
      this.isSku = true
      let arr = this.newGoodsList[index].specsNameId.split(',')
      this.newGoodsList[index].specs.forEach((item) => {
        item.specsList.forEach((ctem) => {
          arr.forEach((stem) => {
            if (stem == ctem.specsId) {
              item.radioVal = ctem.value
              item.radio = ctem.specsId
            }
          })
        })
      })
      this.$set(this, 'skuPopList', this.newGoodsList[selIndex].specs)
      //  this.skuPopList = this.newGoodsList[selIndex].specs
    },
    // 规格弹框确认
    sureSku() {
      let index = this.selIndex
      this.newGoodsList[index].specs.forEach((item) => {
        item.specsList.forEach((ctem) => {
          if (item.radio == ctem.specsId) {
            item.radioVal = ctem.value
          }
        })
      })
      this.newGoodsList[index].specsNameArr = []
      this.newGoodsList[index].specificationsArr = []
      this.newGoodsList[index].specs.forEach((item) => {
        this.newGoodsList[index].specsNameArr.push(item.radioVal)
        this.newGoodsList[index].specificationsArr.push(item.radio)
      })
      this.newGoodsList[index].specsNameId = this.newGoodsList[
        index
      ].specificationsArr
        .sort()
        .join(',')
      this.newGoodsList[index].specsName =
        this.newGoodsList[index].specsNameArr.join(',')
      this.isSku = false
    },
    delTableList(index) {
      this.newGoodsList.splice(index, 1)
    },
    addNewItem() {
      let obj = {
        achievement: 0,
        assAchievement: 0,
        index: this.newGoodsList.length,
        cost: this.allGoodsList.memberCode.cost,
        memberCode: this.allGoodsList.memberCode,
        memberName: this.allGoodsList.memberName,
        orderAchieve: this.allGoodsList.orderAchieve,
        orderAmount: this.allGoodsList.orderAmount,
        orderAssAchievement: this.allGoodsList.orderAssAchievement,
        orderCode: this.allGoodsList.orderCode,
        orderStatus: '',
        pkAccount: 0,
        pkId: '',
        pkProduct: '',
        postage: this.allGoodsList.postage,
        price: 0,
        productCode: '',
        productName: '',
        quantity: 1,
        specs: [],
        specsName: '',
        visible: false,
      }
      this.newGoodsList.push(obj)
    },
    saveGoods(index) {
      api.addressCheck({ orderList: this.order }).then((res) => {
        if (res.code != 200) return false
        let arr = []
        if (this.oldGoodsList.length > this.newGoodsList.length) {
          for (let i = 0; i < this.oldGoodsList.length; i++) {
            arr.push({
              oldList: '',
              newList: '',
            })
          }
        } else {
          for (let i = 0; i < this.newGoodsList.length; i++) {
            arr.push({
              oldList: '',
              newList: '',
            })
          }
        }
        arr.forEach((item, index) => {
          this.oldGoodsList.forEach((ctem, cndex) => {
            arr[index].oldList = this.oldGoodsList[index] || {}
          })
          this.newGoodsList.forEach((ctem, cndex) => {
            arr[index].newList = this.newGoodsList[index] || {}
          })
        })
        this.allGoodsList.detailList = arr
        this.allGoodsList.postage = arr[0].newList.postage
        let obj
        if (index == 0) {
          obj = {
            itemList: this.newGoodsList,
            tableList: [this.allGoodsList],
            payFlag: 1,
          }
          // this.$router.push({
          //   path: '/information/business/dhZxqc',
          //   query: {
          //     data: JSON.stringify(obj),
          //     index: 232,
          //   },
          // })
          uni.navigateTo({
            url:
              '/pages/information/changeGoods/onlineSign?data=' +
              JSON.stringify(obj) +
              '&index=232',
          })
        } else if (index == 1) {
          obj = {
            itemList: this.newGoodsList,
            orderCode: this.allGoodsList.orderCode,
            postage: this.allGoodsList.postage,
            tableList: [this.allGoodsList],
            payFlag: 1,
          }
          api.productFree([obj]).then((res) => {
            if (res.code == 200) {
              uni.showToast({
                title: res.msg,
                icon: 'none',
                duration: 1500,
              })
              setTimeout(() => {
                uni.navigateBack({ delta: 1 })
              }, 1500)
            }
          })
        } else if (index == 2) {
          obj = {
            itemList: this.newGoodsList,
            tableList: [this.allGoodsList],
            payFlag: 0,
          }
          uni.navigateTo({
            url:
              '/pages/information/changeGoods/onlineSign?data=' +
              JSON.stringify(obj) +
              '&index=232',
          })
        } else if (index == 3) {
          obj = {
            itemList: this.newGoodsList,
            orderCode: this.allGoodsList.orderCode,
            postage: this.allGoodsList.postage,
            tableList: [this.allGoodsList],
            payFlag: 0,
          }
          api.productFree([obj]).then((res) => {
            if (res.code == 200) {
              uni.showToast({
                title: res.msg,
                icon: 'none',
                duration: 1500,
              })
              setTimeout(() => {
                uni.navigateBack({ delta: 1 })
              }, 1500)
            }
          })
        }
      })
    },
    checkboxChange() {},
    getProduct() {
      api.getProductAll().then((res) => {
        this.productList = res.data
        this.productListCopy = JSON.parse(JSON.stringify(res.data))
      })
    },
    changeProduct(index) {
      this.selIndex = index
      this.isProduct = true
    },
    changeGoods() {
      api.productData({ orderCode: this.order }).then((res) => {
        res.data.detailList.forEach((item, index) => {
          item.memberCode = res.data.memberCode
          item.memberName = res.data.memberName
          item.orderAchieve = res.data.orderAchieve
          item.orderAmount = res.data.orderAmount
          item.orderAssAchievement = res.data.orderAssAchievement
          item.orderCode = res.data.orderCode
          item.pkAccount = res.data.pkAccount
          item.postage = res.data.postage
          item.cost = res.data.cost
          item.visible = false
          item.index = index
          item.accountKeyVal = res.data.accountKeyVal
        })
        this.allGoodsList = res.data
        this.oldGoodsList = JSON.parse(JSON.stringify(res.data.detailList))
        this.oldData = this.oldGoodsList[0]
        this.newGoodsList = JSON.parse(JSON.stringify(res.data.detailList))
        this.newData = this.newGoodsList[0]
        let arr = this.newGoodsList.map((item) => {
          return item.productCode
        })
        if (arr.length > 0) {
          this.getSku(arr)
        }
        // let arr = this.newGoodsList.map((item) => {
        //   return item.productCode
        // })
      })
    },
    toBack() {
      uni.navigateBack({ delta: 1 })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background: #f9f9f9;
  // padding: 20rpx;
  min-height: 94vh;
  padding: 20rpx 0;
}
.kuang {
  margin: 20rpx;
  background: #fff;
  border-radius: 10px 10px 10px 10px;
  padding: 20rpx 30rpx;
  font-size: 13px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}
.mtn {
  margin-bottom: 10rpx;
}
.kuang_i {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  // margin-top: 20rpx;
}
.flex_i {
  width: 50%;
  font-size: 12px;
  font-family: PingFang HK-Medium, PingFang HK;
  font-weight: 500;
  color: #999999;
  :nth-child(1) {
    margin-bottom: 10rpx;
  }
  :nth-child(2) {
    font-size: 13px;
    font-family: PingFang HK-Medium, PingFang HK;
    font-weight: 500;
    color: #333333;
    margin-bottom: 20rpx;
  }
}
.flex_ii {
  width: 50%;
  font-size: 12px;
  font-family: PingFang HK-Medium, PingFang HK;
  font-weight: 500;
  color: #999999;
}
.flex_iit {
  margin-bottom: 20rpx;
}
.flex_iib {
  padding-right: 40rpx;
  margin-bottom: 20rpx;
}
.zhan {
  height: 100px;
}
.table_a {
  position: fixed;
  width: 100%;
  bottom: 0;
  background: #fff;
  padding: 20rpx 0 40px 0;
}
.table_f {
  display: flex;

  uni-button {
    margin: 20rpx 10rpx;
  }
}
::v-deep .u-input__content {
  margin-bottom: 0rpx !important;
}
::v-deep .u-input {
  padding: 0 9px !important;
}
::v-deep .u-form-item__body__left__content__label {
  font-size: 12px;
}
::v-deep .u-form-item__body {
  padding: 5px 0;
}

.pop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 20rpx;
}
.pop_i {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 20rpx;
  background: #eee;
}
.pop_it {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 20rpx;
  background: #eee;
}
::v-deep .u-popup__content {
  width: 90%;
  padding: 80rpx 0rpx;
}
.pop_box {
  height: 60vh;
  overflow-y: scroll;
  padding: 0 40rpx;
  font-size: 12px;
}
.pop_t {
  margin-bottom: 20rpx;
}
.yy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10rpx 0;
}
.footer {
  display: flex;
  align-items: center;
  padding: 20rpx 60rpx;
  .btnn {
    margin-left: 40rpx;
  }
}
::v-deep .u-radio-group--row {
  flex-wrap: wrap;
}
::v-deep .u-radio {
  margin: 10rpx 20rpx 10rpx 0;
}
.delImg {
  text-align: right;
  font-size: 18px;
}
.addProduct {
  margin: 10px auto;
  display: flex;
  justify-content: center;
}
</style>