<template>
  <div>
    <div class="public-function-div">登录页面定制</div>
    <el-form ref="form"
             class="form"
             :model="form"
             label-width="120px">
      <el-form-item label="是否显示验证码">
        <el-select v-model="form.validation"
                   placeholder="请选择是否显示验证码">
          <el-option label="否"
                     value="1"></el-option>
          <el-option label="是"
                     value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否显示登录时间">
        <el-select v-model="form.date"
                   placeholder="请选择是否显示登录时间">
          <el-option label="否"
                     value="1"></el-option>
          <el-option label="是"
                     value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否显示岗位">
        <el-select v-model="form.post"
                   placeholder="请选择是否显示岗位">
          <el-option label="否"
                     value="1"></el-option>
          <el-option label="是"
                     value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否显示班次">
        <el-select v-model="form.shift"
                   placeholder="请选择是否显示班次">
          <el-option label="否"
                     value="1"></el-option>
          <el-option label="是"
                     value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否显示班组">
        <el-select v-model="form.team"
                   placeholder="请选择是否显示班组">
          <el-option label="否"
                     value="1"></el-option>
          <el-option label="是"
                     value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否显示二维码">
        <el-select v-model="form.QR"
                   placeholder="请选择是否显示二维码">
          <el-option label="否"
                     value="1"></el-option>
          <el-option label="是"
                     value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="saveLoginStyle">保存</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
export default {
  data () {
    return {
      form: {
        validation: '1',
        date: '1',
        post: '1',
        shift: '1',
        team: '1',
        QR: '1'
      },
      list: []
    }
  },
  mounted () {
    this.getStyleConfig();
  },
  methods: {
    saveLoginStyle () {
      let that = this;
      that.formattingData();
      that.axios.put('v1/sysparameters/batchUpdate', that.list).then(function (response) {
        that.$message.success('更改成功')
        that.getStyleConfig();
      }).catch(function () {
        // do something
        that.$message.error('更改失败');
      });
    },
    getStyleConfig () {
      let that = this;
      that.axios.get('v1/sysparameters/?parentParaId=loginStyle').then(function (response) {
        that.setForm(response.data);
        that.list = response.data.list;
      }).catch(function () {
        // do something
      });
    },
    // 数据插入
    setForm (data) {
      let that = this;
      for (let i = 0; i < data.list.length; i++) {
        if (data.list[i].paraCode === 'post') {
          that.form.post = data.list[i].paraValue;
        } else if (data.list[i].paraCode === 'date') {
          that.form.date = data.list[i].paraValue;
        } else if (data.list[i].paraCode === 'shift') {
          that.form.shift = data.list[i].paraValue;
        } else if (data.list[i].paraCode === 'team') {
          that.form.team = data.list[i].paraValue;
        } else if (data.list[i].paraCode === 'validation') {
          that.form.validation = data.list[i].paraValue;
        } else if (data.list[i].paraCode === 'QR') {
          that.form.QR = data.list[i].paraValue;
        }
      }
    },
    // 数据提交格式化
    formattingData () {
      let that = this;
      for (let i = 0; i < that.list.length; i++) {
        if (that.list[i].paraCode === 'post') {
          that.list[i].paraValue = that.form.post;
        } else if (that.list[i].paraCode === 'date') {
          that.list[i].paraValue = that.form.date;
        } else if (that.list[i].paraCode === 'shift') {
          that.list[i].paraValue = that.form.shift;
        } else if (that.list[i].paraCode === 'team') {
          that.list[i].paraValue = that.form.team;
        } else if (that.list[i].paraCode === 'validation') {
          that.list[i].paraValue = that.form.validation;
        } else if (that.list[i].paraCode === 'QR') {
          that.list[i].paraValue = that.form.QR;
        }
      }
    }
  }
}
</script>

<style scoped>
.public-function-div {
  font-size: 16px;
  padding: 10px 20px;
  border-bottom: 1px solid #d5d5d5;
}
.form {
  width: 95%;
  margin: 0 auto;
  padding: 20px 0;
  text-align: center;
}
.el-form-item {
  width: 300px;
  margin: 0 auto;
  margin-bottom: 20px;
}
</style>
