<template>
  <div class="container-img-meeting">
    <el-dialog width="800px" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="新建标的" :visible.sync="isShowImgMeetingDlg" :before-close="handleClose">
      <div style="margin-bottom: 10px">
        <p>请确认建会信息:</p>
        <div class="box-content" style="padding-left:20px">
          <div class="box-date">日期</div>
          <div class="box-time">时间</div>
          <div class="box-name">公司名称</div>
        </div>
      </div>
      <div class="box-content hover-box-content" v-for="(item, index) in imgMeetingData" :key="item.id">
        <div class="box-date">
          <el-date-picker v-model="item.TitmeYMD" type="date" value-format="yyyy年MM月dd日" format="yyyy年MM月dd日  (周ddd)" placeholder="选择日期" style="width: 230px"> </el-date-picker>
        </div>
        <div class="box-time">
          <el-time-picker v-model="item.TitmeHM" value-format="hh:mm A" format="hh:mm A" placeholder="任意时间点" style="width: 160px"> </el-time-picker>
        </div>
        <div class="box-name">
          <el-input v-model="item.Company" placeholder="请输入内容" style="width: 100%" clearable></el-input>
        </div>
        <div class="delete-item-icon" @click="deleteLabelItem(item, index)">
          <img src="~@/assets/img/icons/delete-Item.png" alt="" />
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmPerson">确定</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { raiInterface } from "@/api/api.js";
export default {
  name: "",
  components: {},
  props: {
    isShowImgMeetingDlg: {
      type: Boolean,
      required: true,
      default: false,
    },
    imgMeetingData: {
      default: [],
      required: true,
      type: Array,
    },
  },
  data() {
    return {
      value1: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 确定事件
    async confirmPerson() {
      let isConfirm = this.imgMeetingData.every((item) => item.TitmeYMD && item.TitmeHM && item.Company);
      if (!isConfirm) return this.$message.error("每格的内容都必填。");
      const res = await raiInterface.preserveAndPublishAdd({
        ListImgToText: this.imgMeetingData,
      });
      console.log(res);
      if (res.Ret === 200) {
        this.$message.success("新增成功！");
        this.$parent.page_no = 1;
        this.$parent.getsummaryManageList();
        this.handleClose();
      }
    },
    handleClose() {
      this.$emit("update:isShowImgMeetingDlg", false);

      this.$emit("childrenImgMeetingHandler");
    },
    deleteLabelItem(item, index) {
      this.$parent.imgMeetingData.splice(index, 1);
    },
  },
};
</script>
<style scoped lang="scss">
.container-img-meeting {
  .box-content {
    margin-top: 20px;
    display: flex;
    font-weight: 500;

    .box-date {
      width: 230px;
      margin-right: 20px;
    }
    .box-time {
      width: 160px;
      margin-right: 20px;
    }
    .box-name {
      width: 260px;
    }
    .delete-item-icon {
      display: flex;
      align-items: center;
      margin-left: 20px;
      img {
        width: 15px;
        height: 15px;
      }
    }
  }
  .hover-box-content {
    margin-top: 0;
    padding: 10px 20px;
    &:hover {
      background-color: #eaf3fe;
    }
  }
}
</style>
