<template>
  <van-popup
    v-model="dialogVisible"
    class="ibps-fullscreen-popup"
    @opened="getFormData"
  >
    <div v-if="!dialogLoading" class="ibps-fixed-top">
      <van-nav-bar
        :title="title"
        fixed
        @click-left="closeDialog"
      >
        <template #left>
          <van-icon name="cross" class="ibps-nav-bar__close-icon" />
        </template>
      </van-nav-bar>
      <van-form ref="form" label-width="100">
        <van-cell-group>
          <van-field
            v-model="form.taskSubject"
            label="事项标题"
            disabled
          />
          <van-field
            v-model="form.taskName"
            label="任务名称"
            disabled
          />
          <van-field
            v-model="typeName"
            label="更改类型"
            disabled
          />
          <van-field
            v-model="statusName"
            label="状态"
            disabled
          />
          <van-field
            v-model="form.ownerName"
            label="委托人"
            disabled
          />
          <van-field
            label="执行人"
            disabled
          />
          <van-field
            v-model="form.comment"
            label="更改描述"
            type="textarea"
          />
          <ibps-user-selector
            v-model="selector"
            label="任务变更候选人"
            type="user"
            store="array"
            multiple
            clearable
            required
            :rules="[{ required: true, message: '必填' }]"
          />
        </van-cell-group>
      </van-form>

      <ibps-toolbar
        v-if="$utils.isNotEmpty(toolbars)"
        :actions="toolbars"
      />
    </div>
  </van-popup>
</template>

<script>
import bpmnStatus from '@/mixins/bpmnStatus'
import { save, edit } from '@/api/platform/bpmn/bpmTaskChange'

import IbpsUserSelector from '@/business/platform/org/selector'
import IbpsToolbar from '@/components/ibps-toolbar'

export default {
  components: {
    IbpsUserSelector,
    IbpsToolbar
  },
  mixins: [bpmnStatus],
  props: {
    visible: Boolean,
    taskId: String,
    title: {
      type: String,
      default: '转办'
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      dialogLoading: true,
      popup: false,
      form: {
        taskSubject: '',
        taskName: '',
        changeType: '',
        status: '',
        ownerName: '',
        comment: ''
      },
      selector: []
    }
  },
  computed: {
    statusName() {
      if (this.form.status === 'running') {
        return '运行中'
      } else if (this.form.status === 'finish') {
        return '完成'
      } else if (this.form.status === 'cancel') {
        return '取消'
      }
      return ''
    },
    typeName() {
      if (this.form.changeType === 'shift') {
        return '转办'
      } else if (this.form.changeType === 'assignee') {
        return '代理'
      }
      return ''
    },
    toolbars() {
      return [{
        'name': this.title,
        'type': 'primary',
        'callback': this.handleSave
      }]
    }

  },
  watch: {
    visible: {
      handler: function(val, oldVal) {
        this.dialogVisible = this.visible
      },
      immediate: true
    }
  },
  methods: {
    closeDialog() {
      this.$emit('close', false)
    },
    handleSave() {
      this.$refs.form.validate().then(() => {
        const poList = []
        for (var i = 0; i < this.selector.length; i++) {
          poList.push({ 'id': '', 'taskChangeId': '', 'type': 'employee', 'executor': this.selector[i].id })
        }

        const ownerIndex = poList.findIndex(item => item.executor === this.form.ownerId)
        if (ownerIndex > -1) {
          this.$notify({
            type: 'warning',
            message: '任务变更候选人不能包含委托人，请检查设置！'
          })
          return
        }
        this.form.bpmTaskChangeAssignPoList = poList
        this.form.completeTime = ''
        save(this.form).then(response => {
          this.$store.dispatch('ibps/app/setDataChange', false)
          this.$notify({
            type: 'success',
            message: this.title + '成功！'
          })
          this.$emit('callback', true)
        }).catch(error => {
          console.error(error.cause)
        })
      }).catch(() => {
        this.$notify({
          type: 'warning',
          message: '任务变更候选人数据不能为空，请选择！'
        })
      })
    },
    getFormData() {
      this.dialogLoading = true
      edit({ 'taskId': this.taskId }).then(response => {
        this.dialogLoading = false
        const data = response.data
        this.form = data
      }).catch(error => {
        this.dialogLoading = false
        console.error(error.cause)
      })
    }
  }
}
</script>

<style>
</style>
