<!-- 标准装置台账信息详情 作业指导书 -->
<script name="StandardBookJobInstruction" lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElMessage, dayjs } from 'element-plus'
import type { IJobInstruction } from '../book-interface'
import selectSysDocDialog from '../dialog/selectSysDocDialog.vue'
import useUserStore from '@/store/modules/user'
import { useCheckList } from '@/commonMethods/useCheckList'
import { getDictByCode } from '@/api/system/dict'
import { getPhotoUrl } from '@/api/file'
import { addJobInstruction, deleteJobInstruction, getJobInstructionList } from '@/api/equipment/standard/book'
const props = defineProps({
  pageType: { // 页面类型 add新建 edit编辑 detail详情
    type: String,
    default: 'detail',
  },
  standardId: { // id
    type: String,
  },
})
// 查询条件
const listQuery = ref({
  id: props.standardId!,
  offset: 1,
  limit: 20,
})
const user = useUserStore() // 用户信息
const loadingTable = ref(false) // 表格loading
const list = ref<IJobInstruction[]>([]) // 表格数据
const checkoutList = ref<IJobInstruction[]>([]) // 多选数据
const sysDocRef = ref() // 选择体系文件组件ref
const total = ref(0) // 数据总条数
const checkoutIds = ref<string[]>([])// 删除用的ids
const columns = [ // 表头
  { text: '文件编号', value: 'fileNo', align: 'center', required: true, width: '240' },
  { text: '文件名称', value: 'fileName', align: 'center' },
  { text: '版本号', value: 'versionNo', align: 'center' },
  { text: '发放号', value: 'fileDistributeNo', align: 'center' },
  { text: '创建人', value: 'createUserName', align: 'center', width: '120' },
  { text: '创建日期', value: 'createTime', align: 'center', width: '180' },
  { text: '附件', value: 'file', align: 'center', width: '180' },
]
// -----------------------------------------字典-----------------------------------------------
const fileTypeMap = ref({}) as any // 文件类别
// 获取文件类别字典值
const getDict = async () => {
  const res = await getDictByCode('bizFileType')
  res.data.forEach((item: { value: string; name: string }) => {
    fileTypeMap.value[`${item.value}`] = item.name
  })
}

// -----------------------------------------methods--------------------------------------
// 数据查询
function fetchData(isNowPage = false) {
  loadingTable.value = true
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    listQuery.value.offset = 1
  }
  getJobInstructionList(listQuery.value).then((response) => {
    list.value = response.data.rows.map((item: { fileType: string; createTime: string }) => {
      return {
        ...item,
        fileTypeName: fileTypeMap.value[item.fileType],
        createTime: item.createTime ? dayjs(item.createTime).format('YYYY-MM-DD') : item.createTime,
      }
    })
    total.value = parseInt(response.data.total)
    loadingTable.value = false
  }).catch(() => {
    loadingTable.value = false
  })
}

const selectIndex = ref(0) // 选中第几行
// 点击增加行
const add = () => {
  const index = list.value.findIndex((item: IJobInstruction) => !item.fileNo && !item.fileName)
  if (index !== -1) {
    ElMessage.warning('请完善上一条作业指导书信息')
    return
  }
  list.value.push({
    id: '',
    fileId: '', // 文件id
    fileNo: '', // 文件编号
    fileDistributeNo: '', // 文件发放号
    fileName: '', // 文件名称
    versionNo: '', // 版本号
    fileTypeName: '', // 文件类别
    effectiveDate: '', // 实施时间
    file: '', // 附件
    createTime: '', // 创建时间
    createUserName: '', // 编制人
  })
  total.value = list.value.length
}
// 点击删除行
const del = async () => {
  if (!checkoutList.value.length) {
    ElMessage.warning('请选中要删除的行')
    return
  }
  // 前端删除
  list.value = list.value.filter(item => !checkoutList.value.includes(item))

  // 接口删除
  checkoutIds.value = checkoutList.value.map(item => item.standardSystemFileRelationId!)
  checkoutIds.value = checkoutIds.value.filter(item => item)
  if (checkoutIds.value.length) {
    loadingTable.value = true
    await deleteJobInstruction({ ids: checkoutIds.value })
    fetchData()
    loadingTable.value = false
  }
}
// 多选发生改变时
const handleSelectionChange = (e: any) => {
  checkoutList.value = e
}
// 点击选择文件
const selectedJobInstruction = (index: number) => {
  selectIndex.value = index
  sysDocRef.value.initDialog(false, 'job')
}
// 选择好文件
const confirmSelect = (val: any) => {
  const index = list.value.findIndex((i: IJobInstruction) => val[0].fileNo === i.fileNo)
  if (index !== -1) {
    ElMessage.warning('此文件已添加过')
    return
  }
  const params = {
    id: '',
    fileId: val[0].id, // 文件id
    fileNo: val[0].fileNo, // 文件编号
    fileDistributeNo: val[0].fileDistributeNo, // 文件发放号
    fileName: val[0].fileName, // 文件名称
    versionNo: val[0].versionNo, // 版本号
    fileTypeName: val[0].fileTypeName, // 文件类别
    effectiveDate: val[0].effectiveDate, // 实施时间
    createTime: val[0].createTime ? dayjs(val[0].createTime).format('YYYY-MM-DD') : val[0].createTime, // 创建时间
    createUserName: val[0].createUserName, // 编制人
    file: val[0].file, // 附件
  }
  list.value.splice(selectIndex.value, 1, params)
}

// 点击保存增加作业指导书
const saveJobInstruction = () => {
  if (!useCheckList(list.value, columns, '作业指导书')) {
    return false
  }
  const tempParams = list.value.filter(item => !item.id)
  const params = tempParams.map((item) => {
    return {
      id: '',
      standardId: props.standardId, // 标准装置表id
      fileId: item.fileId, // 体系文件表id
    }
  })
  loadingTable.value = true
  addJobInstruction(params).then(() => {
    ElMessage.success('新增作业指导书成功')
    fetchData()
  }).catch(() => {
    loadingTable.value = false
  })
}

// 改变页容量
function handleSizeChange(val: number) {
  listQuery.value.limit = val
  fetchData()
}
// 改变当前页
function handleCurrentChange(val: number) {
  listQuery.value.offset = val
  fetchData(true)
}
// 打开附件
const openFile = (row: any) => {
  getPhotoUrl(row.file).then((res) => {
    window.open(res.data, '_blank')
  })
}
// -------------------------------------------钩子-------------------------------------------------
onMounted(async () => {
  getDict().then(() => {
    console.log(fileTypeMap.value)

    fetchData()
  })
})
defineExpose({
  saveJobInstruction,
})
</script>

<template>
  <detail-block title="作业指导书" class="job-instruction">
    <template v-if="pageType !== 'detail'" #btns>
      <el-button type="primary" @click="add">
        增加行
      </el-button>
      <el-button type="info" @click="del">
        删除行
      </el-button>
    </template>
    <el-table
      v-loading="loadingTable"
      :data="list"
      border
      stripe
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="pageType !== 'detail'"
        type="selection"
        width="38"
      />
      <el-table-column label="序号" width="55" align="center">
        <template #default="scope">
          {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        v-for="item in columns"
        :key="item.value"
        :prop="item.value"
        :label="item.text"
        :width="item.width"
        align="center"
      >
        <template #header>
          <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
        </template>
        <template
          #default="scope"
        >
          <show-photo v-if="item.value === 'file'" :minio-file-name="scope.row[item.value]" />
          <span v-if="item.value === 'fileNo' && pageType !== 'detail' && scope.row.id">
            {{ scope.row[item.value] }}

          </span>
          <span v-if="item.value !== 'file' && item.value !== 'fileName'">{{ scope.row[item.value] }}</span>
          <span v-if="item.value === 'fileName'" class="link" @click="openFile(scope.row)">{{ scope.row[item.value] }}</span>
          <el-input
            v-if="item.value === 'fileNo' && pageType !== 'detail' && !scope.row.id"
            v-model="scope.row[item.value]"
            :placeholder="`${item.text}`"
            class="input"
            disabled
          >
            <template #append>
              <el-button
                size="small"
                @click="selectedJobInstruction(scope.$index)"
              >
                选择
              </el-button>
            </template>
          </el-input>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <el-pagination
      style="width: 100%;margin-top: 10px;"
      :current-page="listQuery.offset"
      :page-sizes="[10, 20, 30]"
      :page-size="listQuery.limit"
      :total="total"
      layout="total, sizes, prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </detail-block>

  <!-- 选择体系文件 -->
  <select-sys-doc-dialog ref="sysDocRef" @confirm="confirmSelect" />
</template>

<style lang="scss" scoped>
.follow-link {
  color: #3d7eff;
  cursor: pointer;

  &:hover {
    color: #04395e;
  }
}

.link {
  color: #3d7eff;

  &:hover {
    color: #77a5ff;
    cursor: pointer;
  }
}
</style>

<style lang="scss">
.job-instruction {
  // 单元格样式
  .el-table__cell {
    position: static !important; // 解决el-image 和 el-table冲突层级冲突问题
  }
}
</style>