<template>
  <a-spin :spinning="confirmLoading">
    <div class="title-top">
      <h3>{{title}}</h3>
      <div class="button">
        <a-button @click="onCancel">返回</a-button>
        <a-button type="danger" @click="onExamine('refuse')" v-if="pageType == '2'">审核驳回</a-button>
        <a-button type="primary" @click="onExamine('auditPass')" v-if="pageType == '2'">审核通过</a-button>
        <a-button type="primary" @click="onRefund" v-if="pageType == '3'">确认退款</a-button>
      </div>
    </div>

    <j-form-container :disabled="true">
      <a-form-model ref="form" :model="model" slot="detail">
        <a-card title="基本信息">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="订单编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="orderNo">
                <a-input v-model="model.orderNo" placeholder="请输入订单编号"></a-input>
              </a-form-model-item>
            </a-col>
            <template v-if="model && model.ownerPhone">
              <a-col :span="12">
                <a-form-model-item label="所属小区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="communityName">
                  <a-input v-model="model.communityName" placeholder="请输入所属小区"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="业主名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ownerName">
                  <a-input v-model="model.ownerName" placeholder="请输入业主名称"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ownerPhone">
                  <a-input v-model="model.ownerPhone" placeholder="请输入用户账号" />
                </a-form-model-item>
              </a-col>
            </template>
            <a-col :span="12">
              <a-form-model-item label="支付方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactName">
                <a-input value="微信支付" placeholder="请输入支付方式"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="订单来源" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="maker">
                <a-input :value="model.paySource === 'wechat' ? '微信' : '小程序'" placeholder="请输入订单来源"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
        
        <a-card title="操作信息">
          <a-row>
            <div>
              <a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns"
                :dataSource="dataSource" :pagination="false" class="j-table-force-nowrap">
                <span slot="payStatus">已付款</span>
              </a-table>
            </div>
          </a-row>
        </a-card>
      </a-form-model>
    </j-form-container>

    <a-modal v-model="remarksVisible" :title="`${remarksModel.auditStatus === 'auditPass' ? '通过' : '驳回'}说明`" @ok="submitHandleOk">
      <a-form-model ref="form" :model="remarksModel">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="{ xs: { span: 24 },sm: { span: 3 } }" :wrapperCol="{ xs: { span: 24 }, sm: { span: 20 } }" prop="refundDes">
              <a-textarea placeholder="请输入备注" v-model="remarksModel.refundDes" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </a-spin>
</template>

<script>
import { refundQueryByIdApi, auditRefundOrderApi, confirmRefundOrderApi } from '@/api/api'
import { httpAction, getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { filterDictTextByStatic, REFUND_STATUS } from '@/assets/static.js'

const columns = [
  {
    title: '操作者',
    dataIndex: 'createBy',
    key: 'createBy',
    align: 'center',
  },
  {
    title: '操作时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
  },
  {
    title: '订单状态',
    dataIndex: 'auditStatus',
    key: 'auditStatus',
    align: 'center',
    // customRender: function (text) {
    //   return filterDictTextByStatic(REFUND_STATUS, text)
    // }
  },
  {
    title: '付款状态',
    dataIndex: 'payStatus',
    key: 'payStatus',
    align: 'center',
    scopedSlots: { customRender: 'payStatus' }
  },
  {
    title: '备注',
    dataIndex: 'refuseDesc',
    key: 'refuseDesc',
    align: 'center',
  }
]

export default {
  name: 'PropertySettledForm',
  inject: ['closeCurrent'],
  mixins: [JeecgListMixin],
  data() {
    return {
      title: '',
      pageType: '',
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      url: {
        add: '/property-central/property/propertySettled/add',
        list: `/property-central/property/auditRecord/getRecordList?dataId=${this.$route.query.id}&auditType=refundAudit`
      },
      columns: columns,

      remarksVisible: false,
      remarksModel: {
        refundDes: '',
        auditStatus: ''
      }
    }
  },
  methods: {
    async getPageDetail() {
      let { result } = await refundQueryByIdApi({ id: this.$route.query.id })
      this.edit(result)
    },
    onCancel() {
      this.closeCurrent()
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.model.registAdress = [record.provinceCode, record.cityCode, record.countyCode]
      this.visible = true
    },
    onExamine(status) {
      this.remarksModel.auditStatus = status
      this.remarksVisible = true
    },
    submitHandleOk() {
      auditRefundOrderApi({
        id: this.$route.query.id,
        ...this.remarksModel
      }).then((res) => {
        this.remarksVisible = false
        this.$message.success(`${this.remarksModel.auditStatus === 'auditPass' ? '审核通过' : '审核驳回'}成功`)
        this.closeCurrent()
      })
    },
    onRefund() {
      let _this = this
      this.$confirm({
        title: "确认退款",
        content: "是否确认退款?",
        onOk: function () {
          confirmRefundOrderApi({id: _this.$route.query.id, status: 'refunded'}).then(res=> {
            _this.$message.success('退款成功');
            _this.closeCurrent();
          })
        }
      });
    }
  },
  mounted() {
    //备份model原始值
    //this.modelDefault = JSON.parse(JSON.stringify(this.model))
    this.pageType = this.$route.query.type
    if (this.$route.query.type == '1') {
      this.title = '详情'
    } else if (this.$route.query.type == '2') {
      this.title = '审核'
    }
    if (this.$route.query.id) {
      this.getPageDetail()
    }
  }
}
</script>
<style lang="less" scoped>
.title-top {
  background: #fff;
  padding: 0 25px;
  line-height: 50px;
  height: 50px;
  margin-bottom: 5px;
  h3 {
    font-weight: bold;
    display: inline-block;
  }
  .button {
    float: right;
    .ant-btn {
      margin-left: 15px;
    }
  }
}
</style>
<style>
.area-select {
  width: 100% !important;
}
</style>