<template>
  <div>
    <el-row>
      <el-col :span="10">
      <Form id="edit-form" ref="formObj" :model="formObj" :label-width="80">
        <Form-item label="使用" prop="use">
          <Select v-model="formObj.use" name="use" style="width:200px">
            <Option v-for="item in useList" :key="item.value" :value="item.value">
              {{ item.label }}
            </Option>
          </Select>
        </Form-item>
        <Form-item label="文字" prop="text">
          <Input v-model="formObj.text" name="text" placeholder="请输入文字" />
        </Form-item>
        <Form-item label="图片">
          <Upload
            multiple
            type="drag"
            action="//jsonplaceholder.typicode.com/posts/"
          >
            <div style="padding: 20px 0">
              <Icon type="ios-cloud-upload" size="52" style="color: #3399ff" />
              <p>点击或拖住到这里上传</p>
            </div>
          </Upload>
          <a href="#">预览图片</a>
        </Form-item>
        <Form-item>
          <Button type="primary" @click="_ok">
            保存
          </Button>
        </Form-item>
      </Form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { sysWatermark } from '../../../api'
export default {
  data() {
    return {
      id: '',
      modalTitle: '',
      useList: [{ value: 0, label: '文字' }, { value: 1, label: '图片' }],
      formObj: {
        use: 0,
        text: ''
      }
    }
  },
  mounted() {
    this._initData()
  },
  methods: {
    _initData: async function() {
      this.formObj = await sysWatermark.info()
    },
    _ok() {
      this.$Modal.confirm({
        title: '提示',
        content: '确定修改保存？',
        onOk: () => {
          this._save()
        }
      })
    },
    _save: async function() {
      const result = await sysWatermark.add(this.$serialize('edit-form'))
      if (result) {
        this.$message.success('保存成功!')
      }
    }
  }
}
</script>
