<template>
  <div class="layout-container">
    <!-- 菜单栏 -->
    <From :form-items="dynamicFormItems" @formSubmitted="handleFormSubmitted" @formReset="handleFormReset"
          is_add_button="新增" @addForm="edit"/>

    <!-- 表格 -->
    <div class="layout-container">
      <Table @getTableData="changeTableData" v-model:page="page" ref="table" :data="tableData"
             @selection-change="handleSelectionChange">
        <el-table-column prop="placementId" label="广告位ID"/>
        <el-table-column prop="placementName" label="广告位名称"/>
        <el-table-column prop="adFormat" label="广告位样式">
          <template #default="scope">
            {{ getDictionaryName("ad_format", scope.row.adFormat) }}
          </template>
        </el-table-column>
        <el-table-column prop="appName" label="所属平台应用"/>
        <el-table-column prop="networkAppName" label="所属渠道应用"/>
        <el-table-column prop="appType" label="类型" width="100">
          <template #default="scope">
            {{ getDictionaryName("app_type", scope.row.appType) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="广告位状态">
          <template #default="scope">
            {{ getDictionaryName("placement_status", scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <div class="button">
              <el-button class="button-item" type="primary" style="margin-bottom: 5px;"
                         @click="edit(scope.row)">
                编辑
              </el-button>
              <el-popconfirm placement="left" title="确认删除该用户?" @confirm="removeType(scope.row)">
                <template #reference>
                  <el-button class="button-item" style="margin-bottom: 5px;"
                             type="warning">删除类型
                  </el-button>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </Table>
    </div>

    <!-- 操作弹窗 -->
    <Layer :layer="layer" @confirm="submit(ruleForm)" @close="layer.show = false">
      <el-form :model="formEdit" :rules="rules" ref="ruleForm" label-width="240px" style="margin-right:30px;">
        <el-row :gutter="5">
          <el-col :span="10">
            <el-form-item label="关联app：" required prop="appId">
              <el-select v-model="formEdit.appData" filterable placeholder="请选择">
                <el-option
                    v-for="item in appData"
                    :key="item.appName"
                    :label="item.appName"
                    :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2" ></el-col>
          <el-col :span="10">
            <el-form-item label="广告位名称：" required prop="placementName">
              <el-input v-model="formEdit.placementName" placeholder="请输入广告位名称" clearable/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="10">
            <el-form-item label="广告样式：" required prop="adformat">
              <el-select v-model="formEdit.adformat" placeholder="请选择广告样式">
                <el-option value="native" label="native"/>
                <el-option value="banner" label="banner"/>
                <el-option value="rewarded_video" label="rewarded_video"/>
                <el-option value="interstitial" label="interstitial"/>
                <el-option value="splash" label="splash"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="10">
            <el-form-item label="备注：" required prop="remark">
              <el-input v-model="formEdit.remark" placeholder="请输入备注" clearable/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="10">
            <el-form-item label="广告位状态：" required prop="status">
              <el-select v-model="formEdit.status" placeholder="请选择广告位状态">
                <el-option :value="1" label="锁定"/>
                <el-option :value="2" label="待审核"/>
                <el-option :value="3" label="正常"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="10">

          </el-col>
        </el-row>

      </el-form>
    </Layer>
  </div>
</template>

<script setup>
import {onBeforeMount, ref, reactive} from "vue";
import From from "@/components/from/index.vue";
import Table from "@/components/table/index.vue";
import Layer from '@/components/layer/index.vue'
import {ElMessage} from 'element-plus'
import {getUserList, getStaticList, riskBannedUser, riskLockUser} from '@/api/userModule.js'
import {riskChangeUserStatus} from '@/api/riskModule.js'
import {convertUTCToBeijing} from '@/utils/index.js'
import {useGetDictList} from '@/hooks/useGetDictList.js'
import {useStore} from 'vuex'
import {appList, placementList} from "@/api/formworkErection";

const store = useStore()
const {dictData, loadDictData, getOptions, getDictionaryName} = useGetDictList();
const form = ref(null);
const tableData = ref([]);
const appData = ref([]);

// 分页参数, 供table使用
const page = reactive({
  pageNum: 1,
  pageSize: 20,
  limit: 20,
  total: 0,
});

// 分页参数, 供table使用
const appPage = reactive({
  pageNum: 1,
  pageSizes: 999,
  limit: 999,
  total: 0,
});

// 分页数据
const getAppList = async () => {
  let res = await appList({...appFormSearch.value});
  appData.value = res.data;
};

const changeAppTableData = () => {
  appFormSearch.value.pageNum = appPage.pageNum;
  appFormSearch.value.pageSizes = appPage.pageSizes;
  appFormSearch.value.limit = appPage.limit;
  // 分页切换
  getAppList();
};

const formSearch = ref({
  channelOrigin: null,// 渠道来源
  channelType: null,// 渠道类型
  lastLoginTime: '',// 最新登录时间
  limit: 20,// 当前页数量(查询量)
  nickName: null,// 用户昵称
  page: 1,// 当前页码
  pageSizes: 20,// 总页数
  registryTime: null,// 注册时间
  total: null,// 总条数
  userType: null,// 用户类型
});


const appFormSearch = ref({
  page: 1,// 当前页码
  pageSizes: 999,// 总页数
  limit: 999,
  total: null,// 总条数
});

const dynamicFormItems = ref([])

onBeforeMount(() => {
  settingData()
  getList();
  changeAppTableData()
});

// 获取缓存数据设置筛选数据
const settingData = () => {
  loadDictData().then(() => {
    dynamicFormItems.value = [
      {
        label: '渠道类型',
        prop: 'nickName',
        type: 'input',
      },
      {
        label: '所属代理',
        prop: 'channelType',
        type: 'select',
        options: [
          {
            label: "全部",
            value: null,
          },
          {
            label: "是",
            value: 0,
          },
          {
            label: "否",
            value: 1,
          }
        ]
      },
      {
        label: '客服QQ号',
        prop: 'name',
        type: 'input',
      },
      {
        label: 'QQ群号',
        prop: 'nickName1',
        type: 'input',
      },
      // { label: '登录日期', prop: 'loginTime', type: 'daterange' },
    ]
  })
}

// 分页数据
const getList = async () => {
  let res = await placementList({...formSearch.value});
  tableData.value = res.data;
  page.total = res.pageMeta.total;
};

const changeTableData = () => {
  formSearch.value.pageNum = page.pageNum;
  formSearch.value.pageSize = page.pageSize;
  formSearch.value.limit = page.limit;
  // 分页切换
  getList();
};

// 搜索
const handleFormSubmitted = (formData) => {
  // console.log("接收到子组件传递的数据", formData);
  formSearch.value.page = 1;
  formSearch.value.pageSizes = 20;
  formSearch.value.total = page.total;
  formSearch.value.limit = 20;
  formSearch.value.nickName = formData.nickName;
  formSearch.value.channelOrigin = formData.channelOrigin;
  formSearch.value.channelType = formData.channelType;
  formSearch.value.userType = formData.userType;
  formSearch.value.lastLoginTime = formData.lastLoginTime || null
  formSearch.value.registryTime = formData.registryTime || null

  getList();
};

// 表单重置
const handleFormReset = () => {
  formSearch.value = {
    channelOrigin: null,// 渠道来源
    channelType: null,// 渠道类型
    lastLoginTime: null,// 最新登录时间
    limit: 20,// 当前页数量(查询量)
    nickName: null,// 用户昵称
    page: 1,// 当前页码
    pageSizes: 20,// 总页数
    registryTime: null,// 注册时间
    total: null,// 总条数
    userType: null,// 用户类型
  };
  getList();
};

// 选择监听器
const handleSelectionChange = (val) => {
  context.emit("selection-change", val)
}

// 弹窗
const layer = ref({
  show: false,
  title: "新增广告位",
  showButton: true,
  width: '70vw'
});

const formEdit = ref({
  remark: undefined, //备注
  adformat: undefined,//广告样式
  placementName: undefined,//广告位名称
  appData: undefined,//广告位id
  status:3,
})

const edit = (row) => {
  ruleForm.value?.resetFields()
  if (row) {
    layer.value.title = '编辑广告位'
  } else {
    layer.value.title = '新增广告位'
  }
  layer.value.show = true

}

const ruleForm = ref(null);

const rules = reactive({
  formEditbannedLimit: [
    {required: true, message: "请输入封禁期限", trigger: "blur"},
  ],
  bannedReason: [
    {
      required: true,
      message: "请输入封禁原因",
      trigger: "blur",
    },
  ],
});

const submit = async (formEl) => {
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      // 提交内容

      layer.value.show = false
    } else {
      console.log("error submit!", fields);
    }
  })
}

// 删除用户
const removeType = async (row) => {
  console.log('删除', row)
}

</script>

<style scoped lang="scss">
.layout-container {

  .card {
    .title {
      margin-bottom: 10px;
      font-weight: 600;
    }

    display: flex;
    flex-direction: column;
    align-items: start;
    width: calc(100% - 60px);
    margin: 30px 30px 0;
  }

  .button {
    display: flex;
    flex-direction: column;

    .button-item {
      margin: 4px;
    }
  }
}
</style>