<script setup lang="ts">
import axios, { AxiosResponse } from 'axios';
import moment from 'moment';
import { onMounted, ref } from 'vue';

interface Expert {
  ID: number
  UID: string
  SecUID: string
  ShortID: string
  RealName: string
  NickName: string
  State: string
  Since: number
  Focus: number
  Total: number
  Conf: Conf
}

interface Conf {
  Voice: string
  Hello: string
  Wechat: string
  Region: string[]
  NameKeyword: string[]
  Produce: boolean
  DefaultName: boolean
  DefaultAvatar: boolean
}


const experts = ref<Expert[]>([]);

// use axios get /experts onMount
const loadExperts = function () {
  axios.get<Expert[]>('/api/experts').then((resp: AxiosResponse) => {
    experts.value = resp.data;
  });
}

onMounted(loadExperts);
setInterval(loadExperts, 30 * 1000);


const parseTime = function (timestamp: number) {
  if (timestamp == 0) {
    return '不限制'
  }

  return moment.unix(timestamp).format('YY/MM/DD HH:mm:ss')
}
const currentExpert = ref<Expert | null>(null);

const showExpertDateModal = (id: number) => {
  currentExpert.value = experts.value.find((expert) => expert.ID === id) || null;

  date.value = moment.unix(currentExpert.value?.Since || 0).format('YYYY-MM-DDTHH:mm');

  voice.value = currentExpert.value?.Conf.Voice || '';
  hello.value = currentExpert.value?.Conf.Hello || '';
  wechat.value = currentExpert.value?.Conf.Wechat || '';
  region.value = (currentExpert.value?.Conf.Region || []).join(',');
  produce.value = currentExpert.value?.Conf.Produce || false;
  default_name.value = currentExpert.value?.Conf.DefaultName || false;
  default_avatar.value = currentExpert.value?.Conf.DefaultAvatar || false;
  name_keyword.value = (currentExpert.value?.Conf.NameKeyword || []).join(',');


  const dialog = document.getElementById("set_date_modal") as HTMLDialogElement;
  dialog.showModal();
};

const resetStateNormal = (id: number) => {
  currentExpert.value = experts.value.find((expert) => expert.ID === id) || null;
  if (!currentExpert.value) {
    return;
  }

  // alert to confirm
  if (!confirm(`确定要恢复 ${currentExpert.value.RealName} 的自动关注吗？`)) {
    return;
  }

  const data = { state: "" };
  axios.patch(`/api/experts/${currentExpert.value?.UID}/state`, data).then((resp: AxiosResponse) => {
    console.log(resp.data)
    loadExperts();
  });
};

const setStateStop = (id: number) => {
  currentExpert.value = experts.value.find((expert) => expert.ID === id) || null;
  if (!currentExpert.value) {
    return;
  }

  // alert to confirm
  if (!confirm(`确定要停止 ${currentExpert.value.RealName} 的自动关注吗？`)) {
    return;
  }

  const data = { state: "stop" };
  axios.patch(`/api/experts/${currentExpert.value?.UID}/state`, data).then((resp: AxiosResponse) => {
    console.log(resp.data)
    loadExperts();
  });
};

const closeModal = function () {
  const dialog = document.getElementById("set_date_modal") as HTMLDialogElement;
  dialog.close();
}

const resetDate = () => {
  const data = { since: 0 };
  axios.patch(`/api/experts/${currentExpert.value?.UID}/config`, data).then((resp: AxiosResponse) => {
    console.log(resp.data)
    loadExperts();
    setTimeout(closeModal, 500)
  });
};

const date = ref('2022-02-01T01:10');
const voice = ref('');
const hello = ref('');
const wechat = ref('');
const region = ref('');
const produce = ref(false);
const default_name = ref(false);
const default_avatar = ref(false);
const name_keyword = ref('');

const saveDate = () => {
  let regions = region.value.replace(/\s/g, '').replace("，", "").split(',');
  let name_keywords = name_keyword.value.replace(/\s/g, '').replace("，", "").split(',');

  const data = {
    since: Date.parse(date.value) / 1000,
    voice: voice.value,
    hello: hello.value,
    wechat: wechat.value,
    region: regions,
    produce: produce.value,
    DefaultName: default_name.value,
    DefaultAvatar: default_avatar.value,
    NameKeyword: name_keywords,
  };
  console.log(data)
  axios.patch(`/api/experts/${currentExpert.value?.UID}/config`, data).then((resp: AxiosResponse) => {
    console.log(resp.data)
    loadExperts();
    setTimeout(closeModal, 500)
  });
};

</script>

<template>
  <dialog id="set_date_modal" class="modal">
    <div class="modal-box">
      <form method="dialog">
        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
      </form>

      <h3 class="font-bold text-lg">{{ currentExpert?.RealName }}</h3>
      <div class="py-5">

        <label class="form-control w-full  mb-5">
          <div class="label">
            <span class="label-text">微信号</span>
          </div>
          <input type="text" placeholder="微信号" class="input input-bordered w-full " v-model="wechat" />
        </label>

        <label class="form-control w-full  mb-5">
          <div class="label">
            <span class="label-text">语音ID</span>
          </div>
          <input type="text" placeholder="语音ID" class="input input-bordered w-full " v-model="voice" />
        </label>

        <label class="form-control w-full " mb-5>
          <div class="label">
            <span class="label-text">打招呼模板</span>
          </div>
          <textarea v-model="hello" class="textarea textarea-bordered w-full " placeholder="打招呼模板"></textarea>
        </label>

        <label class="form-control w-full  mb-5">
          <div class="label">
            <span class="label-text">屏蔽IP区域用户</span>
          </div>
          <input type="text" placeholder="屏蔽IP区域用户" class="input input-bordered w-full" v-model="region" />
          <div class="label">
            <span class="label-text-alt">多个区域用 , 号分割</span>
          </div>
        </label>

        <label class="form-control w-full mb-5">
          <div class="label">
            <span class="label-text">屏蔽用户名关键字</span>
          </div>
          <input type="text" placeholder="屏蔽用户名关键字" class="input input-bordered w-full" v-model="name_keyword" />
          <div class="label">
            <span class="label-text-alt">多个用,号分割</span>
          </div>
        </label>

        <label class="form-control w-full ">
          <div class="form-control">
            <label class="cursor-pointer label justify-start gap-1">
              <input type="checkbox" v-model="produce" class="checkbox checkbox-success" />
              <span class="label-text">屏蔽0作品用户</span>
            </label>
          </div>
        </label>

        <label class="form-control w-full ">
          <div class="form-control">
            <label class="cursor-pointer label justify-start gap-1">
              <input type="checkbox" v-model="default_name" class="checkbox checkbox-success" />
              <span class="label-text">屏蔽默认用户名用户</span>
            </label>
          </div>
        </label>


        <label class="form-control w-full ">
          <div class="form-control">
            <label class="cursor-pointer label justify-start gap-1">
              <input type="checkbox" v-model="default_avatar" class="checkbox checkbox-success" />
              <span class="label-text">屏蔽默认头像名用户</span>
            </label>
          </div>
        </label>

        <label class="form-control w-full">
          <div class="label">
            <span class="label-text">选择时间</span>
          </div>
          <input type="datetime-local" v-model="date" placeholder="请选择时间" class="input input-bordered w-full" />
          <div class="label">
            <span class="label-text-alt">获取晚于这个时间关注的粉丝数据</span>
          </div>
        </label>
      </div>
      <div class="flex justify-end gap-3">
        <button class="btn btn-default" @click="resetDate">恢复不限制</button>
        <button class="btn btn-wide btn-primary" @click="saveDate">保存</button>
      </div>
    </div>
  </dialog>

  <div className="overflow-x-auto">
    <div v-if="experts.length == 0">
      <h1 class="text-lg text-center">还没有专家</h1>
    </div>

    <table className="table" v-else>
      <thead>
        <tr>
          <th>专家</th>
          <th>已关注/所有</th>
          <th>配置</th>
          <th>停止关注</th>
        </tr>
      </thead>
      <tbody>

        <tr :class='idx % 2 == 1 ? "bg-slate-50" : ""' v-for="(item, idx) in experts" :key="item.ID">
          <td class="flex flex-col">
            <div class="text-lg font-semibold">{{ item.RealName }}</div>
            <div>{{ item.UID }}</div>
          </td>
          <td>{{ item.Focus }} / {{ item.Total }}</td>
          <td>
            <button class="btn btn-sm" @click="showExpertDateModal(item.ID)">{{ parseTime(item.Since) }}</button>
          </td>
          <td>
            <button v-if="item.State == 'stop'" class="btn btn-warning btn-sm"
              @click="resetStateNormal(item.ID)">恢复</button>
            <button v-else class="btn btn-error btn-sm text-white" @click="setStateStop(item.ID)">停止</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>