<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="设备名称" prop="username">
          <el-input v-model="form.username" style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label="设备编号" prop="devicenum">
          <el-input v-model="form.devicenum" style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label="设备类型" prop="dtype">
          <el-select v-model="form.dtype" placeholder="请选择设备类型">
            <el-option v-for="item in devicetype" :key="item.id" :label="item.tname" :value="item.tid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检测介质" prop="status">
          <el-select v-model="form.status" placeholder="请选择检测介质">
            <el-option v-for="item in gas" :key="item.id" :label="item.gas" :value="item.id"></el-option>
          </el-select>
          <span>/</span>
          <el-select v-model="form.devicemonad" placeholder="请选择单位" prop="devicemonad">
            <el-option v-for="item in danwei" :key="item.id" :label="item.danwei" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="checkPermission(['manage isadmin'])" label="选择用户" prop="uid">
          <el-select v-model="form.uid" placeholder="请选择用户">
            <el-option v-for="item in addUserDevice" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备联系人" prop="devicelinkman" label-width="92px">
          <el-input v-model="form.devicelinkman" style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label="设备手机号" prop="devicephone" label-width="92px">
          <el-input v-model="form.devicephone" style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label="设备坐标" prop="devicecoord">
          <el-input v-model="form.devicecoord" style="width: 50%;"></el-input>
          <el-button type="primary" style="position: relative;left: 18px;z-index: 999;" @click="drawer = true">拾取坐标</el-button>
        </el-form-item>
        <el-form-item label="设备详情,设备安装位置" prop="deviceinfo" label-width="167px">
          <el-input v-model="form.deviceinfo" style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label="设备备注" prop="deviceremark">
          <el-input v-model="form.deviceremark" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-drawer title="拾取坐标" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <span style="color: #E6A23C;" @click="positionUrl">如果找不到坐标!请点击</span>
      <div><CoordinateMap @giveLnglat="getLnglat"></CoordinateMap></div>
    </el-drawer>
  </div>
</template>

<script>
import CoordinateMap from '@/components/coordinateMap';
import { deviceTypeList, addUserDevice, adddevice } from '@/api/device';
import checkPermission from '@/utils/permission';
export default {
  components: { CoordinateMap },
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      form: {
        username: undefined, // 设备名称
        devicenum: undefined, // 设备编号
        dtype: undefined, // 设备类型对应device_type表
        status: undefined, // 介质状态对应gas
        devicemonad: undefined, // 设备单位对应danwei表
        uid: undefined, // 用户id
        devicelinkman: undefined, // 设备联系人
        devicephone: undefined, // 设备手机号
        devicecoord: undefined, // 设备坐标
        deviceinfo: undefined, // 设备详情,设备安装位置
        deviceremark: undefined, // 设备备注,
        isadmin: 1, // 是否管理员添加
      },
      danwei: [],
      devicetype: [],
      gas: [],
      addUserDevice: [],
      rules: {
        username: [
          { required: true, message: '请输入设备名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
        ],
        devicenum: [
          { required: true, message: '请输入设备编号', trigger: 'blur' },
          { min: 5, max: 22, message: '长度在 5 到 22 个字符', trigger: 'blur' },
        ],
        dtype: [
          { type: 'integer', required: true, message: '请选择设备类型', trigger: 'change' },
        ],
        status: [
          { type: 'integer', required: true, message: '请选择介质', trigger: 'change' },
        ],
        devicemonad: [
          { type: 'integer', required: true, message: '请选择单位', trigger: 'change' },
        ],
        uid: [
          { required: true, message: '请选择用户', trigger: 'change' },
        ],
        devicelinkman: [
          { required: true, message: '请填设备联系人', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' },
        ],
        devicephone: [
          { required: true, message: '请填设备联系电话', trigger: 'blur' },
          { min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' },
        ],
        devicecoord: [
          { required: true, message: '请填设备坐标', trigger: 'blur' },
        ],
        deviceinfo: [
          { required: true, message: '请填设备详情,设备安装位置', trigger: 'blur' },
        ],
      },
    };
  },
  created() {
    this.deviceTypeList();
    this.addUserDevices();
  },
  methods: {
    checkPermission,
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          adddevice(this.form)
            .then(response => {
              if (response.code === 200) {
                this.$router.push({ path: '/userdevice/device' });
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getLnglat(lnglnt) {
      console.log(lnglnt);
    },
    deviceTypeList() {
      deviceTypeList()
        .then(response => {
          this.danwei = response.data.danwei;
          this.devicetype = response.data.devicetype;
          this.gas = response.data.gas;
        })
        .catch(err => {
          console.log(err);
        });
    },
    addUserDevices() {
      addUserDevice()
        .then(response => {
          this.addUserDevice = response.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    positionUrl() {
      window.open('latlge.html');
      this.drawer = false;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
  },
};
</script>

<style>
</style>