<template>
  <div>
    <basic-container>
      <avue-form :option="option" v-model="form" @submit="handleSubmit"/>
    </basic-container>
    <basic-container>
      <flow-design :is-display="true" :process-definition-id="processDefinitionId"></flow-design>
    </basic-container>
  </div>
</template>

<script>
  import {leaveProcess} from "@/api/work/process";

  export default {
    data() {
      return {
        processDefinitionId: '',
        form: {},
        option: {
          group: [
            {
              icon: 'el-icon-info',
              label: '市局机关公务员请休假（双休日及节假日离沪）申请表',
              prop: 'group1',
              column: [
                {
                  label: '申请人',
                  prop: 'shenqingren',
                  type: 'input',
                  value:'张三',
                  readonly:true,
                  span: 12,
                  rules: [
                    {
                      required: true,
                      message: '请输入姓名',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  label: '部门职务',
                  value:'信息技术处、技术工程师',
                  readonly:true,
                  prop: 'bumenzhiwu',
                  type: 'input',
                  span: 12,
                  rules: [
                    {
                      required: true,
                      message: '请输入部门和职务信息',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  type: 'dynamic',
                  span: 24,
                  display: true,
                  children: {
                    align: 'left',
                    headerAlign: 'center',
                    index: false,
                    addBtn: true,
                    delBtn: true,
                    column: [{
                      type: 'select',
                      label: '请休假类型',
                      span: 24,
                      display: true,

                      dicUrl: "/api/galaxy-system/dict/dictionary?code=qingxiujialeixing",
                      props: {
                        label: "dictValue",
                        value: "dictKey"
                      },


                      prop: 'qingxiujialeixing',
                      cascader: [],
                      required: true,
                      rules: [{
                        required: true,
                        message: '请休假类型必须填写'
                      }]
                    }, {
                      type: 'date',
                      label: '开始日期',
                      span: 24,
                      display: true,
                      format: 'yyyy-MM-dd',
                      valueFormat: 'yyyy-MM-dd',
                      prop: 'kaishiriqi',
                      required: true,
                      rules: [{
                        required: true,
                        message: '开始日期必须填写'
                      }]
                    }, {
                      type: 'date',
                      label: '结束日期',
                      span: 24,
                      display: true,
                      format: 'yyyy-MM-dd',
                      valueFormat: 'yyyy-MM-dd',
                      prop: 'jieshuriqi',
                      required: true,
                      rules: [{
                        required: true,
                        message: '结束日期必须填写'
                      }]
                    }, {
                      type: 'checkbox',
                      label: '是否离沪',
                      dicData: [{
                        label: '是否离沪',
                        value: '0'
                      }],
                      span: 24,
                      display: true,
                      props: {
                        label: 'label',
                        value: 'value'
                      },
                      prop: 'shifoulihu',
                      title: '选择字段',
                      list: [{
                        type: 'radio',
                        label: '单选框组',
                        icon: 'icon-radio',
                        dicData: [{
                          label: '选项一',
                          value: '0'
                        }, {
                          label: '选项二',
                          value: '1'
                        }, {
                          label: '选项三',
                          value: '2'
                        }],
                        span: 24,
                        display: true,
                        dicOption: 'static',
                        props: {
                          label: 'label',
                          value: 'value'
                        }
                      }, {
                        type: 'checkbox',
                        label: '多选框组',
                        icon: 'icon-checkbox',
                        dicData: [{
                          label: '选项一',
                          value: '0'
                        }, {
                          label: '选项二',
                          value: '1'
                        }, {
                          label: '选项三',
                          value: '2'
                        }],
                        span: 24,
                        display: true,
                        dicOption: 'static',
                        props: {
                          label: 'label',
                          value: 'value'
                        }
                      }, {
                        type: 'select',
                        label: '下拉选择器',
                        icon: 'icon-select',
                        dicData: [{
                          label: '选项一',
                          value: '0'
                        }, {
                          label: '选项二',
                          value: '1'
                        }, {
                          label: '选项三',
                          value: '2'
                        }],
                        cascaderItem: [],
                        span: 24,
                        display: true,
                        dicOption: 'static',
                        props: {
                          label: 'label',
                          value: 'value',
                          desc: 'desc'
                        }
                      }, {
                        type: 'cascader',
                        label: '级联选择器',
                        icon: 'icon-link',
                        span: 24,
                        display: true,
                        dicData: [{
                          label: '选项一',
                          value: 0,
                          children: [{
                            label: '选项1-1',
                            value: 11
                          }, {
                            label: '选项1-2',
                            value: 12
                          }]
                        }, {
                          label: '选项二',
                          value: '1'
                        }, {
                          label: '选项三',
                          value: '2'
                        }],
                        cascaderIndex: 1,
                        cascaderItem: [],
                        showAllLevels: true,
                        dicOption: 'static',
                        separator: '/',
                        props: {
                          label: 'label',
                          value: 'value',
                          desc: 'desc'
                        }
                      }, {
                        type: 'tree',
                        label: '树形选择器',
                        icon: 'icon-tree',
                        span: 24,
                        display: true,
                        dicOption: 'static',
                        dicData: [{
                          label: '选项一',
                          value: 0,
                          children: [{
                            label: '选项1-1',
                            value: '11'
                          }, {
                            label: '选项1-2',
                            value: '12'
                          }]
                        }, {
                          label: '选项二',
                          value: '1'
                        }, {
                          label: '选项三',
                          value: '2'
                        }],
                        parent: true,
                        cascaderItem: [],
                        props: {
                          label: 'label',
                          value: 'value',
                          desc: 'desc'
                        }
                      }, {
                        type: 'table',
                        label: '表格选择器',
                        icon: 'icon-table',
                        display: true,
                        span: 24,
                        children: {
                          border: true,
                          searchMenuSpan: 6,
                          searchIcon: true,
                          column: [],
                          props: {
                            url: '',
                            method: 'get',
                            rowKey: 'id',
                            needPage: true,
                            currentPageKey: 'current',
                            pageSizeKey: 'size',
                            totalKey: 'total',
                            recordsKey: 'records',
                            resKey: 'data.data',
                            auto: true
                          }
                        },
                        formatter: function(e) {
                          return e.name
                        },
                        props: {
                          label: 'name',
                          value: 'id'
                        }
                      }],
                      width: 100
                    }, {
                      type: 'input',
                      label: '目的地（离沪填写）',
                      span: 24,
                      display: true,
                      prop: 'mudidi'
                    }, {
                      type: 'input',
                      label: '备注',
                      span: 24,
                      display: true,
                      prop: 'beizhu'
                    }]
                  },
                  prop: 'shenqingshixiangbiaodan'
                },

                {
                  label: '合计天数',
                  prop: 'hejitianshu',
                  type: 'input',
                  value:'15天',
                  readonly:true,
                  span: 8,
                },
                {
                  label: '其中在沪',
                  prop: 'qizhongzaihu',
                  type: 'input',
                  value:'10天',
                  readonly:true,
                  span: 8,
                },
                {
                  label: '离沪',
                  prop: 'qizhonglihu',
                  type: 'input',
                  value:'5天',
                  readonly:true,
                  span: 8,
                },

                {
                  label: '审批人员',
                  prop: 'taskUser',
                  type: 'select',
                  dicUrl: `/api/galaxy-user/user-list`,
                  props: {
                    label: "account",
                    value: "id"
                  },
                  span: 24,
                  rules: [
                    {
                      required: true,
                      message: '请选择审批人员',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  display:false,
                  label: '开始时间',
                  prop: 'startTime',
                  type: 'datetime',
                  valueFormat: 'yyyy-MM-dd HH:mm:ss',
                  value:'2022-05-30 00:00:00',
                  rules: [
                    {
                      required: true,
                      message: '请选择开始时间',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  display:false,
                  label: '结束时间',
                  prop: 'endTime',
                  type: 'datetime',
                  value:'2022-05-20 00:00:01',
                  valueFormat: 'yyyy-MM-dd HH:mm:ss',
                  rules: [
                    {
                      required: true,
                      message: '请选择结束时间',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  label: '请假理由',
                  prop: 'reason',
                  type: 'textarea',
                  span: 24,
                  rules: [
                    {
                      required: true,
                      message: '请输入请假理由',
                      trigger: 'blur'
                    }
                  ]
                },
              ]
            },
          ],
        }
      }
    },
    created() {
      this.processDefinitionId = this.$route.params.processDefinitionId;
    },
    methods: {
      handleSubmit() {
        const params = {
          processDefinitionId: this.$route.params.processDefinitionId,
          ...this.form,
        };
        leaveProcess(params).then(resp => {
          const data = resp.data;
          if (data.success) {
            this.$message.success(data.msg);
            this.$router.$avueRouter.closeTag();
            this.$router.push({path: `/work/start`});
          } else {
            this.$message.error(data.msg || '提交失败');
          }
        });
      }
    }
  }
</script>
