<template>
  <div class="tagSetIdx">
    <s-header :name="$t('advertManage.advertRule.addRule.adScreen')" :noback="false"></s-header>
    <div class="o-p-10 cust_vantBorder">
      <div class="l-flex-between kBordBott o-pb-20">
        <div style="
            flex: 0 0 46px;
            font-size: var(--van-cell-font-size);
            color: var(--van-field-label-color);
          ">
          {{
            cofficentForm.screenType === "0"
            ? $t("advertManage.advertRule.addRule.AScreen")
            : $t("advertManage.advertRule.addRule.BScreen")
          }}
        </div>
        <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">
          <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>
        <div @click="submitClk" class="submitBtn o-ml-10">
          <van-button round type="primary">{{
            $t("advertManage.advertRule.add")
          }}</van-button>
        </div>
      </div>
      <van-field colon :border="false" v-model="cofficentForm.username" clearable
        :placeholder="$t('advertManage.advertRule.addRule.userNamePlace')"
        :label="$t('advertManage.advertRule.addRule.userName')" />
      <van-field colon :border="false" v-model="cofficentForm.name" clearable
        :placeholder="$t('advertManage.advertRule.addRule.adNamePlace')"
        :label="$t('advertManage.advertRule.addRule.adName')" />

      <van-field colon :border="false" @click-input="busiInpClk" readonly clearable v-model="cofficentForm.type"
        :placeholder="$t('advertManage.advertRule.addRule.adTypePlace')"
        :label="$t('advertManage.advertRule.addRule.adType')">
        <template #right-icon>
          <div class="l-flex-RC">
            <van-icon v-if="cofficentForm.type" @click="cofficentForm.type = ''" class="o-mr-6" name="clear" />
            <van-icon @click="busiInpClk" name="arrow-down" />
          </div>
        </template>
      </van-field>
      <div class="l-flex-center" style="margin: 16px">
        <van-button round class="searchBtn" type="primary" size="large" @click="toSearch">
          {{ $t("advertManage.advertRule.addRule.search") }}
        </van-button>
      </div>
      <div class="o-mt-30">
        <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>
    <!-- 广告类型选择框 -->
    <van-popup v-model:show="busiPopShow" position="bottom">
      <van-picker :title="$t('advertManage.advertRule.addRule.adTypePlace')" :columns="busiPopList"
        :columns-field-names="busiPopFieldName" @confirm="busiPopConfirm" @cancel="busiPopCancel" />
    </van-popup>
  </div>
</template>

<script>
// 导入公用方法
import { setLocal, styleUrl } from "@/common/js/utils";
// 导入接口
import { Api_getAdRuleList } from "@/service/advertManage";
import sHeader from "@/components/SimpleHeader";
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  components: { sHeader },
  setup() {
    const cofficentForm = reactive({
      type: "",
      screenType: "0",
      username: "",
      name: "",
    });
    const route = useRoute();
    const router = useRouter();
    const tagList = ref([]);
    // 导入vuex
    const store = useStore();
    // 所有标签
    const allTagList = ref([]);
    const busiPopList = reactive([
      {
        name: "280",
        id: "280",
      },
      {
        name: "280en",
        id: "280en",
      },
      {
        name: "301",
        id: "301",
      },
      {
        name: "301en",
        id: "301en",
      },
      {
        name: "320",
        id: "320",
      },
      {
        name: "320en",
        id: "320en",
      },
      {
        name: "330",
        id: "330",
      },
      {
        name: "330en",
        id: "330en",
      },
      {
        name: "P30",
        id: "P30",
      },
      {
        name: "P30en",
        id: "P30en",
      },
    ]);
    const busiPopFieldName = reactive({
      text: "name",
      value: "id",
    });
    // 广告类型弹窗
    const busiPopShow = ref(false);
    // 刚进页面
    onMounted(() => {
      // 加载样式
      styleUrl('advertManage');
      const val = route.query.val || "0";
      console.log("val", val);
      // val=0是A屏进来的，1是B屏进来的
      if (val) {
        cofficentForm.screenType = val;
      }
      // 回显
      const A_advertList = store.state.$S_advertManage_A_advertList;
      const B_advertList = store.state.$S_advertManage_B_advertList;
      if (val === '0') {
        tagList.value = A_advertList;
      } else {
        tagList.value = B_advertList;
      }
    });
    // 点击所有标签
    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) {
        if (cofficentForm.screenType === "0") {
          // 储存数据到vuex
          store.commit("MUTA_A_ADVERTLIST", tagList.value);
          setLocal("advertManage-A-advertList", JSON.stringify(tagList.value));
        } else {
          // 储存数据到vuex
          store.commit("MUTA_B_ADVERTLIST", tagList.value);
          setLocal("advertManage-B-advertList", JSON.stringify(tagList.value));
        }
        setTimeout(() => {
          router.back();
        }, 300);
      }
    };
    // 点击搜索
    const toSearch = () => {
      Api_getAdRuleList(cofficentForm).then((res) => {
        console.log("res", res);
        allTagList.value = res.data.data || [];
      });
    };
    // 点击类型
    const busiInpClk = () => {
      busiPopShow.value = true;
    };
    const busiPopConfirm = ({ selectedOptions }) => {
      busiPopShow.value = false;
      // console.log("e", e);
      cofficentForm.type = selectedOptions[0].id;
    };
    const busiPopCancel = () => {
      busiPopShow.value = false;
    };
    return {
      cofficentForm,
      tagList,
      allTagList,
      delTag,
      submitClk,
      toSearch,
      busiInpClk,
      busiPopShow,
      busiPopList,
      busiPopFieldName,
      busiPopConfirm,
      busiPopCancel,
      addAllTag,
    };
  },
};
</script>

<style lang="less" scoped></style>
