<template>
  <div>
    <a-card>
      <sd-data-table-ex
          ref="dataTable"
          form-id="iamPortalBlogroll"
          page-id="audit/portal/blogroll/iamPortalBlogroll"
          :columns="columns"
          :actions="actions"
          show-selection
          :search-fields="['name','url','remarks']"
      >
        <template v-slot:form="{ model,fields }">
          <!-- 链接名称 -->
          <sd-form-item name="name"/>
          <!-- 缩略图 -->
          <sd-form-item name="thumbnail">
            <template v-slot:read-and-edit>
              <div :class="$style.attachment">
                <sd-attachment
                    v-model="model.thumbnail"
                    :group-id="JSON.parse(fields.thumbnail.value).value"
                    :accept="'image/*'"
                    :reject-message="'请上传图片'"
                    :read-only="fields.thumbnail.readonly"
                    :max="1"
                    :list-type="model.thumbnail.length > 0 ? 'picture-card' : ''"
                >
                </sd-attachment>
                <a-button
                    v-show="model.thumbnail.length > 0"
                    :class="$style.prebtn"
                    icon="eye"
                    @click="showPreModal"
                >预览首页效果
                </a-button>
                <a-modal
                    title="预览首页效果"
                    :visible="visible"
                    :footer="null"
                    @ok="handleOk"
                    @cancel="handleCancel"
                >
                  <div :class="$style.preivewbox">
                    <img
                        v-if="visible"
                        class="previewimg"
                        :src="
                      `api/flow-mobile/v1/task-form-process/download-attachments/${model.thumbnail[0].code}`
                        | sdResource
                    "
                    />
                    <span :class="$style.sliderTitle">{{ model.title }}</span>
                  </div>
                </a-modal>
              </div>
            </template>
          </sd-form-item>
          <!-- 链接地址 -->
          <sd-form-item name="url"/>
          <!-- 备注 -->
          <sd-form-item name="remarks" :colspan="3">
            <a-textarea v-model="model.remarks"/>
          </sd-form-item>
        </template>
      </sd-data-table-ex>
    </a-card>
  </div>
</template>

<script>
import TableActionTypes from '@/common/services/table-action-types'
import {message, Modal} from "ant-design-vue";
import axios from "@/common/services/axios-instance";
import errorUtil from "@/common/services/error-util";
import components from './_import-components/audit-portal-blogroll-list-import'

export default {
  name: 'AuditPortalBlogrollList',
  metaInfo: {
    title: '友情链接',
  },
  components,
  data() {
    return {
      visible: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'sortNumber',
          width: '80px',
          customRender: (text, record, index) => `${index + 1}`,
        },
        {
          title: '链接名称',
          dataIndex: 'name',
          sdClickable: true, // 列内容是否可点击
        },
        {
          title: '链接地址',
          dataIndex: 'url',
        },
        {
          title: '备注',
          dataIndex: 'remarks',
        },
      ],
      actions: [
        {
          label: '新建',
          id: 'new',
          permission: null,
          type: TableActionTypes.oa.create, // 新建按钮，不需要回调，自动处理
        },
        {
          label: '删除',
          id: 'delete',
          permission: null,
          type: TableActionTypes.oa.delete, // 删除按钮，不需要回调，会自动处理
        },
      ],
    }
  },
  created() {

  },
  methods: {
    handleOk() {
      this.visible = false
    },
    handleCancel() {
      this.visible = false
    },
    showPreModal() {
      this.visible = true
    },
    refreshDataTable() {
      this.$refs.dataTable.clearSelection()
      this.$refs.dataTable.refresh()
    },
    rowClick(record) {

    },
    linkToDelete() {
      const selectedRowKeys = this.$refs.dataTable.getSelectedRowKeys()
      if (selectedRowKeys.length === 0) {
        Modal.info({
          content: '请选择需要删除的数据！',
        })
        return
      }
      return new Promise((resolve) => {
        Modal.confirm({
          title: '您确定删除这项内容吗？',
          content: '删除这条数据后，就无法恢复初始的状态。',
          okText: '删除',
          okType: 'danger',
          onOk: () => {
            axios({
              url: 'api/xcoa-mobile/v1/page/iamPortalBlogroll',
              method: 'delete',
              params: {
                ids: selectedRowKeys.join(','),
              },
            })
                .then(() => {
                  const msg = '删除成功'
                  message.success(msg)
                  this.refreshDataTable()
                })
                .catch((err) => {
                  const msg = errorUtil.getMessage(err) || '删除失败'
                  message.error(msg)
                })
                .finally(resolve)
          },
          onCancel: () => {
            resolve()
          },
        })
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;

$carousel-title: 64px;
.preivewbox {
  width: 100%;
  height: 300px;
  overflow: hidden;
  text-align: center;

  :global(.previewimg) {
    height: 100%;
  }

  .slider-title {
    // position: relative;
    bottom: $carousel-title;
    display: inline-block;
    width: 100%;
    height: $carousel-title;
    padding: 0 100px 0 15px;
    overflow: hidden;
    font-size: $font-size-lg;
    line-height: $carousel-title;
    color: $white;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.7);
  }
}

:global(.prebtnatt) {
  top: 42px;
}

:global(.preivewboxatt) {
  width: 100%;
  height: 300px;
  overflow: hidden;
  text-align: center;

  :global(.previewimg) {
    height: 100%;
  }

  :global(.slider-titleatt) {
    // position: relative;
    bottom: $carousel-title;
    display: inline-block;
    width: 100%;
    height: $carousel-title;
    padding: 0 100px 0 15px;
    overflow: hidden;
    font-size: $font-size-lg;
    line-height: $carousel-title;
    color: $white;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.7);
  }
}

.attachment {
  :global(.ant-upload) {
    padding: 5px 0 !important;
  }
}

</style>
