<template>
  <div class="xl:w-screen-xl m-auto py-4 my-20">
    <el-page-header :icon="ArrowLeft" @back="goBack">
      <template #content>
        <span class="text-large font-600"> 插件编辑 </span>
      </template>

      <div v-if="navId" class="login-layout mt-10 sm:w-screen-xl w-full">
        <el-form :model="form" label-width="auto" size="large">
          <el-tabs
            v-model="activeName"
            type="border-card"
            class="demo-tabs bg-white"
          >
            <el-tab-pane label="基本信息" name="info">
              <el-form-item label="插件ID" class="px-4" label-width="100" label-position="left">
                <el-input disabled v-model="form.websiteId"/>
              </el-form-item>
              <el-form-item label="插件标识" class="px-4" label-width="100" label-position="left">
                <el-input v-model="form.websiteCode" :disabled="form.websiteCode != ''"/>
              </el-form-item>
              <el-form-item label="插件名称" class="px-4" label-width="100" label-position="left">
                <el-input v-model="form.websiteName"/>
              </el-form-item>
              <el-form-item label="域名" class="px-4" label-width="100" label-position="left">
                <el-input v-model="form.domain" placeholder="访问域名"/>
              </el-form-item>
              <!--            <el-form-item label="后台管理" class="px-4" label-width="100" label-position="left">-->
              <!--              <el-input v-model="form.adminUrl" placeholder="site.websoft.top"/>-->
              <!--            </el-form-item>-->
              <el-form-item label="插件描述" class="px-4" label-width="100" label-position="left">
                <el-input v-model="form.comments" type="textarea" placeholder="插件描述" :rows="4"/>
              </el-form-item>
              <el-form-item label="类型" class="px-4" label-width="100" label-position="left">
                <el-select
                  v-model="form.websiteType"
                  multiple
                  placeholder="选择类型(多选)"
                >
                  <el-option
                    v-for="item in types"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="色系" class="px-4" label-width="100" label-position="left">
                <el-space>
                  <template v-for="(item,index) in colors" :key="index">
                    <div @click="handleColor(item.label)">
                      <el-avatar v-if="selectColor == item.label" :size="28" :style="item.comments" class="border-solid border-1 border-gray-800 rounded-full"></el-avatar>
                      <el-avatar v-else :size="24" :style="item.comments"></el-avatar>
                    </div>
                  </template>
                </el-space>
              </el-form-item>
              <el-form-item label="插件图标" class="px-4" label-width="100" label-position="left">
                <el-upload
                  v-model:file-list="avatar"
                  action="https://server.gxbsnx.com/api/oss/upload"
                  :headers="{
                          Authorization: token,
                          TenantId: '5'
                        }"
                  :limit="1"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="avatarRemove"
                  :on-success="avatarSuccess"
                >
                  <el-icon>
                    <Plus/>
                  </el-icon>
                </el-upload>
              </el-form-item>
              <el-form-item class="px-4" label-width="100" label-position="left">
                <el-button type="primary" class="sm:w-auto w-full" size="large" @click="onSubmit">保存</el-button>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="插件截屏" name="files">
              <el-upload
                v-model:file-list="files"
                action="https://server.gxbsnx.com/api/oss/upload"
                :headers="{
                          Authorization: token,
                          TenantId: '5'
                        }"
                :limit="8"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="filesRemove"
                :on-success="filesSuccess"
              >
                <el-icon>
                  <Plus/>
                </el-icon>
              </el-upload>
              <el-button type="primary" class="sm:w-auto px-5" size="large" @click="onSubmit">保存</el-button>
            </el-tab-pane>
            <el-tab-pane label="详细介绍" name="content">
              <!-- 编辑器 -->
              <MdEditor v-model="form.content" @onUploadImg="onUploadImg"/>

              <div class="flex flex-col">

                <el-form-item class="my-4" label-position="left">
                  <el-button type="primary" class="sm:w-auto w-full" size="large" @click="onSubmit">保存</el-button>
                </el-form-item>
              </div>
            </el-tab-pane>
            <el-tab-pane label="评论管理" name="comments">
              <Comments :productId="form.companyId" :comments="comments" :count="commentsTotal" @done="doComments"/>
            </el-tab-pane>
            <el-tab-pane label="价格设置" name="price">
              <el-form-item label="插件价格" class="px-4" label-width="100" label-position="left">
                <el-input-number v-model="form.price" placeholder="插件价格"/>
              </el-form-item>
              <el-form-item label="交付方式" class="px-4" label-width="100" label-position="left">
                <el-radio-group v-model="form.deliveryMethod" @change="onSubmit">
                  <el-radio-button label="SaaS交付" :value="0" />
                  <el-radio-button label="源码交付" :value="1" />
                </el-radio-group>
              </el-form-item>
              <el-form-item label="计费方式" class="px-4" label-width="100" label-position="left">
                <el-radio-group v-model="form.chargingMethod">
                  <el-radio-button label="一次性" :value="1" />
                  <el-radio-button label="按年" :value="2" />
                  <el-radio-button label="按月" :value="3" />
                </el-radio-group>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="插件设置" name="setting">
              <el-form-item label="是否允许展示及被搜索" class="px-4" label-width="200" label-position="left">
                <el-switch v-model="form.search" title="是否允许展示及被搜索" @change="onSubmit"/>
              </el-form-item>
              <el-form-item label="是否推荐" class="px-4" label-width="200" label-position="left">
                <el-switch disabled v-model="form.official" @change="onSubmit"/>
              </el-form-item>
              <el-form-item label="官方插件" class="px-4" label-width="200" label-position="left">
                <el-switch disabled v-model="form.official" @change="onSubmit"/>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="统计信息" name="statistic">
              <Statistic :form="form"/>
            </el-tab-pane>
            <el-tab-pane label="操作日志" name="log">
              <el-timeline style="max-width: 600px">
                <el-timeline-item
                  v-for="(activity, index) in logs"
                  :key="index"
                  :timestamp="activity.timestamp"
                >
                  {{ activity.content }}
                </el-timeline-item>
              </el-timeline>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </div>
    </el-page-header>
  </div>
</template>
<script setup lang="ts">
import {ArrowLeft, View, Search, Plus} from '@element-plus/icons-vue'
import type {UploadProps, UploadUserFile} from 'element-plus'
import {useWebsite} from "~/composables/configState";
import useFormData from '@/utils/use-form-data';
import {ref} from 'vue'
import {getNavIdByParamsId} from "~/utils/common";
import type {CmsWebsite} from "~/api/cms/cmsWebsite/model";
import {getCmsWebsiteAll, updateCmsWebsite, updateCmsWebsiteAll} from "~/api/cms/cmsWebsite";
import Comments from "./components/Comments.vue";
import type {CompanyComment} from "~/api/system/companyComment/model";
import {MdEditor} from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import {uploadOss} from "~/api/system/file";
import Statistic from "./components/Statistic.vue";
import {listDictData} from "~/api/system/dict-data";


// 配置信息
const token = useToken();
const route = useRoute();
const router = useRouter();
const navId = ref();
const activeIndex = ref('');
const avatar = ref<UploadUserFile[]>([])
const files = ref<UploadUserFile[]>([])
const srcList = ref<string[]>([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const activeName = ref('info')
const comments = ref<CompanyComment[]>([]);
const developer = ref<string>();// 色系
const colors = ref<any[]>()
const selectColor = ref<string>();


// 配置信息
const {form, assignFields} = useFormData<CmsWebsite>({
  // 站点ID
  websiteId: undefined,
  // 网站名称
  websiteName: undefined,
  // 网站标识
  websiteCode: undefined,
  // 网站LOGO
  websiteIcon: undefined,
  // 网站LOGO
  websiteLogo: undefined,
  // 网站LOGO(深色模式)
  websiteDarkLogo: undefined,
  // 网站类型
  websiteType: undefined,
  // 评分
  rate: undefined,
  // 点赞数
  likes: undefined,
  // 访问量
  clicks: undefined,
  // 下载量
  downloads: undefined,
  // 网站截图
  files: undefined,
  // 网站关键词
  keywords: undefined,
  // 域名前缀
  prefix: undefined,
  // 绑定域名
  domain: undefined,
  // 是否官方
  official: undefined,
  // 是否显示在插件市场
  market: undefined,
  // 是否允许展示及被搜索
  search: undefined,
  // 主题色
  color: undefined,
  // 全局样式
  style: undefined,
  // 后台管理地址
  adminUrl: undefined,
  // 插件版本 10免费版 20专业版 30永久授权
  version: undefined,
  // 应用价格
  price: undefined,
  // 交付方式
  deliveryMethod: undefined,
  // 计费方式
  chargingMethod: undefined,
  // 服务到期时间
  expirationTime: undefined,
  // 模版ID
  templateId: undefined,
  // 行业类型(父级)
  industryParent: undefined,
  // 行业类型(子级)
  industryChild: undefined,
  // 企业ID
  companyId: undefined,
  // 开发者名称
  developer: undefined,
  // 所在国家
  country: undefined,
  // 所在省份
  province: undefined,
  // 所在城市
  city: undefined,
  // 所在辖区
  region: undefined,
  // 经度
  longitude: undefined,
  // 纬度
  latitude: undefined,
  // 街道地址
  address: undefined,
  // 联系电话
  phone: undefined,
  // 电子邮箱
  email: undefined,
  // ICP备案号
  icpNo: undefined,
  // 公安备案
  policeNo: undefined,
  // 插件介绍
  content: undefined,
  // 备注
  comments: undefined,
  // 是否推荐
  recommend: undefined,
  // 运行状态
  running: undefined,
  // 状态 0未开通 1运行中 2维护中 3已关闭 4已欠费停机 5违规关停
  status: undefined,
  // 维护说明
  statusText: undefined,
  // 关闭说明
  statusClose: undefined,
  // 状态图标
  statusIcon: undefined,
  // 全局样式
  styles: undefined,
  // 排序号
  sortNumber: undefined,
  // 用户ID
  userId: undefined,
  // 是否删除, 0否, 1是
  deleted: undefined,
  // 租户id
  tenantId: undefined,
  // 创建时间
  createTime: undefined,
  // 修改时间
  updateTime: undefined,
  // 网站配置
  config: undefined,
  topNavs: undefined,
  bottomNavs: undefined,
  loginUser: undefined
});

const logs = [
  {
    content: '发布插件',
    timestamp: '2018-04-15',
  },
  {
    content: '更新',
    timestamp: '2018-04-13',
  },
  {
    content: '更新',
    timestamp: '2018-04-11',
  },
]

const types = ref<any[]>()

useHead({
  title: `开发者中心`
});

const onDone = (index: string) => {
  activeIndex.value = index;
}

const reload = async () => {
  // 查询字典
  listDictData({dictCode: 'WebsiteType'}).then(data => {
    types.value = data
  })
  listDictData({
    dictCode: 'Color'
  }).then(data => {
    colors.value = data.map((item: any) => {
      return {
        label: item.dictDataName,
        value: item.dictDataCode,
        comments: item.comments
      }
    })
  })
  getSiteData();
}

const getSiteData = () => {
  getCmsWebsiteAll(navId.value).then(data => {
    // 获取栏目信息
    assignFields(data)
    // 插件头像
    avatar.value = []
    if (data.websiteLogo) {
      avatar.value.push({
        uid: form.websiteId,
        url: data.websiteLogo,
        name: '插件头像',
      })
    }

    // 插件截图
    files.value = []
    if (data.files) {
      const imgArr = JSON.parse(data.files);
      imgArr.map((item: any) => {
        files.value.push({
          uid: form.websiteId,
          url: item,
          name: '插件截图',
        })
        srcList.value.push(item)
      })
    }

    if(data.websiteType){
      form.websiteType = JSON.parse(data.websiteType) || []
    }
    if(data.color){
      selectColor.value = data.color;
    }

    // 设置页面标题
    useSeoMeta({
      description: data.comments || data.websiteName,
      keywords: data.websiteName,
      titleTemplate: `${data?.websiteName}` + ' - %s',
    })

    // 加载评论
  }).catch(err => {
    console.log(err, '加载失败...')
  })
}

const goBack = () => {
  router.back(); // 返回上一页
}

// 选择色系
const handleColor = (text: string) => {
  selectColor.value = text;
  form.color = text;
}

const avatarRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  form.websiteLogo = '';
}

const avatarSuccess = (e: any) => {
  form.websiteLogo = e.data.downloadUrl
}

const filesRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  form.files = JSON.stringify('');
}

const filesSuccess = (e: any) => {
  srcList.value.push(e.data.downloadUrl)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}

// 图片上传
const onUploadImg = async (files: any, callback: any) => {
  const res = await Promise.all(
    files.map((file: any) => {
      return new Promise((rev, rej) => {
        const form = new FormData();
        form.append('file', file);
        uploadOss(file).then((res: any) => rev(res))
          .catch((error: any) => rej(error));
      });
    })
  );
  console.log(res, '上次')
  callback(res.map((item) => item.url));
};

const onSubmit = () => {
  form.files = undefined;
  if (srcList.value.length > 0) {
    form.files = JSON.stringify(srcList.value)
  }
  if(!form.developer){
    form.developer = developer.value;
  }
  updateCmsWebsiteAll({
    ...form,
    websiteType: JSON.stringify(form.websiteType)
  }).then(() => {
    ElMessage.success('修改成功');
  });
}

watch(
  () => route.params.id,
  (id) => {
    navId.value = getNavIdByParamsId(id);
    if(route.query.developer){
      developer.value = `${route.query.developer}`;
    }
    reload();
  },
  {immediate: true}
);
</script>

<style lang="scss">
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
