<template>
  <nm-container scrollbar>
    <nm-box header title="字典组件演示" icon="list" style="margin-top: 10px;">
      <nm-form ref="form" v-bind="form">
        <el-row>
          <el-col :span="20" :offset="1">
            <el-form-item label="状态：">
              <nm-dict-select v-model="form.model.status" group="Common" code="Status" />
            </el-form-item>
            <el-form-item label="性别：">
              <nm-dict-select v-model="form.model.sex" group="Common" code="Sex" />
            </el-form-item>
            <el-form-item label="标签：">
              <nm-dict-select v-model="form.model.tag" group="Common" code="Tag" multiple />
            </el-form-item>
            <el-form-item label="标签：">
              <nm-dict-tree v-model="form.model.tag" group="Common" code="Tag" multiple />
            </el-form-item>
          </el-col>
        </el-row>
      </nm-form>
    </nm-box>
    <nm-box header title="图片组件演示" icon="list">
      <nm-form ref="form" v-bind="form">
        <el-row>
          <el-col :span="20" :offset="1">
            <el-form-item label="上传：">
              <qs-picture-upload v-model="form.model.imageUrl" module="Base" group="Base" />
            </el-form-item>
            <el-form-item label="预览：">
              <qs-picture-view :url="form.model.imageUrl" />
            </el-form-item>
          </el-col>
        </el-row>
      </nm-form>
    </nm-box>
    <nm-box header title="附件组件演示" icon="list" style="margin-top: 10px;">
      <nm-form ref="form" v-bind="form">
        <el-row>
          <el-col :span="20" :offset="1">
            <el-form-item label="文件名：">
              <el-input v-model="form.model.name" clearable />
            </el-form-item>
            <el-form-item label="附件：">
              <nm-attachment-upload-single v-model="form.model.attachmentId" module="Solution" group="Attachment" :name="form.model.name" @success="onAttachmentSuccess" />
            </el-form-item>
          </el-col>
        </el-row>
      </nm-form>
    </nm-box>
    <nm-box header title="区域组件演示" icon="list" style="margin-top: 10px;">
      <nm-form ref="form" v-bind="form">
        <el-row>
          <el-col :span="20" :offset="1">
            <el-form-item label="区域：">
              <el-input v-model="form.model.area.fullName" clearable />
            </el-form-item>
            <el-form-item label="区域：">
              <nm-area-select v-model="form.model.area" separator=" " />
            </el-form-item>
          </el-col>
        </el-row>
      </nm-form>
    </nm-box>
  </nm-container>
</template>
<script>
export default {
  data() {
    return {
      form: {
        model: {
          /** 状态 */
          status: 'Normal',
          /** 性别 */
          sex: 'Unknown',
          /** 标签 */
          tag: ['好看', '漂亮', '不好用'],
          /** 图片链接 */
          imageUrl: 'Base//Base//2020//05//23//42c069da31f243cda9a6b6948ac6e9b9.jpg',
          /** 文件名 */
          name: '',
          /** 附件 */
          attachmentId: '',
          /** 区域 */
          area: {
            province: {
              name: '湖北省',
              code: '420000000000'
            },
            city: {
              name: '武汉市',
              code: '420100000000'
            },
            area: {
              name: '江岸区',
              code: '420102000000'
            },
            town: {
              name: '塔子湖街办事处',
              code: '420102018000'
            },
            /** 完整名称 */
            fullName: '湖北省 武汉市 江岸区 塔子湖街办事处'
          }
        },
        rules: {}
      }
    }
  },
  methods: {
    onAttachmentSuccess(res) {
      const data = res.data
      if (data.code === 1) {
        this.form.model.name = data.data.fileName
      }
    }
  }
}
</script>
