<template>
  <div class="task-change-detail">
    <van-nav-bar
      :title="generateTitle()"
      :left-text="$t('common.button.back')"
      left-arrow
      fixed
      @click-left="onClickLeft"
    />
    <van-cell-group>
      <van-field v-model="taskChange.taskSubject" label="事项标题" disabled />
      <van-field v-model="taskChange.taskName" label="任务名称" disabled />
      <van-field v-model="changeType" label="更改类型" disabled />
      <van-field v-model="status" label="状态" disabled />
      <van-field v-model="taskChange.ownerName" label="委托人" disabled />
      <van-field v-model="taskChange.executorName" label="执行人" disabled />
      <van-field v-model="taskChange.createTime" label="创建时间" disabled />
      <van-field v-model="taskChange.completeTime" label="完成时间" disabled />
      <van-field
        v-model="taskChange.comment"
        label="变更描述"
        rows="2"
        autosize
        disabled
      />
    </van-cell-group>

    <van-cell-group class="ibps-cell-wrapper">
      <div class="van-block__title ">
        任务变更候选人
      </div>
      <van-cell value="执行人" title="候选人类型" />
      <div v-for="item in taskChange.bpmTaskChangeAssignPoList" :key="item.id">
        <van-cell :title="item.type|userType" :value="item.executorName" />
      </div>
    </van-cell-group>

    <div class="ibps-fixed-bottom" />
  </div>
</template>

<script>
import { get } from '@/api/platform/bpmn/bpmTaskChange'
import navbar from '@/mixins/navbar'
import bpmnStatus from '@/mixins/bpmnStatus'

export default {
  filters: {
    userType(val) {
      if (val === 'user' || val === 'employee') {
        return '用户'
      } else if (val === 'org') {
        return '组织'
      } else if (val === 'pos') {
        return '岗位'
      } else if (val === 'role') {
        return '角色'
      } else {
        return ''
      }
    }
  },
  mixins: [navbar, bpmnStatus],
  data() {
    return {
      taskChange: {
        taskSubject: '',
        taskName: '',
        changeType: '',
        status: '',
        ownerName: '',
        createTime: '',
        completeTime: '',
        comment: '',
        executorName: ''
      }
    }
  },
  computed: {
    changeType() {
      if (this.taskChange.changeType === 'assignee') {
        return '代理'
      } else if (this.taskChange.changeType === 'shift') {
        return '转办'
      } else {
        return ''
      }
    },
    status() {
      if (this.taskChange.status === 'running') {
        return '运行中'
      } else if (this.taskChange.status === 'finish') {
        return '完成'
      } else {
        return ''
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const id = this.$route.params.id

      get({ 'id': id }).then(response => {
        this.taskChange = response.data
      }).catch((e) => {
        console.log(e)
      })
    },
    onClickLeft() {
      this.$router.push({
        name: 'taskChange'
      })
    },
    type(type) {

    }
  }

}
</script>

