<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="导购操作权限设置" name="first">
      <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>
    </el-tab-pane>
    <el-tab-pane label="应用可见权限设置" name="second">
      <div class="guide-setting">
        <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>
        <el-button class="save-btn" v-if="$getButtonLimit($buttonCode.saveAppsVisible)" :limit-code="$buttonCode.saveAppsVisible" :loading="loading" type="primary" @click="onSave">保存</el-button>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { getRequest, postRequest } from '@/api/api.js';
import errorMsg from '@/common/js/error.js';
export default {
  name: 'GuideSetting',
  data() {
    return {
      loading: false,
      activeName: 'first',
      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 { allList, clerkEditInfo } = result || {};
        allList = Array.isArray(allList) ? allList : [];
        this.allApps = allList;
        this.settingData.checked = allList.filter(el => el.openFlag == 1).map(el => el.applicationId);
        Object.assign(this.settingData, clerkEditInfo);
      });
    },
    onSave() {
      this.loading = true;
      const { editClerkFlag, addClerkFlag, delClerkFlag, checked } = this.settingData;
      let params = {};
      if (this.activeName == 'first') {
        params = { editClerkFlag, addClerkFlag, delClerkFlag };
      } else if (this.activeName == 'second') {
        const dataJson = this.allApps.map(el => {
          return { applicationId: el.applicationId, openFlag: checked.includes(el.applicationId) ? 1 : 0 };
        });
        params = { dataJson: JSON.stringify(dataJson) };
      }
      const methods = {
        first: params => postRequest('/haoban-manage3-web/save-clerk-edit-flag', params),
        second: params => postRequest('/haoban-manage3-web/open-or-close', params)
      };

      methods[this.activeName](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;
      }
    }
  }
  .app-auth-tip {
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 400;
    color: #303133;
    line-height: 20px;
  }
  .save-btn {
    margin-top: 40px;
  }
}
</style>
