<template>
  <div class="page">
    <LayoutTable :data="tableData" :config="tableConfig">
    </LayoutTable>


    <drawer-show ref="drawerform" @ok="getData"/>
  </div>
</template>

<script>
/** 表单弹出框模式需引入 */
import drawerShow from "./drawershow";
import table from "@/assets/mixins/table";
import moment from "moment/moment";

export default {
  name: "MettingRecordList",
  components: {
    drawerShow
  },
  mixins: [table],
  created() {
  },
  methods: {
    /** 重写新增方法 */
    toAdd(row) {
      this.$refs.drawerform.add(row);
    },
    /** 重写编辑方法 */
    toEdit(row) {
      this.$refs.drawerform.edit(row);
    },
    /** 重写查看方法 */
    toView(row) {
      this.$refs.drawerform.view(row);
    },
    /** 删除 */
    toDel(id) {
      let that = this;
      this.$confirm("此操作删除选中信息，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            that
                .$post("/metting/record/delete?id=" + id, {})
                .then((res) => {
                  // 更新数据
                  if (res && res.code == 1) {
                    that.getData();
                    that.afterDel(id);
                  }
                })
                .catch((error) => {
                  that.$message.error(error.message);
                });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
    }

    ,
    toFinish(row) {
      this.loading = true;
      this.$post("/metting/record/save", {
        id: row.id, meetStatus: 2,
      })
          .then((res) => {
            if (res && res.code === 1) {
              this.$message.success("结束成功！");
              this.getData();
              this.loading = false;
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
    }

  },
  data() {
    return {
      config: {
        search: [ {
          name: "meetName",
          type: "text",
          label: "会议名称",
          fuzzy: true
        },
          {
            name: "meetStatus",
            type: "select",
            label: "会议状态"
          },
          {
            name: "meetDateStart",
            type: "date",
            label: "会议开始日期"
          },{
            name: "meetDateEnd",
            type: "date",
            label: "会议结束日期"
          }
          ],
        columns: [
          {type: "selection", width: 60},
          {type: "index", label: "序号", width: 50},

          {label: "会议名称", prop: "meetName"},
          {label: "开会房间", prop: "roomName"},

          {
            label: "开会日期", prop: "meetDate",

            formatter: (row) => {
              let meetDate = moment(row.meetDate).format('YYYY-MM-DD');
              return (
                  <span>{meetDate}</span>
              );
            },
          },

          {
            label: "开始时间", prop: "meetTimeStart",
            formatter: (row) => {
              let meetTimeStart = moment(row.meetTimeStart).format('HH:mm');
              let meetTimeEnd = moment(row.meetTimeEnd).format('HH:mm');
              return (
                  <span>{meetTimeStart}~{meetTimeEnd}</span>
              );
            }
          },
          {label: "开会部门", prop: "meetDeptName"},

          {label: "结束方式", prop: "finishMethod", formatter: this.formatter},

          {label: "会议状态", prop: "meetStatus", formatter: this.formatter},
          {
            label: "操作",
            width: 240,
            formatter: row => {
              let editButton = (
                  <el-button
                      size="small"
                      type="text"
                      icon="el-icon-edit"
                      onClick={() => {
                        this.toEdit(row);
                      }}
                  >
                    编辑
                  </el-button>
              );

              let viewButton = (
                  <el-button
                      size="small"
                      type="text"
                      icon="el-icon-view"
                      onClick={() => {
                        this.toView(row);
                      }}
                  >
                    查看
                  </el-button>
              );

              let delButton = (
                  <el-button
                      size="small"
                      type="text"
                      icon="el-icon-delete"
                      onClick={() => {
                        this.toDel(row.id);
                      }}
                  >
                    删除
                  </el-button>
              );

              let finishButton = (
                  <el-button
                      size="small"
                      type="text"
                      icon="el-icon-document"
                      onClick={() => {
                        this.toFinish(row);
                      }}
                  >
                    结束
                  </el-button>
              );
              let listButtons = [];
              if (row.meetStatus === 0) {
                listButtons.push(editButton);
                listButtons.push(viewButton);
                listButtons.push(delButton);
              } else if (row.meetStatus === 1) {
                listButtons.push(finishButton);
                listButtons.push(viewButton);
              } else if (row.meetStatus === 2) {
                listButtons.push(viewButton);
              }
              return <div>{listButtons}</div>;
            }
          }
        ]
      }
    };
  }
};
</script>
