<template>
  <div class="track-container">
    <div class="search-container">
      <div class="search-ctn">
        <div>
          <div class="label-content">
            <div class="label">部门：</div>
            <div class="input-rule">
              <t-select v-model="queryCondition.alarmPerson" width="200" placeholder="请输入...">
                <t-option>张三</t-option>
                <t-option>李四</t-option>
              </t-select>
            </div>
          </div>
          <div class="label-content">
            <div class="label">姓名：</div>
            <div class="input-rule">
              <t-select v-model="queryCondition.alarmPerson" width="200" placeholder="请输入...">
                <t-option>张三</t-option>
                <t-option>李四</t-option>
              </t-select>
            </div>
          </div>
          <div class="label-content">
            <div class="label">员工编号：</div>
            <div class="input-rule">
              <t-select v-model="queryCondition.alarmPerson" width="200" placeholder="请输入...">
                <t-option>张三</t-option>
                <t-option>李四</t-option>
              </t-select>
            </div>
          </div>
          <div class="btns">
            <t-button color="secondary" class="reset-btn" @click="onReset">重置</t-button>
            <t-button color="success" icon="search-outline" @click="onSearch">查询</t-button>
            <t-button color="secondary" icon="upload-outline" @click="toExport">导出至Excel</t-button>
            <t-button color="secondary" icon="delete-outline" @click="toExport">删除</t-button>
          </div>
        </div>
        <div class="btns">
          <t-button color="success" icon="upload-outline" @click="onReset">导入</t-button>
          <t-button color="success" icon="download-outline" @click="onReset">下载模板</t-button>
          <t-button color="success" icon="plus-outline" @click="addUser">新增</t-button>
        </div>
      </div>
    </div>
    <div>
      <t-table :data="table.data">
        <t-table-column prop="name" label="姓名"></t-table-column>
        <t-table-column prop="number" label="员工编号"></t-table-column>
        <t-table-column prop="relevance" label="关联终端"></t-table-column>
        <t-table-column prop="department" label="部门"></t-table-column>
        <t-table-column prop="job" label="职务"></t-table-column>
        <t-table-column prop="age" label="年龄"></t-table-column>
        <t-table-column prop="phone" label="手机"></t-table-column>
        <t-table-column
          fixed="right"
          label="操作"
          width="240"
        >
          <template slot-scope="scope">
            <a href="javascript:void(0)" size="sm" @click="handleClick(scope.row)">关联终端</a>
            <span class="mod-line">|</span>
            <a href="javascript:void(0)" size="sm" @click="remove(scope.$index)">解绑终端</a>
            <span class="mod-line">|</span>
            <a href="javascript:void(0)" size="sm" @click="handleClick(scope.row)">编辑</a>
            <span class="mod-line">|</span>
            <a href="javascript:void(0)" size="sm" @click="remove(scope.$index)">删除</a>
          </template>
        </t-table-column>
      </t-table>
      <t-pager :total="table.pager.total" :current.sync="table.pager.currentPage"
               :page-size.sync="table.pager.size"
               :sizer-range="[10,20,50]"
               class="px-24 pt-16 float-right"
               show-elevator show-sizer
               @on-size-change="onSizeChange"
               @on-change="onPagerChange">
      </t-pager>
    </div>
    <t-modal :visibled.sync="modal" title="新增设备" >
      <t-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" label-position="left">
        <t-form-item label="姓名" prop="name">
          <t-input v-model="formValidate.name" placeholder="请输入风机名称"></t-input>
        </t-form-item>
        <t-form-item label="员工编号" prop="number">
          <t-input v-model="formValidate.number" placeholder="请输入字母、数字、中划线、下划线、#"></t-input>
        </t-form-item>
        <t-form-item label="部门" prop="department">
          <t-select v-model="formValidate.department" label-in-value placeholder="请选择设备类型">
            <t-option value="1">部门1</t-option>
            <t-option value="2">部门2</t-option>
            <t-option value="3">部门3</t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="职务" prop="job">
          <t-select v-model="formValidate.job" label-in-value placeholder="请选择设备类型">
            <t-option value="1">职务1</t-option>
            <t-option value="2">职务2</t-option>
            <t-option value="3">职务3</t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="年龄" prop="age">
          <t-input v-model="formValidate.age" placeholder="请输入数字"></t-input>
        </t-form-item>
        <t-form-item label="手机" prop="phone">
          <t-input v-model="formValidate.phone" placeholder="请输入数字"></t-input>
        </t-form-item>
      </t-form>
      <div slot="footer">
        <t-button @click="cancel">取消</t-button>
        <t-button class="submit-button" @click="submit">保存</t-button>
      </div>
    </t-modal>
  </div>
</template>
<script>
import './user-management.scss'
export default {
  data() {
    return {
      table: {
        data: [
          {
            name: '张三',
            number: '108373',
            relevance: 'ZDBH0001',
            department: '设备管理处',
            job: '运维人员',
            age: 24,
            phone: '18888888888'
          },
          {
            name: '张三',
            number: '108373',
            relevance: 'ZDBH0001',
            department: '设备管理处',
            job: '运维人员',
            age: 24,
            phone: '18888888888'
          },
          {
            name: '张三',
            number: '108373',
            relevance: 'ZDBH0001',
            department: '设备管理处',
            job: '运维人员',
            age: 24,
            phone: '18888888888'
          }
        ],
        pager: {
          currentPage: 1,
          size: 10,
          total: 0
        }
      },
      queryCondition: {
        type: '',
        alarmPerson: ''
      },
      rangeDate: '',
      modal: false,
      formValidate: {
        name: '',
        number: '',
        department: '',
        job: '',
        age: '',
        phone: ''
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur'
          }
        ],
        number: [
          {
            required: true,
            message: '员工编号不能为空',
            trigger: 'blur'
          },
          {
            message: '员工编号重复',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              // TODO 判断编号重复
              if (false) {
                callback(rule.message)
              }
            }
          }
        ],
        department: [
          {
            required: true,
            message: '部门不能为空',
            trigger: 'blur'
          }
        ],
        job: [
          {
            required: true,
            message: '职务不能为空',
            trigger: 'blur'
          }
        ],
        age: [
          {
            required: true,
            message: '年龄不能为空',
            trigger: 'blur'
          },
          {
            message: '年龄不正确',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              let pattern = /^(([0-9]|[1-9][1-9]|1[0-7][0-9])(\\.[0-9]+)?|180)$/
              if (!pattern.test(value)) {
                callback(rule.message)
              }
            }
          }
        ],
        phone: [
          {
            required: true,
            message: '手机不能为空',
            trigger: 'blur'
          },
          {
            message: '手机不正确',
            trigger: 'blur',
            validator: function(rule, value, callback) {
              let pattern = /^1[3456789]\d{9}$/
              if (!pattern.test(value)) {
                callback(rule.message)
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.table.data = this.table.data.concat(this.table.data)
    this.table.pager.total = this.table.data.length
  },
  methods: {
    onChange(value) {
      console.log('date change:' + value)
    },
    onReset() {

    },
    onSearch() {

    },
    toExport() {

    },
    onPagerChange(page) {

    },
    onSizeChange(number) {

    },
    cancel() {
      this.modal = false
    },
    submit() {
      this.$refs.formValidate.validate(valid => {
        if (valid) {
          this.$Message.success('提交成功!')
        } else {
          this.$Message.danger('表单验证失败!')
        }
      })
    },
    addUser() {
      this.modal = true
    }
  }
}
</script>