<template>
  <div class="page-index">
    <div class="cpt-title">代码编辑器 eagle-code</div>
    <div class="cpt-content">
      <eagle-code :height="100"></eagle-code>
    </div>
    <div class="cpt-title">确认框 eagle-confirm</div>
    <div class="cpt-content">
      <eagle-confirm @confirm="handleConfirm" @cancel="handleCancel">
        <el-button size="small">操作</el-button>
      </eagle-confirm>
    </div>
    <div class="cpt-title">省市区选择器 eagle-dist-picker</div>
    <div class="cpt-content">
      <eagle-dist-picker></eagle-dist-picker>
    </div>
    <div class="cpt-title">文件上传 eagle-file-upload</div>
    <div class="cpt-content">
      <eagle-file-upload url="test"></eagle-file-upload>
    </div>
    <div class="cpt-title">图片上传 eagle-image-upload</div>
    <div class="cpt-content">
      <eagle-image-upload url="test"></eagle-image-upload>
    </div>
    <div class="cpt-title">多图上传 eagle-image-upload-multiple</div>
    <div class="cpt-content">
      <eagle-image-upload-multiple url="test" value="http://yiche-erp-test.oss-cn-hangzhou.aliyuncs.com/image/web/549df1ee-651f-4ad3-83cb-e812a7dda4a5.png,http://yiche-erp-test.oss-cn-hangzhou.aliyuncs.com/image/web/0f150013-ec3c-43cd-a4dc-d63d1261a082.png"></eagle-image-upload-multiple>
    </div>
    <div class="cpt-title">图片查看 eagle-image-view</div>
    <div class="cpt-content">
      <eagle-image-view value="http://yiche-erp-test.oss-cn-hangzhou.aliyuncs.com/image/web/549df1ee-651f-4ad3-83cb-e812a7dda4a5.png"></eagle-image-view>
    </div>
    <div class="cpt-title">单选按钮组 eagle-radio-group</div>
    <div class="cpt-content">
      <eagle-radio-group v-model="radioGroupValue" :dataSource="[{ label: '是', value: true }, { label: '否', value: false }]"></eagle-radio-group>
    </div>
    <div class="cpt-title">下拉选择 eagle-select</div>
    <div class="cpt-content">
      <eagle-select v-model="selectValue" :dataSource="[{ label: '选项A', value: 'A' }, { label: '选项B', value: 'B' }]"></eagle-select>
    </div>
    <div class="cpt-title">状态指示点 eagle-status-indicator</div>
    <div class="cpt-content">
      <eagle-status-indicator></eagle-status-indicator>
      <eagle-status-indicator active></eagle-status-indicator>
      <eagle-status-indicator positive></eagle-status-indicator>
      <eagle-status-indicator intermediary></eagle-status-indicator>
      <eagle-status-indicator negative></eagle-status-indicator>

      <eagle-status-indicator pulse></eagle-status-indicator>
      <eagle-status-indicator active pulse></eagle-status-indicator>
      <eagle-status-indicator positive pulse></eagle-status-indicator>
      <eagle-status-indicator intermediary pulse></eagle-status-indicator>
      <eagle-status-indicator negative pulse></eagle-status-indicator>
    </div>
    <div class="cpt-title">开关 eagle-switch-button</div>
    <div class="cpt-content">
      <eagle-switch-button></eagle-switch-button>
    </div>
    <div class="cpt-title">树形选择器 eagle-tree-select</div>
    <div class="cpt-content">
      <eagle-tree-select v-model="treeSelectValue" :dataSource="treeSelectDataSource"></eagle-tree-select>
    </div>
    <div class="cpt-title">表单生成器 eagle-form</div>
    <div class="cpt-content">
      {{ formValue }}
      <eagle-form ref="form" v-model="formValue" :list="formList" :form-props="{ size: 'large', 'label-width': '80px' }" submit-pure>
        <template #group-not-bad="{ label, list }">
          <div style="background: deepskyblue">哎哟 - {{ label }} - 标题 [{{ list.length }} 项]</div>
        </template>
        <template #group-default="{ label }">
          <div style="background: deeppink">{{ label }} - 默认标题</div>
        </template>
        <template #item-name="{ model, key }">
          <el-select v-model="model[key]">
            <el-option value="A">A</el-option>
            <el-option value="B">B</el-option>
          </el-select>
        </template>
      </eagle-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {
      radioGroupValue: true,
      selectValue: undefined,
      treeSelectValue: undefined,
      treeSelectDataSource: [
        { id: 0, label: '一级菜单', children: [{ id: 1, label: '二级菜单-1' }, { id: 2, label: '二级菜单-2', children: [{ id: 3, label: '三级菜单' }] }] }
      ],
      formValue: {},
      // formList: [
      //   { type: 'el-input', key: 'name', label: '名称', group: '基本信息', span: 12 },
      //   { type: 'el-input', key: 'gender', label: '性别', group: '基本信息', span: 12 },
      //   { type: 'el-input', key: 'address', label: '住址', group: '家庭住址' },
      //   { type: 'el-input', key: 'postcode', label: '邮编', group: '家庭住址' },
      //   { type: 'el-input', key: 'political', label: '政治面貌', group: { key: 'pol', label: '政治审查' } },
      // ]
      formList: [
        { type: 'el-input', key: 'name', label: '名称', group: '那啥' },
        { type: 'el-input', key: 'gender', label: '性别', group: { label: '不错哦', key: 'not-bad' }, tip: '周某人说的', props: { disabled: true } },
        { type: 'eagle-select', key: 'address', label: '住址', default: '123', props: { dataSource: [{ label: '第一个', value: 'No.1' }, { label: '第二个', value: 'No.2' }] } },
        { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '随便挑', placement: "left" } },
        { type: 'el-input', key: 'political', label: '政治面貌', visible: (model) => model.name === 'B' },
      ]
    }
  },
  mounted() {
    setTimeout(() => {
      this.formValue.name = "B"
      this.formValue.name2 = "B"
      this.formValue.name3 = "B"
      this.formValue.name4 = "B"
      this.formValue.name5 = "B"
      this.formValue.name6 = "B"
      this.formValue.political = "B11111111111111111111111"
    }, 5000)

    // setTimeout(() => {
    //   this.$refs.form.reset()
    // }, 8000)
  },
  methods: {
    handleText(val) {
      console.log(val)
    },
    handleConfirm() {
      alert('确认')
    },
    handleCancel() {
      alert('取消')
    }
  },
}
</script>

<style>
.page-index {
  padding: 10px;
}
.cpt-title {
  padding: 5px 10px;
  margin-bottom: 10px;
  border-left: 4px solid deepskyblue;
  font-size: 16px;
  font-weight: bold;
}
.cpt-content {
  padding: 5px 15px;
  margin-bottom: 15px;
}
</style>
