<script lang="ts" setup name="PlanAdd">
import {
  getListDetail,
  getListLogAdd,
  getListLogDetail,
  getListUpdate,
  getPlanIdList,
} from '@/api/system/plan'

const props = defineProps({
  infoId: {
    type: String,
    default: '',
  },
  buttonType: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['close'])
const formInline = ref({
  improveMethod: '',
  logNo: '',
  preparer: '',
  problems: '',
  planId: '',
  remark: '',
  trainAddress: '',
  trainContent: '',
  trainEffect: '',
  trainHour: '',
  trainName: '',
  trainNumber: '',
  trainPerson: '',
  trainStaffList: [],
  trainTime: '',
})
// 主管部门下拉框
const options = ref([])
const dialogVisible = ref(false)
const columns = [
  { text: '学员名称', value: 'name' },
  { text: '单位名称', value: 'company' },
  { text: '技术职称', value: 'technologyJob' },
  { text: '签到时间', value: 'signTime' },
  { text: '考核结果', value: 'examResult' },
]
const addPersonList = ref({
  company: '',
  examResult: '',
  name: '',
  remark: '',
  signTime: '',
  technologyJob: '',
  planId: 0,
  staffId: 0,
})
const SelectionList = ref([])
const ListDetail = ref([])
// 获取到组织信息
const getDept = () => {
  const params = {
    createTime: '',
    deptId: 0,
    director: '',
    effectiveCompany: '',
    trainTime: '',
  }
  getPlanIdList(params).then((response) => {
    options.value = response.data
  })
}
getDept()
const close = () => {
  emit('close')
}
const addRoow = () => {
  Object.keys(addPersonList.value).forEach(
    key => (addPersonList.value[key] = ''),
  )
  dialogVisible.value = true
}
// 点击关闭
const handleClose = () => {
  dialogVisible.value = false
}
const selectChange = (e: any) => {
  const id = options.value.filter(item => item.id === e)[0].id
  getListDetail({ id }).then((res) => {
    ListDetail.value = res.data.trainStaffList
    formInline.value = { ...res.data }
    formInline.value.planId = e
  })
}
// 点击弹窗的完成追加到表格数组中
const addPushList = () => {
  formInline.value.trainStaffList.push(
    JSON.parse(JSON.stringify(addPersonList.value)),
  )
  handleClose()
}
// 删除行
const deleteList = () => {
  formInline.value.trainStaffList = formInline.value.trainStaffList.filter(
    (item) => {
      return !SelectionList.value.includes(item)
    },
  )
}
const handleSelectionChange = (e: any) => {
  SelectionList.value = e
}
const addPersonListChange = (e: any) => {
  addPersonList.value = ListDetail.value.filter(item => item.staffId === e)[0]
}
if (props.infoId && props.infoId !== '') {
  getListLogDetail({ id: props.infoId }).then((res) => {
    formInline.value = res.data
  })
}
const getAddList = (buttonType: string) => {
  if (buttonType === '提交' && props.buttonType !== '编辑') {
    getListLogAdd(formInline.value).then((res) => {
      if (res.code === 200) {
        close()
      }
    })
  }
  else if (buttonType === '提交' && props.buttonType === '编辑') {
    formInline.value.trainStaffList.map((item) => {
      delete item.updateTime
      delete item.createTime
    })
    formInline.value.id = props.infoId
    getListUpdate(formInline.value).then((res) => {
      if (res.code === 200) {
        close()
      }
    })
  }
  else {
    // 打印
    const printObj = ref({
      id: 'print', // 需要打印元素的id
      popTitle: '证书报告模板', // 打印配置页上方的标题
      extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
      preview: false, // 是否启动预览模式，默认是false
      standard: '',
      extarCss: '',
    })
  }
}
</script>

<template>
  <app-container>
    <div class="top-info">
      <h4 class="title">
        培训记录
      </h4>
      <div>
        <el-button
          v-print="buttonType === '详情' ? printObj : ''"
          type="primary"
          @click="getAddList(buttonType === '详情' ? '打印' : '提交')"
        >
          {{ buttonType === '详情' ? '打印' : '提交' }}
        </el-button>
        <el-button type="warning" @click="close">
          关闭
        </el-button>
      </div>
    </div>
    <div class="info-content">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="80"
        label-position="left"
      >
        <el-form-item label="编号:">
          <el-input
            v-model="formInline.logNo"
            :placeholder="buttonType === '详情' ? '无' : '请输入编号'"
            :disabled="buttonType === '详情'"
          />
        </el-form-item>
        <el-form-item label="填表人:">
          <el-input
            v-model="formInline.preparer"
            :placeholder="buttonType === '详情' ? '无' : '请输入填表人'"
            :disabled="buttonType === '详情'"
          />
        </el-form-item>
        <!-- <el-form-item label="创建时间:">
          <el-date-picker
              v-model="formInline.trainTime"
              type="datetime"
              placeholder="创建时间"
              format="YYYY/MM/DD HH:mm:ss"
              value-format="YYYY-MM-DD h:m:s"
              :disabled="buttonType === '详情'"
            />
        </el-form-item> -->
        <span v-if="infoId === ''">
          <el-form-item label="计划编号:">
            <el-select
              v-model="formInline.planName"
              clearable
              placeholder="计划编号"
              size="default"
              :disabled="buttonType === '详情'"
              @change="selectChange"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.planName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </span>
        <el-form-item label="培训名称:">
          <el-input
            v-model="formInline.trainName"
            :placeholder="buttonType === '详情' ? '无' : '请输入培训名称'"
            :disabled="buttonType === '详情'"
          />
        </el-form-item>
        <el-form-item label="培训对象:">
          <el-input
            v-model="formInline.trainPerson"
            :placeholder="buttonType === '详情' ? '无' : '请输入培训对象'"
            :disabled="buttonType === '详情'"
          />
        </el-form-item>
        <el-form-item label="培训人数:">
          <el-input
            v-model="formInline.trainNumber"
            :placeholder="buttonType === '详情' ? '无' : '请输入培训人数'"
            :disabled="buttonType === '详情'"
          />
        </el-form-item>
        <el-form-item label="培训学时:">
          <el-input
            v-model="formInline.trainHour"
            :placeholder="buttonType === '详情' ? '无' : '请输入培训学时'"
            :disabled="buttonType === '详情'"
          />
        </el-form-item>
        <el-form-item label="培训时间:">
          <el-date-picker
            v-model="formInline.trainTime"
            type="datetime"
            placeholder="培训时间"
            format="YYYY/MM/DD HH:mm:ss"
            value-format="YYYY-MM-DD h:m:s"
            :disabled="buttonType === '详情'"
          />
        </el-form-item>
        <el-form-item label="培训地点:">
          <el-input
            v-model="formInline.trainAddress"
            :placeholder="buttonType === '详情' ? '无' : '请输入培训地点'"
            :disabled="buttonType === '详情'"
          />
        </el-form-item>
        <div class="input-width">
          <el-form-item label="培训效果:">
            <el-input
              v-model="formInline.trainEffect"
              :placeholder="buttonType === '详情' ? '无' : '请输入培训效果'"
              :disabled="buttonType === '详情'"
            />
          </el-form-item>
        </div>
        <div class="input-width">
          <el-form-item label="存在问题:">
            <el-input
              v-model="formInline.problems"
              :placeholder="buttonType === '详情' ? '无' : '请输入存在问题'"
              :disabled="buttonType === '详情'"
            />
          </el-form-item>
        </div>
        <div class="input-width">
          <el-form-item label="改进措施:">
            <el-input
              v-model="formInline.improveMethod"
              :placeholder="buttonType === '详情' ? '无' : '请输入改进措施'"
              :disabled="buttonType === '详情'"
            />
          </el-form-item>
        </div>
        <div class="input-width">
          <el-form-item label="备注:">
            <el-input
              v-model="formInline.remark"
              :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
              :disabled="buttonType === '详情'"
            />
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="table-top">
      <div class="table-top-title">
        人员信息
      </div>
      <div v-if="buttonType !== '详情'" class="table-top-button">
        <el-button :disabled="buttonType === '详情'" @click="deleteList">
          删除行
        </el-button>
        <el-button :disabled="buttonType === '详情'" @click="addRoow">
          增加行
        </el-button>
      </div>
    </div>
    <el-table
      :data="formInline.trainStaffList"
      border
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column
        v-for="item in columns"
        :key="item.value"
        :prop="item.value"
        :label="item.text"
      />
    </el-table>
  </app-container>
  <el-dialog
    v-model="dialogVisible"
    title="添加人员信息"
    width="30%"
    :before-close="handleClose"
    center
  >
    <el-form
      ref="addPersonListForm"
      label-position="left"
      label-width="100px"
      :model="addPersonList"
      style="max-width: 460px;"
    >
      <el-form-item label="学员名称">
        <el-select
          v-model="addPersonList.planId"
          clearable
          placeholder="计划编号"
          size="default"
          :disabled="buttonType === '详情'"
          @change="addPersonListChange"
        >
          <el-option
            v-for="item in ListDetail"
            :key="item.id"
            :label="item.name"
            :value="item.staffId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="考核结果">
        <el-input v-model="addPersonList.examResult" />
      </el-form-item>
    </el-form>
    <el-button type="primary" class="dialog-button" @click="addPushList">
      完成
    </el-button>
  </el-dialog>
</template>

<style lang="scss" scoped>
.top-info {
  width: 100%;
  height: 50px;
  padding-right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  background-color: #fff;

  .title {
    width: 75%;
    text-align: center;
  }
}

.info-content {
  margin-top: 10px;
  padding: 30px;
  border-radius: 10px;
  background-color: #fff;

  .info-dizhi {
    margin-right: 155px;
  }
}

.input-width .el-input {
  width: 30vw;
}

.table-top {
  margin-top: 10px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  background-color: #fff;

  .table-top-title {
    width: 60vw;
    text-align: center;
  }
}

.dialog-button {
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>