<template>
  <div style="display: inline-block">
    <el-dialog
      :visible.sync="dialog"
      :close-on-click-modal="false"
      :title="data.payType === 13 ? '直接解约' : '直接退款'"
      append-to-body
      width="650px"
      @close="cancel"
    >
      <div class="portfolio-verify">
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          class="portfolio-form"
        >
          <el-form-item v-if="data.payType !== 13" label="订单金额">
            <span> {{ (data.payTotal / 100).toFixed(2) + '元' }}</span>
          </el-form-item>
          <el-form-item v-if="data.payType !== 13" label="退订金额">
            <!-- <el-input
              v-model="form.cancelAmount"
              size="small"
              maxlength="20"
              show-word-limit
            /> -->
            <el-input-number
              v-model="form.cancelAmount"
              :precision="2"
              :step="0.01"
              size="small"
              :max="data.payTotal / 100"
            />
            <span>元</span>
          </el-form-item>
          <el-form-item :label="data.payType === 13 ? '解约理由' : '退款理由'">
            <el-input
              v-model="form.applyReason"
              size="small"
              type="textarea"
              :rows="5"
              maxlength="100"
              show-word-limit
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              :loading="loading"
              @click="save()"
            >提交</el-button>
            <el-button
              size="small"
              @click="dialog = false"
            >取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updateStatus } from '@/utils/portfolio'
import { mapGetters } from 'vuex'
import { refundOrder } from '@/api/order'

export default {
  data() {
    return {
      id: null,
      loading: false,
      dialog: false,
      price: null,
      createTime: null,
      form: {
        applyReason: '',
        cancelAmount: null
      },
      data: {},
      status: 0
    }
  },
  created() {

  },
  computed: {
    ...mapGetters(['user'])
  },
  methods: {
    updateStatus,
    async save() {
      if (!this.form.applyReason.trim()) {
        return this.$message.error(`请输入${this.data.payType === 13 ? '解约' : '退款'}理由`)
      }
      if (this.data.payType === 13) {
        const params = {}
        params.orderId = this.id
        params.applyReason = this.form.applyReason
        params.cancelAmount = 0
        params.refundStatus = 200
        const data = await refundOrder(params)
        if (data.code === 0) {
          this.$message.success('申请成功')
          this.dialog = false
        } else {
          this.$message.error(data.message)
        }
      } else {
        this.$confirm('提交退款后,退款金额将会退回到客户账户,是否要进行退款操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          this.loading = true
          const params = {}
          params.orderId = this.id
          params.cancelAmount = parseFloat((this.form.cancelAmount * 100).toFixed(2))
          params.applyReason = this.form.applyReason
          params.refundStatus = 200
          const data = await refundOrder(params)
          if (data.code === 0) {
            this.$message.success('申请成功')
            this.dialog = false
          } else {
            this.$message.error(data.message)
          }
          this.loading = false
        }).catch((e) => {
          console.log(e)
          this.loading = false
        })
      }
    },
    cancel() {
      this.resetForm()
    },
    resetForm() {
      // console.log('clear')
      this.id = null
      this.price = null
      this.createTime = null
      this.status = 0
      this.form = {
        applyReason: '',
        cancelAmount: null
      }
      this.data = {}
      this.dialog = false
      this.$parent.getOrderList()
    },
    getPeriod(period) {
      // switch (period) {
      //   case 0:
      //     return '免费永久,单笔提佣'
      //   case 7:
      //     return '周'
      //   case 14:
      //     return '月'
      //   case 16:
      //     return '季度'
      //   case 19:
      //     return '半年'
      //   case 20:
      //     return '年'
      //   case 99:
      //     return '收费永久,单篇收费'
      //   default:
      //     break
      // }
      switch (period) {
        // case 0:
        //   return '免费永久,单笔提佣'
        case 1:
          return '周'
        case 2:
          return '月'
        case 3:
          return '季度'
        case 4:
          return '半年'
        case 5:
          return '年'
        case 0:
          return '收费永久,单篇收费'
        default:
          break
      }
    }
  },
  watch: {
    dialog: {
      handler(newName) {
        if (newName) {
          // const timeNow = new Date().getTime()
          // const times = new Date(this.createTime).getTime()
          // if (timeNow - times <= 604800000) {
          //   this.status = 1
          //   this.form.cancelAmount = this.data.payTotal
          // }
          // console.log(this.status)
          this.form.cancelAmount = this.data.payTotal
          // console.log(times)
        }
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="scss">
.portfolio-verify {
  margin: 15px;
  padding: 0px;
  width: calc(100% - 100px);
  height: 100%;
  .portfolio-form {
    height: 100%;
    width: 100%;
  }
}
</style>
