<template>
  <div class="action" v-loading="loading">
    <div class="action_show_box" v-if="powers.some((i) => i == '001')">
      <ul class="role-list fl">
        <p class="role-list__title">店铺列表</p>
        <p
          v-if="roleList.length == 0"
          style="line-height: 60px; text-align: center; color: #909399"
        >
          暂无数据
        </p>

        <li
          v-for="(item, index) in roleList"
          :key="'role' + index"
          class="role-list__item"
          :class="{ active: item.id == roleActiveId }"
          @click="!isBtnDisabled && switchRoleHandle(item)"
        >
          {{ item.store_name }}
          <i v-if="isBtnDisabled && item.id == roleActiveId" class="el-icon-loading" />
        </li>
      </ul>

      <div class="rule-view fr">
      <div v-if="sitem&&sitem.id">
      
        <div class="shopTrim-add-main">
          <el-row class="shopTrim-add">
            <el-col :span="8" class="shopTrim-add-el-col">
              <div class="label">店铺名称：</div>
              <div class="name">{{ sitem.store_name }}</div>
            </el-col>
            <el-col :span="8" class="shopTrim-add-el-col">
              <div class="label">供应商名称：</div>
              <div class="name">{{ sitem.supplier?sitem.supplier.name:''}}</div>
            </el-col>
          </el-row>
        </div>
        <!-- :tab-position="'left'" -->
        <el-tabs  v-model="activeName" size="medium">
          <el-tab-pane label="基础信息" name="1">
            <baseData :store_id="roleActiveId" :sitem="sitem"  v-if="activeName==='1'"/>
          </el-tab-pane>
          <el-tab-pane label="曾办活动" name="2">
            <activity :store_id="roleActiveId" v-if="activeName==='2'"/>
          </el-tab-pane>
          <el-tab-pane label="会议室信息" name="4">
            <conference :store_id="roleActiveId" v-if="activeName==='4'"/>
          </el-tab-pane>
          <el-tab-pane label="客房信息" name="5">
            <guest :store_id="roleActiveId" v-if="activeName==='5'"/>
          </el-tab-pane>
          <el-tab-pane label="会议服务设施" name="6">
            <service :store_id="roleActiveId" v-if="activeName==='6'" />
          </el-tab-pane>
          <el-tab-pane label="店铺详情图" name="3">
            <pictureImg :store_id="roleActiveId" v-if="activeName==='3'" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div v-else>
      请选择店铺
      </div>
      </div>
    </div>

    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
<script>
import asyncRequest from "@/apis/service/operate/shopTrim";
import baseData from "./baseData/index";
import conference from "./conference/index";
import guest from "./guest/index";
import service from "./service/index";
import activity from "./activity/index";
import pictureImg from "./picture/index";
export default {
  name: "shopTrim",
  components: {
    baseData,
    conference,
    guest,
    service,
    activity,
    pictureImg,
  },
  data() {
    return {
      activeName: "1",
      sitem: null,
      // 按钮是否可点击
      isBtnDisabled: true,
      // 当前角色
      roleActiveId: "",
      // 角色列表
      roleList: [],
      loading: false,
    };
  },
  computed: {
    powers() {
      const tran =
        this.$store.getters.btnList.find((i) => i.menu_route == "shopTrim") || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  
  },
  mounted() {
    this.initRoleList();
  },

  methods: {
    // 切换角色
    switchRoleHandle(item) {
      this.roleActiveId = item.id;
      this.sitem=item
      this.isBtnDisabled = false;
      // this.$nextTick(async () => {
      //   await this.refreshRoleDetail(String(this.roleActiveId));
      // });
    },
    // 保存
    async save() {
      this.action_data = []; // 字段数据
      this.action = []; // 功能数据
      let arr = [];
      this.actionList.forEach((x) => {
        x.children.forEach((y) => {
          this.action_data.push(...y.fieldList);
          this.action.push(...y.checkList);
          if (String(y.is_private_change) === "1") {
            arr.push(String(y.id));
          }
        });
      });

      // this.action_data.length === 0 || 和字段
      if (this.action.length === 0) {
        this.$message.warning("请选择功能!");
      } else {
        const model = {
          role_id: this.roleActiveId,
          action: this.action,
        };

        const loadding = this.$loading();
        const res = await asyncRequest.update(model);
        if (res && res.code === 1) {
          this.$notify.success({
            title: "保存成功！",
            message: "",
          });
        }
        loadding.close();
      }
    },
    // 刷新角色详情
    async refreshRoleDetail(roleid) {
      this.isBtnDisabled = true;
      const { code, data } = await asyncRequest.detail({ role_id: roleid });
      if (code === 1) {
        this.sitem = data;
      }else{
        this.sitem=null;
      }
      this.isBtnDisabled = false;
    },

    // 初始化角色列表
    async initRoleList() {
      const { code, data } = await asyncRequest.list({ page: 1, limit: 999999 });
      if (code === 1) {
        const { list } = data;
        this.roleList = [].concat(list);
        if (this.roleList.length > 0) {
          await this.switchRoleHandle(this.roleList[0]);
        }
      }
    },
  
  },
};
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.action {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .action_show_box {
    // position: relative;
    // height: calc(100% - 50px);
    // min-height: calc(100% - 50px);

    display: relative;
    width: 100%;
    height: calc(100vh - 50px);
    overflow: hidden;
    text-align: left;
    //左侧
    .role-list {
      height: 100%;
      overflow-y: auto;
      width: 200px;
      padding: 8px 16px;
      min-height: 100%;
      flex-shrink: 0;
      border-right: 2px solid #dfe6ec;
      @include scrollBar();
      &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 2px;
        background-color: #e4e7ed;
        z-index: 1;
      }
      .role-list__title {
        color: #b4b6c0;
        line-height: 32px;
      }
      .role-list__item {
        position: relative;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        height: 32px;
        line-height: 32px;
        padding-left: 8px;
        color: rgb(48, 49, 51);
        cursor: pointer;
        i {
          position: absolute;
          right: 0;
          line-height: 32px;
        }
      }
      .role-list__item.active {
        color: #6954f0;
        background: #f7f7f7;
      }
    }
    //右侧
    .rule-view {
      height: 100%;
      //calc(100% - 50px);
      width: calc(100% - 200px);
      overflow-y: auto;
      @include scrollBar();
      // padding: 0 0 0 16px;
      .shopTrim-add-main {
        padding: 0 0 0 0;
        width: 100%;
        box-sizing: border-box;

        .shopTrim-add {
          // border-left: 1px solid #ebeef5 !important;
          width: 100%;
          box-sizing: border-box;

          // &.borderBottom {
          border-bottom: 1px solid #ebeef5 !important;
          // }

          .shopTrim-add-el-col {
            display: flex;
            align-items: stretch;
            //  width: 100%;
            box-sizing: border-box;
            //
            border-right: 1px solid #ebeef5 !important;
            .shopTrim-add-el-col {
              border-right: 0 !important;
            }

            .label {
              width: 100px;
              line-height: 35px;
              text-align: right;
              background: #fafafa !important;
              font-weight: 400 !important;
              color: #909399 !important;
              font-size: 12px !important;
              border-top: 1px solid #ebeef5 !important;
              border-right: 1px solid #ebeef5 !important;
            }

            .name {
              width: calc(100% - 100px);
              text-align: left;
              line-height: 23px;
              font-size: 12px !important;
              border-top: 1px solid #ebeef5 !important;
              padding: 6px 10px 6px 10px !important;
              word-break: break-all !important;
              color: #606266 !important;

              .el-icon-warning-outline {
                font-size: 16px !important;
                margin: 4px 6px 0 0 !important;
                color: #abaea5 !important;

                &:hover {
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
