<template>
  <sd-webflow ref="flow" :removed-tabs="['sdRelatedDoc']" :validate-form="validForm">
    <template v-slot:form="{ model, fields }">
      <table>
        <colgroup>
          <col style="width: 15%;"/>
          <col />
          <col style="width: 15%;"/>
          <col
        /></colgroup>
        <tr>
          <!-- 标题 -->
          <sd-form-item-td name="title" :colspan="3" />
          <!-- 类型 -->
          <!-- <sd-form-item-td name="informationType" /> -->
        </tr>
        <tr>
          <!-- 是否置顶 -->
          <!-- <sd-form-item-td name="canTopping" :colspan="model.canTopping === '1' ? 1 : 3" /> -->
          <!-- 置顶结束日期 -->
          <sd-form-item-td v-if="model.canTopping === '1'" name="endTime">
            <a-date-picker v-model="model.endTime" :disabled-date="disabledDate" />
          </sd-form-item-td>
        </tr> </table

      ><table>
        <colgroup>
          <col style="width: 15%;"/>
          <col />
          <col style="width: 15%;"/>
          <col
        /></colgroup>
        <tr :class="$style.syslt">
          <!-- 首页缩略图 -->
          <sd-form-item-td v-if="model.informationType === '01'" name="thumbnail" :colspan="3">
            <template v-slot:read-and-edit>
              <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"
                :show-pre-modal="showPreModal"
                :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>
            </template>
          </sd-form-item-td>
        </tr>
        <tr>
          <!-- 资讯描述 -->
          <sd-form-item-td name="inforDescription" :colspan="3" />
        </tr>
        <tr>
          <!-- 附件 -->
          <sd-form-item-td name="attachment" :colspan="3" />
        </tr>
        <tr>
          <!-- 编制人员 -->
          <sd-form-item-td name="creatorName" />
          <!-- 编制单位 -->
          <sd-form-item-td name="createDeptName" />
        </tr>
        <tr>
          <!-- 发布时间 -->
          <sd-form-item-td name="finishdate" :colspan="3"
            ><template v-slot:read-and-edit="{ editable }">
              {{ model.finishdate | sdDateFormat('YYYY-MM-DD') }}</template
            ></sd-form-item-td
          >
        </tr>
      </table>
    </template>
  </sd-webflow>
</template>

<script>
import { Message } from 'ant-design-vue'
import moment from 'moment'
import components from './_import-components/audit-information-form-import'

export default {
  name: 'AuditInformationForm',
  metaInfo: {
    title: '审计资讯',
  },
  components,
  data() {
    return {
      title: '',
      editorOption: {
        placeholder: '请从此处开始输入文本...',
      },
      visible: false,
    }
  },
  created() {},
  methods: {
    handleOk() {
      this.visible = false
    },
    handleCancel() {
      this.visible = false
    },
    showPreModal() {
      this.visible = true
    },
    validForm() {
      return Promise.resolve(true)
    },
    disabledDate(current) {
      return current && current < moment().subtract(1, 'days')
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$carousel-title: 64px;
.syslt > td {
  border-top: none !important;
}
.prebtn {
  top: 42px;
}
.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);
  }
}
</style>
