<template>
  <div class="centent app-container">
    <div class="menu-container">
      <el-tabs
        v-model="editableTabsValue"
        type="card"
        @tab-click="selectedTab()"
      >
        <el-tab-pane
          v-for="(item, index) in tgList"
          :key="item.name"
          :label="item.name"
          :name="item.name"
        >
          {{ item.content }}
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="button-box">
      <div>
        <el-button
          v-for="(item, index) in buttonText"
          :key="index"
          :class="{ selected: selectedButton === item.productType }"
          plain
          @click="selected(item.productType)"
          >{{ item.showName }}</el-button
        >
        <el-button
          class="custom-button selected"
          type="primary"
          @click="copyUrl($event)"
          >复制投顾主页链接</el-button
        >
      </div>
    </div>
    <div class="content-box">
      <ShortTab v-if="selectedButton === 35" ref="shortTab" />
      <LiveTab v-if="selectedButton === 3" ref="liveTab" :is-yx="true" />
      <CourseTab v-if="selectedButton === 32" ref="courseTab" :is-yx="true" />
      <CircleTab v-if="selectedButton === 41" ref="CircleTab" />
    </div>
    <el-dialog
      :visible.sync="dialogTab"
      :close-on-click-modal="false"
      title="自定义tab"
      append-to-body
    >
      <div ref="contentContainer" class="dialog-content">
        <div
          v-for="(item, index) in buttonTextEdit"
          :key="item.productType"
          class="dialog-content-item"
          draggable="true"
        >
          <div class="dialog-content-item-left">{{ item.showName }}</div>
          <div class="dialog-content-item-right">
            <el-switch
              v-model="item.status"
              :active-value="1"
              :inactive-value="2"
            />
            <i
              class="el-icon-edit-outline"
              style="font-size: 24px;margin-left: 10px;cursor: pointer;"
              @click="openEditTab(item)"
            />
            <i
              class="el-icon-set-up"
              style="font-size: 24px;margin-left: 10px;cursor: pointer;"
            />
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="editTab()"
          >提交</el-button
        >
        <el-button size="mini" @click="cancelTab()">取消</el-button>
      </div>
    </el-dialog>
    <!-- 修改名称 -->
    <el-dialog
      :visible.sync="editDialog"
      :close-on-click-modal="false"
      :title="titleList[editItem.productType]"
      append-to-body
    >
      <el-form>
        <el-form-item>
          <el-input v-model="editItem.showName" label="请输入名称" />
        </el-form-item>
        <el-form-item>
          系统推荐名称
        </el-form-item>
        <el-form-item>
          <el-button
            v-for="(item, index) in buttonTextEditList[editItem.productType]"
            :key="index"
            @click="editItem.showName = JSON.parse(JSON.stringify(item))"
            >{{ item }}</el-button
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="submitEditDialog()"
          >提交</el-button
        >
        <el-button size="mini" @click="cancelEditDialog()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Sortable from "sortablejs";
import LiveTab from "./components/LiveTab.vue";
import CourseTab from "./components/CourseTab.vue";
import { mapGetters } from "vuex";
import { tgList, mainTabInfoList, mainTabInfoSave } from "@/api/adviser";
import { handleClipboard } from "@/views/liveBroadcast/manage/config";
import ShortTab from "./components/ShortTab.vue";
import { urlResize } from "@/api/videoLive";
import CircleTab from "./components/CircleTab.vue";
export default {
  components: { LiveTab, CourseTab, ShortTab, CircleTab },
  data() {
    return {
      editableTabsValue: "",
      selectedButton: null,
      buttonText: [],
      tgList: [],
      advisorId: null,
      dialogTab: false,
      sortable: null,
      buttonTextEdit: [],
      editDialog: false,
      editItem: {},
      titleList: {
        3: "修改直播tab名称",
        6: "修改图文tab名称",
        31: "修改甄选服务tab名称",
        32: "修改课程tab名称",
        35: "修改短视频tab名称"
      },
      buttonTextEditList: {
        3: ["视频直播", "直播课", "直播"],
        6: ["图文直播", "圈子", "服务圈", "财富圈"],
        31: ["甄选服务", "会员"],
        32: ["课程", "产品", "系列课"],
        35: ["短视频", "视频", "作品"]
      }
    };
  },
  mounted() {
    this.getTgList();
  },
  computed: {
    ...mapGetters(["user"])
  },
  watch: {
    editableTabsValue(value) {
      if (value === "0" && value === null) return;
      this.$nextTick(() => {
        if (this.selectedButton === 3 && this.$refs.liveTab) {
          const selectTg = this.tgList.find(item => item.name === value);
          this.advisorId = selectTg.id;
          this.$refs.liveTab.getList(this.advisorId);
        } else if (this.selectedButton === 32 && this.$refs.courseTab) {
          const selectTg = this.tgList.find(item => item.name === value);
          this.advisorId = selectTg.id;
          this.$refs.courseTab.getList(this.advisorId);
        }
      });
    },
    selectedButton(value) {
      if (value) {
        this.$nextTick(() => {
          if (this.selectedButton === 3 && this.$refs.liveTab) {
            const selectTg = this.tgList.find(item => item.name === value);
            this.advisorId = selectTg.id;
            this.$refs.liveTab.getList(this.advisorId);
          } else if (this.selectedButton === 32 && this.$refs.courseTab) {
            const selectTg = this.tgList.find(
              item => item.name === this.editableTabsValue
            );
            this.advisorId = selectTg.id;
            this.$refs.courseTab.getList(this.advisorId);
          }
        });
      }
    },
    advisorId(value) {
      if (value) {
        this.getMainTabInfoList();
      }
    }
  },
  methods: {
    initSortable() {
      this.sortable = Sortable.create(this.$refs.contentContainer, {
        animation: 150, // 动画时间
        ghostClass: "ghost", // 鬼影类名
        onEnd: ({ newIndex, oldIndex }) => {
          this.updateOrder(newIndex, oldIndex);
        }
      });
    },
    updateOrder(newIndex, oldIndex) {
      if (newIndex !== oldIndex) {
        const movedItem = this.buttonTextEdit.splice(oldIndex, 1)[0];
        this.buttonTextEdit.splice(newIndex, 0, movedItem);
      }
    },
    selected(productType) {
      this.selectedButton = productType;
      this.$nextTick(() => {
        if (this.selectedButton === 3 && this.$refs.liveTab) {
          this.$refs.liveTab.getList(this.advisorId);
        } else if (this.selectedButton === 32 && this.$refs.courseTab) {
          this.$refs.courseTab.getList(this.advisorId);
        } else if (this.selectedButton === 35 && this.$refs.shortTab) {
          this.$refs.shortTab.queryList(this.advisorId);
        } else if (this.selectedButton === 41 && this.$refs.CircleTab) {
          this.$refs.CircleTab.queryList(this.advisorId);
        }
      });
    },
    async getTgList(name) {
      const ret = await tgList({
        current: 1,
        name,
        showName: "",
        size: 100000,
        staffNo: "",
        status: 3,
        deptId: this.user.user.deptId
      });
      if (ret.code === 0) {
        this.tgList = ret.data.list;
        this.advisorId = this.tgList[0].id;
        this.editableTabsValue = this.tgList[0].name;
        // 进来获取当前投顾的tab列表
      }
    },
    selectedTab() {
      const selectTg = this.tgList.find(
        item => item.name === this.editableTabsValue
      );
      this.advisorId = selectTg.id;
    },
    // 打开自定义对话框
    customDialog() {
      this.dialogTab = true;
      this.$nextTick(() => {
        this.initSortable();
      });
    },
    async getMainTabInfoList() {
      const data = {
        id: this.advisorId
      };
      const res = await mainTabInfoList(data);
      if (res.code === 0) {
        this.buttonText = res.data;
        this.buttonText.sort((a, b) => a.sort - b.sort);
        this.buttonTextEdit = JSON.parse(JSON.stringify(this.buttonText));
        this.selectedButton = this.buttonText[0].productType;
        this.selected(this.selectedButton);
      }
    },
    async editTab() {
      this.buttonTextEdit.forEach((item, index) => {
        item.sort = index + 1;
      });
      const data = {
        advisorId: this.advisorId,
        tabList: this.buttonTextEdit
      };
      const res = await mainTabInfoSave(data);
      if (res.code === 0) {
        this.$message.success("修改成功");
        this.dialogTab = false;
        this.getMainTabInfoList();
      }
    },
    cancelTab() {
      this.buttonTextEdit = JSON.parse(JSON.stringify(this.buttonText));
      this.dialogTab = false;
    },
    // 打开编辑名称
    openEditTab(item) {
      this.editItem = JSON.parse(JSON.stringify(item));
      this.editDialog = true;
    },
    // 取消编辑
    cancelEditDialog() {
      this.editItem = {};
      this.editDialog = false;
    },
    // 确认编辑
    submitEditDialog() {
      if (!this.editItem.showName) return this.$message.error("请输入名称");
      // 查找并更新具有相同 productType 的对象
      const index = this.buttonTextEdit.findIndex(
        item => item.productType === this.editItem.productType
      );

      if (index !== -1) {
        this.buttonTextEdit[index].showName = JSON.parse(
          JSON.stringify(this.editItem.showName)
        );
      }
      this.editDialog = false;
    },
    async copyUrl(event) {
      const currentTarget = event.currentTarget;
      const ret = await urlResize({
        url: `/tg?id=${this.advisorId}&saleUserId=${this.user.user.id}`
      });
      if (ret.code === 0) {
        handleClipboard(ret.data, event, currentTarget);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.centent {
  padding: 20px;
  .menu-container {
    padding: 0 10px;
  }

  .button-box {
    padding: 20px 0;
    display: inline-flex;
    align-items: center;
    .custom-button {
      margin-left: 40px;
    }
    .selected {
      background-color: #409eff !important;
      color: #ffffff !important;
    }
  }
  .content-box {
    margin-top: 20px;
  }
}
.dialog-content-item {
  display: flex;
  flex-direction: row;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 4px;
  background-color: #c0c4cc;
  justify-content: space-between;
  align-items: center;
  .dialog-content-item-left {
    font-size: 18px;
  }
  .dialog-content-item-right {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
</style>
