<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-10-18 09:55:36
-->
<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-10-17 14:09:39
-->
<template>
  <view class="content">
    <view class="kuang">{{'订单编号'}}: {{ order }}</view>
    <u-checkbox-group v-model="backCodeList.selProdyctList"
                      placement="column"
                      @change="checkboxChange">
      <view class="kuang"
            v-for="(item,index) in backCodeList.orderCancelDetailVOList"
            :key="index">
        <u-checkbox :key="index"
                    :name="item.pkId">
        </u-checkbox>
        <view class="kuang_i">
          <view class="flex_i">
            <view>{{ '产品名称' }}</view>
            <view>{{ item.productName }}</view>
          </view>
          <view class="flex_i">
            <view>{{ '产品数量' }}</view>
            <view>{{ item.number }}</view>
          </view>
          <view class="flex_i">
            <view>订单价格(￥)</view>
            <view>{{ item.orderAmount |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>
    </u-checkbox-group>
    <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="saveBackkProduct(1)"
                  color="rgba(0, 155, 88, 1)"
                  v-hasButtons="['ordercancelMq']"
                  :text="'免签'"></u-button>
        <u-button size="small"
                  @click="saveBackkProduct(2)"
                  color="rgba(243, 169, 0, 1)"
                  v-hasButtons="['ordercancelMf']"
                  :text="'免付'"></u-button>
        <u-button size="small"
                  @click="saveBackkProduct(3)"
                  color="rgba(228, 27, 27, 1)"
                  v-hasButtons="['ordercancelQm']"
                  :text="'全免'"></u-button>
        <u-button size="small"
                  @click="saveBackkProduct(0)"
                  color="rgba(72, 178, 253, 1)"
                  v-hasButtons="['ordercancelQr']"
                  :text="'确认'"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
import * as api from '@/api/information'
import { isLocals, isLocalSymbol } from '@/util/numberToCurrency'
export default {
  data() {
    return {
      changeIndex: 0,
      methodsIndex: 0,
      order: '',
      backCodeList: {
        selProdyctList: [],
        selProdyctListAll:[]
      },
      returnRemark: '',
    }
  },
  onLoad(options) {
    this.order = options.order
    this.methodsIndex = options.index
    this.backOrder()
  },
  methods: {
    isLocalSymbol,
    checkboxChange(e) {
      let arr = []
      this.backCodeList.orderCancelDetailVOList.forEach((item) => {
        e.forEach((ctem) => {
          if (item.pkId == ctem) {
            arr.push(item)
          }
        })
      })
      this.backCodeList.selProdyctListAll= arr
    },
    backOrder() {
      api
        .toCancelOrder({ cancelType: this.methodsIndex, orderCode: this.order })
        .then((res) => {
          if (res.code == 200) {
            // this.backCodeList = res.data
            res.data.orderCancelDetailVOList.forEach((item) => {
              item.orderCode = res.data.orderCode
            })
            this.backCodeList = res.data
            this.backCodeList.cancelType = this.methodsIndex
            this.backCodeList.selProdyctList = []
            this.backCodeList.selProdyctListAll = []
          }
        })
    },
    toBack() {
      uni.navigateBack({ delta: 1 })
    },
    // 撤销订单确认
    saveBackkProduct(index) {
      if (this.backCodeList.selProdyctList.length == 0) {
        uni.showToast({
          title: '请选择需要撤销的产品',
          icon: 'none',
          duration: 1500,
        })
        return false
      }
      let arr = this.backCodeList.selProdyctList.map((res) => {
        return { pkId: res.pkId }
      })
      api
        .validateBind({
          orderCode: this.order,
          itemIdList: this.backCodeList.selProdyctList,
        })
        .then((res) => {
          if (res.code == 200) {
            if (index == 1 || index == 3) {
              api
                .freeCancelOrder({
                  cancelType: this.backCodeList.cancelType,
                  cancelRoad: index,
                  orderCode: this.order,
                  signType: 1,
                  remark: this.returnRemark,
                  orderCancelDetailParamList: arr,
                })
                .then((response) => {
                  if (response.code == 200) {
                    uni.showToast({
                      title: res.msg,
                      icon: 'none',
                      duration: 1500,
                    })
                    setTimeout(() => {
                      uni.navigateBack({ delta: 1 })
                    }, 1500)
                  }
                })
            } else {
              uni.navigateTo({
                url:
                  '/pages/information/cancleProduct/onlineSign?data=' +
                  JSON.stringify([this.backCodeList]) +
                  '&index=235' +
                  '&cancelRoad=' +
                  index,
              })
            }
          } else {
            uni.showModal({
              title: res.msg,
              success: function (res) {
                if (res.confirm) {
                  if (index == 1 || index == 3) {
                    api
                      .freeCancelOrder({
                        cancelType: this.backCodeList.cancelType,
                        cancelRoad: index,
                        orderCode: this.order,
                        signType: 1,
                        remark: this.returnRemark,
                        orderCancelDetailParamList: arr,
                      })
                      .then((response) => {
                        if (response.code == 200) {
                          uni.showToast({
                            title: res.msg,
                            icon: 'none',
                            duration: 1500,
                          })
                          setTimeout(() => {
                            uni.navigateBack({ delta: 1 })
                          }, 1500)
                        }
                      })
                  } else {
                    uni.navigateTo({
                      url:
                        '/pages/information/cancleProduct/onlineSign?data=' +
                        JSON.stringify([this.backCodeList]) +
                        '&index=235' +
                        '&cancelRoad=' +
                        index,
                    })
                  }
                }
              },
            })
          }
        })
    },
  },
}
</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: 30rpx;
  font-size: 13px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}
.kuang_i {
  display: flex;
  flex-wrap: wrap;
  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;
  }
}
.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;
  }
}
</style>