<template>
  <div class="app-container">
    <div class="seetingsDiv" style="">

      <div class="flex" style="width: 100%">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input placeholder="输入关键字搜索" v-model="query.KeyWord"></el-input>
          </el-form-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              标签
            </template>
            <el-tag size="small">推荐</el-tag>
          </el-descriptions-item>


          <el-form-item label="联系方式">
            <el-input placeholder="输入联系方式" v-model="query.phone"></el-input>
          </el-form-item>
          <el-form-item label="时间">
            <el-date-picker v-model="query.date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>


          <el-form-item label="区间">
            <el-select v-model="query.qujain" placeholder="区间">
              <el-option label="全部" value=""></el-option>
              <el-option label="上午" value="上午"></el-option>
              <el-option label="下午" value="下午"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="success" @click="search">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
    <el-table :data="userList" id="QuestionTable" border
      style="width: 100%;border-radius: 5px;box-shadow: 0 0 10px #efefef;margin-top: 10px;" :stripe='true'>
      <el-table-column type="index" prop="date" width="50" align="center"></el-table-column>
      <el-table-column prop="date" label="日期">
        <template slot-scope="scope">
          <span>{{ scope.row.startTime }}

            <el-tag>{{scope.row.qujian}}</el-tag>
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="date" label="姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.fullName }}</span>
          <el-tag v-for="item in scope.row.taglist" size="mini" style="margin-right:5px"  
                  :disable-transitions="false"  >{{item}}</el-tag>

        </template>
      </el-table-column>
      <el-table-column prop="date" label="系统推荐" width="150px" sortable>
        <template slot-scope="scope">
          <el-rate v-model="scope.row.stars" disabled text-color="#ff9900" size="small">
          </el-rate>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="联系方式">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="详细地址">
        <template slot-scope="scope">
          <span>{{ scope.row.adress || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="备注">
        <template slot-scope="scope">
          <span>{{ scope.row.remark || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">

          <el-button type="text" icon="el-icon-delete" circle @click="handleDelete(scope.row, scope.$index)" size="mini"
            style="margin-left:0px;">删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @current-change="currentchange"
      style="position:static;bottom: 3px;text-align: center;margin-top: 5px;" :page-size="this.query.PageSize"
      layout="total,prev, pager, next" :total="Count">
    </el-pagination>

  </div>
</template>

<script>
  import {
    GetCompanyInvitation,
    InvitationCompanyDelete
  } from '@/api/user'
  import {
    formatTime
  } from '@/utils/util.js'
  export default {
    data() {
      var checkPhone = (rule, value, callback) => {
        const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
        if (!value) {
          return callback(new Error('电话号码不能为空'))
        }
        setTimeout(() => {
          if (!Number.isInteger(+value)) {
            callback(new Error('请输入数字值'))
          } else {
            if (phoneReg.test(value)) {
              callback()
            } else {
              callback(new Error('电话号码格式不正确'))
            }
          }
        }, 100)
      }


      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.Password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        title: '添加管理员',
        buttonText: '立即创建',
        userList: [],
        dialogClassIVIsible: false,
        dialogClassIVIsibleT: false,
        adminUserInfo: {
          username: "",
          password: "",
          // type: 4,
          fullName: "",
          // remark: "",
          phone: "",
          // sex: "",
          // card: "",
          // address: "",
          // birthday: "",
          status: 1,
        },

        ruleForm: {
          UserId: 0,
          Password: '',
          checkPass: '',
        },
        Count: 0,
        query: {
          PageIndex: 1,
          PageSize: 1000,

        },
      }
    },
    created() {
      this.GetUser()
    },
    methods: {
      search() {
        this.GetUser();
      },
      closeClassDialog() {
        this.title = '添加管理员'
        this.buttonText = '立即创建'
        this.GetUser();
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.title == '添加管理员') {
              this.adminUserInfo.addTime = formatTime(new Date(), 'yyyy-MM-dd HH:mm:ss')
              AccountRegister(this.adminUserInfo).then(res => {
                this.$notify({
                  title: '成功',
                  message: res.data.message,
                  type: 'success'
                });
                // this.$confirm(res.data.message, '消息')
                this.dialogClassIVIsible = false
              })
            } else {
              this.adminUserInfo.updateTime = formatTime(new Date(), 'yyyy-MM-dd HH:mm:ss')
              this.adminUserInfo.status = 1
              UsersUpdate(this.adminUserInfo).then(res => {
                this.$notify({
                  title: '成功',
                  message: res.data.message,
                  type: 'success'
                });
                // this.$confirm(res.data.message, '消息')
                this.dialogClassIVIsible = false
              })
            }

          } else {
            return false;
          }
        });
      },

      GetUser() {
        GetCompanyInvitation(this.query).then(res => {
          this.userList = res.data.data
          this.Count = res.data.records
        })
      },
      currentchange(page) {
        this.query.PageIndex = page;
        this.GetUser();
      },
      closeClassDialogT() {
        this.dialogClassIVIsibleT = false
      },

      handleDelete(val, index) {

        let that = this;
        this.$confirm('确定删除该面试信息吗？', '消息', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          callback: (action) => {
            if (action == "confirm") {
              InvitationCompanyDelete({
                ids: val.id
              }).then(res => {
                if (res.data.code == 200) {
                  this.userList.splice(index, 1);
                  this.$notify({
                    title: '成功',
                    message: res.data.message,
                    type: 'success'
                  });
                  this.GetUser();
                }
              });
            }
          },
        })
      },
      submitFormT(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            UpdateCurrentPasswordById({ UserId: this.ruleForm.UserId, Password: this.ruleForm.Password }).then(res => {
              if (res.data.code == 200) {
                this.$notify({
                  title: 'Success',
                  message: res.data.message,
                  type: 'success',
                  duration: 1000
                })
                this.dialogClassIVIsibleT = false
                // setTimeout(()=>{
                //   this.$store.dispatch('user/logout')
                //   this.$router.push(`/login?redirect=${this.$route.fullPath}`)
                // },1000)

              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleCommand(value, val) {
        let that = this;
        if (value == "del") {
          this.$confirm('确定删除该管理员？', '消息', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            callback: (action) => {
              if (action == "confirm") {
                InvitationCompanyDelete({
                  ids: val.id
                }).then(res => {
                  if (res.data.code == 200) {
                    this.$notify({
                      title: '成功',
                      message: res.data.message,
                      type: 'success'
                    });
                    this.GetUser();
                  }
                });
              }
            },
          })

        }
      },
    }
  }
</script>

<style>
  .seetingsDiv {
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: 10px;
    padding-left: 10px;
    /* height: 60px; */
    background: #efefef;
    /* line-height: 60px; */
    border-radius: 5px;
    box-shadow: 0 0 5px #cdcdcd;
    justify-content: space-between;
  }

  .seetingsDiv button {
    height: 40px;
    background-color: #304156;
    border: 0px;
    margin-left: 10px;
    box-shadow: 0 0 5px #cdcdcd;
    float: none;
    margin-right: 10px;
  }
</style>