<template>
  <div class="container">
    <div class="card">
      <div class="title">
        库存盘点
        <Button type="primary" class="start"  @on-change="handle('', 'FourFloorBeginCheckTime')">4楼自动盘点</Button>
        <Button type="primary" class="start"  @on-change="handle('', 'FirstFloorBeginCheckTime')">1楼自动盘点</Button>
      </div>
      <div class="item">自动盘点
            <i-switch v-model="AutoCheck" size="large" class="btn" @on-change="handle($event, 'AutoCheck')">
              <span slot="open">开启</span>
              <span slot="close">关闭</span>
            </i-switch>
        </div>
      <div class="item">每日盘点
        <i-switch v-model="EveryDayCheck" size="large" class="btn" @on-change="handle($event, 'EveryDayCheck')">
          <span slot="open">开启</span>
          <span slot="close">关闭</span>
        </i-switch>
      </div>
      <div class="item">每月盘点
        <i-switch v-model="EveryMonthCheck" size="large" class="btn" @on-change="handle($event, 'EveryMonthCheck')">
          <span slot="open">开启</span>
          <span slot="close">关闭</span>
        </i-switch>
      </div>
    </div>
    <div class="card">
      <div class="title">发起申购</div>
      <div class="item">自动申购
        <i-switch v-model="AutoApplyPurchase" size="large" class="btn" @on-change="handle($event, 'AutoApplyPurchase')">
          <span slot="open">开启</span>
          <span slot="close">关闭</span>
        </i-switch>
      </div>
    </div>
    <div class="card">
      <div class="title">合同付款</div>
      <div class="item">自动发起付款
        <i-switch v-model="AutoPay" size="large" class="btn" @on-change="handle($event, 'AutoPay')">
          <span slot="open">开启</span>
          <span slot="close">关闭</span>
        </i-switch>
      </div>
    </div>
    <div class="card">
      <div class="title">安全库存</div>
      <div class="item">自动更新
        <i-switch v-model="AutoUpdateSafeStock" size="large" class="btn" @on-change="handle($event, 'AutoUpdateSafeStock')">
          <span slot="open">开启</span>
          <span slot="close">关闭</span>
        </i-switch>
      </div>
    </div>
  </div>
</template>

<script>
import { EditConfig, GetConfig } from '@/api/baseData'
export default {
  name: 'back_office_management',
  data () {
    return {
      data: [],
      AutoCheck: false,
      EveryDayCheck: false,
      EveryMonthCheck: false,
      AutoApplyPurchase: false,
      AutoPay: false,
      AutoUpdateSafeStock: false
    }
  },
  methods: {
    handle (e, key) {
      console.log(e, key)
      EditConfig({
        key: key,
        value: e ? 1 : 0
      }).then(res => {
        if (res.code === 0) {
          this.$Message.info(res.msg || '操作成功!')
          this.getList()
        }
      })
    },
    getList () {
      GetConfig().then(res => {
        if (res.code === 0) {
          this.data = res.result
          this.data.forEach(item => {
            if (item.value === '1') {
              this[item.key] = true
            } else {
              this[item.key] = false
            }
          })
        }
      })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

<style lang="less" scoped>
  .container {
    display: inline;
    padding: 20px;
    .card {
      .title {
        margin-bottom: 10px;
        font-size: 18px;
        font-weight: bold;
        .start {
          float: right;
          &:first-child {
            margin-left: 10px;
          }
        }
      }
      .item {
        padding-bottom: 10px;
        font-size: 16px;
        padding-left: 20px;
        padding-bottom: 15px;
        display: flex;
         .btn  {
           margin-left: 30px;
         }
      }
    }
    }
</style>
