<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row shadow="hover" v-show="showSearch" class="ml10">
        <el-form :inline="true" :model="state.queryForm" @keyup.enter="query" ref="queryRef">
          <el-form-item :label="t('marketingApps.name')" prop="appName">
            <el-input :placeholder="t('marketingApps.inputNameTip')" clearable v-model="state.queryForm.appName" />
          </el-form-item>
          <el-form-item :label="t('marketingApps.appId')" prop="appId">
            <el-input :placeholder="'请输入应用ID'" clearable v-model="state.queryForm.appId" />
          </el-form-item>
          <el-form-item :label="t('marketingApps.appType')" prop="domainSelected">
            <el-select placeholder="请选择应用类型" v-model="state.queryForm.domainSelected" @change="query()">
              <el-option :key="'0'" :label="'全部'" :value="'0'" />
              <el-option v-for="item in domainTypeOptions" :key="item.value" :label="item.description" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item :label="t('marketingApps.remark')" prop="remark">
            <el-input :placeholder="'请输入备注'" clearable v-model="state.queryForm.remark" />
          </el-form-item>
          <el-form-item>
            <el-button @click="query" class="ml10" icon="search" type="primary">
              {{ t('common.queryBtn') }}
            </el-button>
            <el-button @click="resetQuery" icon="Refresh">{{ t('common.resetBtn') }}</el-button>
            <el-button @click="handleEdit" icon="EditPen" :disabled="activeName === 'tab2'">{{ t('common.editBtn') }}</el-button>
          </el-form-item>
        </el-form>
      </el-row>

      <el-tabs v-model="activeName" class="table-tabs" @tab-click="handleClick">
        <el-tab-pane label="使用中" name="tab1"></el-tab-pane>
        <el-tab-pane label="回收站" name="tab2"></el-tab-pane>
      </el-tabs>

      <el-table @selection-change="handleSelectionChange" ref="tableRef" :data="state.dataList" row-key="path"
        style="width: 100%" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
        :header-cell-style="tableStyle?.headerCellStyle">
        <el-table-column :formatter="statusFormatter" type="selection" fixed="left" width="55"
          v-if="activeName == 'tab1'" />
        <el-table-column :formatter="statusFormatter" fixed="left" :label="t('marketingApps.id')" prop="id" width="80"
          show-overflow-tooltip>
          <template #default="{ row }">{{ row.id }}</template>
        </el-table-column>
        <el-table-column :formatter="statusFormatter" :label="t('marketingApps.appId')" prop="appId" width="220"
          show-overflow-tooltip>
          <template #default="{ row }">{{ row.appId }}</template>
        </el-table-column>
        <el-table-column :label="t('marketingApps.appImg')" prop="appImg" width="150" show-overflow-tooltip>
          <template #default="{ row }" style="display: flex; align-self: center;">
            <el-image style="width: 80px; height: 80px; border-radius: 10px;" :src="row.appImg" :fit="'cover'" />
          </template>
        </el-table-column>
        <el-table-column :formatter="statusFormatter" :label="t('marketingApps.name')" prop="appName" width="150"
          show-overflow-tooltip>
          <template #default="{ row }">
            <el-link :disabled="activeName === 'tab2'" :href="row.appUrl" target="_blank"
              :style="{ color: '#409EFF', opacity: activeName == 'tab2' ? 0.68 : 1 }">{{ row.appName }}</el-link>
          </template>
        </el-table-column>
        <el-table-column :formatter="statusFormatter" :label="t('marketingApps.appType')" prop="domainType" width="110"
          show-overflow-tooltip>
          <template #default="{ row }">
            <el-select @change="handleChange(row)" :disabled="activeName === 'tab2'" v-model="row.domainType"
              placeholder="" style="width: 80px">
              <el-option v-for="item in domainTypeOptions" :key="item.value" :label="item.description"
                :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :formatter="statusFormatter" label="营销投放" prop="launch" width="120">
          <template #default="{ row }">
            <el-switch :disabled="activeName === 'tab2'" v-model="row.launch" inline-prompt :active-value="true"
              :inactive-value="false" @change="handleChange(row)" />
          </template>
        </el-table-column>
        <el-table-column :formatter="statusFormatter" label="域名限制" prop="domainLimit" width="120">
          <template #default="{ row }">
            <el-switch :disabled="activeName === 'tab2'" v-model="row.domainLimit" inline-prompt :active-value="true"
              :inactive-value="false" @change="handleChange(row)" />
          </template>
        </el-table-column>
        <el-table-column :formatter="statusFormatter" :label="'域名集合'" prop="domains" width="280">
          <template #default="{ row }">
            <DomainCell :domainList="row.domains" :state="activeName == 'tab1'" :rowData="row" @refresh="query" />
          </template>
        </el-table-column>
        <el-table-column :formatter="statusFormatter" :label="'IP集合'" prop="ips" width="320">
          <template #default="{ row }">
            <IpCell :ipList="row.ips" :state="activeName == 'tab1'" :rowData="row" @refresh="query" />
          </template>
        </el-table-column>
        <el-table-column :formatter="statusFormatter" :label="'触发频率'" prop="triggerNum" width="120"
          show-overflow-tooltip>
          <template #default="{ row }">
            <!-- <el-input-number v-model="row.triggerNum" :max=20 /> -->
            {{ formatNum(row.triggerNum) }}
          </template>
        </el-table-column>
        <el-table-column :formatter="statusFormatter" :label="t('marketingApps.triggerRule')" width="140"
          prop="triggerRule" show-overflow-tooltip>
          <template #default="{ row }">
            <el-select @change="handleChange(row)" :disabled="activeName === 'tab2'" v-model="row.triggerRule"
              placeholder="" style="width: 100px">
              <el-option v-for="item in triggerRules" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :formatter="statusFormatter" :label="t('marketingApps.remark')" prop="remark" width="150"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column fixed="right" :label="t('common.action')" width="200">
          <template #default="scope">
            <div class="action" style="text-align: left;">
              <el-button :disabled="activeName == 'tab2'" style="margin-right: 0px;"
                @click="onOpenEditMenu('edit', scope.row)" text type="primary" v-auth="'sys_menu_edit'">
                <svg style="margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                  viewBox="0 0 16 16" fill="none">
                  <mask id="mask0_362_1714" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16"
                    height="16">
                    <rect width="16" height="16" fill="#D9D9D9" />
                  </mask>
                  <g mask="url(#mask0_362_1714)">
                    <path
                      d="M4.60017 12.2954L5.97782 12.2954C6.50827 12.2955 7.017 12.0847 7.39208 11.7097L13.7925 5.30925C14.4017 4.70003 14.4017 3.71229 13.7925 3.10308V3.10308C13.1833 2.49386 12.1955 2.49387 11.5863 3.10308L5.18591 9.5035C4.81082 9.87859 4.60011 10.3873 4.60012 10.9178L4.60017 12.2954Z"
                      stroke="#167AF0" stroke-linejoin="round" />
                    <path d="M10.4832 4.20593L12.6893 6.41211" stroke="#167AF0" stroke-linecap="round"
                      stroke-linejoin="round" />
                    <path
                      d="M8.5 2H4C2.89543 2 2 2.89543 2 4V13C2 14.1046 2.89543 15 4 15H13C14.1046 15 15 14.1046 15 13V8.5"
                      stroke="#167AF0" stroke-linecap="round" />
                  </g>
                </svg>
                {{ t('marketingApps.edit') }}
              </el-button>
              <el-button style="margin-right: 0px;" @click="onOpenStatistical(scope.row)" text type="primary"
                v-auth="'sys_menu_edit'">
                <svg style="margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                  viewBox="0 0 16 16" fill="none">
                  <path d="M2 6V3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V6" stroke="#167AF0"
                    stroke-linecap="round" stroke-linejoin="round" />
                  <path d="M10.6667 8V10.3333" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round" />
                  <path d="M8 5V10.3333" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round" />
                  <path d="M5.33325 6.33334V10.3333" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round" />
                  <path d="M2 10V13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V10" stroke="#167AF0"
                    stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                {{ t('marketingApps.statistics') }}
              </el-button>
              <el-button v-if="activeName == 'tab1'" style="margin-right: 0px;" @click="handleDelete(scope.row)" text
                type="danger" v-auth="'sys_menu_edit'">
                <svg style="margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                  viewBox="0 0 16 16" fill="none">
                  <g clip-path="url(#clip0_35_722)">
                    <path
                      d="M3 3.33334V12.6667C3 13.7712 3.89543 14.6667 5 14.6667H11C12.1046 14.6667 13 13.7712 13 12.6667V3.33334H3Z"
                      stroke="#E64242" stroke-linejoin="round" />
                    <path d="M6.66675 6.66666V11" stroke="#E64242" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M9.33325 6.66666V11" stroke="#E64242" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M1.33325 3.33334H14.6666" stroke="#E64242" stroke-linecap="round"
                      stroke-linejoin="round" />
                    <path d="M5.33325 3.33334L6.42959 1.33334H9.59229L10.6666 3.33334H5.33325Z" stroke="#E64242"
                      stroke-linejoin="round" />
                  </g>
                  <defs>
                    <clipPath id="clip0_35_722">
                      <rect width="16" height="16" fill="white" />
                    </clipPath>
                  </defs>
                </svg>
                拉黑</el-button>
              <el-button v-if="activeName == 'tab2'" style="margin-right: 0px;" icon="refresh"
                @click="handleDelete(scope.row)" text type="success" v-auth="'sys_menu_edit'">还原</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination" />
    </div>
    <EditDialog @refresh="query" ref="EditDialogRef" />
    <StatisticalDialog @refresh="query" ref="statisticalDialogRef" />
  </div>
</template>

<script lang="ts" name="marketingApps" setup>
import { pageList, pageDel, delAppById, setAppInfo } from '/@/api/marketing/apps';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';
import { fetchItemList } from '/@/api/admin/dict';
import { ref } from 'vue'
const EditDialog = defineAsyncComponent(() => import('./components/form.vue'));
const StatisticalDialog = defineAsyncComponent(() => import('./components/statistical.vue'));
const IpCell = defineAsyncComponent(() => import('./components/ipCell.vue'));
const DomainCell = defineAsyncComponent(() => import('./components/domainCell.vue'));

import { type TabsPaneContext } from 'element-plus'

const activeName = ref('tab1')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  activeName.value = tab.paneName as string;
  query();
}

const { t } = useI18n();
// 定义变量内容
const tableRef = ref();
const EditDialogRef = ref();
const statisticalDialogRef = ref();
const queryRef = ref();
const showSearch = ref(true);
// 多选rows
const selectObjs = ref([]) as any;
// 是否可以多选
const multiple = ref(true);
const state: BasicTableProps = reactive<BasicTableProps>({
  pageList: pageList,
  createdIsNeed: false,
  queryForm: {
    appId: '',
    appName: '',
    domainSelected: '0',
    domainType: '',
    remark: '',
  },
  pagination: {
    current: 1,
    size: 10,
    total: 0,
    pageSizes: [5, 10, 20, 50, 100]
  },
});

const domainTypeOptions = ref([]) as any;
const getDomianTypeList = async () => {
  const { data } = await fetchItemList({
    dictType: 'DomianType'
  });
  domainTypeOptions.value = data?.records || [];
  domainTypeOptions.value.map((item) => {
    item.value = Number(item.value);
  })
}
getDomianTypeList();

const triggerRules = [
  {
    label: '仅一次',
    value: 1,
  },
  {
    label: '多次',
    value: 2,
  },
]

const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);

// 搜索事件
const query = (refresh: boolean = false) => {
  activeName.value == 'tab1' ? state.pageList = pageList : state.pageList = pageDel;
  state.dataList = [];
  state.queryForm.domainType = state.queryForm.domainSelected == 0 ? '' : state.queryForm.domainSelected;
  getDataList(refresh);
};

// 修改单条配置信息
const handleChange = (row: any) => {
  setAppInfo(row).then(() => {
    useMessage().success('修改成功');
    getDataList();
  }).catch((err: any) => {
    useMessage().error(err.msg);
  });
};

// 清空搜索条件
const resetQuery = () => {
  queryRef.value.resetFields();
  state.dataList = [];
  getDataList();
};

// 批量修改配置
const handleEdit = () => {
  console.log('被选中的项', selectObjs);

  if (selectObjs.value.length === 0) {
    useMessage().error('请选择要修改的项');
    return;
  }
  EditDialogRef.value.openDialog('', selectObjs.value);
};

// 多选
const handleSelectionChange = (selection: any) => {
  selectObjs.value = selection;
};

// 打开编辑菜单弹窗
const onOpenEditMenu = (type: string, row: any) => {
  EditDialogRef.value.openDialog(type, row);
};

// 打开统计弹窗
const onOpenStatistical = (row: any) => {
  statisticalDialogRef.value.openDialog(row, true);
};

// 拉黑操作
const handleDelete = async (row: any) => {
  try {
    await useMessageBox().confirm(`是否确认${activeName.value == 'tab2' ? '还原' : '拉黑'}该应用`);
    await delAppById({
      id: row.id,
      status: activeName.value == 'tab2'
    });
    useMessage().success(activeName.value == 'tab2' ? '还原成功！' : '拉黑成功！');
  } catch {
    return;
  }
  query();
};

// 格式化数据展示
const formatNum = (value: string | number = 0) => {
  let num = Number(value);
  if (num > 0 && num < 1) {
        return (num * 100).toFixed(2) + '%';

  } else if (num >= 1 && num < 10000) {
    return num;
  }
  return '--'
}

const statusFormatter = (row: any, column: any, cellValue: any, index: any) => {
  return cellValue || '--';
}

onMounted(() => {
  query();
})

</script>
<style scoped lang="scss">
:deep(.el-link__inner) {
  display: inline-block;
  width: 100%;
  justify-content: start;
}

:deep(.el-link.is-underline:hover:after) {
  display: none;
}

.table-tabs {
  margin-bottom: 10px;
}
</style>
