<!-- 文件模板注册管理详情 -->
<script lang="ts" setup name="SystemTemplateRegisterDetail">
import { ref } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import type { IForm } from './templateRegister-interface'
import selectModuleNameDialog from './dialog/selectModuleNameDialog.vue'
import selectFileTemplateDialog from './dialog/selectFileTemplateDialog.vue'
import selectSealDialog from './dialog/selectSealDialog.vue'
import { getUserList } from '@/api/system/user'
import useUserStore from '@/store/modules/user'
import { useCheckList } from '@/commonMethods/useCheckList'
import { addTemplateRegisterList, getInfo, updateTemplateRegisterList } from '@/api/system/baseInfoTemplateRegister'
// import type { IOptions } from '@/views/device/standardEquipment/standard_interface'
const user = useUserStore() // 用户信息
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典
const $router = useRouter() // 关闭页面使用
const $route = useRoute() // 路由参数
const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // 列表id
const ruleFormRef = ref() // 表单ref
const form = ref({
  moduleName: '', // 模块名称
  moduleType: '', // 模块类型
  descn: '', // 备注描述
  createUserId: '', // 创建人id
  createUserName: '', // 创建人名称
  createTime: '', // 创建时间
  templateFileId: '', // 文件模板id
  templateFileName: '', // 文件模板名称
  objectString: '', // 是否为多字段组合--组成字段
  mergeColNames: '', // 需要合并得表头字段
  remark: '', // 备注说明
})
// 校验规则
const formRules = ref({
  moduleName: [{ required: true, message: '模块名称不能为空', trigger: ['blur', 'change'] }],
  // templateFileName: [{ required: true, message: '文件模板不能为空', trigger: ['blur', 'change'] }],
})
const isMulti = ref(false) // 是否多选

// -------------------------------------------字典------------------------------------------
const approvalFlagList = [
  {
    id: '1',
    name: '是',
    value: '1',
  },
  {
    id: '0',
    name: '否',
    value: '0',
  },
]
const userList = ref<{ [key: string]: string }[]>([]) // 用户列表

// 获取字典值
async function getDict() {
  // 获取用户列表
  getUserList({ offset: 1, limit: 999999 }).then((res: any) => {
    userList.value = res.data.rows
  })
}
// ----------------------------------路由参数--------------------------------------------
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  console.log(pageType.value)

  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}

// ----------------------------------------------选择模块名称--------------------------------------
const selectModuleNameDialogRef = ref()
// 点击选择模块名称
const selectModuleTypeName = () => {
  selectModuleNameDialogRef.value.initDialog()
}
// 确定选择模块名称
const confirmSelectModuleName = (val: any) => {
  form.value.moduleName = val[0].moduleName
  form.value.moduleType = val[0].moduleTypeName
}

// ----------------------------------------------选择文件模板------------------------------------
const selectFileTemplateDialogRef = ref()
// 点击选择文件模板
const selectFileTemplate = () => {
  selectFileTemplateDialogRef.value.initDialog()
}
// 确定选择文件模板
const confirmSelectFileTemplate = (val: any) => {
  form.value.templateFileId = val[0].id // 文件模板id
  form.value.templateFileName = val[0].templateName // 文件模板名称
}

// -------------------------------------------电子签章-------------------------------------------
const selectSealDialogRef = ref()
const sealList = ref([]) as any // 电子签章表格数据
const checkoutSealList = ref([]) as any
const sealColumn = [
  { text: '电子签章编号', value: 'sealNo', align: 'center', required: false },
  { text: '电子签章名称', value: 'sealName', align: 'center', required: false },
  { text: '审批人名称', value: 'approverName', align: 'center', required: false },
  { text: '图形', value: 'minioFileUrl', align: 'center', required: false },
  { text: '关键字名称', value: 'keywords', align: 'center', required: false },
]
// 多选
const handleSelectionSealChange = (e: any) => {
  checkoutSealList.value = e
}
// 批量增加电子签章
const multiAdd = () => {
  selectSealDialogRef.value.initDialog()
}
// 点击删除行
const delRow = () => {
  if (checkoutSealList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  else {
    checkoutSealList.value.forEach((item: any) => {
      sealList.value.forEach((element: any, index: number) => {
        if (element.id === item.id) {
          sealList.value.splice(index, 1)
        }
      })
    })
  }
}
// 确定选择电子签章
const confirmselectSeal = (val: any) => {
  console.log(val)

  val.forEach((item: any) => {
    // 只添加列表里不存在的
    const index = sealList.value.findIndex((i: any) => item.id === i.id)
    if (index === -1) {
      const param = {
        sealNo: item.sealNo, // 印章编号
        sealName: item.sealName, // 印章名称
        minioFileName: item.minioFileName,
        minioFileUrl: item.minioFileUrl, // 印章图片
        id: item.id, // id
        keywords: '', // 模板中关键字名称
        approverName: item.approverName, // 审批人名称
      }
      sealList.value.push(param)
    }
  })
}

// ------------------------------------------图片配置-------------------------------------------
const imageList = ref([]) as any // 图片配置列表
const checkoutImageList = ref([]) as any // 选中图片配置列表
const imageColumn = [
  { text: '字段', value: 'filedName', required: true, align: 'center' },
  { text: '文档中的关键字', value: 'docName', required: true, align: 'center' },
  { text: '表位置', value: 'tableIndex', required: true, align: 'center' },
  { text: '行位置', value: 'rowIndex', required: true, align: 'center' },
  { text: '列位置', value: 'colIndex', required: true, align: 'center' },
  { text: '行宽（合并行数）', value: 'rowSpan', required: true, align: 'center' },
  { text: '列宽（合并列数）', value: 'colSpan', required: true, align: 'center' },
  { text: '审批标志', value: 'approvalFlag', required: true, align: 'center' },
]
// 点击增加行
const addRowImageConfig = () => {
  if (useCheckList(imageList.value, imageColumn, '图片配置')) {
    imageList.value.push({
      filedName: '', // 文件名称
      tableIndex: '', // 表位置
      rowIndex: '', // 行位置
      colIndex: '', // 列位置
      rowSpan: '', // 行宽（合并行数）
      colSpan: '', // 列宽（合并列数）
      approvalFlag: '', // 审批标志
      docName: '', // 文档中的关键字
    })
  }
}

const handleSelectionImageChange = (e: any) => {
  checkoutImageList.value = e
}

const delRowImageConfig = () => {
  if (checkoutImageList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  imageList.value = imageList.value.filter((item: any) => {
    return !checkoutImageList.value.includes(item)
  })
}

// ------------------------------------------json字段展示-------------------------------------------
const jsonList = ref([]) as any // json字段展示列表
const checkoutJsonList = ref([]) as any // 选中json字段展示列表
const jsonColumn = [
  { text: '字段名称', value: 'filedName', required: true, align: 'center' },
  { text: '字典名称', value: 'code', required: true, align: 'center' },
]
// 点击增加行
const addRowJson = () => {
  if (useCheckList(jsonList.value, jsonColumn, 'json字段展示')) {
    jsonList.value.push({
      filedName: '', // 文件名称
      tableIndex: '', // 表位置
      rowIndex: '', // 行位置
      colIndex: '', // 列位置
      rowSpan: '', // 行宽（合并行数）
      colSpan: '', // 列宽（合并列数）
    })
  }
}

const handleSelectionJsonChange = (e: any) => {
  checkoutJsonList.value = e
}

const delRowJson = () => {
  if (checkoutJsonList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  jsonList.value = jsonList.value.filter((item: any) => {
    return !checkoutJsonList.value.includes(item)
  })
}
// -------------------------------------------按钮----------------------------------------------
// 关闭新增页面的回调
const close = () => {
  $router.back()
}

// 点击编辑按钮
const edit = () => {
  pageType.value = 'edit'
}

// 保存
const save = () => {
  ruleFormRef.value!.validate((valid: boolean) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        background: 'rgba(255, 255, 255, 0.8)',
      })
      const params = {
        ...form.value,
        id: infoId.value,
        createTime: '', // 创建时间
        signImageResponseList: sealList.value, // 签章列表
        moduleFieldConfigList: {
          imageJson: JSON.stringify(imageList.value),
          mergeColNames: form.value.mergeColNames,
          objectString: form.value.objectString,
          dictJson: JSON.stringify(jsonList.value),
          remark: form.value.remark,
        },
      }
      // 新建
      if (pageType.value === 'add') { // 新建
        addTemplateRegisterList(params).then((res) => {
          ElMessage.success('保存成功')
          pageType.value = 'detail'
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }
      // 保存
      else if (pageType.value === 'edit') { // 编辑
        updateTemplateRegisterList(params).then((res) => {
          ElMessage.success('保存成功')
          pageType.value = 'detail'
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }
    }
    else {
      console.log('表单校验不通过')
    }
  })
}

// -------------------------------------------获取详情信息--------------------------------------------------
// 获取详情信息
const fetchInfo = () => {
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  getInfo({ id: infoId.value }).then((res) => {
    form.value = res.data
    sealList.value = res.data.signImageResponseList || [] // 印章列表
    if (res.data.moduleFieldConfigList.length) {
      imageList.value = res.data.moduleFieldConfigList[0].imageJson ? JSON.parse(res.data.moduleFieldConfigList[0].imageJson) : [] // 图片配置
      form.value.mergeColNames = res.data.moduleFieldConfigList[0].mergeColNames
      form.value.objectString = res.data.moduleFieldConfigList[0].objectString
      form.value.remark = res.data.moduleFieldConfigList[0].remark
      jsonList.value = res.data.moduleFieldConfigList[0].dictJson ? JSON.parse(res.data.moduleFieldConfigList[0].dictJson) : [] // json配置
    }
    loading.close()
  })
}

onMounted(async () => {
  form.value.createUserId = user.id// 创建人id
  form.value.createUserName = user.name // 创建人
  form.value.createTime = dayjs().format('YYYY-MM-DD HH-mm:ss')// 创建时间
  getDict().then(() => {
    if (pageType.value !== 'add') {
      fetchInfo()
    }
  })
})
</script>

<template>
  <app-container class="system-baseInfo-templateRegister">
    <detail-page :title="`文件模板注册管理-${textMap[pageType]}`">
      <template #btns>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="save">
          保存
        </el-button>
        <el-button v-if="pageType === 'detail'" type="primary" @click="edit">
          编辑
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="form"
        label-width="120"
        label-position="right"
        :rules="formRules"
      >
        <el-row :gutter="24">
          <!-- <el-col :span="6">
            <el-form-item label="创建人:">
              <el-input v-model="form.createUserName" disabled />
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item label="创建时间:">
              <el-date-picker
                v-model="form.createTime"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                disabled
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="模块名称:" prop="moduleName">
              <el-input
                v-model.trim="form.moduleName"
                :placeholder="pageType === 'detail' ? '' : '请选择模块名称'"
                disabled
              >
                <template #append>
                  <el-button size="small" @click="selectModuleTypeName">
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="模块类型" prop="moduleType">
              <el-input
                v-model.trim="form.moduleType"
                :placeholder="pageType === 'detail' ? '' : '请输入模块类型'"
                disabled
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="文件模板:" prop="templateFileName">
              <el-input
                v-model.trim="form.templateFileName"
                :placeholder="pageType === 'detail' ? '' : '请选择文件模板'"
                disabled
              >
                <template #append>
                  <el-button size="small" @click="selectFileTemplate">
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注描述:" prop="descn">
              <el-input
                v-model="form.descn"
                class="full-width-input"
                :placeholder="pageType === 'detail' ? ' ' : '请输入备注描述'"
                autosize
                type="textarea"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
    <detail-block title="电子签章">
      <template #btns>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="multiAdd">
          批量添加
        </el-button>
        <el-button v-if="pageType !== 'detail'" type="info" @click="delRow">
          删除行
        </el-button>
      </template>
      <el-table
        :data="sealList"
        border
        style="width: 100%;"
        max-height="600"
        @selection-change="handleSelectionSealChange"
      >
        <el-table-column v-if="pageType !== 'detail'" type="selection" width="38" />
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in sealColumn"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          align="center"
        >
          <template #header>
            <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
          </template>
          <template #default="scope">
            <el-input
              v-if="item.value === 'keywords' && pageType !== 'detail'"
              v-model="scope.row[item.value]"
              placeholder="请输入关键字名称"
            />
            <!-- <show-photo v-if="item.value === 'minioFileUrl'" :minio-file-name="scope.row[item.value]" /> -->
            <el-image v-if="item.value === 'minioFileUrl'" :preview-src-list="[scope.row[item.value]]" :src="scope.row[item.value]" />
            <span v-if="item.value !== 'minioFileUrl' && pageType === 'detail'">{{ scope.row[item.value] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </detail-block>

    <detail-block title="自定义配置">
      <detail-block title="是否进行图片配置">
        <template v-if="pageType !== 'detail'" #btns>
          <el-button v-if="pageType !== 'detail'" type="primary" @click="addRowImageConfig">
            增加行
          </el-button>
          <el-button v-if="pageType !== 'detail'" type="info" @click="delRowImageConfig">
            删除行
          </el-button>
        </template>
        <el-table
          :data="imageList"
          border
          style="width: 100%;"
          max-height="600"
          @selection-change="handleSelectionImageChange"
        >
          <el-table-column v-if="pageType !== 'detail'" type="selection" width="38" />
          <el-table-column align="center" label="序号" width="80" type="index" />
          <el-table-column
            v-for="item in imageColumn"
            :key="item.value"
            :prop="item.value"
            :label="item.text"
            align="center"
          >
            <template #header>
              <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
            </template>
            <template #default="scope">
              <el-input
                v-if="pageType !== 'detail' && item.value !== 'approvalFlag'"
                v-model="scope.row[item.value]"
                placeholder="请输入"
              />
              <el-select
                v-if="pageType !== 'detail' && item.value === 'approvalFlag'"
                v-model="scope.row[item.value]"
                clearable
                :placeholder="pageType === 'detail' ? '' : '请选择审批标志'"
                size="default"
                :disabled="pageType === 'detail'"
                class="full-width-input"
              >
                <el-option
                  v-for="item in approvalFlagList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
              <span v-if="pageType === 'detail' && item.value !== 'approvalFlag'">{{ scope.row[item.value] }}</span>
              <span v-if="pageType === 'detail' && item.value === 'approvalFlag'">{{ scope.row[item.value] === '1' ? '是' : scope.row[item.value] === '0' ? '否' : '未知' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </detail-block>
      <div style="display: flex;align-items: center;padding: 10px;">
        <span style="color: #936266;">需要合并的表头字段</span>
        <el-input v-model="form.mergeColNames" type="textarea" autosize style="flex: 1;margin-left: 10px;" placeholder="请输入" />
      </div>
      <detail-block title="是否进行字典json展示">
        <template v-if="pageType !== 'detail'" #btns>
          <el-button v-if="pageType !== 'detail'" type="primary" @click="addRowJson">
            增加行
          </el-button>
          <el-button v-if="pageType !== 'detail'" type="info" @click="delRowJson">
            删除行
          </el-button>
        </template>
        <el-table
          :data="jsonList"
          border
          style="width: 100%;"
          max-height="600"
          @selection-change="handleSelectionJsonChange"
        >
          <el-table-column v-if="pageType !== 'detail'" type="selection" width="38" />
          <el-table-column align="center" label="序号" width="80" type="index" />
          <el-table-column
            v-for="item in jsonColumn"
            :key="item.value"
            :prop="item.value"
            :label="item.text"
            align="center"
          >
            <template #header>
              <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
            </template>
            <template #default="scope">
              <el-input
                v-if="pageType !== 'detail'"
                v-model="scope.row[item.value]"
                placeholder="请输入"
              />
              <span v-else>{{ scope.row[item.value] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </detail-block>
      <div style="display: flex;align-items: center;padding: 10px;">
        <span style="color: #936266;">组合字段</span>
        <el-input v-model="form.objectString" type="textarea" autosize style="flex: 1;margin-left: 10px;" placeholder="请输入" />
      </div>
      <div style="display: flex;align-items: center;padding: 10px;">
        <span style="color: #936266;">备注说明</span>
        <el-input v-model="form.remark" type="textarea" autosize style="flex: 1;margin-left: 10px;" placeholder="请输入" />
      </div>
    </detail-block>
    <select-seal-dialog ref="selectSealDialogRef" @confirm="confirmselectSeal" />
    <select-file-template-dialog ref="selectFileTemplateDialogRef" @confirm="confirmSelectFileTemplate" />
    <select-module-name-dialog ref="selectModuleNameDialogRef" @confirm="confirmSelectModuleName" />
  </app-container>
</template>

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