<template>
  <el-card class="panel-card">
    <div slot="header" class="clearfix">
      <span>流程属性</span>
    </div>

    <el-form label-width="70px">
      <el-form-item label="流程名称">
        <el-input v-model="flowName"></el-input>
      </el-form-item>
      <el-form-item label="流程类型">
        <el-select v-model="flowType" placeholder="请选择流程类型">
          <el-option v-for="item in workflowTypes" :key="item.ID" :label="item.name" :value="item.ID">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="流程选项" class="checkbox-group">
        <el-checkbox v-model="notNeedApply">不需申请直接处理</el-checkbox><br/>
        <el-checkbox v-model="notifyNextStep">通知下一步处理人</el-checkbox><br/>
        <el-checkbox v-model="allowRevoke">允许撤销</el-checkbox><br/>
        <el-checkbox v-model="allowRebut">允许驳回</el-checkbox><br/>
        <el-checkbox v-model="allowReview">允许转审</el-checkbox>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="memo"></el-input>
      </el-form-item>
    </el-form>

  </el-card>
</template>

<script>

export default {
  data () {
    return {
      workflowTypes: []
    }
  },
  computed: {
    flowName: {
      get () {
        return this.$store.state.workFlow.name
      },
      set (value) {
        this.$store.dispatch('updateBaseField', {
          fieldName: 'name',
          value
        })
      }
    },
    flowType: {
      get () {
        return this.$store.state.workFlow.type
      },
      set (value) {
        this.$store.dispatch('updateBaseField', {
          fieldName: 'type',
          value
        })
      }
    },
    notNeedApply: {
      get () {
        return this.$store.state.workFlow.notNeedApply
      },
      set (value) {
        this.$store.dispatch('updateBaseField', {
          fieldName: 'notNeedApply',
          value
        })
      }
    },
    notifyNextStep: {
      get () {
        return this.$store.state.workFlow.notifyNextStep
      },
      set (value) {
        this.$store.dispatch('updateBaseField', {
          fieldName: 'notifyNextStep',
          value
        })
      }
    },
    allowRevoke: {
      get () {
        return this.$store.state.workFlow.allowRevoke
      },
      set (value) {
        this.$store.dispatch('updateBaseField', {
          fieldName: 'allowRevoke',
          value
        })
      }
    },
    allowRebut: {
      get () {
        return this.$store.state.workFlow.allowRebut
      },
      set (value) {
        this.$store.dispatch('updateBaseField', {
          fieldName: 'allowRebut',
          value
        })
      }
    },
    allowReview: {
      get () {
        return this.$store.state.workFlow.allowReview
      },
      set (value) {
        this.$store.dispatch('updateBaseField', {
          fieldName: 'allowReview',
          value
        })
      }
    },
    memo: {
      get () {
        return this.$store.state.workFlow.memo
      },
      set (value) {
        this.$store.dispatch('updateBaseField', {
          fieldName: 'memo',
          value
        })
      }
    }
  },
  methods: {},
  async created () {
    let res = await axios.get('/ui/workflowtypes')
    this.workflowTypes = res.data.data
  }
}
</script>

<style>
.checkbox-group .el-form-item__content label{
  padding:0px;
}
</style>
