<template>
  <div class="tagSetIdx">
    <s-header :name="$t('device.tagSet.title')" :noback="false"></s-header>
    <div class="o-p-10">
      <div class="l-flex-between">
        <div class="c-border o-ptb-10 o-plr-12 l-flex-RC l-flex-w o-w" style="padding-bottom: 0;min-height: 36px;">
          <!-- @click="noticeClk({ item, index }, 1)" -->
          <div class="c-border l-flex-RC o-p-3 c-color-f o-mr-10 o-mb-10"
            style="background: #e59a6d; border: 1px solid #e59a6d" v-for="(item, index) in tagList" :key="index">
            <span class="o-mr-3">{{ item.name }}</span>
            <van-icon @click.stop="delTag(item, index)" name="clear" />
          </div>
          <!-- <div
            class="c-border l-flex-RC o-p-3 o-mb-10"
            @click="noticeClk(null, 2)"
          >
            <van-icon name="add" />
            <span class="o-mr-3">{{ $t("device.tagSet.tag") }}</span>
          </div> -->
        </div>
        <div @click="submitClk" class="submitBtn o-ml-10">
          <van-button round type="primary">{{
            $t("device.tagSet.sumbmit")
          }}</van-button>
        </div>
      </div>

      <div class="o-mt-30">
        <div class="o-pb-20 c-text-15 c-text-w6">
          {{ $t("device.tagSet.allTags") }}
        </div>
        <div class="l-flex-RC l-flex-w">
          <div @click="addAllTag(item)" class="c-border l-flex-RC o-p-3 c-color-f o-mr-10 o-mb-10"
            style="background: #e59a6d; border: 1px solid #e59a6d" v-for="(item, index) in allTagList" :key="index">
            <span class="o-mr-3">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <kDialog :dialogTitle="dialogTitle" :cancelBtnTxt="$t('device.tagSet.cancel')"
      :confirmBtnTxt="$t('device.tagSet.confirm')" ref="kDialogRef" @cancelclk="cancelClk" @confirmclk="confirmClk">
      <template #content>
        <div class="cust_vantBorder">
          <van-field clearable label-width="0" v-model="tagName" label="" />
        </div>
      </template>
    </kDialog>
  </div>
</template>

<script>
// 导入vuex
import { useStore } from "vuex";
import {
  getLoginUser
} from "@/common/js/utils";
// 导入接口
import { Api_getLabelList, Api_getEquipmentToLabel } from "@/service/labelMan";
import kDialog from "@/components/commom/kDialog/index.vue";
import sHeader from "@/components/SimpleHeader";
import { ref } from "@vue/reactivity";
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from 'vue-router';
import { onMounted } from '@vue/runtime-core';
import { showToast } from 'vant';
export default {
  components: {
    sHeader,
    kDialog,
  },
  setup() {
    // 导入vuex
    const store = useStore();
    const route = useRoute();
    // 用户
    const user = getLoginUser();
    // 路由
    const router = useRouter();
    const { t } = useI18n();
    // 弹窗标题
    let dialogTitle = ref(t("device.tagSet.addTag"));
    // 通知弹窗
    const kDialogRef = ref(null);
    // 点击通知栏
    let tagIdx = ref(null);
    let tagName = ref("");
    let addDailogShow = ref(true);
    let tagList = ref([

    ]);
    // 所有标签
    let allTagList = ref([

    ]);
    // 是编辑还是新增
    let isAddTag = ref(true);
    // 初始化页面
    onMounted(() => {
      const labelList = store.state.$S_tagSet_labelList;
      tagList.value = labelList;
      getList();
    });
    const noticeClk = (param, idx) => {
      if (idx === 1) {
        isAddTag.value = false;
        const { item, index } = param;
        tagIdx.value = index;
        tagName.value = item.name;
        dialogTitle.value = t("device.tagSet.title");
      } else {
        isAddTag.value = true;
        tagName.value = "";
        dialogTitle.value = t("device.tagSet.addTag");
      }
      kDialogRef.value.openDialog();
    };
    // 点击左侧按钮
    const cancelClk = (e) => {
      console.log(e, 1111);
    };
    // 点击右侧按钮
    const confirmClk = (e) => {
      if (isAddTag.value) {
        tagList.value.push({
          name: tagName.value,
        });
      } else {
        tagList.value.splice(tagIdx.value, 1, { name: tagName.value });
      }
      console.log(e, 2222);
    };
    // 点击所有标签
    const addAllTag = (row) => {
      if (tagList.value.length > 0) {
        const isRepeat = tagList.value.some(item => {
          return item.id === row.id
        });
        if (isRepeat) {
          return;
        }
      }
      tagList.value.push(row);
    };
    // 点击删除
    const delTag = (row, idx) => {
      tagList.value.splice(idx, 1);
    };
    // 点击提交
    const submitClk = () => {
      // 如果选择框有值
      if (tagList.value.length > 0) {
        const labelIds = tagList.value.map(item => {
          return item.id
        });
        Api_getEquipmentToLabel({ equipmentId: route.query.deviceId, labelIds }).then(res => {
          console.log('res', res)
          showToast(res.data.message);
          setTimeout(() => {
            router.back();
          }, 300);
        })
      }
      // sessionStorage.setItem('tagList', JSON.stringify(tagList.value));
    }
    // 获取列表
    const getList = () => {
      Api_getLabelList({ adminId: user.id, type: 1 }).then((res) => {
        const { data } = res.data;
        console.log("data", data);
        allTagList.value = data;
      });
    };
    return {
      addDailogShow,
      tagList,
      kDialogRef,
      noticeClk,
      cancelClk,
      confirmClk,
      allTagList,
      addAllTag,
      delTag,
      dialogTitle,
      tagName,
      tagIdx,
      submitClk
    };
  },
};
</script>

<style lang="less" scoped>
.tagSetIdx {
  .submitBtn {
    flex: 0 0 80px;

    :deep(.van-button--round) {
      width: 100%;
    }
  }

  .van-button--primary {
    background-color: #2c87c8;
    border-color: #2c87c8;
  }
}
</style>