<template>
  <view class="trade_info">
    <view class="center">
      <view class="list">
        <view>证券名称</view>
        <input
          type="text"
          v-model="data.name"
          placeholder="请输入"
          class="ipt"
        />
      </view>
      <view class="list">
        <view>证券代码</view>
        <input
          type="text"
          v-model="data.code"
          placeholder="请输入"
          class="ipt"
        />
      </view>
      <view class="list" @tap="showType = true">
        <view>交易类别</view>
        <view class="list_right">
          <input
            type="number"
            v-model="data.type"
            placeholder="请输入"
            class="ipt"
            disabled
          />
          <image
            src="../../static/right_all.png"
            class="right_icon"
            mode="scaleToFill"
          />
        </view>
      </view>
      <view class="list">
        <view>成交价格</view>
        <input
          type="digit"
          v-model="data.clinchPrice"
          placeholder="请输入"
          class="ipt"
          @input="changePrice"
        />
      </view>
      <view class="list">
        <view>成交数量</view>
        <input
          type="digit"
          v-model="data.clinchNum"
          placeholder="请输入"
          class="ipt"
          @input="changeNum"
        />
      </view>
      <view class="list">
        <view>成交金额</view>
        <input
          type="text"
          disabled
          v-model="data.clinchMoney"
          placeholder="请输入"
          class="ipt"
        />
      </view>
      <view class="list">
        <view>手续费</view>
        <input
          type="digit"
          disabled
          v-model="data.formalitiesFee"
          placeholder="请输入"
          class="ipt"
        />
      </view>
      <view class="list">
        <view>手续费率</view>
        <view class="list_right">
          <input
            type="digit"
            v-model="data.formalitiesRates"
            placeholder="请输入"
            class="ipt"
            @input="changeRates"
          />
          <view>%</view>
        </view>
      </view>
      <view class="list" @tap="showDate = true">
        <view>成交日期</view>
        <view class="list_right">
          <input
            type="number"
            v-model="data.date"
            placeholder="请选择"
            class="ipt"
            disabled
          />
          <image
            src="../../static/right_all.png"
            class="right_icon"
            mode="scaleToFill"
          />
        </view>
      </view>
      <view class="list" @tap="showTime = true">
        <view>成交时间</view>
        <view class="list_right">
          <input
            type="number"
            v-model="data.time"
            placeholder="请选择"
            class="ipt"
            disabled
          />
          <image
            src="../../static/right_all.png"
            class="right_icon"
            mode="scaleToFill"
          />
        </view>
      </view>
    </view>
    <view class="footer">
      <button class="btn" @tap="submit">提交信息</button>
    </view>
    <!-- 交易类别 -->
    <u-picker
      :show="showType"
      :columns="columns"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="showType = false"
      @confirm="confirmType"
    ></u-picker>
    <!-- 成交日期 -->
    <u-datetime-picker
      :show="showDate"
      v-model="data.date"
      mode="date"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="showDate = false"
      @confirm="confirmDate"
    ></u-datetime-picker>
    <!-- 成交时间 -->
    <u-datetime-picker
      :show="showTime"
      v-model="data.time"
      mode="time"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="showTime = false"
      @confirm="confirmTime"
    ></u-datetime-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 日期选择
        showDate: false,
        // 时间选择
        showTime: false,
        // 交易类别选择
        showType: false,
        columns: [['证券买入', '证券卖出']],
        data: {
          name: '',
          code: '',
          type: '',
          clinchPrice: '',
          // 成交数量
          clinchNum: '',
          // 成交金额
          clinchMoney: '',
          // 手续费
          formalitiesFee: '',
          // 手续费率
          formalitiesRates: '5',
          // 日期
          date: '',
          // 时间
          time: '',
        },
      }
    },
    methods: {
      // 选择交易类别
      confirmType(e) {
        this.data.type = e.value[0]
        this.showType = false
      },
      // 选择日期
      confirmDate(e) {
        this.$nextTick(() => {
          this.data.date = this.getTime(e.value)
        })
        this.showDate = false
      },
      // 选择时间
      confirmTime(e) {
        this.showTime = false
      },
      // 格式化时间戳
      getTime(date) {
        let time = new Date(date)
        let y = time.getFullYear()
        let m = time.getMonth() + 1
        let d = time.getDate()
        let h = time.getHours()
        let mm = time.getMinutes()
        let s = time.getSeconds()
        if (s < 10) {
          s = '0' + s
        }
        if (h < 10) {
          h = '0' + h
        }
        if (mm < 10) {
          mm = '0' + mm
        }
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        return `${y}-${m}-${d}`
      },
      getTime1(date) {
        let time = new Date(date)
        let y = time.getFullYear()
        let m = time.getMonth() + 1
        let d = time.getDate()
        let h = time.getHours()
        let mm = time.getMinutes()
        let s = time.getSeconds()
        if (s < 10) {
          s = '0' + s
        }
        if (h < 10) {
          h = '0' + h
        }
        if (mm < 10) {
          mm = '0' + mm
        }
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        return `${h}:${mm}:${s}`
      },
      // 输入成交价格
      changePrice(e) {
        if (this.data.clinchNum) {
          this.data.clinchMoney = this.data.clinchPrice * this.data.clinchNum
          this.data.clinchMoney = this.data.clinchMoney.toFixed(2)
          if (this.data.formalitiesRates) {
            this.data.formalitiesFee =
              this.data.clinchMoney * this.data.formalitiesRates
            this.data.formalitiesFee = this.data.formalitiesFee.toFixed(2)
          }
        }
      },
      // 输入成交数量
      changeNum(e) {
        if (this.data.clinchPrice) {
          this.data.clinchMoney = this.data.clinchPrice * this.data.clinchNum
          this.data.clinchMoney = this.data.clinchMoney.toFixed(2)
          if (this.data.formalitiesRates) {
            this.data.formalitiesFee =
              this.data.clinchMoney * this.data.formalitiesRates
            this.data.formalitiesFee = this.data.formalitiesFee.toFixed(2)
          }
        }
      },
      // 手续费
      changeRates() {
        if (this.data.clinchMoney) {
          this.data.formalitiesFee =
            this.data.clinchMoney * this.data.formalitiesRates
          this.data.formalitiesFee = this.data.formalitiesFee / 100
          this.data.formalitiesFee = this.data.formalitiesFee.toFixed(2)
          console.log(this.formalitiesFee)
        }
      },
      submit() {
        this.$api
          .post('/transaction/saveOrUpdate', {
            createTime: '',
            id: 0,
            premium: this.data.formalitiesFee,
            premiumRatio: this.data.formalitiesRates,
            securityCode: this.data.code,
            securityName: this.data.name,
            securityType: '',
            transactionAmount: this.data.clinchMoney,
            transactionCategory: this.data.type,
            transactionDate: this.data.date,
            transactionPrice: this.data.clinchPrice,
            transactionTime: this.data.date + ' ' + this.data.time + ':00',
            userId: 0,
            volume: this.data.clinchNum,
          })
          .then(r => {
            if (r) {
              uni.showToast({
                title: '添加成功',
                icon: 'success',
                duration: 1000,
              })
              uni.navigateBack({
                delta: 1,
              })
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .center {
    padding: 40rpx 24rpx;
  }
  .list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    padding-bottom: 32rpx;
    .ipt {
      text-align: right;
    }
    .list_right {
      display: flex;
      align-items: center;
    }
    .right_icon {
      width: 24rpx;
      height: 24rpx;
      margin-left: 10rpx;
    }
  }
  .footer {
    position: fixed;
    bottom: 64rpx;
    width: 702rpx;
    height: 88rpx;
    left: 24rpx;
    .btn {
      border-radius: 44rpx;
      background-color: #ec7c00;
      color: white;
      padding: 0;
      margin: 0;
      text-align: center;
      line-height: 88rpx;
      font-size: 28rpx;
    }
  }
</style>
