<template>
  <super-dialog
    v-bind="$attrs"
    v-if="isShowDialog"
    v-model="isShowDialog"
    width="70%"
    title="工单处理"
    :modal="false"
    top="9vh"
    @closed="closed"
  >
  <div v-loading="formLoading" class="form-content" element-loading-background="rgba(10 ,38 ,61, 0.95)"
       element-loading-text="数据加载中...">
    <el-form ref="addEditForm" :model="addEditForm" :rules="addEditRules" label-position="left" label-suffix="："
             label-width="120px">
      <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex" v-if="type === '2'">
        <el-col :span="16">
          <el-form-item label="处理方式" prop="handlingMethod">
            <el-radio-group v-model="addEditForm.handlingMethod" size="medium">
              <el-radio v-for="(item, index) in getDictionaryByCode('gd-clfs')" :key="index" :label="item.value" :value="item.value">{{ item.name }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex" v-if="type === '2'">
        <el-col :span="16">
          <el-form-item label="计划完成时间" prop="plannedCompletionTime">
            <el-date-picker style="width: 100%;" v-model="addEditForm.plannedCompletionTime" type="date"
                            placeholder="选择日期时间" >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex" v-if="type === '2'">
        <el-col :span="20">
          <el-form-item label="处理步骤" prop="handlingSteps">
            <quill-editor v-model="addEditForm.handlingSteps" ref="myQuillEditor" :options="editorOption"> </quill-editor>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex" v-if="type === '3' || type === '4'">
        <el-col :span="20">
          <el-form-item label="处理人" prop="handlingUserName">
            <el-input placeholder="请输入处理人" v-model="addEditForm.handlingUserName" clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex" v-if="type === '3' || type === '4'">
        <el-col :span="16">
          <el-form-item label="处理时间" prop="benchmarkPrice">
            <el-date-picker style="width: 100%;" v-model="addEditForm.benchmarkPrice" type="datetime"
                            placeholder="选择日期时间" default-time="12:00:00" value-format="yyyy-MM-dd hh:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex" v-if="type === '3' || type === '4'">
        <el-col :span="16">
          <el-form-item label="整体进度" prop="handlingProgress">
<!--            <el-input placeholder="请输入整体进度" type="number" v-model="addEditForm.handlingProgress" clearable>-->
<!--            </el-input>-->
            <el-select v-model="addEditForm.handlingProgress" placeholder="请选择">
              <el-option
                v-for="item in handlingProgressList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex" v-if="type === '2' || type === '3' || type === '4'">
        <el-col :span="20">
          <el-form-item label="处理措施" prop="problemDescription">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="addEditForm.problemDescription">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex" v-if="type === '3'">
        <el-col :span="20">
          <el-form-item label="下一步计划" prop="nextStep">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="addEditForm.nextStep">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex" v-if="type === '3'">
        <el-col :span="20">
          <el-form-item label="当前问题" prop="currentIssues">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="addEditForm.currentIssues">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
        <el-col :span="20">
          <el-form-item label="备注" prop="remarks">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="addEditForm.remarks">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div slot="footer" class="footer" >
    <el-button @click="closed">
      {{ $t('domestic.cancel') }}
    </el-button>
    <el-button :disabled="formLoading" :loading="saveLoading" type="primary" @click="eventConfirm">
      {{ $t('domestic.save') }}
    </el-button>
  </div>
  </super-dialog>
</template>

<script>
import moment from 'moment';
import { getDictionaryByCode } from '@/utils/dictionary'
import SuperDialog from '@/components/SuperDialog/index.vue'
import {updateHandlingStatus} from '@/api/workOrder'
import {mapState} from 'vuex'
export default {
  name: 'workAccepted',
  components: {SuperDialog},
  props: {
    isShow: {
      default: false,
      type: Boolean
    },
    type:{
      default: '',
      type: String
    },
    orderId:{
      default: '',
      type: String
    },
  },
  data() {
    return {
      id:'',
      saveLoading:false,
      formLoading:false,
      addEditForm: {
        handlingMethod:'1',
        plannedCompletionTime:'',
        benchmarkPrice:'',
        handlingProgress:20,
      },
      addEditRules: {
        handlingMethod: [
          {required: true, message: '处理方式不能为空', trigger: 'change'}
        ],
        handlingSteps:[
          {required: true, message: '处理步骤不能为空', trigger: 'blur'}
        ],
        plannedCompletionTime: [
          {required: true, message: '计划时间不能为空', trigger: 'change'}
        ],
        benchmarkPrice: [
          {required: true, message: '处理时间不能为空', trigger: 'change'}
        ],
        problemDescription: [
          {required: true, message: '处理措施不能为空', trigger: 'blur'}
        ],
        handlingProgress: [
          {required: true, message: '整体进度不能为空', trigger: 'blur'}
        ],
        handlingUserName: [
          {required: true, message: '处理人不能为空', trigger: 'blur'}
        ],
      },
      handlingProgressList:[{label:'10%',value:10},{label:'20%',value:20},{label:'30%',value:30},{label:'40%',value:40},{label:'50%',value:50},{label:'60%',value:60},{label:'70%',value:70},{label:'80%',value:80},{label:'90%',value:90},{label:'100%',value:100}],
      editorOption: {
        placeholder: '请输入内容......',
      },
    }
  },
  computed: {
    ...mapState({
      currentUser: state => state.user.currentUserDetail,
    }),
    isShowDialog: {
      get() {
        return this.isShow
      },
      set(val) {
        this.$emit('update:isShow', val)
      }
    },
  },
  created() {
    const now = new Date();
    this.addEditForm.plannedCompletionTime = moment(now).format('YYYY-MM-DD');
    this.addEditForm.benchmarkPrice = moment(now).format('YYYY-MM-DD HH:mm:ss');
    this.addEditForm.handlingUserName = this.currentUser.user.fullname
  },
  mounted() {
    this.addEditForm.handlingProgress = this.type === '4'?100:20
  },
  methods: {
    getDictionaryByCode,
    closed(){
      const { orgData } = this
      Object.assign(this.$data, this.$options.data.call(this), { orgData })
      this.$nextTick(() => {
        this.$refs.addEditForm?.clearValidate()
      })
      this.isShowDialog = false
    },
    // 确定
    eventConfirm(){
      this.$refs.addEditForm.validate(async (valid, object) => {
        if (!valid) {
          this.$message.warning(
            `有${Object.keys(object).length
            }个字段未通过校验，请正确填写表单内容。`
          )
        } else {
          this.saveLoading = true
          this.addEditForm.id = this.orderId
          this.addEditForm.handlingStatus = this.type
          const {state} = await updateHandlingStatus(this.addEditForm)
          if(state){
            this.saveLoading = false
            this.$message.success('提交成功')
            this.isShowDialog = false
            this.$emit('confirm')
          }
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content{
  margin-left: 150px !important;
}
</style>

