<template>

  <div class="m-body">
    <!-- 项目滞留超期提醒	-->
    <el-tag class="mh">
      <div class="h-left">
        <div class="line">
          项目滞留超期提醒
        </div>
      </div>
      <div class="h-right">

        <button class="h-right-two"
                @click="saveRemind()">保存设置</button>
        <button class="h-right-one"
                @click="defaultRemind()">恢复默认</button>
        <el-button class="diaCancel"
                   @click="diaCancel()">取消返回</el-button>
      </div>
    </el-tag>
    <el-form :inline="false"
             :model="remindForm"
             ref="remindForm"
             :label-width="'200px'">

      <el-form-item class="mh-child"
                    label="设定核算单位天/日起止时间："
                    prop="startTime">
        <el-time-picker class="overtime-input"
                        arrow-control
                        prefix-icon=el-icon-date
                        v-model="remindForm.startTime"
                        :picker-options="{
			        selectableRange: '00:00:00'+ '-' + '23:59:59' ,
			     }"
                        placeholder="任意时间点"
                        value-format="HH:mm:ss">
        </el-time-picker>
        <span style=" padding: 20px;">至</span>
        <el-time-picker class="overtime-input"
                        arrow-control
                        prefix-icon=el-icon-date
                        v-model="remindForm.endTime"
                        :picker-options="{		 
			         selectableRange: remindForm.startTime + '-' + '23:59:59' ,
			      }"
                        placeholder="任意时间点"
                        value-format="HH:mm:ss">
        </el-time-picker>
      </el-form-item>
      <el-form-item class="mh-child"
                    label="设定滞留超期时间："
                    prop="detentionDays">

        <el-input-number class="overtime-input"
                         v-model="remindForm.detentionDays"></el-input-number>
        <span style=" padding: 25px;">/</span>
        <el-select v-model="remindForm.calculation"
                   placeholder="请选择"
                   class="overtime-input">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>

      </el-form-item>

      <!-- 设定即将超期时间提醒 -->
      <el-form-item class="mh-child"
                    label="设定即将超期时间提醒："
                    prop="remindTime">

        <el-input-number class="overtime-input"
                         v-model="remindForm.remindTime"></el-input-number>
        <span style=" padding: 25px;">单位天</span>

      </el-form-item>
      <!-- 统一定时消息推送时间 -->
      <el-form-item class="mh-child"
                    label="统一定时消息推送时间："
                    prop="pushTime">

        <el-time-select class="overtime-input"
                        v-model="remindForm.pushTime"
                        :picker-options="{
		      start: '00:00',
		      step: '00:5',
		      end: '23:59'
		    }"
                        placeholder="选择时间">
        </el-time-select>

      </el-form-item>

    </el-form>

    <!-- 议题发布前经网络员审核 -->
    <el-tag class="mh">
      <div class="h-left">
        <div class="line">
          议题发布前经网络员审核
        </div>
      </div>
      <div class="h-right">

        <button class="h-right-two"
                @click="saveReview()">保存设置</button>
        <button class="h-right-one"
                @click="defaultReview()">恢复默认</button>
      </div>
    </el-tag>

    <el-form :inline="false"
             :model="reviewForm"
             ref="reviewForm"
             :label-width="'200px'">
      <el-form-item class="mh-child"
                    label="议题发布前经网络员审核："
                    prop="auditSwitch">
        <el-switch v-model="auditSwitchShow"
                   active-text="开启"
                   inactive-text="关闭"
                   class="overtime-input">
        </el-switch>
      </el-form-item>
    </el-form>

    <!-- 待办事项短信通知	 -->
    <el-tag class="mh">
      <div class="h-left">
        <div class="line">
          待办事项短信通知
        </div>
      </div>
      <div class="h-right">

        <button class="h-right-two">保存设置</button>
        <button class="h-right-one"
                @click="daibanshi()">恢复默认</button>
      </div>
    </el-tag>

    <el-form :inline="false"
             :model="msgForm"
             ref="msgForm"
             :label-width="'200px'">
      <el-form-item class="mh-child"
                    label="待办事项发送短信通知："
                    prop="switch">
        <el-switch v-model="msgForm.switchShow"
                   active-text="开启"
                   inactive-text="关闭"
                   class="overtime-input">
        </el-switch>
      </el-form-item>

      <el-form-item class="mh-child"
                    label="剩余短信数量："
                    prop="remindTime">

        <el-input-number class="overtime-input"
                         v-model="msgForm.remain"></el-input-number>
        <span style=" padding: 25px;">单位条</span>

      </el-form-item>
    </el-form>

    <!-- 小组审核机制-->
    <el-tag class="mh">
      <div class="h-left">
        <div class="line">
          小组审核机制
        </div>
      </div>
      <div class="h-right">

        <button class="h-right-two">保存设置</button>
        <button class="h-right-one">恢复默认</button>
      </div>
    </el-tag>
    <el-form :inline="false"
             :model="groupForm"
             ref="groupForm"
             :label-width="'200px'">
      <el-form-item class="mh-child"
                    label="新建小组进组需小组审核："
                    prop="switch">
        <el-switch v-model="reviewForm.switchShow"
                   active-text="开启"
                   inactive-text="关闭"
                   class="overtime-input">
        </el-switch>
      </el-form-item>
    </el-form>

    <!-- 其他设置-->
    <el-tag class="mh">
      <div class="h-left">
        <div class="line">
          其他设置
        </div>
      </div>
      <div class="h-right">

        <button class="h-right-two">保存设置</button>
        <button class="h-right-one">恢复默认</button>
      </div>
    </el-tag>
  </div>

</template>
<script>
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from "@/js/dai/request";

let loading // 加载动画

export default {
  data () {
    return {
      options: [{
        value: 'work',
        label: '工作日'
      }, {
        value: 'calendar',
        label: '日历天'
      }],
      customerId: "",
      customerName: "",

      remindForm: {
        startTime: '10:10:10',
        endTime: '12:15:16',
        detentionDays: "",//可滞留天数
        calculation: "calendar",//计算方式 工作日work  日历天calendar
        remindTime: "",//即将超期提醒时间
        pushTime: "08:00",//推送时间 默认 上午8点
      },
      reviewForm: {
        auditSwitch: "open",//已开启审核：open； 无需审核：close
      },
      auditSwitchShow: true,//已开启审核：open； 无需审核：close

      msgForm: {
        switch: "open",
        switchShow: true,
        remain: 3//剩余短信数量
      },

      groupForm: {
        switch: "open",
        switchShow: true,
      },

    }
  },
  props: {

  },
  watch: {

  },
  mounted () {
    // this.init()
  },

  methods: {
    //配置初始化
    async initData (customerId, customerName) {
      this.customerId = customerId
      this.customerName = customerName
      this.startLoading()
      await this.initRemind()
      await this.initReview()
      this.endLoading()
    },
    //滞留提醒初始化
    async initRemind () {

      // const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/project/parameter/remindinit"
      const url = "/gov/project/parameter/remindinit"

      const params = {
        customerId: this.customerId
      }
      const { data, code, msg, internalMsg } = await requestPost(url, params)
      if (code === 0) {
        this.remindForm = data
      } else {
        this.$message.error(msg + "：" + internalMsg)
      }

    },

    //议题发布审核初始化
    async initReview () {
      this.startLoading()
      // const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/parameter/reviewinit"
      const url = "/gov/issue/parameter/reviewinit"

      const params = {
        customerId: this.customerId
      }
      const { data, code, msg, internalMsg } = await requestPost(url, params)
      if (code === 0) {

        this.reviewForm = data
        if (data.auditSwitch === "open") {
          this.auditSwitchShow = true
        } else {
          this.auditSwitchShow = false
        }
      } else {
        this.$message.error(msg + "：" + internalMsg)
      }

    },

    //保存滞留提醒
    async saveRemind () {
      this.startLoading()
      // const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/project/parameter/remindsave"
      const url = "/gov/project/parameter/remindsave"

      const params = {
        customerId: this.customerId,
        ...this.remindForm
      }
      const { data, code, msg, internalMsg } = await requestPost(url, params)
      if (code === 0) {
        this.$message.success("保存成功")
      } else {
        this.$message.error(msg + "：" + internalMsg)
      }
      this.endLoading()
    },

    //保存议题发布审核
    async saveReview () {
      this.startLoading()
      // const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/parameter/reviewsave"
      const url = "/gov/issue/parameter/reviewsave"
      this.reviewForm.auditSwitch = this.auditSwitchShow ? 'open' : 'close'
      const params = {
        customerId: this.customerId,
        ...this.reviewForm
      }
      const { data, code, msg, internalMsg } = await requestPost(url, params)
      if (code === 0) {
        this.$message.success("保存成功")
      } else {
        this.$message.error(msg + "：" + internalMsg)
      }
      this.endLoading()
    },
    //恢复滞留提醒
    async defaultRemind () {
      this.startLoading()
      await this.setDefaultRemind()
      await this.initRemind()
      this.endLoading()
    },
    async setDefaultRemind () {

      // const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/project/parameter/reminddefault"
      const url = "/gov/project/parameter/reminddefault"

      const params = {
        customerId: this.customerId,
      }
      const { data, code, msg, internalMsg } = await requestPost(url, params)
      if (code === 0) {

      } else {
        this.$message.error(msg + "：" + internalMsg)
      }

    },
    async defaultReview () {
      this.startLoading()
      await this.setDefaultReview()
      await this.initReview()
      this.endLoading()
    },
    //恢复议题发布审核
    async setDefaultReview () {

      // const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/parameter/reviewdefault"
      const url = "/gov/issue/parameter/reviewdefault"

      const params = {
        customerId: this.customerId,
      }
      const { data, code, msg, internalMsg } = await requestPost(url, params)
      if (code === 0) {

      } else {
        this.$message.error(msg + "：" + internalMsg)
      }



    },
    diaCancel () {
      this.$emit('cancleBack')
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }

  },

}
</script>

<style lang="scss" scoped>
.line {
  position: relative;

  width: 120px;
  border-bottom: 3px solid #17b3a3;
}
.el-card__body {
  padding: 0px;
}
.m-body {
  width: 100%;
  padding-top: 0px;
}
.select-date {
  margin-left: 100px;
}

.mh {
  width: 100%;
  height: 50px;
  display: flex;
  background-color: white;
  border-color: white;
  color: black;
  padding: 0px;
  border-bottom: 2px solid #eeeeee;
}
.mh-child {
  margin-top: 30px;
  position: relative;
}
/* div.el-switch.is-checked{
			
		} */
div.el-switch {
  margin-left: 60px;
}
.el-switch__core {
  height: 25px;
  width: 50px;
  border-radius: 25px;
}
.el-switch__core:after {
  width: 20px;
  height: 20px;
}
.el-switch.is-checked .el-switch__core::after {
  margin-left: -20px;
}

.h-left {
  padding: 9px;
  margin: auto 0;
  font-size: 15px;
  position: relative;
  width: 70%;
  padding-left: 0px;
  padding-top: 15px;
  padding-bottom: 2px;
}
.h-right {
  padding-bottom: 2px;
  padding-top: 8px;
  font-size: 15px;
  position: relative;
  width: 30%;
}
.h-right-one {
  background-color: #d4d2ce;
  color: black;
  border: 0px;
  width: 30%;
  height: 30px;
  text-align: center;
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 4px;
  float: right;
}
.h-right-one:hover {
  background-color: #deddda;
  color: black;
  border: 0px;
  width: 30%;
  height: 30px;
  text-align: center;
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 4px;
  float: right;
}
.h-right-two {
  background-color: #17b3a3;
  color: white;
  width: 30%;
  height: 30px;
  border: 0px;
  margin-left: 10px;
  text-align: center;
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 4px;
  float: right;
}
.h-right-two:hover {
  background-color: #18bfac;
}

.diaCancel {
  float: right;
  margin-right: 10px;
  width: 30%;
  height: 30px;
  padding: 0px;
  font-size: 15px;
}

.set-accont {
  width: 250px;
  text-align: right;
  font-size: 15px;
  padding-right: 30px;
  background-color: white;
  color: black;
  border-color: white;
}
.set-overtime {
  width: 250px;
  text-align: right;
  font-size: 16px;
  padding-right: 30px;
  background-color: white;
  color: black;
  border-color: white;
}
.overtime-input {
  width: 230px;
  border-radius: 0px;
}
.el-input--medium {
  text-align: center;
}
input.el-input__inner {
  border-radius: 0px;
  text-align: center;
  padding-right: 5px;
}
.btn {
  background-color: #f1f1f1;
  border: 1px solid #dcdfe6;
}
.el-from-item :hover {
  background-color: #f7f7f7 !important;
  border: 1px solid #dcdfe6;
}
.btn-add {
  font-size: 20px;
  height: 36px;
  padding-top: 2px;
  padding-left: 8px;
  padding-right: 22px;
  padding-bottom: 6px;
  border-radius: 0px;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  width: 10px;
}
.btn-delet {
  font-size: 20px;
  height: 36px;
  padding-top: 2px;
  padding-left: 12px;
  padding-right: 18px;
  padding-bottom: 6px;
  border-radius: 0px;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  width: 10px;
}

div.set-overtime.el-input.el-input--medium.el-input--suffix {
  padding-right: 0px;
}
</style>
