<template>
  <div style="display:inline">
    <el-button size="mini" type="primary" icon="el-icon-edit" @click="onShow">编 辑</el-button>
    <el-dialog
      title="编辑"
      :visible.sync="drawer"
      width="40%">
      <div>
        <el-row :gutter="10">
          <el-form :model="form" size="mini" label-position="left">
            <el-col class="normal-title" :span="24">
              联系人信息
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人" label-width="80px">
                <el-input v-model="form.name" autocomplete="off" placeholder="输入联系人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系方式" label-width="80px">
                <el-input v-model="form.phonenumber" autocomplete="off" placeholder="输入联系方式"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号" label-width="80px">
                <el-input v-model="form.idcard" autocomplete="off" placeholder="输入身份证号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" label-width="80px">
                <!-- <el-input v-model="form.sex" autocomplete="off" placeholder="输入性别"></el-input> -->
                <el-select v-model="form.sex" style="width:100%" placeholder="请选择">
                  <el-option
                    label="女"
                    :value="1">
                  </el-option>
                  <el-option
                    label="男"
                    :value="0">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生日" label-width="80px">
                <!-- <el-input v-model="form.birthday" autocomplete="off" placeholder="输入生日"></el-input> -->
                <el-date-picker
                  style="width:100%"
                  v-model="form.birthday"
                  align="right"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择生日"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" label-width="80px">
                <el-input v-model="form.email" autocomplete="off" placeholder="输入邮箱"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" label-width="80px">
                <el-input v-model="form.remarks" autocomplete="off" placeholder="输入备注"></el-input>
              </el-form-item>
            </el-col>
            <el-col class="normal-title" :span="24">
              账号信息
            </el-col>
            <el-col :span="24">
              <el-form-item label="创建账号" label-width="80px">
                <el-input v-model="form.accountno" autocomplete="off" placeholder="输入新建账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="账号密码" label-width="80px">
                <el-input v-model="form.password" type="password" autocomplete="off" placeholder="输入账号密码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="是否启用" label-width="80px">
                <el-checkbox v-model="form.status" true-label="ACTIVE" false-label="INACTIVE">{{form.status === 'ACTIVE'?'启用':'停用'}}</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col class="normal-title" :span="24">
              添加归属站点
            </el-col>
            <el-col :span="24">
              <el-form-item label="站点" label-width="80px">
                <el-select v-model="siteSeletion" style="width:100%" multiple placeholder="请选择" @visible-change="onChange" @remove-tag="removeTag">
                  <el-option
                    v-for="item in sitelist"
                    :key="item.siteuid"
                    :label="item.sitename"
                    :value="item.siteid">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
         <el-button type="default" size="small" @click="drawer = false">取 消</el-button>
          <el-button type="primary" size="small" @click="onSubmit">保存信息</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import md5 from 'js-md5'

export default {
  props:['data'],
  data () {
    return {
      drawer:false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      form:{
        "userid": 0,
        "name": "",
        "sex": 1,
        "phonenumber": "",
        "accountno": "",
        "status": 1,
        "password":"",
        "birthday":"",
        "remarks":"",
        "email":"",
        "idcard":"",
        "departmentid":1
      },
      sitelist:[],
      siteSeletion:[]
    }
  },
  methods:{
    queryAccountMain () {
      this.$api.requested({
        "classname": "webmanage.users.users",
        "method": "query_userMain",
        "content": {
          "userid":this.data.userid
        }
      }).then(res=>{
        this.form = Object.assign({},this.form,res.data[0])
        this.siteSeletion = []
        this.form.usersite.map(e=>{
          this.siteSeletion.push(e.siteid)
        })
        this.querySite()
      })
    },
    onSubmit () {
      this.form.password = md5(this.form.password)
      this.$api.requested({
        "classname": "webmanage.users.users",
        "method": "insertormodify_user",
        "content": this.form
      }).then(res=>{
        if (res.code === 1) {
          this.$notify({
            title: '成功',
            message: '账号添加成功',
            type: 'success'
          });
          this.drawer = false
          this.$emit('onSuccess')
        } else {
          this.$notify({
            title: '失败',
            message: res.data,
            type: 'error'
          });
        }
      })
    },
    onShow () {
      this.drawer = true
      this.queryAccountMain()
    },
    // 站点查询
    querySite () {
      this.$api.requested({
        "classname": "sysmanage.site.site",
        "method": "query_siteList",
        "content": {
            "pageNumber": 1,
            "pageSize": 100
        }
      }).then(res=>{
        this.sitelist = res.data
      })
    },
    onChange (val) {
      let param = {
        "classname": "webmanage.users.users",
        "method": "addUserSite",
        "content": {
            "userid": this.form.userid,
            "siteids":this.siteSeletion
        }
      }
      !val ? this.$api.requested(param).then(res=>{
        res.code == 1?'':this.$notify({
            title: '失败',
            message: res.data,
            type: 'error'
          });
      }) : ''
    },
    removeTag (val) {
      let param = {
        "classname": "webmanage.users.users",
        "method": "deleteUserSite",
        "content": {
            "userid": this.form.userid,
            "siteid":val
        }
      }
      this.$api.requested(param).then(res=>{
        res.code == 1?this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          }):this.$notify({
            title: '失败',
            message: res.data,
            type: 'error'
          });
      })
    }
  }
}

</script>
<style>
</style>