<!-- 会议记录编辑页面 -->
<script name="MeetingHandler" lang="ts" setup>
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import userListDialog from './userDialog.vue'
import { getDictByCode } from '@/api/system/dict'
import { getListByUrl, getMeetingDetail, getMeetingPerson, getrelWorkList, getrelWorkType, handlerMeeting, sendPerson } from '@/api/quality/meeting/meeting'
import useUserStore from '@/store/modules/user'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>() // from组件
const isSave = ref(false) // 是否保存
const flag = ref(true)
const ruleForm = ref({
  conferenceTime: '', // 会议时间
  createName: '', // 创建者名称
  createTime: '', // 创建时间
  creator: '', // 创建者ID
  fileCode: '', // 文件编码
  fileName: '', // 文件名称
  id: '', // id
  locale: '', // 会议地点
  logTime: '', // 记录时间
  updateTime: '', // 修改时间
  relType: '', // 关联类型类型
  targetId: '', // 关联工作
  contents: '', // 会议内容
  qualityUserDto: {
    id: '',
    userIds: [] as any[],
  },
}) // 表单
const userList = ref<any[]>([])
const rules = ref<FormRules>({
  fileName: [{ required: true, message: '文件名称必填', trigger: ['blur', 'change'] }],
  relType: [{ required: true, message: '关联工作类别必选', trigger: ['blur', 'change'] }],
  logTime: [{ required: true, message: '记录时间必填', trigger: ['blur', 'change'] }],
  locale: [{ required: true, message: '会议地点必填', trigger: ['blur', 'change'] }],
  conferenceTime: [{ required: true, message: '会议时间必填', trigger: ['blur', 'change'] }],
  contents: [{ required: true, message: '会议内容必填', trigger: ['blur', 'change'] }],
}) // 表单验证规则
onMounted(async () => {
  if ($route.path.includes('create')) {
    flag.value = false
    ruleForm.value.createTime = dayjs().format('YYYY-MM-DD HH:mm') // 创建时间
    await fetchDict()
    // 自动填充数据
    if ($route.query.data) {
      const data = JSON.parse($route.query.data as string)
      console.log(data, 'data')
      if (data.workName.includes('内部')) {
        // 内部评审
        ruleForm.value.relType = '1'
        ruleForm.value.targetId = data.id
        setTimeout(() => {
          flag.value = true
        })
      }
    }
  }
  else {
    // 获取详情
    await fetchDict()
    getMeetingDetail({ id: $route.query.id as string }).then((res) => {
      flag.value = false
      res.data.relType = String(res.data.relType)
      ruleForm.value = res.data
      ruleForm.value.qualityUserDto = {
        id: '',
        userIds: [] as any[],
      }
      getMeetingPerson({ conferenceId: $route.query.id as string }).then((res) => {
        console.log(res.data, '参会人员')
        userList.value = res.data
      })
    })
  }
  if ($route.path.includes('update') || $route.path.includes('create')) {
    ruleForm.value.logTime = dayjs().format('YYYY-MM-DD HH:mm') // 记录时间
    ruleForm.value.creator = userStore.id
    ruleForm.value.createName = userStore.name
  }
})
// 关闭
const close = () => {
  if ($route.query.data) {
    $router.go(-1)
  }
  else {
    $router.push({
      path: '/meeting/meetinglist',
    })
  }
}
// 保存
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (!userList.value.length) {
        ElMessage.warning('参会人员必选')
        return
      }
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then((res) => {
        ruleForm.value.qualityUserDto.userIds = userList.value
        ruleForm.value.qualityUserDto.id = ruleForm.value.id
        handlerMeeting($route.params.type as string, ruleForm.value)?.then((res) => {
          isSave.value = true
          ElMessage.success('操作成功')
          close()
        })
      })
    }
  })
}
// 关联工作类型
const relTypeList = ref<any[]>([])
const workList = ref<any[]>([])
// 获取字典值
async function fetchDict() {
  // 关联工作类型
  // getDictByCode('quality_work_type').then((res) => {
  //   relTypeList.value = res.data
  // })
  const res = await getrelWorkType({})
  relTypeList.value = res.data

  // // 关联工作
  // getrelWorkList({}).then((res) => {
  //   console.log(res.data, '关联工作')
  //   workList.value = res.data
  // })
}
// onBeforeMount(() => {
//   fetchDict()
// })
const isOther = ref(false)
watch(() => ruleForm.value.relType, (newVal) => {
  if (flag.value) {
    ruleForm.value.targetId = ''
  }
  if (newVal) {
    console.log(newVal, relTypeList.value)
    const data = relTypeList.value.filter((item: any) => item.code === newVal)[0]
    if (data?.name === '其他') {
      isOther.value = true
      return
    }
    else {
      isOther.value = false
    }
    const params = {
      // approvalStatus: '0',
      // formId: SCHEDULE.NONCONFORMITY_ANALYSIS_APPROVAL,
      // formId: data.formId,
    }
    const path = window.localStorage.getItem('baseURL')!.substring(0, window.localStorage.getItem('baseURL')!.length - 1) + data.tips
    getListByUrl(params, path).then((response) => {
      console.log(response.data, '关联工作')
      workList.value = response.data
      flag.value = true
    })
    // console.log(newVal, 'newVal')
    // getrelWorkList({ type: newVal }).then((res) => {
    //   ruleForm.value.targetId = ''
    //   console.log(res.data, '关联工作')
    //   workList.value = res.data
    // })
  }
}, {
  deep: true,
})
// 用户弹窗
const userRef = ref()
// 确认选择用户
const confirmUser = (user: any) => {
  user.forEach((item: any) => {
    if (!userList.value.some((child: any) => child.id === item.id)) {
      userList.value.push({ ...item, isConfirm: 0 })
    }
  })
}
// 选择用户
const selectUser = () => {
  userRef.value.initDialog()
}
// 删除用户
const closeTag = (value: any) => {
  userList.value = userList.value.filter((item: any) => item !== value)
}
// 发送确认
const sendConfirm = () => {
  if (!isSave.value) {
    ElMessage.warning('请先保存')
  }
  else {
    // isSave.value
    //  发送与会人员确认
    // sendPerson().then((res) => {
    //   ElMessage.success('发送成功')
    //   isSave.value = false
    // })
  }
}
const { proxy } = getCurrentInstance() as any
</script>

<template>
  <app-container style="overflow: hidden;">
    <!-- 用户列表 -->
    <user-list-dialog ref="userRef" @add="confirmUser" />
    <detail-page title="会议记录">
      <template #btns>
        <el-button type="primary" @click="sendConfirm">
          发送与会人员确认
        </el-button>
        <el-button v-if="$route.path.includes('detail') && proxy.hasPerm('/quality/meeting/record/download')" type="primary">
          下载
        </el-button>
        <el-button v-if="$route.path.includes('detail') && proxy.hasPerm('/quality/meeting/record/print')" type="primary">
          打印
        </el-button>
        <el-button v-if="!$route.path.includes('detail')" type="primary" @click="saveForm(ruleFormRef)">
          保存
        </el-button>
        <el-button type="info" @click="close()">
          关闭
        </el-button>
      </template>
    </detail-page>
    <el-form ref="ruleFormRef" :model="ruleForm" :class="$route.path.includes('detail') ? 'isDetail' : ''" :rules="rules" label-position="right" label-width="120px" class="form" :disabled="$route.path.includes('detail')">
      <detail-block title="">
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="文件编号" prop="fileCode">
              <el-input v-model.trim="ruleForm.fileCode" placeholder="系统自动生成" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="文件名称" prop="fileName">
              <el-input v-model.trim="ruleForm.fileName" placeholder="文件名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="记录人" prop="createName">
              <el-input v-model.trim="ruleForm.createName" placeholder="记录人" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="记录时间" prop="logTime">
              <!-- <el-input v-model.trim="ruleForm.time" disabled /> -->
              <!-- <el-input v-model.trim="ruleForm.time" disabled /> -->
              <el-date-picker
                v-model="ruleForm.logTime"
                type="datetime"
                placeholder="记录时间"
                value-format="YYYY-MM-DD HH:mm"
                format="YYYY-MM-DD HH:mm"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="关联工作类别" prop="relType">
              <el-select
                v-model="ruleForm.relType"
                placeholder="关联工作类别"
                class="short-input"
                filterable
                style="width: 100%;"
              >
                <el-option v-for="item in relTypeList" :key="item.tips" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="!isOther" :span="6">
            <el-form-item label="关联工作" prop="targetId">
              <el-select
                v-model="ruleForm.targetId"
                placeholder="关联工作"
                class="short-input"
                filterable
                style="width: 100%;"
              >
                <el-option v-for="item in workList" :key="item.id" :label="item.workName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </detail-block>
      <detail-block title="">
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="会议时间" prop="conferenceTime">
              <el-input v-model.trim="ruleForm.conferenceTime" placeholder="会议时间" :rows="3" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="会议地点" prop="locale">
              <el-input v-model.trim="ruleForm.locale" placeholder="会议地点" :rows="3" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="!$route.path.includes('detail')" :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="参会人员" prop="fileNo">
              <el-button type="primary" @click="selectUser">
                选择人员
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item :label="$route.path.includes('detail') ? '参会人员' : ''" prop="qualityUserDto">
              <!-- <el-input placeholder="参会人员" :rows="3" type="textarea" /> -->
              <div class="user-container">
                <el-tag
                  v-for="tag in userList"
                  :key="tag.name || tag.userName"
                  class="mx-1"
                  :closable="!$route.path.includes('detail')"
                  :type="tag.isConfirm ? 'success' : 'danger'"
                  size="large"
                  @close="closeTag(tag)"
                >
                  {{ tag.name || tag.userName }}
                </el-tag>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="会议内容" prop="contents">
              <el-input v-model.trim="ruleForm.contents" placeholder="会议内容" :rows="8" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </detail-block>
    </el-form>
  </app-container>
</template>

<style lang="scss" scoped>
.user-container {
  width: 100%;
  height: 120px;
  overflow-y: scroll;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
}

.mx-1 {
  margin-top: 5px;
  margin-right: 5px;
  margin-left: 5px;
}
</style>