<template>
<!-- <div> -->
  <!-- <Card> -->
<Modal width="600px;" v-model="dialog.show"  :title="dialog.title" :loading=true :footer-hide=true @on-cancel="handleCancel">
    <Form ref="formData" :model="formData" :rules="ruleValidate" :label-width="80">
        <FormItem label="主机名" prop="hostname">
            <Input v-model="formData.hostname" placeholder=""></Input>
        </FormItem>

        <FormItem label="主机组" >
            <Transfer
            :data="GroupList"
            :target-keys="formData.group"
            filterable
            :filter-method="groupFilter"
            :titles="groupTitle"
            @on-change="groupHandleChange">
            </Transfer>
        </FormItem>

        <FormItem label="IDC">
            <Select v-model="formData.idc" placeholder="请选择" filterable>
                <Option value="qcloud" >腾讯云</Option>
                <Option value="aliyun" >阿里云</Option>
                <Option value="aws" >AWS</Option>
                <Option value="internal" >内网</Option>
                <Option value="other" >其他</Option>
            </Select>
        </FormItem>

        <FormItem label="区域">
            <Input v-model="formData.region" placeholder=""></Input>
        </FormItem>

        <FormItem label="管理用户">
            <Row>
                <Col span="4">
                    <Checkbox v-model="single">手动录入</Checkbox>

                </Col>
                <Col span="8" offset="1" v-show="!single">
                    <Select v-model="formData.admin_user" placeholder="请选择" filterable>
                        <Option v-for="item in AdmUser" :value="item.id">{{item.name}}</Option>
                    </Select>
                </Col>

            </Row>
            <Row v-show="single">
                <Col span="11"><Input v-model="formData.username" placeholder="用户名"></Input></Col>
                <Col span="11" offset="2"><Input v-model="formData.password" placeholder="密码"></Input></Col>
            </Row>

        </FormItem>

        <FormItem label="IP" prop="ip">
            <Input v-model="formData.ip" placeholder=""></Input>
        </FormItem>

        <FormItem label="Port">
            <Input v-model="formData.port" placeholder=""></Input>
        </FormItem>

        <FormItem label="CPU">
            <Input v-model="formData.cpu" placeholder=""></Input>
        </FormItem>

        <FormItem label="Memory">
            <Input v-model="formData.memory" placeholder=""></Input>
        </FormItem>

        <FormItem label="Disk">
            <Input v-model="formData.disk" placeholder=""></Input>
        </FormItem>

        <FormItem label="系统类型">
            <Select v-model="formData.os_platform" placeholder="请选择" filterable>
                <Option value="Linux" >Linux</Option>
                <Option value="Windows" >Windows</Option>
                <Option value="Other" >Other</Option>
            </Select>
        </FormItem>

        <FormItem label="系统版本">
            <Input v-model="formData.os_version" placeholder=""></Input>
        </FormItem>

        <FormItem label="SN">
            <Input v-model="formData.sn" placeholder=""></Input>
        </FormItem>

        <FormItem label="主机描述">
            <Input v-model="formData.comment" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder=""></Input>
        </FormItem>

        <FormItem label="Tag标签" >
            <Transfer
            :data="TagList"
            :target-keys="formData.tag"
            filterable
            :filter-method="tagFilter"
            :titles="tagTitle"
            @on-change="tagHandleChange">
            </Transfer>
        </FormItem>

        <FormItem>
            <Button type="primary" @click="handleSubmit('formData')">提交</Button>
            <Button @click="handleReset('formData')" style="margin-left: 8px">重置</Button>
        </FormItem>
    </Form>
</Modal>
  <!-- </Card>     -->
<!-- </div> -->
</template>
<script>
import { getAdmUser, getGroupList, getTagList, addProject } from '@/api/cmdb/server'
// import { getAppList } from '@/api/app'
export default {
  name: 'add',
  data () {
    return {
      single: false,
      GroupList: [],
      TagList: [],
      groupTitle: ['可关联', '已关联'],
      tagTitle: ['可关联', '已关联'],
      AdmUser: [],
      ruleValidate: {
        hostname: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' }
        ],
        ip: [
          { required: true, message: 'IP不能为空', trigger: 'blur' }
        ],
        port: [
          { required: true, message: '端口不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    groupHandleChange (newTargetKeys) {
      console.log(this.formData.group)
      this.formData.group = newTargetKeys
    },
    groupFilter (data, query) {
      return data.label.indexOf(query) > -1
    },
    tagHandleChange (newTargetKeys) {
      console.log(this.formData.tag)
      this.formData.tag = newTargetKeys
    },
    tagFilter (data, query) {
      return data.label.indexOf(query) > -1
    },
    handleCancel () {
      this.$emit('e-close')
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // add => post => /api/cmdb/server/
          // edit => put => /api/cmdb/server/1
          console.log(this.formData)
          const url = this.dialog.option == 'add' ? '/' : `/${this.formData.id}/`
          const action = this.dialog.option == 'add' ? 'post' : 'put'
          const msg = this.dialog.option == 'add' ? '主机添加成功' : '主机修改成功'
          addProject(this.formData, url, action).then(res => {
            console.log(res)
            if (res.status) {
              this.$Message.success({
                content: msg,
                duration: 3
              })
              this.$emit('e-close')
              this.$emit('e-update')
            } else {
              this.$Message.error({
                content: res.data.msg,
                duration: 3
              })
            }
          }).catch(error => {
            this.$Message.error({
              content: JSON.stringify(error.response.data),
              duration: 10
            })
          })
        } else {
          this.$Message.error({
            content: '请检查必选项',
            duration: 3
          })
        }
      })
    },
    handleReset (name) {
      console.log('name..', name)
      this.$refs[name].resetFields()
    }

  },
  props: {
    dialog: Object,
    formData: Object
  },
  watch: {
    formData: function () {
      this.single = this.formData.single
    },
    single: function () {
      if (this.single == false) {
        this.formData.username = null
        this.formData.password = null
      }
    }
  },
  mounted () {
    getGroupList().then(res => {
      const data = res.data
      for (var item in data) {
        this.GroupList.push({
          key: data[item].id,
          label: data[item].name
        })
      }
    }),
    getTagList().then(res => {
      const data = res.data
      for (var item in data) {
        this.TagList.push({
          key: data[item].id,
          label: data[item].name
        })
      }
    }),
    getAdmUser().then(res => {
      this.AdmUser = res.data
      console.log(this.AdmUser)
    })
  }

}
</script>
