<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>
            <span>元</span>
          </el-form-item>
          <el-form-item v-if="data.payType !== 13" label="退订金额">
            <!-- <span> {{ (form.cancelAmount / 100).toFixed(2) }}</span> -->
            <el-input-number
              v-model="form.cancelAmount"
              :disabled="status === 1 || !marginOrderStatus"
              :precision="2"
              :step="0.01"
              size="small"
              :max="data.payTotal / 100"
              :min="0.00"
            />
            <span>元</span>
          </el-form-item>
          <el-form-item v-if="data.payType !== 13" label="退款理由">
            <el-input v-model="form.applyReason" disabled size="small" type="textarea" :rows="5" maxlength="100" show-word-limit />
          </el-form-item>
          <el-form-item label="审核结果" prop="reason">
            <el-radio-group v-model="status" style="width: 178px">
              <el-radio :label="200"> 通过 </el-radio><br>
              <el-radio :label="210">
                驳回
                <el-input
                  v-model="examineReason"
                  type="text"
                  :rows="2"
                  :maxlength="200"
                  placeholder="通过/驳回理由（必填）"
                  style="margin-left: 20px"
                  size="small"
                />
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @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, queryMarginOrderStatus } from '@/api/order'

export default {
  data() {
    return {
      id: null,
      loading: false,
      dialog: false,
      price: null,
      createTime: null,
      form: {
        applyReason: '',
        cancelAmount: null
      },
      data: {},
      examineReason: '',
      status: 0,
      marginOrderStatus: true // 保证金全款或部分退款
    }
  },
  created() {

  },
  computed: {
    ...mapGetters(['user'])
  },
  methods: {
    updateStatus,
    async save() {
      if (!this.status) {
        return this.$message.error('请选择审核结果')
      }
      // if (this.status === 210 && !this.examineReason) {
      //   return this.$message.error('请输入驳回理由')
      // }
      const params = {}
      params.orderId = this.id
      params.refundStatus = this.status
      // if (this.status === 210) {
      //   params.examineReason = this.examineReason
      // } else {
      //   params.examineReason = ''
      // }
      if (!this.examineReason) {
        return this.$message.error('请输入通过/驳回理由')
      }
      params.examineReason = this.examineReason
      params.cancelAmount = parseFloat((this.form.cancelAmount * 100).toFixed(2))
      const data = await refundOrder(params)
      if (data.code === 0) {
        this.$message.success('操作成功')
        this.resetForm()
        this.dialog = false
      } else {
        this.$message.error(data.message)
      }
      console.log(data)
    },
    async queryMarginOrderStatus() {
      const { code, data } = await queryMarginOrderStatus({ orderId: this.id })
      if (code === 0) {
        this.marginOrderStatus = data
      }
    },
    cancel() {
      this.resetForm()
    },
    resetForm() {
      // console.log('clear')
      this.id = null
      this.price = null
      this.createTime = null
      this.examineReason = ''
      this.status = 0
      this.form = {
        applyReason: '',
        cancelAmount: null
      }
      this.data = {}
      this.marginOrderStatus = true
      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 && this.data.payType === 14) this.queryMarginOrderStatus()
        // 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)
        //   // 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>
