<template>
  <div class="page-content">
    <a-spin :spinning="confirmLoading">
      <div style="padding:24px 30px;font-weight:600;">投诉详情</div>
      <j-form-container :disabled="true">
        <a-form-model ref="form" :model="model" slot="detail">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="投诉主题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="complaintTheme">
                <a-input v-model="model.complaintTheme" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="投诉人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userName">
                <a-input v-model="model.userName" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="联系方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userPhone">
                <a-input v-model="model.userPhone" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <!-- <a-col :span="12">
              <a-form-model-item label="住户地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="repairAddress">
                <a-input v-model="model.repairAddress" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col> -->
            <a-col :span="12">
              <a-form-model-item label="投诉时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
                <a-input v-model="model.createTime" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="complaintImg">
                <j-image-upload bizPath="scott/pic" accept="image/png, image/jpeg"
                  v-model="model.complaintImg"></j-image-upload>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="问题描述" :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }" :wrapperCol="wrapperCol"
                prop="problemDesc">
                <a-textarea v-model="model.problemDesc" placeholder="请输入" style="width:80%" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
      <j-form-container v-if="!formDisabled || model.handleStatus == 'finish'"
        :disabled="model.handleStatus == 'finish'">
        <a-form-model ref="form" :model="form" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="处理状态" :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }" :wrapperCol="wrapperCol"
                prop="handleStatus">
                <a-select v-model="form.handleStatus" placeholder="请选择处理状态" style="width:50%">
                  <a-select-option value="pending" v-if="model.handleStatus !== 'pending'">处理中</a-select-option>
                  <a-select-option value="finish">处理完成</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="处理结果" :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }" :wrapperCol="wrapperCol"
                prop="handleResult">
                <a-textarea v-model="form.handleResult" placeholder="请输入" style="width:80%" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>

      <div style="text-align:center">
        <a-button @click="onReturn">返回</a-button>
        <a-button style="margin-left: 16px" type="primary" v-if="!formDisabled" @click="onSubmit">提交</a-button>
      </div>
    </a-spin>
  </div>
</template>

<script>
import { querycommunityComplaintApi, auditCommunityComplaintApi } from '@/api/api'
export default {
  name: 'PropertyChargruleForm',
  inject: ['closeCurrent'],
  data() {
    return {
      currentStep: 1,
      model: {},
      form: {
        handleStatus: 'pending',
        handleResult: '',
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
      confirmLoading: false,
    }
  },
  computed: {
    formDisabled() {
      return this.$route.query.type === '1'
    },
  },
  created() {
    //备份model原始值
    this.getDetail()
  },
  methods: {
    async getDetail() {
      this.confirmLoading = true
      let { result } = await querycommunityComplaintApi({ id: this.$route.query.id })
      this.model = { ...result }
      if (this.model.handleStatus == 'pending') {
        this.form.handleStatus = 'finish'
      }
      if (this.model.handleStatus == 'finish') {
        this.form.handleStatus = this.model.handleStatus
        this.form.handleResult = this.model.handleResult
      }
      this.confirmLoading = false
    },
    onReturn() {
      // this.$store.dispatch('tags/delView', this.$route.path)
      // this.$router.go(-1)
      this.closeCurrent()
    },
    async onSubmit() {
      let res = await auditCommunityComplaintApi({
        id: this.$route.query.id,
        handleStatus: this.form.handleStatus,
        handleResult: this.form.handleResult,
      })
      this.$message.success(res.message)
      this.closeCurrent()
    },
  },
}
</script>

<style scoped lang="less">
.page-content {
  min-height: 430px;
  background-color: #fff;
  padding: 0 15px 50px 5px;
  .row-box {
    padding: 0 50px;
  }
}
</style>