<template>
  <div class="guide-setting">
    <dm-sub-title class="guide-setting-title">导购操作权限设置</dm-sub-title>
    <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>
    <dm-sub-title class="guide-setting-title">应用可见权限设置</dm-sub-title>
    <p class="app-auth-tip">设置导购可见应用</p>
    <el-row>
      <el-checkbox-group v-model="settingData.checked">
        <el-col :span="3" v-for="el in allApps" :key="el.applicationId" style="margin-bottom: 12px">
          <el-checkbox :label="el.applicationId">{{ el.applicationName }}</el-checkbox>
        </el-col>
      </el-checkbox-group>
    </el-row>
    <hb-form-bottom v-if="$getButtonLimit($buttonCode.saveGuideSetting)">
      <el-button :limit-code="$buttonCode.saveGuideSetting" :loading="loading" type="primary" @click="onSave">保存</el-button>
    </hb-form-bottom>
  </div>
</template>

<script>
import { getRequest, postRequest } from '@/api/api.js';
import errorMsg from '@/common/js/error.js';
export default {
  name: 'GuideSetting',
  data() {
    return {
      loading: false,
      settingData: {
        editClerkFlag: 0,
        addClerkFlag: 0,
        delClerkFlag: 0,
        checked: []
      },
      allApps: []
    };
  },
  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 { open, close, clerkEditInfo } = result || {};
        open = Array.isArray(open) ? open : [];
        close = Array.isArray(close) ? close : [];
        this.allApps = open.concat(close);
        this.settingData.checked = open.map(el => el.applicationId);
        Object.assign(this.settingData, clerkEditInfo);
      });
    },
    onSave() {
      this.loading = true;
      const { editClerkFlag, addClerkFlag, delClerkFlag, checked } = this.settingData;
      const params = { editClerkFlag, addClerkFlag, delClerkFlag, dataJson: '' };
      params.dataJson = this.allApps.filter(el => checked.includes(el.applicationId));
      params.dataJson = JSON.stringify(params.dataJson);

      postRequest('/haoban-manage3-web/open-or-close', { 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: 20px;
  .guide-setting-title {
    margin-bottom: 22px;
  }
  .guide-auth-list {
    margin-bottom: 44px;
    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;
      }
    }
  }
  .app-auth-tip {
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 400;
    color: #303133;
    line-height: 20px;
  }
}
</style>
