<template>
  <div>
    <el-drawer
      v-model="isShowDrawer"
      title="详情"
      direction="rtl"
      size="80%"
      v-loading="detailLoading"
    >
      <template #header>
        <div class="font-size-18px">
          {{ titleValueRef }} <span class="ml-20px font-size-16px">{{ titleNameRef }}</span>
        </div>
      </template>
      <ContentWrap v-if="!isBasic">
        <Descriptions
          :data="detailData"
          labelClassName="label-class-name"
          label-align="left"
          direction="vertical"
          :column="8"
          :schema="allSchemas.detailSchema"
          :columns="2"
          width="200px"
        />
      </ContentWrap>

      <Tabs :tabsList="tabsList" :current="current" @change="change" />
      <div class="flex">
        <!-- 详情 -->
        <ContentWrap class="w-[73%]">
          <!-- 列表头部 -->
          <TableHead
            v-if="!isBasic"
            :HeadButttondata="HeadButttondata"
            :code="masterParmas.code"
            @button-base-click="buttonBaseClick"
            :routeName="routeName"
            @searchFormClick="searchFormClick"
            :allSchemas="detailAllSchemas"
          />
          <!-- 默认单表展现 -->
          <Descriptions
            v-if="isBasic && !tabsExtend"
            :data="detailData"
            :schema="allSchemas.detailSchema"
            :columns="2"
          />
          <!-- 单表切换tabs 展现table -->
          <Table
            v-if="isBasic && tabsExtend"
            :columns="detailAllSchemasRef.tableColumns"
            :data="tableObjectRef.tableList"
            :loading="tableObjectRef.loading"
            :pagination="{ total: tableObjectRef.total }"
            v-model:pageSize="tableObjectRef.pageSize"
            v-model:currentPage="tableObjectRef.currentPage"
          >
            <!-- <template #action="{ row }">
              <ButtonBase
                :Butttondata="buttondata"
                @button-base-click="buttonTableClick($event, row)"
              />
            </template> -->
          </Table>
          <Table
            v-if="!isBasic && fromeWhere != 'countPlan'"
            :columns="detailAllSchemasRef.tableColumns"
            :data="tableObjectRef.tableList"
            :loading="tableObjectRef.loading"
            :pagination="{ total: tableObjectRef.total }"
            v-model:pageSize="tableObjectRef.pageSize"
            v-model:currentPage="tableObjectRef.currentPage"
          >
          <template #photos="{ row }">
             <div v-for="(item,index) in row.photos.split(',')" :key="index" style="color:#409eff ; cursor: pointer;" @click="openImage(item)">{{ item }}</div>
            </template>
            <template #action="{ row }">
              <ButtonBase
                :Butttondata="buttondata"
                @button-base-click="buttonTableClick($event, row)"
              />
            </template>
          </Table>
          <DetailTable
            v-if="!isBasic && fromeWhere == 'countPlan' && isShowDrawer"
            :columns="detailAllSchemasRef.tableColumns"
            :data="tableObjectRef.tableList"
            :allList="allList"
            :countScopeType="countScopeType"
            :key="updateKey"
          >
            <template #action="{ row }">
              <ButtonBase
                :Butttondata="buttondata"
                @button-base-click="buttonTableClick($event, row)"
              />
            </template>
          </DetailTable>
        </ContentWrap>
        <ContentWrap class="w-[27%] ml-16px">
          <!-- 附件组件 -->
          <Annex
            :annexData="annexData"
            @handleAnnexSuccess="handleAnnexSuccess"
            @deleteAnnexSuccess="deleteAnnexSuccess"
            :upData="remarksData.data"
          />
          <!-- 备注组件 -->
          <Remarks
            :remarksData="remarksData"
            class="mt-20px"
            @remarksSubmitScuess="remarksSubmitScuess"
          />
          <!-- 变更记录组件 -->
          <ChangeRecord :changeRecordData="changeRecordData" class="mt-20px" />
        </ContentWrap>
      </div>
    </el-drawer>
    <!-- 表单弹窗：添加/修改 -->
    <BasicForm
      ref="formRef"
      @success="submitForm"
      :rules="detailAllSchemasRules"
      :formAllSchemas="detailAllSchemas"
      :isBusiness="false"
      :apiUpdate="apiUpdate"
      :apiCreate="apiCreate"
      :fromeWhere="fromeWhere"
      :isDetail="true"
      @searchTableSuccess="searchTableSuccess"
      :detailData="detailData"
      @submitForm="submitForm"
      @selectChangeDetail="selectChangeDetail"
      :formTypeDetail="formTypeDetail"
      :countPlanAllList="countPlanAllList"
      @onChange="detailBasicFormOnChange"
      @onBlur="onBlur"
      @formFormDateChange="formFormDateChange"
    />

  </div>
</template>

<script lang="ts" setup>
import Annex from '@/components/Annex/src/Annex.vue'
import Remarks from '@/components/Remarks/src/Remarks.vue'
import ChangeRecord from '@/components/ChangeRecord/src/ChangeRecord.vue'
import Tabs from '@/components/Tabs/src/Tabs.vue'
import * as RemarkApi from '@/api/wms/remark'
import * as FileApi from '@/api/wms/file'
import * as defaultButtons from '@/utils/disposition/defaultButtons'
import BasicForm from '@/components/BasicForm/src/BasicForm.vue'
import TableHead from '@/components/TableHead/src/TableHead.vue'
import DetailTable from '@/components/DetailTable/src/DetailTable.vue'

defineOptions({ name: 'Detail' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const route = useRoute() // 路由信息
const routeName = ref()
routeName.value = route.name
routeName.value = routeName.value.substring(0, routeName.value.length - 4) + 'Detail'
const updateKey = ref(0)

const props = defineProps({
  // 标签参数
  tabs: {
    type: Object,
    required: true,
    default: null
  },
  // 是否是基础数据 展现详情顶部表单
  isBasic: {
    type: Boolean,
    required: false,
    default: false
  },
  // 表单，列表 相关信息
  allSchemas: {
    type: Object,
    required: true,
    default: null
  },
  // 明细列表相关信息
  detailAllSchemas: {
    type: Object,
    required: true,
    default: null
  },
  //  明细验证
  detailAllSchemasRules: {
    type: Object,
    required: true,
    default: null
  },
  // 子表新增API
  apiCreate: {
    type: Function,
    required: false,
    default: null
  },
  // 子表编辑API
  apiUpdate: {
    type: Function,
    required: false,
    default: null
  },
  // 子表分页列表API
  apiPage: {
    type: Function,
    required: false,
    default: null
  },
  // 子表删除API
  apiDelete: {
    type: Function,
    required: false,
    default: null
  },
  // 子表新增修改校验
  detailValidate: {
    type: Function,
    required: false,
    default: null
  },
  // 来源 countPlan盘点计划进入
  fromeWhere: {
    type: String,
    required: false,
    default: ''
  },
  // 获取接口列表集合
  allList: {
    type: Object,
    required: true,
    default: null
  },
  // 盘点范围类型
  countScopeType: {
    type: Array,
    required: false,
    default: null
  },
  //盘点详情子表新增的时候判断盘点范围值显示输入框还是下拉框
  formTypeDetail: {
    type: String,
    required: false,
    default: 'InputString'
  },
  //盘点详情子表新增的时候判断盘点范围值的下拉列表
  countPlanAllList: {
    type: Array,
    required: false,
    default: null
  },
  // 详情列表扩展操作按钮
  buttondataTable: {
    type: Array,
    required: false,
    default: ()=>{
      return []
    }
  },
  // 针对基础数据tabs扩展 显示table列表 默认false
  tabsExtend: {
    type: Boolean,
    required: false,
    default: false
  },
  // tableObject 数据过滤条件 针对 详情扩展标签页 传入不同条件
  tableObjectExtend: {
    type: Array,
    required: false,
    default: null
  },
  // 子列表 筛选 展示与隐藏 ，默认展示
  detailButtonIsShowFilter:{
    type: Boolean,
    required: false,
    default: true
  },
  // 子列表 新增 展示与隐藏 ，默认展示
  detailButtonIsShowAdd:{
    type: Boolean,
    required: false,
    default: true
  },
  // 子列表 编辑 展示与隐藏 ，默认展示
  detailButtonIsShowEdit:{
    type: Boolean,
    required: false,
    default: true
  },
  // 子列表 删除 展示与隐藏 ，默认展示
  detailButtonIsShowDelete:{
    type: Boolean,
    required: false,
    default: true
  }
})
const isShowDrawer = ref(false)
const detailLoading = ref(false)
const tabsList = ref(JSON.parse(JSON.stringify(props.tabs ? props.tabs : '')))

if (props.isBasic == true) {
  if (tabsList.value && tabsList.value.length > 0) {
    tabsList.value.unshift({
      label: '详情',
      prop: 'Detail'
    })
  }
} else {
  if (tabsList.value && tabsList.value.length > 0) {
  } else {
    tabsList.value = [
      {
        label: '明细',
        prop: 'Detail'
      }
    ]
  }
}
if (tabsList.value) {
}

// 附件默认数据
const annexData = reactive({
  annexList: []
})

// 备注数据
const remarksData = reactive({
  remarksList: [],
  data: {}
})

// 变更记录默认数据
const changeRecordData = reactive({
  changeRecordList: []
})
const detailData = ref({}) //详情数据
// 获取附件列表篇
const getFileList = async () => {
  detailLoading.value = true
  try {
    annexData.annexList = await FileApi.getFileList(remarksData.data)
  } finally {
    detailLoading.value = false
  }
}
/** 添加附件 */
const handleAnnexSuccess = () => {
  getFileList()
  getChangeRecordList()
}
// 删除附件成功之后所走的方法
const deleteAnnexSuccess = async () => {
  getFileList()
  getChangeRecordList()
}

// Tabs当前选择
const current = ref(0)
const change = (item, index) => {
  current.value = index
  emit('changeTabs', item)
}

//主表所需的参数
const masterParmas = ref({
  code: '', //主表id
  number: '', //主表单据号
  status: '', //主表状态 用于控制子表新增编辑按钮显示情况
})

// 列表头部按钮
const HeadButttondata = ref()
// 列表-操作按钮
const buttondata = ref()

/** 打开弹窗 */
const formRef = ref()
const titleNameRef = ref()
const titleValueRef = ref()
const openDetail = async (row: any, titleName: any, titleValue: any, tableName: any) => {
  titleNameRef.value = titleName
  titleValueRef.value = titleValue
  remarksData.data = {
    tableId: row.id,
    tableName: tableName
  }
  // 加载明细列表
  if (!props.isBasic) {
    // 设置主表id
    masterParmas.value.code = row.id
    masterParmas.value.number = row.number
    masterParmas.value.status = row.status
    tableObjectRef.value.params = {
      code: row.code
    }
    await getList()
  }
  isShowDrawer.value = true
  if (row) {
    detailLoading.value = true
    try {
      detailData.value = row
      getRemarkList()
      getFileList()
      getChangeRecordList()
      // 判断详情按钮是否显示
      let detailButtonFilter: any = []
      let detailButtonAdd: any = []
      if (props.detailButtonIsShowFilter) {
        // 筛选
        detailButtonFilter = [
          defaultButtons.defaultFilterBtn(null)
        ]
      }
      if (props.detailButtonIsShowAdd) {
        // 新增
        detailButtonAdd = [
          defaultButtons.defaultAddBtn({
            hide: isShowMainButton(row, ['1'])
          })
        ]
      }
      HeadButttondata.value = [...detailButtonFilter,...detailButtonAdd]

      // 针对特殊处理 当业务是任务的 只显示筛选 正常情况下应在业务页面设置 后期再作优化
      if (routeName.value.indexOf('Job') > -1) {
        HeadButttondata.value = [
          defaultButtons.defaultFilterBtn(null) // 筛选
        ]
      }

      let detailButtonEdit: any = []
      let detailButtonDelete: any = []
      if (props.detailButtonIsShowEdit) {
        // 编辑
        detailButtonEdit = [
          defaultButtons.mainListEditBtn({
            hide: isShowMainButton(row, ['1'])
          })
        ]
      }
      if (props.detailButtonIsShowDelete) {
        // 删除
        detailButtonDelete = [
          defaultButtons.mainListDeleteBtn({
            hide: isShowMainButton(row, ['1'])
          })
        ]
      }
      buttondata.value = [...detailButtonEdit,...detailButtonDelete,...props.buttondataTable]

    } finally {
      detailLoading.value = false
    }
  }
}
defineExpose({ openDetail, formRef }) // 提供 open 方法，用于打开弹窗

// 获取备注列表
const getRemarkList = async () => {
  detailLoading.value = true
  try {
    remarksData.remarksList = await RemarkApi.getRemarkPage(remarksData.data)
  } finally {
    detailLoading.value = false
  }
}
// 备注提交成功之后
const remarksSubmitScuess = async (remark) => {
  detailLoading.value = false
  getRemarkList()
  getChangeRecordList()
}
// 获取变更记录
const getChangeRecordList = async () => {
  changeRecordData.changeRecordList = await RemarkApi.getChangeRecordPage(remarksData.data)
}

const tableObjectRef = ref()
const tableMethodsRef = ref()
const detailAllSchemasRef = ref()

const { tableObject, tableMethods } = useTable({
  getListApi: props.apiPage // 分页接口
})

tableObjectRef.value = tableObject
tableMethodsRef.value = tableMethods
detailAllSchemasRef.value = props.detailAllSchemas

// 根据状态返回该按钮是否显示
const isShowMainButton = (row, val) => {
  if (val.indexOf(row.status) > -1) {
    return false
  } else {
    return true
  }
}

// 获得表格的各种操作
const { getList } = tableMethodsRef.value

// 头部按钮事件
const buttonBaseClick = (val, item) => {
  if (val == 'add') {
    // 新增
    openForm('create')
  } else if (val == 'import') {
    // 导入
    handleImport()
  } else if (val == 'export') {
    // 导出
    handleExport()
  } else if (val == 'refresh') {
    // 刷新
    getList()
  } else if (val == 'filtrate') {
    // 筛选
  } else {
    // 其他按钮
    console.log('其他按钮', item)
  }
}

// 字段设置 更新主列表字段
// const updataTableColumns = (val) => {
//   detailAllSchemas.tableColumns.value = val
// }

// 列表-操作按钮事件
const buttonTableClick = async (val, row) => {
  if (val == 'edit') {
    // 编辑
    openForm('update', row)
  } else if (val == 'delete') {
    // 删除
    handleDelete(row.code)
  } else {
    emit('tableFormButton',val, row)
  }
}
/** 添加/修改操作 */
const openForm = async (type: string, row?: number) => {
  // formRef.value.open(type, row, masterParmas.value)
  emit('detailOpenForm', type, masterParmas.value)
}
// form 提交
const submitForm = async (formType, data) => {
  try {
    // 子表新增编辑校验 如果业务需要子表提交校验 需在主页详情组件添加 detailValidate 参数及方法
    const rs = (await props.detailValidate) ? await props.detailValidate(data) : true
    if (!rs) return
    if (formType === 'create') {
      await props.apiCreate(data)
      message.success(t('common.createSuccess'))
    } else {
      await props.apiUpdate(data)
      message.success(t('common.updateSuccess'))
    }
    formRef.value.dialogVisible = false
    // 刷新当前列表
    await getList()
    updateKey.value += 1
  } finally {
    formRef.value.formLoading = false
  }
}

// 查询页面返回
const searchTableSuccess = (formField, searchField, val, formRef) => {
  emit('searchTableSuccessDetail', formField, searchField, val, formRef)
}
// 传递给父类
const emit = defineEmits([
  'searchTableSuccessDetail',
  'changeTabs',
  'selectChangeDetail',
  'detailOpenForm',
  'tableFormButton',
  'openImage',
  'onBlur',
  'detailBasicFormOnChange',
  'formFormDateChange'
])
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    tableObject.loading = true
    // 发起删除
    await props.apiDelete([id])
    tableObject.loading = false
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
    updateKey.value += 1
  } catch {}
}
// 筛选提交
const searchFormClick = async (searchData) => {
  const { tableObject, tableMethods } = useTable({
    getListApi: props.apiPage // 分页接口
  })
  tableObject.params = {
    isSearch: true,
    filters: searchData.filters
      ? searchData.filters
      : [{ column: 'code', action: '==', value: masterParmas.value.code }]
  }
  detailAllSchemasRef.value = props.detailAllSchemas
  tableObjectRef.value = tableObject
  tableMethodsRef.value = tableMethods
  tableObjectRef.value.tableList = []
  const { getList } = tableMethods
  await getList()
  updateKey.value += 1
  // tableObjectRef.value.params = {
  //   isSearch: true,
  //   filters: searchData.filters
  //     ? searchData.filters
  //     : [{ column: 'masterId', action: '==', value: masterParmas.value.masterId }]
  // }
  // getList() // 刷新当前列表
}
// 选择盘点类型的时候针对限值的操作
const selectChangeDetail = (field, val) => {
  emit('selectChangeDetail', field, val)
}
// 打开图片
const openImage=(item)=>{
  emit('openImage', item)
}
/**
 * 监听改变事件
 * @param field 当前操作字段
 * @param cur 改变后值
 */
 const detailBasicFormOnChange = (field, cur) => {
  emit('detailBasicFormOnChange', field, cur)
}

/**
 * 监听失焦事件
 * @param field 当前操作字段
 * @param e 
 */
 const onBlur = (field, e) => {
  emit('onBlur', field, e)
}

// 日期改变事件
const formFormDateChange = (field, val,row, index) => {
  emit('formFormDateChange', field, val,row, index)
}
//监视属性
watch(
  () => props.apiPage,
  () => {
    const { tableObject, tableMethods } = useTable({
      getListApi: props.apiPage // 分页接口
    })
    tableObject.params.code = masterParmas.value.code
    detailAllSchemasRef.value = props.detailAllSchemas
    if (props.tableObjectExtend) {
      props.tableObjectExtend.forEach(item => {
        tableObject.params[item.key] = item.value
      })
    }
    tableObjectRef.value = tableObject
    tableMethodsRef.value = tableMethods
    const { getList } = tableMethods
    getList()
  }
)
</script>
<style lang="scss">
.el-drawer__body {
  background: #f5f5f5 !important;
}

::v-deep(.label-class-name) {
  color: #dedede;
}
</style>
<style scoped lang="scss"></style>
