<template>
  <div class="guide-setting">
    <div class="guide-auth-list">
      <div class="guide-auth-item">
        <span class="auth-item-label">允许编辑导购信息</span>
        <el-switch v-model="settingData.editClerkFlag" :active-value="1" :inactive-value="0"></el-switch>
      </div>
      <div class="guide-auth-item">
        <span class="auth-item-label">允许店长添加导购</span>
        <el-switch v-model="settingData.addClerkFlag" :active-value="1" :inactive-value="0"></el-switch>
      </div>
      <div class="guide-auth-item">
        <span class="auth-item-label">允许店长删除导购</span>
        <el-switch v-model="settingData.delClerkFlag" :active-value="1" :inactive-value="0"></el-switch>
      </div>
    </div>
    <el-button class="save-btn" v-if="$getButtonLimit($buttonCode.saveGuideSetting)" :limit-code="$buttonCode.saveGuideSetting" :loading="loading" type="primary" @click="onSave">保存</el-button>
  </div>
</template>

<script>
import { getRequest, postRequest } from '@/api/api.js';
import errorMsg from '@/common/js/error.js';
export default {
  name: 'GuideAuthSetting',
  data() {
    return {
      loading: false,
      settingData: {
        editClerkFlag: 0,
        addClerkFlag: 0,
        delClerkFlag: 0
      }
    };
  },
  created() {
    this.getSetting();
  },
  methods: {
    getSetting() {
      getRequest('/haoban-manage3-web/application-open-close-list', {}).then(res => {
        const { errorCode, result } = res.data || {};
        if (errorCode != 1) {
          return errorMsg.errorMsg(res.data);
        }
        let { clerkEditInfo } = result || {};
        Object.assign(this.settingData, clerkEditInfo);
      });
    },
    onSave() {
      this.loading = true;
      const { editClerkFlag, addClerkFlag, delClerkFlag } = this.settingData;
      const params = { editClerkFlag, addClerkFlag, delClerkFlag };

      postRequest('/haoban-manage3-web/save-clerk-edit-flag', params)
        .then(res => {
          const { errorCode } = res.data || {};
          if (errorCode != 1) {
            return errorMsg.errorMsg(res.data);
          }
          this.$message.success('保存成功');
        })
        .finally(() => {
          setTimeout(() => (this.loading = false), 100);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.guide-setting {
  padding: 0 20px 20px;
  .guide-auth-list {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    .guide-auth-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 0 20px;
      height: 67px;
      + .guide-auth-item {
        border-top: 1px solid #dcdfe6;
      }
      .auth-item-label {
        margin-right: 60px;
        font-size: 14px;
        font-weight: 400;
        color: #303133;
      }
    }
  }
  .save-btn {
    margin-top: 40px;
  }
}
</style>
