<!-- 用户编辑弹窗 -->
<template>
  <a-drawer
    width="75%"
    :visible="visible"
    :confirm-loading="loading"
    :maxable="maxAble"
    :title="'商品详情'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    :footer="null"
  >
    <a-form
      :label-col="{ md: { span: 4 }, sm: { span: 24 } }"
      :wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
    >
      <div class="base-form" style="margin-bottom: 20px">
        <a-descriptions :title="assets.name" bordered>
          <a-descriptions-item label="商品名称">
            {{ assets.name }}
          </a-descriptions-item>
          <a-descriptions-item label="商品IP">
            {{ assets.code }}
          </a-descriptions-item>
          <a-descriptions-item label="状态">
            <a-tag v-if="assets.status === '0'" color="green">正常</a-tag>
            <a-tag v-if="assets.status === '1'" color="red">过期</a-tag>
            <a-tag v-if="assets.status === '2'" color="purple">不再续</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="宝塔面板">
            <a href="#" @click="openUrl(assets)">{{ assets.panel }}</a>
          </a-descriptions-item>
          <a-descriptions-item label="宝塔账号">
            {{ assets.panelAccount }}
          </a-descriptions-item>
          <a-descriptions-item label="宝塔密码">
            <span v-role="['admin']">{{ assets.panelPassword }}</span>
            <span v-any-role="['user', 'guest', 'superAdmin', 'developer']"
              >****</span
            >
          </a-descriptions-item>
          <a-descriptions-item label="品牌厂商">
            {{ assets.brand }}
          </a-descriptions-item>
          <a-descriptions-item label="商品配置">
            {{ assets.configuration }}
          </a-descriptions-item>
          <a-descriptions-item label="开发端口">
            {{ assets.openPort }}
          </a-descriptions-item>
          <a-descriptions-item label="有效期">
            <div v-if="assets.startTime && assets.endTime">
              <div class="ele-text-info">{{ assets.startTime }}</div>
              <div v-html="getEndTime(assets.endTime)"></div>
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="商品账号">
            <span class="ele-text-danger">root</span>
          </a-descriptions-item>
          <a-descriptions-item label="商品密码">
            <span class="ele-text-danger" v-role="['admin']">{{
              assets.password
            }}</span>
            <span v-any-role="['user', 'guest', 'superAdmin', 'developer']"
              >****</span
            >
          </a-descriptions-item>
          <a-descriptions-item label="创建时间">
            {{ timeAgo(assets.createTime) }}
          </a-descriptions-item>
          <a-descriptions-item label="排序">
            {{ assets.sortNumber }}
          </a-descriptions-item>
          <a-descriptions-item label="发布人">
            {{ assets.userId }}
          </a-descriptions-item>
          <a-descriptions-item span="1" label="备注">
            {{ assets.comments }}
          </a-descriptions-item>
        </a-descriptions>
      </div>

      <a-space style="display: none">
        <a-tabs v-model:activeKey="activeKey" v-role="'admin'">
          <a-tab-pane key="1" tab="宝塔面板" force-render>
            <a-descriptions title="宝塔面板" class="tab-pane">
              <a-descriptions-item label="宝塔面板">
                <a href="#" @click="openUrl(assets)">{{ assets.panel }}</a>
              </a-descriptions-item>
              <a-descriptions-item label="宝塔面板账号">
                {{ assets.panelAccount }}
              </a-descriptions-item>
              <a-descriptions-item label="宝塔面板密码">
                {{ assets.panelPassword }}
              </a-descriptions-item>
              <a-descriptions-item label="开发端口">
                {{ assets.openPort }}
              </a-descriptions-item>
            </a-descriptions>
          </a-tab-pane>
          <a-tab-pane key="2" tab="账号密码" force-render>
            <a-descriptions title="商品账号密码" class="tab-pane">
              <a-descriptions-item label="商品账号">
                root
              </a-descriptions-item>
              <a-descriptions-item label="商品密码">
                {{ assets.password }}
              </a-descriptions-item>
            </a-descriptions>
            <a-descriptions title="账号密码" class="tab-pane">
              <a-descriptions-item label="登录账号">
                {{ assets.brandAccount }}
              </a-descriptions-item>
              <a-descriptions-item label="登录密码">
                {{ assets.brandPassword }}
              </a-descriptions-item>
            </a-descriptions>
          </a-tab-pane>
          <a-tab-pane key="3" tab="财务信息">
            <a-descriptions title="财务信息" class="tab-pane">
              <a-descriptions-item label="合同金额">
                <span class="ele-text-warning">
                  ￥{{ assets.financeAmount }}
                </span>
              </a-descriptions-item>
              <a-descriptions-item label="购买年限">
                {{ assets.financeYears }}年
              </a-descriptions-item>
              <a-descriptions-item label="每年续费金额">
                <span class="ele-text-warning">
                  ￥{{ assets.financeRenew }}
                </span>
              </a-descriptions-item>
              <a-descriptions-item label="客户名称">
                {{ assets.financeCustomerName }}
              </a-descriptions-item>
              <a-descriptions-item label="客户联系人">
                {{ assets.financeCustomerContact }}
              </a-descriptions-item>
              <a-descriptions-item label="联系方式">
                {{ assets.financeCustomerPhone }}
              </a-descriptions-item>
            </a-descriptions>
          </a-tab-pane>
        </a-tabs>
      </a-space>
    </a-form>
  </a-drawer>
</template>

<script lang="ts" setup>
  import { getEndTime } from '@/utils/common';
  import { ref, reactive, watch } from 'vue';
  import { Form } from 'ant-design-vue';
  import { assignObject, timeAgo } from 'ele-admin-pro';
  import type { Assets } from '@/api/oa/assets/model';

  const useForm = Form.useForm;

  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    // 修改回显的数据
    data?: Assets | null;
  }>();

  const emit = defineEmits<{
    (e: 'done'): void;
    (e: 'update:visible', visible: boolean): void;
  }>();

  // 用户信息
  const assets = reactive<Assets>({
    code: '',
    createTime: '',
    startTime: '',
    endTime: '',
    name: '',
    brand: undefined,
    account: '',
    password: '',
    configuration: '',
    panelAccount: '',
    panelPassword: '',
    panel: '',
    financeAmount: 0,
    financeYears: 0,
    financeRenew: 0,
    financeCustomerName: '',
    financeCustomerContact: '',
    financeCustomerPhone: '',
    brandAccount: '',
    brandPassword: '',
    openPort: '',
    comments: '',
    root: 'root',
    userId: 0,
    sortNumber: undefined,
    status: undefined,
    type: '',
    assetsId: 0
  });

  // 请求状态
  const loading = ref(true);
  // 是否显示最大化切换按钮
  const maxAble = ref(true);
  // 选项卡位置
  const activeKey = ref('1');
  const { resetFields } = useForm(assets);

  /* 更新visible */
  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  };

  /* 打开外部链接 */
  const openUrl = (record) => {
    window.open(record.panel);
  };

  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
        if (props.data) {
          loading.value = false;
          assignObject(assets, props.data);
        }
      } else {
        resetFields();
      }
    }
  );
</script>
<style lang="less">
  .tab-pane {
    min-height: 100px;
  }
  .important {
    font-weight: bold;
  }
</style>
