<!-- 日程安排 -->
<script name="scheduleList" lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { useCheckList, useCheckNoTips } from '@/commonMethods/useCheckList'

const $props = defineProps({
  data: {
    type: Array,
    required: true,
  },
})
const $route = useRoute()
const $router = useRouter()
const list = ref<any[]>([])
watch(() => $props.data, (newVal) => {
  if (newVal.length) {
    list.value = $props.data
  }
  else {
    // if ($route.path.includes('detail')) { return }
    // list.value.push({
    //   inspectionContent: '',
    //   inspectionMethod: '',
    //   inspectionRes: '',
    //   refStandard: '',
    //   editable: true,
    // })
  }
}, {
  deep: true,
})
const columns = ref<any[]>([
  { text: '日期', value: 'scheduleDay', required: true, day: true },
  { text: '时间', value: 'scheduleHour', required: true, time: true },
  { text: '工作安排', value: 'workContent', required: true },
  { text: '地点', value: 'location', required: true },
  { text: '人员', value: 'participant', required: true, area: true },
])
// 多选
const selectList = ref()
const handleSelectionChange = (data: any) => {
  selectList.value = data
}
// 检查数据列表
function checkCertificateList() {
  return useCheckList(list.value, columns.value, '日程安排')
}
// 将列表置为不可编辑状态
function setAllRowReadable() {
  for (const item of list.value) {
    item.editable = false
  }
}
// 编辑行
const dblclickRow = (row: any) => {
  if ($route.path.includes('detail')) { return }
  setAllRowReadable()
  row.editable = true
}
// 删除行
const deleteRow = () => {
  list.value = list.value.filter((item: any) => {
    return !selectList.value.includes(item)
  })
}
const handler = (type: string, index: number) => {
  if (type === 'insert') {
    if (!checkCertificateList()) { return }
    setAllRowReadable()
    list.value.splice(index + 1, 0, {
      scheduleDay: '',
      scheduleHour: '',
      workContent: '',
      location: '',
      participant: '',
      editable: true,
    })
  }
  // else if (type === 'delete') {
  //   deleteRow(list.value[index])
  // }
  else if (type === 'update') {
    if (!checkCertificateList()) { return }
    dblclickRow(list.value[index])
  }
}
// 鼠标移出表格 自动置为不可编辑状态
const eventBlur = () => {
  if ($route.path.includes('detail')) { return }
  if (useCheckNoTips(list.value, columns.value)) {
    setAllRowReadable()
  }
}
defineExpose({
  list,
  checkCertificateList,
})
</script>

<template>
  <detail-block title="日程安排" class="schedule">
    <template v-if="!$route.path.includes('detail')" #btns>
      <el-button type="primary" @click="handler('insert', list.length - 1)">
        添加行
      </el-button>
      <el-button type="primary" @click="deleteRow">
        删除行
      </el-button>
    </template>
    <el-table
      ref="multipleTableRef" :data="list" style="width: 100%;" border
      @selection-change="handleSelectionChange"
      @row-dblclick="dblclickRow"
    >
      <el-table-column v-if="!$route.path.includes('detail')" 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"
        align="center"
      >
        <template #header>
          <span v-show="item.required && !$route.path.includes('detail')" style="color: red;">*</span><span>{{ item.text }}</span>
        </template>
        <template #default="scope">
          <span v-if="!scope.row.editable">{{ typeof scope.row[item.value] === 'string' ? scope.row[item.value] : `${scope.row[item.value][0]}~${scope.row[item.value][1]}` }}</span>
          <el-input
            v-if="scope.row.editable && !item.day && !item.time && !item.area" v-model="scope.row[item.value]" :autofocus="true"
            :placeholder="`${item.text}`" class="input"
          />
          <el-input
            v-if="scope.row.editable && item.area" v-model="scope.row[item.value]" :autofocus="true"
            :placeholder="`${item.text}`" class="input" type="textarea" :rows="1"
          />
          <el-date-picker
            v-if="scope.row.editable && item.day"
            v-model="scope.row[item.value]"
            type="date"
            :placeholder="`${item.text}`"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 90%;"
          />
          <!-- <el-time-picker
            v-if="scope.row.editable && item.time"
            v-model="scope.row[item.value]"
            arrow-control
            :placeholder="`${item.text}`"
            format="HH:mm"
            value-format="HH:mm"
            style="width: 90%;"
          /> -->
          <el-time-picker
            v-if="scope.row.editable && item.time"
            v-model="scope.row[item.value]"
            is-range
            range-separator="至"
            start-placeholder="开始"
            end-placeholder="结束"
            style="width: 90%;"
            :placeholder="`${item.text}`"
            format="HH:mm"
            value-format="HH:mm"
          />
        </template>
      </el-table-column>
    </el-table>
  </detail-block>
</template>

<style lang="scss" scoped>
.schedule {
  // margin-top: -24px;

  ::v-deep(.header) {
    .title {
      display: none;
    }
  }
}
</style>