<template>
  <div>
    <el-card style="min-height: calc(100vh - 102px);">
      <backPage @click="goBack"></backPage>
      <div class="toolbox">
        <el-button type="primary"  @click="handleAdd">新增</el-button>
        <el-button type="primary"  @click="handleEdit">修改</el-button>
      </div>
      <el-divider />
      <div class="row flex gap-2">
        白名单维度：
        <el-select
          v-model="dynamic_type"
          placeholder="请选择白名单维度"
          size="large"
          style="width: 240px"
          @change="changeDynamicType"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div class="tagbox">
          <el-tag
            v-for="item in options"
            :key="item.label"
            :type="item.value"
            effect="dark"
              size="large"
          >
            {{ item.label }}
          </el-tag>
        </div>
      </div>
      <el-divider />
      <div class="privincebox flex gap-2" v-show="dynamic_type == 'area'">
        <el-tag
          v-for="item in provinceData"
          size="large"
          :key="item"
          :type="select.includes(item) ? 'danger' : ''"
          :effect="select.includes(item) ? 'dark' : 'plain'"
          >{{ item }}</el-tag
        >
      </div>
      <div class="privincebox flex gap-2" v-show="dynamic_type == 'level'">
        <el-tag
          v-for="item in levelData"
          size="large"
          :key="item"
          :type="select.includes(item) ? 'danger' : ''"
          :effect="select.includes(item) ? 'dark' : 'plain'"
          >{{ item }}</el-tag
        >
      </div>
      <div class="privincebox flex gap-2" v-show="dynamic_type == 'title'">
        <el-tag
          v-for="item in titleData"
          size="large"
          :key="item"
          :type="select.includes(item) ? 'danger' : ''"
          :effect="select.includes(item) ? 'dark' : 'plain'"
          >{{ item }}</el-tag
        >
      </div>
      <div class="privincebox flex gap-2" v-show="dynamic_type == 'department'">
        <el-tag
          v-for="item in departmentData"
          size="large"
          :key="item"
          :type="select.includes(item) ? 'danger' : ''"
          :effect="select.includes(item) ? 'dark' : 'plain'"
          >{{ item }}</el-tag
        >
      </div>
    </el-card>
     <dynamicList ref="dynamicListRef" :white_dynamic_id="white_dynamic_id" :provinceData="provinceData" :levelData="levelData" :departmentData="levelData" :titleData="titleData" @refreshList="getList"></dynamicList>
  </div>
</template>

<script setup>
import userApi from "../api/user";
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { formatDate } from "../utils/format";
const provinceData = ref([]);
const levelData = ref([]);
const titleData = ref([]);
const departmentData = ref([]);
const dynamicListRef = ref(null);
const emits = defineEmits(["goBack"]);

const select = ref([]);
const options = ref([]);
const dynamic_type = ref("");
const searchForm = reactive({});
const listData = ref([]);

const white_dynamic_id=ref('');
let json = {
  area: "省份",
  level: "医院等级",
  title: "职称",
  department: "科室",
  url: "地址栏",
};
const goBack = () => {
  emits("goBack");
};
const changeDynamicType = (value) => {
  listData.value.forEach((item) => {
    if (item.dynamic_type == value) {
      white_dynamic_id.value = item.white_dynamic_id;
     if(item.project_platform_dynamic_item){
      select.value = item.project_platform_dynamic_item.map((ele) => {
        return ele.item_value;
      });
     }
      
    }
  });
};
const getList = async () => {
  // if (!searchForm.status) {
  //   delete searchForm.status;
  // }
  const { data, code } = await userApi.getDynamicList({ ...searchForm });
  if (code == 200) {
    listData.value = data;
    if (data.length > 0) {
      dynamic_type.value = data[0].dynamic_type;
      changeDynamicType(data[0].dynamic_type);
    };
    options.value = [];
    for (let i = 0; i < data.length; i++) {
      options.value.push({
        value: data[i].dynamic_type,
        label: json[data[i].dynamic_type],
      });
    }
    console.log(options.value);
  }
};
const handleEdit=()=>{
    dynamicListRef.value.init(searchForm.project_platform_id,'edit', dynamic_type.value);
}
const handleAdd=()=>{
    dynamicListRef.value.init(searchForm.project_platform_id,'view', dynamic_type.value);
}
const getProvinceList = async () => {
  userApi.getProvinceList().then((res) => {
    provinceData.value = res.data;
  });
};
const getLevelList = () => {
  userApi.getLevelList().then((res) => {
    levelData.value = res.data;
  });
};
const getTitleList = () => {
  userApi.getTitleList().then((res) => {
    titleData.value = res.data;
  });
};
const getDepartmentList = () => {
  userApi.getDepartmentList().then((res) => {
    departmentData.value = res.data;
  });
};

const init = (id) => {
  searchForm.project_platform_id = id;
  getList();
  getProvinceList();
  getLevelList();
  getTitleList();
  getDepartmentList();
};
defineExpose({
  init,
});
</script>

<style lang='scss' scoped>
.tagbox{
  :deep() .el-tag {
    margin:0 5px;
  }
}
.row {
  margin: 0 50px 30px;
  align-items: center;
}
.privincebox {
  margin: 0 50px;
}
.gap-2 {
  gap: 1.5rem;
}
.flex {
  display: flex;
  flex-wrap: wrap;
}
</style>
