<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="cell">
          <div class="cell-title">
            <div class="title-left">
              <div class="title">系统设置</div>
            </div>
          </div>
          <div class="cell-body">
            <div class="label-date-range">免费取消时间设置：</div>
            <el-date-picker v-model="valueDateRange" type="daterange" :editable="false" :clearable="false" unlink-panels range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" link :picker-options="pickerOptions" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
              style="width: 280px;">
            </el-date-picker>
            <div class="label-date">系统暂停时间设置：</div>
            <el-date-picker v-model="valueDate" type="date" placeholder="选择日期" :editable="false" :clearable="false" value-format="yyyy-MM-dd"
              format="yyyy-MM-dd" style="width: 150px;">
            </el-date-picker>
            <div class="submit-ok">
              <el-button type="primary" class="ok" @click="submit_handler">确定</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    updateSet,
    getSet
  } from '@/api/systemSet';

  export default {
    data() {
      return {
        id: '',
        valueDateRange: '',
        valueDate: '',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
      }
    },
    mounted() {
      this.get_data();
    },
    methods: {
      /**
       * 获取配置数据
       */
      get_data() {
        // 开始发送请求，获取配置数据
        getSet().then((res) => {
          // console.log('getSet', res);
          if (res.code === 200) {
            this.id = res.data.id;
            this.valueDateRange = res.data.free_cancel.split('~');
            this.valueDate = res.data.stop_book;
          } else {
            this.$message.error(res.message);
          }
        }).catch((err) => {
          // console.log(err);
          this.$message.error(err.message);
        });
      },
      /**
       * 提交修改后的配置
       */
      submit_handler() {
        //form表单校验通过,可以进行下一步操作
        const params = {
          id: this.id,
          free_cancel: this.valueDateRange[0] + '~' + this.valueDateRange[1],
          stop_book: this.valueDate
        };
        // console.log(params);
        // 开始发送更新配置请求
        updateSet(params).then((res) => {
          // console.log(res);
          if (res.code === 200) {
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
        }).catch((err) => {
          // console.log(err);
          this.$message.error(err.message);
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    background-color: #EFF2F7;
    padding: 10px;

    .el-row {

      .el-col {
        padding: 10px;

        .cell {
          padding: 30px;
          border-radius: 10px;
          background-color: #FFFFFF;
          // box-shadow: 5px 5px 15px #979797;
          box-shadow: 0px 3px 21px 0px rgba(60, 108, 254, 0.16);

          .cell-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 30px;
            border-bottom: 1px solid #CCCCCC;

            .title {
              font-size: 22px;
              font-family: Microsoft YaHei-3970(82674968);
              font-weight: bold;
              color: #1A202B;
            }
          }

          .cell-body {
            height: 630px;
            padding-left: 30px;

            .label-date-range {
              margin-bottom: 12px;
              font-size: 18px;
            }

            .label-date {
              margin: 28px 0 12px;
            }

            .submit-ok {
              margin: 28px 0 12px;

              .ok {
                background-color: #3762FE;
                border-color: #3762FE;
              }
            }
          }
        }
      }
    }
  }
</style>
