<template>
  <a-page-header :title="form.shortName" @back="push('/system/plug')">
    <a-row :gutter="16">
      <!--      左侧区域-->
      <a-col
        v-bind="
          styleResponsive
            ? { xl: 18, lg: 12, md: 12, sm: 24, xs: 24 }
            : { span: 12 }
        "
        class="gutter-row"
        :span="6"
      >
        <a-card :bordered="false" style="width: 100%; margin-bottom: 16px">
          <div class="goods-info">
            <div class="logo">
              <a-image
                :width="70"
                :height="70"
                :preview="false"
                :src="form.companyLogo"
              />
            </div>
            <div class="info">
              <a-card :bordered="false" :body-style="{ padding: 0 }">
                <div class="goods-name ele-text-heading">{{
                  form.shortName
                }}</div>
                <div class="comments ele-text-secondary">{{
                  form.comments
                }}</div>
              </a-card>
              <a-card :bordered="false" class="buy-card">
                <div class="price-box">
                  <div class="left">
                    <div
                      ><span class="ele-text-secondary">价格：</span
                      ><span class="ele-text-danger price">￥50</span>/月</div
                    >
                    <div
                      ><span class="ele-text-secondary">续费：</span
                      ><span class="ele-text-heading">￥1280</span></div
                    >
                  </div>
                  <div class="right">
                    <div class="sales ele-text-secondary">浏览 35</div>
                    <div class="sales ele-text-secondary">评价 3</div>
                  </div>
                </div>
              </a-card>
            </div>
          </div>
          <div class="goods-item">
            <div class="title"> 套餐版本 </div>
            <div class="info">
              <a-radio-group v-model:value="plan" size="large">
                <a-radio-button value="1">体验版(3用户)</a-radio-button>
                <a-radio-button value="2">基础版(10用户)</a-radio-button>
                <a-radio-button value="3">标准版(50用户)</a-radio-button>
                <a-radio-button value="4">豪华版(100用户)</a-radio-button>
                <a-radio-button value="5">旗舰版(不限)</a-radio-button>
              </a-radio-group>
            </div>
          </div>
          <div class="goods-item">
            <div class="title"> 购买时长 </div>
            <div class="info">
              <a-radio-group v-model:value="duration" size="large">
                <a-radio-button value="1">1个月</a-radio-button>
                <a-radio-button value="2">1年</a-radio-button>
                <a-radio-button value="3">2年</a-radio-button>
                <a-radio-button value="4">3年</a-radio-button>
              </a-radio-group>
            </div>
          </div>
          <div class="goods-item">
            <div class="title"></div>
            <div class="info">
              <a-button type="primary" size="large">立即购买</a-button>
            </div>
          </div>
        </a-card>
        <a-card
          :bordered="false"
          :body-style="{ padding: 0 }"
          style="margin-bottom: 16px"
        >
          <div class="guarantee">
            <span class="text ele-text-danger"
              >服务保障：平台购买支持5天无理由退款，请勿线下支付！</span
            >
          </div>
        </a-card>
        <a-card :body-style="{ padding: '0 16px' }">
          <a-tabs v-model:active-key="active">
            <a-tab-pane tab="商品详情" key="detail">
              <Tenant :use="false" />
            </a-tab-pane>
            <a-tab-pane tab="商品价格" key="price">
              <Tenant :use="true" />
            </a-tab-pane>
            <a-tab-pane tab="客户案例" key="case">
              <Tenant :use="true" />
            </a-tab-pane>
            <a-tab-pane tab="使用指南" key="guide">
              <Tenant :use="true" />
            </a-tab-pane>
            <a-tab-pane tab="用户评论(8)" key="comments">
              <Tenant :use="true" />
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
      <!-- 右侧区域 -->
      <a-col
        v-bind="
          styleResponsive
            ? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
            : { span: 12 }
        "
        class="gutter-row"
        :span="6"
      >
        <a-card :bordered="false" class="task-card">
          <a-list :bordered="false">
            <a-list-item style="font-weight: 500">
              服务厂商：{{ form.companyName }}
            </a-list-item>
            <a-list-item @click="openUrl('http://www.' + form.domain)">
              官方网站：{{ form.domain }}
            </a-list-item>
            <a-list-item>
              联系客服：<QqOutlined :style="{ fontSize: '18px' }" /><span
                class="ele-text-secondary"
              >
                （在线时间：9:00到6:00）</span
              >
            </a-list-item>
            <a-list-item> 电话：0771-5386339 </a-list-item>
            <a-list-item> 邮箱：{{ form.email }} </a-list-item>
            <a-list-item>
              问题处理：<a-button @click="openUrl('/oa/task/add')"
                >提交工单</a-button
              ></a-list-item
            >
          </a-list>
        </a-card>
        <a-card
          title="建议搭配应用"
          :bordered="false"
          class="task-card"
          :split="false"
          :body-style="{ padding: '5px' }"
        >
          <a-row :gutter="16">
            <a-col class="gutter-row" :span="12">
              <a-button
                type="link"
                class="ele-text-secondary"
                @click="openUrl('https://3x.antdv.com/components/overview-cn')"
                >Ant Design Vue</a-button
              >
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-button
                type="link"
                class="ele-text-secondary"
                @click="openUrl('https://eleadmin.com/doc/eleadminpro/')"
                >EleAdmin Pro</a-button
              >
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-button
                type="link"
                class="ele-text-secondary"
                @click="openUrl('https://eleadmin.com/doc/oauth2/')"
                >后端教程Java</a-button
              >
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-button
                type="link"
                class="ele-text-secondary"
                @click="openUrl('/system/plug')"
                >插件扩展</a-button
              >
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-button
                type="link"
                class="ele-text-secondary"
                @click="openUrl('http://git.gxwebsoft.com')"
                >git仓库</a-button
              >
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </a-page-header>
</template>

<script lang="ts" setup>
  import { reactive, ref, unref, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import { getFileSize, openUrl } from '@/utils/common';
  import { setPageTabTitle } from '@/utils/page-tab-util';
  import useFormData from '@/utils/use-form-data';
  import { getCompanyAll } from '@/api/system/company';
  import { Company } from '@/api/system/company/model';
  import { useThemeStore } from '@/store/modules/theme';
  import { storeToRefs } from 'pinia';
  import { onClone } from '@/utils/plug-uitl';
  const { push } = useRouter();
  const ROUTE_PATH = '/system/plug/detail';
  import { QqOutlined } from '@ant-design/icons-vue';
  import Tenant from '@/views/system/plug/components/tenant.vue';
  import Plug from '@/views/system/plug/components/plug.vue';

  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);

  const { currentRoute } = useRouter();
  const logo = ref<any>([]);
  const active = ref('detail');
  const duration = ref<any>('1');
  const plan = ref<any>('1');
  const top = ref<number>(10);

  // 用户信息
  const { form, assignFields } = useFormData<Company>({
    companyId: undefined,
    companyName: undefined,
    companyLogo: undefined,
    shortName: undefined,
    domain: undefined,
    email: undefined,
    tenantId: undefined,
    tenantName: '',
    comments: '',
    version: undefined,
    createTime: undefined
  });

  // 表单验证规则
  const rules = reactive({
    taskType: [
      {
        required: true,
        message: '请选择工单类型',
        type: 'string',
        trigger: 'blur'
      }
    ],
    content: [
      {
        required: true,
        type: 'string',
        message: '请填写问题描述',
        trigger: 'blur'
      }
    ],
    sortNumber: [
      {
        required: true,
        message: '请输入排序号',
        type: 'number',
        trigger: 'blur'
      }
    ]
  });

  // 查询租户信息
  const query = () => {
    const { query } = unref(currentRoute);
    const id = query.id;
    if (id) {
      getCompanyAll(Number(id)).then((data) => {
        assignFields({
          ...data
        });
        // 修改当前页签标题
        setPageTabTitle(`${form.tenantName}`);
      });
    }
  };

  watch(
    currentRoute,
    (route) => {
      const { path } = unref(route);
      if (path !== ROUTE_PATH) {
        return;
      }
      query();
    },
    { immediate: true }
  );
</script>

<script lang="ts">
  export default {
    name: 'SystemPlugDetail'
  };
</script>

<style lang="less" scoped>
  .goods-info {
    max-width: 80%;
    display: flex;
    .logo {
      display: flex;
      justify-content: flex-end;
      padding-right: 20px;
      width: 120px;
    }
    .info {
      .goods-name {
        font-size: 22px;
      }
      .comments {
        margin: 5px 0;
      }
      .buy-card {
        margin-top: 20px;
        width: 700px;
        justify-content: space-between;
        align-items: center;
        background-color: #f3faee;
        border-radius: 1px;
        .price-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .price {
            font-size: 28px;
            padding-right: 5px;
          }
        }
      }
    }
  }
  .goods-item {
    max-width: 80%;
    margin: 20px 0;
    display: flex;
    .title {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 20px;
      width: 120px;
    }
  }
  .task-card {
    padding: 2px !important;
    margin-bottom: 16px;
  }
  .user-content {
    max-width: 100%;
    border-radius: 8px !important;
    background-color: #a2ec71;
    border: none;
  }
  .admin-content {
    border-radius: 8px !important;
    border: 3px solid #f1f1f1;
  }
  /deep/.markdown-body {
    background-color: transparent; /* 设置背景透明 */
  }
  /deep/.markdown-body img {
  }
  .files {
    margin-top: 10px;
  }
  #bottom {
    margin-bottom: 20px;
  }
  .transparent-bg {
    background-color: transparent; /* 设置背景透明 */
  }
  .item-name {
    font-size: 14px;
  }
  .guarantee {
    height: 82px;
    background: url('https://oss.wsdns.cn/20231101/220819e37b2546b493f90a6de6e762f9.png?x-oss-process=image/resize,w_750/quality,Q_90');
    background-repeat: no-repeat;
    background-size: 80%;
    background-color: #fbf0e5;
    display: flex;
    align-items: center;
    .text {
      padding: 0 180px;
      font-size: 24px;
    }
  }
</style>
