<!-- 使用方法 样例 -->
<template>
  <div class="trigger_dialog">
    <!-- 弹窗  -->
    <el-button type="primary" @click="dialogVisible = true">触发对话框</el-button>
    <DialogWrapper
      v-if="dialogVisible"
      dialog-title="触发对话框"
      :visible.sync="dialogVisible"
      :popup-width="'35%'"
      @handleClose="handleClose"
      @submitDialogData="submitDialogData"
    >
      <FormDialog
        ref="formDialog"
        :form-item-config-arr="formItemConfigArr"
        @handleInputValue="handleInputValue"
      />
    </DialogWrapper>
  </div>
</template>

<script>
export default {
  name: 'TriggerDialog',
  components: {
    DialogWrapper: () => import('./components/DialogWrapper.vue'),
    FormDialog: () => import('./form-dialog.vue')

  },
  props: {},
  data() {
    return {
      dialogVisible: false, // 弹框状态
      // 表单项配置
      formItemConfigArr: [{
        label: '选择器: 单选',
        prop: 'SelectorSingleSelection',
        id: 'SelectorSingleSelection',
        itemType: 'SelectorSingleSelection',
        deliveryLevel: '',
        optionArr: [
          { optionValue: '黄金糕', optionLabel: '黄金糕' },
          { optionValue: '双皮奶', optionLabel: '双皮奶' },
          { optionValue: '蚵仔煎', optionLabel: '蚵仔煎' },
          { optionValue: '龙须面', optionLabel: '龙须面' },
          { optionValue: '北京烤鸭', optionLabel: '北京烤鸭' }
        ]
      }, {
        label: '选择器: 多选',
        prop: 'SelectorMultipleSelection',
        id: 'SelectorMultipleSelection',
        itemType: 'SelectorMultipleSelection',
        deliveryLevel: '',
        optionArr: [
          { optionValue: '东南', optionLabel: '东南', children: [
            { optionValue: '上海', optionLabel: '上海', children: [
              { optionValue: '普陀', optionLabel: '普陀' },
              { optionValue: '黄埔', optionLabel: '黄埔' },
              { optionValue: '徐汇', optionLabel: '徐汇' }]
            },
            { optionValue: '江苏', optionLabel: '江苏', children: [
              { optionValue: '南京', optionLabel: '南京' },
              { optionValue: '苏州', optionLabel: '苏州' },
              { optionValue: '无锡', optionLabel: '无锡' }]
            },
            { optionValue: '浙江', optionLabel: '浙江', children: [
              { optionValue: '杭州', optionLabel: '杭州' },
              { optionValue: '宁波', optionLabel: '宁波' },
              { optionValue: '嘉兴', optionLabel: '嘉兴' }]
            }]
          },
          { optionValue: '西北', optionLabel: '西北', children: [
            { optionValue: '陕西', optionLabel: '陕西', children: [
              { optionValue: '西安', optionLabel: '西安' },
              { optionValue: '延安', optionLabel: '延安' }]
            },
            { optionValue: '新疆维吾尔族自治区', optionLabel: '新疆维吾尔族自治区', children: [
              { optionValue: '乌鲁木齐', optionLabel: '乌鲁木齐' },
              { optionValue: '克拉玛依', optionLabel: '克拉玛依' }]
            }]
          }
        ]
      }, {
        label: '选择器: 树结构',
        prop: 'SelectorTreeStructure',
        id: 'SelectorTreeStructure',
        itemType: 'SelectorTreeStructure',
        deliveryLevel: '',
        optionArr: [
          {
            'id': 16610387558572,
            'deptId': 100,
            'parentId': 0,
            'ancestors': null,
            'deptName': '中科辅龙',
            'parentName': null,
            'children': [
              {
                'id': 16610389432685,
                'deptId': 101,
                'parentId': 100,
                'ancestors': null,
                'deptName': '北京总公司',
                'parentName': null,
                'children': [
                  {
                    'id': 16610388531515,
                    'deptId': 103,
                    'parentId': 101,
                    'ancestors': null,
                    'deptName': '研发部门',
                    'parentName': null,
                    'children': [
                      {
                        'id': 16610387615239,
                        'deptId': 16610387615239,
                        'parentId': 103,
                        'ancestors': null,
                        'deptName': '系统管理员',
                        'parentName': null,
                        'children': [],
                        'userId': 1,
                        'nickName': null
                      }
                    ],
                    'userId': null,
                    'nickName': null
                  },
                  {
                    'id': 16610388036783,
                    'deptId': 104,
                    'parentId': 101,
                    'ancestors': null,
                    'deptName': '市场部门',
                    'parentName': null,
                    'children': [],
                    'userId': null,
                    'nickName': null
                  },
                  {
                    'id': 16610388740710,
                    'deptId': 105,
                    'parentId': 101,
                    'ancestors': null,
                    'deptName': '测试部门',
                    'parentName': null,
                    'children': [
                      {
                        'id': 16610388604617,
                        'deptId': 121,
                        'parentId': 105,
                        'ancestors': null,
                        'deptName': '测试部',
                        'parentName': null,
                        'children': [],
                        'userId': null,
                        'nickName': null
                      },
                      {
                        'id': 16610387802667,
                        'deptId': 16610387802667,
                        'parentId': 105,
                        'ancestors': null,
                        'deptName': '若依',
                        'parentName': null,
                        'children': [],
                        'userId': 2,
                        'nickName': null
                      },
                      {
                        'id': 16610388008178,
                        'deptId': 16610388008178,
                        'parentId': 105,
                        'ancestors': null,
                        'deptName': '赵文莉',
                        'parentName': null,
                        'children': [],
                        'userId': 738512,
                        'nickName': null
                      }
                    ],
                    'userId': null,
                    'nickName': null
                  },
                  {
                    'id': 16610389553740,
                    'deptId': 106,
                    'parentId': 101,
                    'ancestors': null,
                    'deptName': '财务部门',
                    'parentName': null,
                    'children': [],
                    'userId': null,
                    'nickName': null
                  },
                  {
                    'id': 16610389178321,
                    'deptId': 107,
                    'parentId': 101,
                    'ancestors': null,
                    'deptName': '运维部门',
                    'parentName': null,
                    'children': [],
                    'userId': null,
                    'nickName': null
                  }
                ],
                'userId': null,
                'nickName': null
              },
              {
                'id': 16610388755966,
                'deptId': 102,
                'parentId': 100,
                'ancestors': null,
                'deptName': '长沙分公司',
                'parentName': null,
                'children': [
                  {
                    'id': 16610389179839,
                    'deptId': 108,
                    'parentId': 102,
                    'ancestors': null,
                    'deptName': '市场部门',
                    'parentName': null,
                    'children': [],
                    'userId': null,
                    'nickName': null
                  },
                  {
                    'id': 16610389330898,
                    'deptId': 109,
                    'parentId': 102,
                    'ancestors': null,
                    'deptName': '财务部门',
                    'parentName': null,
                    'children': [],
                    'userId': null,
                    'nickName': null
                  }
                ],
                'userId': null,
                'nickName': null
              },
              {
                'id': 16610388015679,
                'deptId': 110,
                'parentId': 100,
                'ancestors': null,
                'deptName': '监理单位',
                'parentName': null,
                'children': [],
                'userId': null,
                'nickName': null
              },
              {
                'id': 16610388258734,
                'deptId': 16610388258734,
                'parentId': 100,
                'ancestors': null,
                'deptName': '咩咩',
                'parentName': null,
                'children': [],
                'userId': 4,
                'nickName': null
              }
            ],
            'userId': null,
            'nickName': null
          }
        ]
      }, {
        label: '选择器: 单时间',
        prop: 'SelectorSingleTime',
        id: 'SelectorSingleTime',
        itemType: 'SelectorSingleTime',
        deliveryLevel: '',
        optionArr: []
      }, {
        label: '选择器: 单日期',
        prop: 'SelectorSingleDate',
        id: 'SelectorSingleDate',
        itemType: 'SelectorSingleDate',
        deliveryLevel: '',
        optionArr: []
      }, {
        label: '选择器: 日期范围长度测试',
        prop: 'SelectorDateRange',
        id: 'SelectorDateRange',
        itemType: 'SelectorDateRange',
        deliveryLevel: 'ESS',
        optionArr: []
      }, {
        label: '多行文本',
        prop: 'MultilineText',
        id: 'MultilineText',
        itemType: 'MultilineText',
        deliveryLevel: '',
        optionArr: []
      }, {
        label: '单选框',
        prop: 'RadioBox',
        id: 'RadioBox',
        itemType: 'RadioBox',
        deliveryLevel: '',
        optionArr: [
          { optionValue: '单选一', optionLabel: '单选一' },
          { optionValue: '单选二', optionLabel: '单选二' },
          { optionValue: '单选三', optionLabel: '单选三' },
          { optionValue: '单选四', optionLabel: '单选四' },
          { optionValue: '单选五', optionLabel: '单选五' }
        ]
      }, {
        label: '多选框',
        prop: 'MultipleCheckbox',
        id: 'MultipleCheckbox',
        itemType: 'MultipleCheckbox',
        deliveryLevel: 'ESS',
        optionArr: [
          { optionValue: '复选框A', optionLabel: '复选框A' },
          { optionValue: '复选框B', optionLabel: '复选框B' },
          { optionValue: '复选框C', optionLabel: '复选框C' },
          { optionValue: '复选框D', optionLabel: '复选框D' },
          { optionValue: '复选框F', optionLabel: '复选框F' }
        ]
      }, {
        label: '字符串输入框',
        prop: 'InputString',
        id: 'InputString',
        itemType: 'InputString',
        deliveryLevel: 'ESS',
        optionArr: []
      }, {
        label: '整数输入框',
        prop: 'InputInteger',
        id: 'InputInteger',
        itemType: 'InputInteger',
        deliveryLevel: '',
        optionArr: []
      }, {
        label: '小数输入框',
        prop: 'InputDecimals',
        id: 'InputDecimals',
        itemType: 'InputDecimals',
        deliveryLevel: '',
        optionArr: []
      }, {
        label: '计数器',
        prop: 'CounterFrame',
        id: 'CounterFrame',
        itemType: 'CounterFrame',
        deliveryLevel: '',
        optionArr: []
      }, {
        label: '文件上传',
        prop: 'FileUpload',
        id: 'FileUpload',
        itemType: 'FileUpload',
        deliveryLevel: '',
        optionArr: []
      }, {
        label: '富文本',
        prop: 'RichText',
        id: 'RichText',
        itemType: 'RichText',
        deliveryLevel: '',
        optionArr: []
      }]
    }
  },
  computed: { },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    /* 弹窗 修改是否让页面显示与隐藏的事件 */
    updateVisible(val) {
      this.dialogVisible = val
    },
    /* 弹窗 确认 操作 */
    submitDialogData() {
      // this.dialogVisible = false
      const formData = this.$refs.formDialog.formInline
      console.log(formData)
    },
    /* 弹窗 关闭 操作 */
    handleClose() {
      this.dialogVisible = false
    },

    /* 表单操作 */
    handleInputValue(data) {
      console.log(data)
    }
  }
}
</script>
<style lang="scss" scoped>
.trigger_dialog {
  box-sizing: border-box;
  width: calc(100% - 32px);
  height: calc(100% - 72px);
  margin: 16px;
  padding: 16px;
  border-radius: 4px;
  background-color: #ccc;
}
</style>
