<template>
  <div class="page-content">
    <a-spin :spinning="confirmLoading">
      <div style="padding:24px 30px;font-weight:600;">报修流程</div>
      <div class="row-box">
        <a-steps :current="currentStep">
          <a-step v-for="(item, index) in auditList" :key="index" :title="item.title" :description="item.time" />
        </a-steps>
      </div>
      <a-divider />
      <div style="padding:0 30px 24px;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="repairTitle">
                <a-input v-model="model.repairTitle" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="报修单号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="id">
                <a-input v-model="model.id" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="报修物品" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="repairArticle">
                <a-input v-model="model.repairArticle" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="预约上门时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reservationTime">
                <a-input v-model="model.reservationTime" 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="repairAddress">
                <a-input v-model="model.repairAddress" placeholder="请输入"></a-input>
              </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="repairDesc">
                <a-textarea v-model="model.repairDesc" placeholder="请输入" style="width:80%" />
              </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="repairPhotoList">
                <j-image-upload :isMultiple="true" text="点击上传" bizPath="scott/pic" v-model="model.repairPhotoList"></j-image-upload>
              </a-form-model-item>
            </a-col>

            <template v-if="model.repairStatus === 'finishwaitAudit' || model.repairStatus === 'finishAuditPass'">
              <a-col :span="12">
                <a-form-model-item label="维修员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="maintenanceName">
                  <a-input v-model="model.maintenanceName" placeholder="请输入"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="工单状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="repairStatus">
                  <a-input v-model="model.repairStatus" placeholder="请输入"></a-input>
                </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="maintenancePhoto">
                  <j-image-upload :isMultiple="true" text="点击上传" bizPath="scott/pic" v-model="model.maintenancePhoto"></j-image-upload>
                </a-form-model-item>
              </a-col>
            </template>
          </a-row>
        </a-form-model>
      </j-form-container>
      <j-form-container v-if="!formDisabled">
        <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="repairStatus">
                <a-select v-model="form.repairStatus" placeholder="请选择与业主关系" style="width:50%">
                  <a-select-option value="waitDispatch">审核通过</a-select-option>
                  <a-select-option value="initiateRefuse">审核驳回</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24" v-if="form.repairStatus === 'initiateRefuse'">
              <a-form-model-item label="驳回理由" :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }" :wrapperCol="wrapperCol" prop="auditOpinion">
                <a-textarea v-model="form.auditOpinion" 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 { auditCommunityRepairApi, queryCommunityRepairApi} from '@/api/api'
  const initiatewaitAuditList = [
    {title: '提交维修信息', time: ''},
    {title: '报单待审核', time: ''},
    {title: '待派单', time: ''},
    {title: '维修中', time: ''},
    {title: '提单待审核', time: ''},
    {title: '完成', time: ''}
  ]
  export default {
    name: 'PropertyChargruleForm',
    inject:['closeCurrent'],
    data () {
      return {
        auditList: [],
        currentStep: 1,
        model:{},
        form: {
          repairStatus: 'waitDispatch',
          auditOpinion: ''
        },
        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 queryCommunityRepairApi({id: this.$route.query.id})
        result.repairPhotoList = result.repairPhoto.split(',')
        this.model = {...result}
        this.confirmLoading = false
        if(result.repairStatus === 'initiateWaitAudit') {
          initiatewaitAuditList[0].time = '提交成功' + result.createTime
          this.auditList = [...initiatewaitAuditList]
        }
        if(result.repairStatus === 'waitDispatch') {
          initiatewaitAuditList[0].time = '提交成功' + result.createTime
          initiatewaitAuditList[1].time = '审核通过' + result.initiateAuditTime
          this.auditList = [...initiatewaitAuditList]
          this.currentStep = 2
        }
        if(result.repairStatus === 'waitReceive') {
          initiatewaitAuditList[0].time = '提交成功' + result.createTime
          initiatewaitAuditList[1].time = '审核通过' + result.initiateAuditTime
          initiatewaitAuditList[2].time = '派单成功待接收' + result.updateTime
          this.auditList = [...initiatewaitAuditList]
          this.currentStep = 2
        }
      },
      onReturn() {
        this.closeCurrent()
      },
      async onSubmit() {
        let res = await auditCommunityRepairApi({
          id: this.$route.query.id,
          repairStatus: this.form.repairStatus,
          auditOpinion: this.form.repairStatus === 'waitDispatch' ? '' : this.form.repairStatus
        })
        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>