<template>
  <a-card :bordered="false">
    <x-form-table
      title="工作日志"
      ref="xFormTable"
      service-name="af-system"
      :queryParamsName="queryParamsName"
      :fixed-query-form="fixedQueryForm"
      :customAdd="true"
      @add="add"
      @action="toDetail"
    >
    </x-form-table>
    <!--新增工作日志-->
    <a-modal
      v-model="formModalVisible"
      :footer="null"
      :dialog-style="{ top: '5rem' }"
      :z-index="1001"
      width="68vw"
      title="添加材料"
      :destroyOnClose="true">
      <x-add-native-form ref="xForm" @onSubmit="Submit"/>
    </a-modal>
    <!-- 抽屉 -->
    <a-drawer
      :visible="visible"
      width="40vw"
      placement="right"
      title="查看附件"
      @close="visible = false, previewFileVisible=false"
    >
      <div>
        <file-item :files="fileList" @preview="handlePreviewFile"/>
      </div>
      <!-- 文件预览 -->
      <a-modal v-model="previewFileVisible" :footer="null" :dialog-style="{ top: '20px' }" width="80%" :z-index="1001">
        <file-preview :path="filePath"/>
      </a-modal>
    </a-drawer>
  </a-card>
</template>

<script>
import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
import { runLogic, getConfigByName } from '@vue2-client/services/api/common'
import fileItem from '@vue2-client/components/FileImageItem/FileItem.vue'
import FilePreview from '@vue2-client/components/FilePreview/FilePreview.vue'
import { mapState } from 'vuex'
export default {
  name: '工作日志',
  components: {
    XFormTable,
    fileItem,
    FilePreview,
    XAddNativeForm
  },
  props: {
    workflowId: {
      type: String,
      default: ''
    },
    details: {
      type: Object,
      required: true
    }
  },
  computed: {
    ...mapState('account', { currUser: 'user' }),
  },
  data () {
    return {
      // 查询配置文件名
      queryParamsName: 'worklogCRUD',
      visible: false,
      previewFileVisible: false,
      filePath: '',
      fileList: [],
      fixedQueryForm: {},
      fixedAddForm: {},
      formModalVisible: false
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    add () {
      this.formModalVisible = true
      this.$nextTick(
        () => {
          getConfigByName('worklogAddForm', 'af-system', (res) => {
            this.$refs.xForm.init({
              businessType: '新增',
              serviceName: 'af-system',
              title: '新增工作日志',
              fixedAddForm: { defname: this.details.f_sub_state},
              extData: { workflowId: this.workflowId },
              ...res
            })
          })
        }
      )
    },
    init () {
      this.fixedQueryForm = { w_f_workflow_id: this.workflowId }
      this.$refs.xFormTable.refreshTable(true)
    },
    toDetail (record, id) {
      runLogic('getfiles', { id: id, f_table_name: 't_work_log' }, 'af-system').then(res => {
        this.fileList = res
        this.visible = true
      })
    },
    handlePreviewFile (url) {
      this.filePath = url
      this.previewFileVisible = true
    },
    Submit (record) {
      record.realForm.f_workflow_id = this.workflowId
      const data = {
        form: record.realForm,
      }
      this.formModalVisible = false
      runLogic('updataworklogfiles', data, 'af-system')
      this.$refs.xFormTable.refreshTable(true)
    }
  }
}
</script>
