<template>
  <div class="app-container">
    <el-form ref="processForm" :model="processForm" label-width="auto">
      <el-row>
        <el-form-item label="下一步处理方式">
          <el-radio-group v-model="processForm.changeState" @change="selectNextOperation">
            <el-radio v-for="node in nextNodeList" :key="'_node'+node.id" :label="node.nextState">{{ node.nextOperation }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row >
        <el-col v-if="showDeptSelect" :span="6">
          <el-form-item label="处理部门">
            <el-select v-model="processForm.dispatchDeptId" :loading="deptSelectLoading" placeholder="请选择处理部门" @change="selectDept">
              <el-option v-for="item in disposalDeptList" :key="item.id" :label="item.simplename" :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="showUserSelect" :span="6">
          <el-form-item label="处理人">
            <el-select v-model="processForm.taskUserId" :loading="userSelectLoading" placeholder="请选择处理人">
              <el-option v-for="item in normalUserList" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="反馈结果">
          <el-input v-model="processForm.remarks" type="textarea" maxlength="50" show-word-limit/>
        </el-form-item>
      </el-row>
      <el-row style="text-align: center;">
        <el-button class="submitBtn" type="primary" @click="onSubmit">提交</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import DeptSelect from '@/components/DeptSelect'

import { getDisposalDeptList, getUserList } from '@/api/callCase'
import { getNextNodeList, completeCaseTask } from '@/api/process'
export default {
  name: 'CaseProcess',
  components: { DeptSelect },
  props: {
    bizId: {
      type: String,
      default: ''
    },
    processId: {
      type: String,
      default: ''
    },
    caseState: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      processForm: { // 流程处理表单
        bizId: '', // 事件id（主键id）
        processId: '', // 流程ID
        currState: '', // 当前处理状态
        changeState: '', // 待变更状态
        remarks: '', // 备注
        dispatchDeptId: '', // 指派任务给某个组织机构
        taskUserId: '' // 任务指派人员
      },
      nextNodeList: [], // 流程节点列表
      disposalDeptList: [], // 处置部门列表
      normalUserList: [], // 处置人员列表
      showDeptSelect: false, // 是否显示处置部门选择框
      showUserSelect: false, // 是否显示处理人选择框
      deptSelectLoading: false, // 处置部门选择框加载动画
      userSelectLoading: false, // 处理人选择框加载动画
      userQuery: {
        deptid: '', // 部门id （默认为当前用户部门）
        hasMine: '0', // 是否包含本人，1包含, 0不包含
        roleTips: '' // 角色标识，这里默认noraml
      }
      // TODO loading: 整个页面加载， 人员下拉框加载
    }
  },
  mounted() {
    this.processForm.bizId = this.bizId
    this.processForm.processId = this.processId
    this.processForm.currState = this.caseState
    this.fetchNextNodeList()
    this.fetchDisposalDeptList()
  },
  methods: {
    fetchNextNodeList() {
      getNextNodeList(this.processForm.currState).then(response => {
        this.nextNodeList = response.data
      })
    },
    fetchDisposalDeptList() {
      this.deptSelectLoading = true
      getDisposalDeptList().then(response => {
        this.disposalDeptList = response.data
        this.deptSelectLoading = false
      })
    },
    fetchNormalUserList() {
      this.userSelectLoading = true
      getUserList(this.userQuery).then(response => {
        this.normalUserList = response.data
        this.userSelectLoading = false
      })
    },
    selectDept(val) {
      this.normalUserList = []
      this.processForm.taskUserId = ''
      if (val) {
        this.userQuery.deptid = val
        this.fetchNormalUserList()
      }
    },
    /**
     * 选择处理方式之后：
     * 如果下一步是交办，选择人员和部门（单选）
     * 否则，隐藏人员和部门，同时清除processForm中的人员信息
     * TODO： 会签的特殊处理
     */
    selectNextOperation(changeState) {
      if (changeState === 2) {
        this.showDeptSelect = true
        this.showUserSelect = true
      } else {
        this.showDeptSelect = false
        this.showUserSelect = false
        this.processForm.dispatchDeptId = ''
        this.processForm.taskUserId = ''
      }
    },
    // 提交
    onSubmit() {
      console.log('submit')
      this.$confirm('确定提交案件处理吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击“确定”后的操作
        const isBuild = this.validProcessForm()
        if (!isBuild) {
          return
        }
        this.$emit('loading')
        completeCaseTask(this.processForm).then(response => {
          console.log(response)
          if (response.code === 200) {
            this.$emit('submitSuccess')
          } else {
            this.$emit('submitError')
          }
        }).catch((res) => {
          this.$emit('submitError')
        })
      }).catch(() => {
        // 点击“取消”后的操作
      })
    },
    validProcessForm() {
      if (!this.processForm.changeState) {
        this.$message.error('处理方式不能为空')
        return false
      }
      if (!this.processForm.changeState === 2) {
        if (!this.processForm.dispatchDeptId) {
          this.$message.error('处理部门不能为空')
          return false
        }
        if (!this.processForm.taskUserId) {
          this.$message.error('处理人不能为空')
          return false
        }
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.process-select {
  width: 200px;
}
</style>