<template>
  <el-dialog
  :visible.sync="isOpenDialog"
  :close-on-click-modal="false"
  :modal-append-to-body='false'
  :title="title"
  @close="cancelHandle"
  custom-class="dialog"
  center
  width="650px"
  v-dialogDrag>
    <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>

<script>
import {
  setPauseReport
} from "@/api/modules/reportupdateApi.js";
export default {
	props: {
		isOpenDialog: {
			type: Boolean,
		},
		//标题
		title: {
			type: String,
			default: '设置暂停日期'
		},
    setArr: {
      type: Array
    },
    type: {
      type: String
    }
		
	},
	watch: {
		'isOpenDialog': {
			handler(newval) {
        if(newval) {
          console.log(this.setArr)
          this.pauseList = this.setArr.map(_=>({
            id: _.ReportChapterTypeId,
            name: _.ReportChapterTypeName,
            date: _.PauseStartTime ? [_.PauseStartTime,_.PauseEndTime] : [this.$moment().format('YYYY-MM-DD'),this.$moment().format('YYYY-MM-DD')]
          }))
        }
			}
		}
	},
	data () {
		return {			
			pauseList: []
		};
	},
	methods: {
		async saveHandle() {
      let arr = this.pauseList.filter(_=>_.date && _.date.length);
      let params_list = arr.map(_ => ({
        ReportChapterTypeId: _.id,
        PauseStartTime: _.date[0],
        PauseEndTime: _.date[1]
      }))

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

      if(Ret !== 200) return
      this.$message.success(Msg);
      this.cancelHandle();
      this.$emit('successBack')

		},

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

		/* 取消 */
		cancelHandle() {
			this.$emit('update:isOpenDialog',false)
		},

	},
	mounted() {},
}
</script>
<style lang='scss' scoped>
.dialog-main {
  padding-left: 50px;
}
.el-cascader .el-input {
  width: 100%;
}
.list-li {
  display: flex;
  align-items: center;
  padding-left: 30px;
  margin-bottom: 15px;
}
.dia-bot {
  margin: 52px 0 30px;
  display: flex;
  justify-content: center;

}
</style>