<template>
  <div class="cate-container">
    <div class="cate-wrap">
      <div class="wrap-container">
        <div class="cate-title">分类</div>
        <template v-for="(item, key) in cla_list">
          <div class="cate-item" :class="select_cla.value == item.value ? 'cate-item-active' : ''" @click="handleClaSelect(item)">{{ item.title }}</div>
        </template>
      </div>
    </div>
    <div class="rec-inputer">
      <div class="rec-inputer-title">
        <span>当前选择内容为：</span>
        <span>{{ select_cla.title }}</span>
      </div>
      <div class="rec-inputer-title">
        <template v-if="Object.keys(input_value).length > 0">
          <span style="flex-shrink: 0">请输入：</span>
          <template v-for="(item, key) in input_value">
            <el-input v-model="input_value[key]" @keyup.enter="handleInputSubmit" placeholder="请输入内容" clearable></el-input>
          </template>
        </template>
        <template v-else>
          <span style="flex-shrink: 0">暂无内容编辑</span>
        </template>
      </div>
      <el-button type="primary" @click="handleInputSubmit">确认</el-button>
    </div>
    <div class="content-template">
      <div class="content-change" @click="handleChange">
        <span>换一换</span>
        <el-icon><RefreshRight /></el-icon>
      </div>
      <div class="content-list">
        <template v-for="(item, key) in data_list">
          <div class="content-item">
            <el-image :src="item.thumb" style="width: 250px" />
            <div class="content-item-title">{{ item.name }}</div>
            <div class="mask"><el-button type="primary" @click="handleClick(item)">去编辑</el-button></div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script setup>
import { listApolloByTeam, getTemplate, getTemplatInputer, templateRenderFree } from '@/api/zhihui/index.js';
import { getZHOption, downUrl } from '@/utils/index';
import useUserStore from '@/store/modules/user';
import ZhihuiEditor from 'zhihui-editor-sdk';
const { proxy } = getCurrentInstance();

const groupId = ref(proxy.$route.query.groupId);
const cla_list = ref([]);
const select_cla = ref('');
const params = ref({
  filter: {},
  limit: 4,
  page: 0,
  teamId: proxy.$route.query.groupId,
}); //请求参数
const total = ref(0);
const use_number = ref([]);
const data_list = ref([]);
const input_value = ref({});

const handleChange = () => {
  data_list.value = [];
  resetForm();
  getData();
};
const handleInputSubmit = () => {
  if (Object.keys(input_value.value).length == 0) {
    return;
  }
  proxy.$modal.loading('加载替换中。。。');
  data_list.value.map(async item => {
    let option = {
      info: input_value.value,
      saveModel: 'editable',
      teamId: groupId.value,
      templateId: item._id,
    };
    let data = await templateRenderFree(option);
    if (data.statusCode == 201) {
      item.thumb = data.data.url;
      item.recordId = data.data._id;
    }
  });
  proxy.$modal.closeLoading();
};
//重置数据
const resetForm = () => {
  params.value = {
    filter: {},
    limit: 4,
    page: 0,
    teamId: groupId.value,
  };
  let filter_option = {};
  if (select_cla.value != '') {
    filter_option.categoryIds = [select_cla.value.value];
  }
  params.value.filter = filter_option;
};
const init = () => {
  getCla();
  resetForm();
  getData();
};
//选择分类
const handleClaSelect = item => {
  select_cla.value = item;
  input_value.value = {};
  resetForm();
  getData();
};
//获取分类
const getCla = async () => {
  cla_list.value = [];

  let option = {
    teamId: groupId.value,
    type: 'template',
  };
  let data = await listApolloByTeam(option);
  if (data.statusCode == 200) {
    data?.data?.map(item => {
      if (item.parentId) {
        //获取二级分类
        cla_list.value.push(item);
      }
    });
  }
};
/**
 * 获取随机数
 * @param {*} min
 * @param {*} max
 */
const getRandom = (min, max) => {
  let number = Math.floor(Math.random() * (max - min + 1) + min);
  if (use_number.value.indexOf(number) > -1 && max > 3) {
    return getRandom(min, max);
  }
  return number;
};
/**
 * 获取数据
 */
const getData = async () => {
  if (select_cla.value == '') {
    //没选择不获取
    return;
  }
  proxy.$modal.loading('获取数据中。。。');
  let tem_list = await getList(); //获取总数
  let get_number = total.value > 3 ? 4 : total.value;
  if (get_number < 4) {
    tem_list[0]?._id && getInput(tem_list[0]?._id);
    proxy.$modal.closeLoading();
    return (data_list.value = tem_list);
  }
  for (let i = 0; i < get_number; i++) {
    let page = getRandom(0, total.value);
    use_number.value.push(page);
    params.value.page = page;
    params.value.limit = 1;
    let data = await getList();
    tem_list[0]?._id && getInput(data[0]?._id);
    data_list.value.push(...data);
  }
  proxy.$modal.closeLoading();
  use_number.value = [];
};
//去编辑
const handleClick = item => {
  let option = getZHOption(item._id, useUserStore().id, useUserStore().zhFirmId, groupId.value, () => {
    zhihuiEditor.closeIframe();
  });
  if (item.recordId) {
    option.from = 'record';
    option.templateId = item.recordId;
  }
  let zhihuiEditor = new ZhihuiEditor(option);
  zhihuiEditor.openIframe();
};
//获取可替换字段
const getInput = async id => {
  if (Object.keys(input_value.value).length > 0) {
    return;
  }
  let data = await getTemplatInputer(id);
  if (data.statusCode == 200) {
    input_value.value = data.data.info;
  }
};
const getList = async () => {
  let data = await getTemplate(params.value);
  if (data.statusCode == 200) {
    total.value = data.data.total - 1;
    return data.data.list;
  }
  return [];
};
init();
</script>
<style scoped lang="scss">
.cate-container {
  margin-top: 10px;
  padding: 30px;

  .cate-wrap {
    max-height: 40px;
    overflow: hidden;
    &:hover {
      overflow: visible;
      .wrap-container {
        border-radius: 4px;
        padding: 0 16px;
      }
    }

    .wrap-container {
      background-color: #ffffff;
      display: flex;
      flex-wrap: wrap;
      z-index: 2;
      border: solid 1px #fff;
      border-radius: 4px;
      padding: 0 16px;
    }
  }
  .cate-wrap,
  .cate-line {
    padding: 5px 0;
    display: flex;
    flex-wrap: wrap;
  }
  .cate-line {
    margin-top: 10px;
  }
  .cate-title {
    display: flex;
    min-width: 35px;
    padding: 0;
    margin-right: 16px;
    color: #b4b8bf;
    cursor: default;
    align-items: center;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    height: 32px;
  }
  .cate-item {
    flex-shrink: 0;
    margin: 0 12px 5px 0;
    min-width: 52px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid transparent;
    position: relative;
    height: 32px;
    padding: 0 15px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
    transition:
      color 0.3s,
      background 0.3s,
      border-color 0.3s,
      box-shadow 0.3s;
    &:hover {
      cursor: pointer;
      color: #3a2be0;
    }
  }
  .cate-item-active {
    font-weight: 500;
    border: 1px solid #3a2be0;
    color: #3a2be0;
    background-color: #f4f3ff;
  }
  .rec-inputer {
    font-size: 14px;
    margin-top: 10px;
    background-color: #f7f7f7;
    border-radius: 5px;
    padding: 10px 20px;
    color: #222;
    display: flex;
    align-items: center;
    .rec-inputer-title {
      display: flex;
      align-items: center;
      margin-right: 50px;
    }
  }
  .content-template {
    display: flex;
    align-items: flex-start;
    margin-top: 50px;
    .content-change {
      display: flex;
      align-items: center;
      font-size: 14px;
      flex-shrink: 0;
      margin-right: 50px;
      cursor: pointer;
      &:hover {
        color: #3a2be0;
      }
    }
    .content-list {
      display: flex;
      width: 100%;
      justify-content: space-around;
      .content-item {
        padding: 10px;
        position: relative;
        border-radius: 10px;
        .content-item-title {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 250px;
          text-align: center;
          margin-top: 10px;
        }
        .mask {
          position: absolute;
          display: none;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.3);
          padding-bottom: 20px;
          border-radius: 10px;
        }
        &:hover {
          .mask {
            display: flex;
            align-items: flex-end;
            justify-content: center;
          }
        }
      }
    }
  }
}
</style>
