<script setup>
import { setPauseReport } from "@/api/modules/reportupdateApi.js";
import { ElMessage } from "element-plus";
import { watch,ref } from "vue";

const props = defineProps({
  isOpenDialog: {
    type: Boolean,
  },
  //标题
  title: {
    type: String,
    default: '设置暂停日期'
  },
  setArr: {
    type: Array
  },
  type: {
    type: String
  }
})
const emits=defineEmits(['successBack'])


const pauseList = ref([])

watch(
  () => props.isOpenDialog,
  (newval) => {
    if (newval) {
      pauseList.value = props.setArr.map(_ => ({
        id: _.ReportChapterTypeId,
        name: _.ReportChapterTypeName,
        date: _.PauseStartTime ? [_.PauseStartTime, _.PauseEndTime] : []
      }))
    }
  }
)

async function saveHandle() {
  let arr = pauseList.value.filter(_ => _.date && _.date.length);
  let params_list = arr.map(_ => ({
    ReportChapterTypeId: _.id,
    PauseStartTime: _.date[0],
    PauseEndTime: _.date[1]
  }))

  const { Ret, Msg } = await setPauseReport({
    ResearchType: props.type,
    List: params_list
  })

  if (Ret !== 200) return
  ElMessage.success(Msg);
  cancelHandle();
  emits('successBack')

}

function dateChange(e, item) {
  item.date = e || [];
}

/* 取消 */
function cancelHandle() {
  emits('close')
}




</script>

<template>
  <el-dialog
    :model-value="props.isOpenDialog"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :title="props.title"
    @close="cancelHandle"
    class="dialog"
    center
    width="650px"
    draggable
  >
    <ul class="list-ul">
      <li class="list-li" v-for="item in pauseList" :key="item.name">
        <span style="width: 100px; text-align: right">{{ item.name }}</span>
        <el-date-picker
          v-model="item.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="{
            disabledDate: function (time) {
              return time.getTime() < Date.now() - 24 * 3600 * 1000;
            },
          }"
          style="margin: 0 15px"
          @change="dateChange($event, item)"
        />
        <el-button
          type="text"
          @click="item.date = []"
          v-show="item.date && item.date.length"
          >清空</el-button
        >
      </li>
    </ul>
    <div class="dia-bot">
      <el-button type="primary" style="margin-right: 20px" @click="saveHandle"
        >保存</el-button
      >
      <el-button type="primary" plain @click="cancelHandle">取消</el-button>
    </div>
  </el-dialog>
</template>