<template>
  <div class="guide-setting">
    <p class="app-auth-tip">设置导购可见应用</p>
    <el-checkbox-group v-model="settingData.checked">
      <el-checkbox v-for="el in allApps" :key="el.applicationId" :label="el.applicationId" style="margin-left: 0">{{ el.applicationName }}</el-checkbox>
    </el-checkbox-group>
    <el-button class="save-btn" v-if="$getButtonLimit($buttonCode.saveAppsVisible)" :limit-code="$buttonCode.saveAppsVisible" :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: 'AppVisibleSetting',
  data() {
    return {
      loading: false,
      settingData: {
        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 { allList } = result || {};
        allList = Array.isArray(allList) ? allList : [];
        this.allApps = allList;
        this.settingData.checked = allList.filter(el => el.openFlag == 1).map(el => el.applicationId);
      });
    },
    onSave() {
      this.loading = true;
      const { checked } = this.settingData;
      const dataJson = this.allApps.map(el => {
        return { applicationId: el.applicationId, openFlag: checked.includes(el.applicationId) ? 1 : 0 };
      });
      const params = { dataJson: JSON.stringify(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: 0 20px 20px;
  .app-auth-tip {
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 400;
    color: #303133;
    line-height: 20px;
  }
  .save-btn {
    margin-top: 40px;
  }
}
</style>
