<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.maintenanceName">
              <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="repairStatusName">
                  <a-input v-model="model.repairStatusName" 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'
import { REPAIR_STATUS, filterDictTextByStatic } from '@/assets/static.js'
const initiatewaitAuditList = [
  { title: '提交维修信息', time: '' },
  { title: '报单待审核', time: '' },
  { title: '待派单', time: '' },
  { title: '维修中', time: '' },
  { title: '提单待审核', time: '' },
  { title: '完成', time: '' },
]
export default {
  name: 'PropertyChargruleForm',
  inject: ['closeCurrent'],
  data() {
    return {
      repairStatus: REPAIR_STATUS,
      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
      this.model.repairStatusName = filterDictTextByStatic(REPAIR_STATUS, this.model.repairStatus)
      if (result.repairStatus === 'initiateWaitAudit') {
        initiatewaitAuditList[0].time = '提交成功' + result.createTime
        this.auditList = [...initiatewaitAuditList]
      }else if (result.repairStatus === 'waitDispatch') {
        initiatewaitAuditList[0].time = '提交成功' + result.createTime
        initiatewaitAuditList[1].time = '审核通过' + result.initiateAuditTime
        this.auditList = [...initiatewaitAuditList]
        this.currentStep = 2
      }else 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
      }else if (result.repairStatus === 'inRepair') {
        initiatewaitAuditList[0].time = '提交成功' + result.createTime
        initiatewaitAuditList[1].time = '审核通过' + result.initiateAuditTime
        initiatewaitAuditList[2].time = '派单成功待接收' + result.updateTime
        this.auditList = [...initiatewaitAuditList]
        this.currentStep = 3
      }else if (result.repairStatus === 'finishWaitAudit' || result.repairStatus === 'finishRefuse' || result.repairStatus === 'finishAuditPass') {
        initiatewaitAuditList[0].time = '提交成功' + result.createTime
        initiatewaitAuditList[1].time = '审核通过' + result.initiateAuditTime
        initiatewaitAuditList[2].time = '派单成功待接收' + result.updateTime
        this.auditList = [...initiatewaitAuditList]
        this.currentStep = 4
      }else if (result.repairStatus === 'finish') {
        initiatewaitAuditList[0].time = '提交成功' + result.createTime
        initiatewaitAuditList[1].time = '审核通过' + result.initiateAuditTime
        initiatewaitAuditList[2].time = '派单成功待接收' + result.updateTime
        this.auditList = [...initiatewaitAuditList]
        this.currentStep = 5
      }else{
        initiatewaitAuditList[0].time = '提交成功' + result.createTime
        this.auditList = [...initiatewaitAuditList]
        this.currentStep = 0  
      }
    },
    onReturn() {
      this.$store.dispatch('tags/delView', this.$route.path)
      this.$router.go(-1)
    },
    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.onReturn()
    },
  },
}
</script>

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