<template>
  <div class="app-container">
    <el-form :model="form" ref="form" inline v-loading="loading">
      <h3>基础信息</h3>
      <el-form-item label="订单号：" prop="name">{{form.orderNo}}</el-form-item>
      <br>
      <el-form-item label="下单人姓名：" prop="name">{{form.userName}}</el-form-item>
      <el-form-item label="下单人手机号：" prop="name">{{form.userMobile}}</el-form-item>
      <el-form-item label="下单时间：" prop="name">{{ parseTime(form.createTime, '{y}-{m}-{d} {h}:{i}') }}</el-form-item>
      <el-form-item label="订单状态：" prop="name">
        {{dealStatus(form.status)}}
      </el-form-item>
      <h3>服务信息</h3>
      <el-form-item label="下单医院：" prop="name">{{form.orderVo.hospitalVo.name}}</el-form-item>
      <el-form-item label="所在科室：" prop="name">{{form.orderVo.hospitalDepartmentName}}</el-form-item>
      <el-form-item label="医院地址：" prop="name">{{form.orderVo.hospitalVo.address}}</el-form-item>
      <el-form-item label="期望时间：" prop="name">{{parseTime(form.expectedTime, '{y}-{m}-{d} {h}:{i}')||'-'}}</el-form-item>
      <el-form-item label="服务名称：" prop="name">{{form.serviceName}}</el-form-item>
      <el-form-item label="房床号：" prop="name">{{form.roomNumber}}</el-form-item>
      <el-form-item label="下单数量：" prop="name">{{form.orderNum}}{{dealServiceUnitList(form.serviceUnit)}}</el-form-item>
      <el-form-item label="销售价格：" prop="name">{{form.sellingPrice}}</el-form-item>
      <el-form-item label="应付金额：" prop="name">{{form.totalPrice}}</el-form-item>
      <el-form-item label="特殊需求：" prop="name">{{form.remarks||'-'}}</el-form-item>
      <div class="w20">
        <h3>就诊人信息</h3>
        <el-form-item label="就诊人姓名：" prop="name">{{ form.orderVo.patientVo.name}}</el-form-item>
        <el-form-item label="电话：" prop="name">{{form.orderVo.patientVo.mobile}}</el-form-item>
        <el-form-item label="性别：" prop="name">{{dealGender(form.orderVo.patientVo.gender)}}</el-form-item>
        <el-form-item label="年龄：" prop="name">{{form.orderVo.patientVo.age}}</el-form-item>
        <el-form-item label="关系：" prop="name">
          <div v-for="(v,i) in dict.type.patient_relationship" :key="i" v-if="v.value==form.orderVo.patientVo.relationship">{{v.label}}</div>
        </el-form-item>
      </div>
      <div class="w20">
        <h3>护工信息信息</h3>
        <el-form-item label="护工姓名：" prop="name">{{ form.orderVo.orderWorkerChangeRecord.workerName}}</el-form-item>
        <el-form-item label="电话：" prop="name">{{ form.orderVo.orderWorkerChangeRecord.workerPhoneNumber}}</el-form-item>
        <el-form-item label="性别：" prop="name">{{ form.orderVo.orderWorkerChangeRecord.sex==1?'男':form.orderVo.orderWorkerChangeRecord.sex==2?'女':'--'}}</el-form-item>
        <el-form-item label="分单时间：" prop="name">{{parseTime(form.orderVo.orderWorkerChangeRecord.createTime, '{y}-{m}-{d} {h}:{i}')}}</el-form-item>
        <el-form-item label="操作老师：" prop="name">{{ form.orderVo.orderWorkerChangeRecord.operatingTeacherName}}</el-form-item>
        <el-form-item label="开始时间：" prop="name">{{ parseTime(form.orderVo.orderWorkerChangeRecord.workerStartTime,'{y}-{m}-{d} {h}:{i}')||'--'}}</el-form-item>
        <el-form-item label="结束时间：" prop="name">{{ parseTime(form.orderVo.orderWorkerChangeRecord.workerEndTime,'{y}-{m}-{d} {h}:{i}')||'--'}}</el-form-item>
      </div>
      <div>
        <h3>退款信息</h3>
        <el-form-item label="退款原因：" prop="name">{{ form.refundReason}}</el-form-item>
        <el-form-item label="退款数量：" prop="name">{{ form.refundQuantity}}</el-form-item>
        <el-form-item label="退款金额：" prop="name">{{ form.refundAmount}}</el-form-item>
        <el-form-item label="退款方式：" prop="name">{{ form.refundWay}}</el-form-item>
        <el-form-item class="w100" label="退款说明：" prop="name">{{ form.refundDesc}}</el-form-item>
        <el-form-item class="w100" label="申请时间：" prop="name">{{ parseTime(form.createTime, '{y}-{m}-{d} {h}:{i}')}}</el-form-item>
        <el-form-item class="w100" label="退款状态：" prop="name">
          <div v-for="(v,i) in refundStatusList" :key="i" :type="v.tag" v-if="form.refundStatus==v.code">{{v.value}}</div>
        </el-form-item>
        <div v-if="form.refundStatus!=1">
          <el-form-item class="w100" label="实退金额：" prop="name" v-if="form.actualRefundAmount">￥{{ form.actualRefundAmount}}</el-form-item>
          <el-form-item class="w100" label="操作原因：" prop="name">{{ form.operationReason}}</el-form-item>
          <el-form-item class="w100" label="操作时间: " prop="name">{{ parseTime(form.operationTime, '{y}-{m}-{d} {h}:{i}')}}</el-form-item>
          <el-form-item class="w100" label="操作人：" prop="name">{{ form.operatorName}}</el-form-item>
        </div>
      </div>
    </el-form>
    <div class="form-footer">
      <el-button @click="back">返回</el-button>
      <el-button v-if="form.refundStatus==1" type="primary" @click="openDialog(2)">同意退款</el-button>
      <el-button v-if="form.refundStatus==1" type="danger" @click="openDialog(3)">拒绝退款</el-button>
    </div>

    <el-dialog :title="refundForm.refundStatus==2?'退款成功':'退款失败'" :visible.sync="dialogVisible" width="30%" :before-close="close">
      <el-form :model="refundForm" ref="refundForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="实退金额" prop="refundAmount">
          <el-input-number v-model="refundForm.refundAmount" controls-position="right" :min="0.01" :precision="2"></el-input-number>
        </el-form-item>
        <el-form-item label="操作原因" prop="refundReason" v-if="refundForm.refundStatus==3">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="refundForm.refundReason">
          </el-input>
          <div class="hint">注意：如果有超出的订单金额的退款，需要备注说明</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { orderEnum, orderRefundEnum, orderRefundInfo, agreeOrRefuse } from '@/api/hospitalOrder.js'
import { serviceProductEnum } from '@/api/service.js'

export default {
  dicts: ['patient_relationship'],
  data () {
    return {
      form: {
        orderVo: {
          hospitalVo: {},
          patientVo: {},
          orderWorkerChangeRecord: {}
        }
      },
      couponList: [],
      gameRecord: {},
      statusList: [],
      genderList: [
        { label: '0', value: '未知' },
        { label: '1', value: '男' },
        { label: '2', value: '女' }
      ],
      serviceUnitList: [],
      refundStatusList: [],
      rules: {
        refundAmount: [{ required: true, message: '请输入退款金额', trigger: 'blur' }]
      },
      refundForm: {
        refundReason: undefined,
        refundAmount: undefined,
      },
      dialogVisible: false,
      loading: false
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.getDetails();
      // this.getOrderEnum();
      // this.getServiceUnitList();
      this.getOrderRefundEnum()
    },
    // 获取服务单位列表
    getServiceUnitList () {
      serviceProductEnum().then(res => {
        this.serviceUnitList = res.data.serviceUnit
      })
    },
    dealStatus (status) {
      for (let i = 0; i < this.statusList.length; i++) {
        if (this.statusList[i].code == status) {
          return this.statusList[i].value
        }
      }
    },
    dealGender (gender) {
      for (let i = 0; i < this.genderList.length; i++) {
        if (this.genderList[i].label == gender) {
          return this.genderList[i].value
        }
      }
    },
    dealServiceUnitList (val) {
      for (let i = 0; i < this.serviceUnitList.length; i++) {
        if (this.serviceUnitList[i].code == val) {
          return this.serviceUnitList[i].value
        }
      }
    },
    close () {
      this.refundForm = {
        refundReason: undefined,
        refundAmount: undefined,
      };
      this.resetForm("refundForm");
      this.dialogVisible = false;
    },
    openDialog (status) {
      this.refundForm.refundStatus = status;
      this.dialogVisible = true;
    },
    submit () {
      this.$refs.refundForm.validate((valid) => {
        if (valid) {
          agreeOrRefuse(this.refundForm).then(res => {
            this.$message({
              message: '提交成功',
              type: 'success'
            })
            this.close();
          })
        }
      })
    },
    back () {
      this.$router.go(-1)
    },
    getOrderEnum () {
      orderEnum().then(res => {
        this.statusList = res.data.orderStatus;
      })
    },
    getOrderRefundEnum () {
      orderRefundEnum().then(res => {
        this.refundStatusList = res.data.refundStatus;
      })
    },
    getDetails () {
      this.loading = true;
      orderRefundInfo(this.$route.query.id).then(res => {
        this.form = res.data
      }).finally(() => {
        this.loading = false;
      })
    },
  }

}
</script>

<style lang='scss' scoped>
h3 {
  font-weight: 700;
}
.el-form--inline .el-form-item {
  width: 24%;
}
.active {
  color: rgb(64, 158, 255);
  cursor: pointer;
}
.form-footer {
  margin-top: 20px;
  text-align: center;
}
::v-deep .el-form-item__content {
  width: calc(100% - 120px);
}
.w20 {
  .el-form-item {
    width: calc(20% - 10px);
  }
}
.el-rate {
  height: 36px;
  line-height: 46px;
}
.w100 {
  width: 100% !important;
}
.hint {
  font-size: 12px;
  color: red;
}
</style>