<template>

  <view class="example">
    <!-- 展示不同的排列方式 -->
    <uni-forms ref="paymentFormRef" :modelValue="paymentFormData" :rules="rules" validateTrigger="submit"
      label-position="top">
      <uni-forms-item label="合同总金额（万元）" required label-width="140px" name="total_amount">
        <view class="custom-select-class form-item-disabled">
          <view class="custom-select-content">
            <text style="color:#909399;font-size: 12px;">{{ paymentFormData.total_amount || 0 }}</text>
          </view>
          <!-- <uni-icons :size="14" color="#909399" type="down" style=" padding: 0 5px;"></uni-icons> -->
        </view>
      </uni-forms-item>
      <uni-forms-item label="合同剩余收款比例（%）" required label-width="160px" name="remaining_percentage">
        <view class="custom-select-class form-item-disabled">
          <view class="custom-select-content">
            <text style="color:#909399;font-size: 12px;">{{ paymentFormData.remaining_percentage || 0 }}</text>
          </view>
          <!-- <uni-icons :size="14" color="#909399" type="down" style=" padding: 0 5px;"></uni-icons> -->
        </view>
      </uni-forms-item>
      <uni-forms-item label="收款条件" required label-width="90px" name="condition">
        <uni-easyinput v-model="paymentFormData.condition" placeholder="请输入收款条件" />
      </uni-forms-item>
      <uni-forms-item label="收款比例（%）" required label-width="140px" name="percent">
        <view class="uni-easyinput">
          <view class="uni-easyinput__content is-input-border" :style="{
            borderColor: is_foucs ? '#2979ff' : '',
            background: is_foucs ? '#fff' : ''
          }">
            <input class="uni-easyinput__content-input" v-model="paymentFormData.percent"
              placeholder-class="uni-easyinput__placeholder-class" :focus="is_foucs" type="digit" placeholder="输入收款比例"
              @focus="is_foucs = true" @blur="handlerPercentBlur()">
          </view>
        </view>
      </uni-forms-item>
      <uni-forms-item label="收款金额（万元）" required label-width="130px" name="amount">
        <view class="custom-select-class form-item-disabled">
          <view class="custom-select-content">
            <text style="color:#909399;font-size: 12px;">{{ paymentFormData.amount || 0 }}</text>
          </view>
        </view>
      </uni-forms-item>
      <uni-forms-item label="收款日期" required label-width="90px" name="expect_pay_date">
        <uni-datetime-picker type="date" v-model="paymentFormData.expect_pay_date" />
      </uni-forms-item>
      <uni-forms-item label="收款备注" label-width="90px" name="memo">
        <uni-easyinput type="textarea" v-model="paymentFormData.memo" placeholder="收款备注" />
      </uni-forms-item>
    </uni-forms>
    <view style="margin: 10px 0;display: flex;">
      <custom-button width="100%" type="filled" color="#dd524d" @click="restForm()"
        style="margin-right: 5px;flex:1">重置</custom-button>
      <custom-button width="100%" type="filled" color="#4cd964" style="flex:1;"
        @click="handlerModifyPayment()">修改</custom-button>
    </view>
  </view>

</template>

<script lang="ts" setup>
import { useEmitt } from '@/logics/mitt/useEmitt';
import { Payment } from '@/types/contract';
const paymentFormRef = ref()
const is_foucs = ref(false)
const { emitter } = useEmitt()



const rules = {
  // 对name字段进行必填验证
  condition: {
    // name 字段的校验规则
    rules: [
      // 校验 name 不能为空
      {
        required: true,
        errorMessage: '不能为空',
      }
    ]
  },
  percent: {
    // name 字段的校验规则
    rules: [
      // 校验 name 不能为空
      {
        required: true,
        errorMessage: '收款比例不能为空',
      }, {
        validateFunction: function (rule: any, value: any, data: any, callback: any) {
          if (value > data.remaining_percentage) {
            callback('收款比例不能大于合同剩余收款比例')
          }
          return true
        }
      }]
  },
  expect_pay_date: {
    // name 字段的校验规则
    rules: [
      // 校验 name 不能为空
      {
        required: true,
        errorMessage: '不能为空',
      }
    ]
  }
}

const paymentFormData = ref<{
  eIndex?: number
  total_amount?: number
  remaining_percentage?: number
  condition?: string
  percent?: number // 收款比例
  amount?: number
  expect_pay_date?: string // 预计收款日
  memo?: string // 备注
}>({})

// 收款比例只保存
const handlerPercentBlur = () => {
  is_foucs.value = false
  if (![undefined, null, '', 0].includes(paymentFormData.value.percent)) {
    paymentFormData.value.percent = Math.round(Number(paymentFormData.value.percent) * 100) / 100
    paymentFormData.value.amount = Math.round((paymentFormData.value.total_amount || 0) * paymentFormData.value.percent * 100) / 10000
  }
}

const handlerModifyPayment = async () => {
  const isValid = await paymentFormRef.value?.validate()
  if (!isValid) {
    return
  }
  // 发送修改payment信息
  emitter.emit('modify_payment', {
    index: paymentFormData.value.eIndex,
    payment: {
      condition: paymentFormData.value.condition,
      percent: Number(paymentFormData.value.percent),
      expect_pay_date: paymentFormData.value.expect_pay_date,
      memo: paymentFormData.value.memo,
    }
  })
  return uni.navigateBack()
}


const restForm = async () => {
  paymentFormData.value = {}
  paymentFormRef.value?.clearValidate()
}

// 监听子组件增加，修改，删除事件，更新列表
useEmitt({
  name: 'editor_payment_item',
  callback: (e: { payment: Payment, index: number }) => {
    const { index, payment } = e;
    paymentFormData.value.eIndex = index;
    paymentFormData.value.percent = payment.percent;
    paymentFormData.value.condition = payment.condition;
    paymentFormData.value.expect_pay_date = payment.expect_pay_date;
    paymentFormData.value.memo = payment.memo
    paymentFormData.value.amount = Math.round((paymentFormData.value.total_amount || 0) * payment.percent * 100) / 10000
  }
})

onLoad((options) => {
  paymentFormData.value.total_amount = Number(options?.total_amount)
  paymentFormData.value.remaining_percentage = Number(options?.remaining_percentage)
})

</script>
<script lang="ts">
export default {
  options: {
    styleIsolation: 'apply-shared', //解除样式隔离
  }

}
</script>
<style scoped lang="scss">
.example {
  padding: 15px;
  background-color: #fff;
}

:deep(.is-disabled) {
  color: #333;

}

.custom-select-class {
  border-color: #e5e5e5;
  background-color: transparent;
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.custom-select-content {
  width: auto;
  position: relative;
  overflow: hidden;
  flex: 1;
  line-height: 1;
  font-size: 14px;
  line-height: 35px;
  padding-left: 10px;
  height: 35px;

}

.tag-container {
  &__item {
    padding: 0 6px 0 0;
  }
}

.uni-easyinput {
  /* #ifndef APP-NVUE */
  width: 100%;
  /* #endif */
  flex: 1;
  position: relative;
  text-align: left;
  color: #333;
  font-size: 14px;
}

.uni-easyinput__content {
  flex: 1;
  /* #ifndef APP-NVUE */
  width: 100%;
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: row;
  align-items: center;
  border-color: #fff;
  transition-property: border-color;
  transition-duration: 0.3s;
}

.is-input-border {
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.uni-easyinput__content-input {
  /* #ifndef APP-NVUE */
  width: auto;
  /* #endif */
  position: relative;
  overflow: hidden;
  flex: 1;
  line-height: 1;
  font-size: 14px;
  padding-left: 10px;
  height: 35px;

  /*ifdef H5*/
  & ::-ms-reveal {
    display: none;
  }

  & ::-ms-clear {
    display: none;
  }

  & ::-o-clear {
    display: none;
  }

}

.content-clear-icon {
  padding: 0 5px;
}

:deep(.uni-easyinput__placeholder-class) {
  color: #999;
  font-size: 12px;
}

:deep(.uni-section .uni-section-header) {
  padding: 12px 0
}

:deep(.uni-swipe_button-group) {
  top: 5px;
  bottom: 5px;
}

.uni-mt-5 {
  margin-top: 5px;
}

.border-top {
  border-top: 1px #eee solid;
}

.form-item-disabled {
  background: #f7f6f6;
  cursor: not-allowed;
  color: #d5d5d5
}
</style>