<template>
  <section class="meetingDetail detail-content">
    <ai-detail>
      <template #title>
        <ai-title title="会议详情" isShowBottomBorder isShowBack @onBackClick="$parent.goBack">
          <template #rightBtn>
            <p class="conference_top_area" v-if="listType==0">
              <!-- <el-button type="primary" v-if="detail.status==0" @click="changeMeeting('是否立即发布会议？')">立即发布</el-button> -->
              <el-button type="primary" v-if="detail.status==1" @click="noticeMetting()">参会提醒</el-button>
              <el-button type="primary" v-if="detail.status==0" @click="editMeeting()">修改会议</el-button>
              <el-button class="del-btn-list" v-if="detail.status==1" @click="changeMeeting('是否取消会议？')">取消会议</el-button>
              <el-button class="iconfont iconDelete del-btn-list" v-if="detail.status==0||detail.status==3"
                         @click="changeMeeting('是否删除会议？')">删除会议
              </el-button>
            </p>
            <!-- v-if="detail.status==0||detail.status==3" -->
            <p class="conference_top_area" v-if="listType==1&&info.status==1">
              <el-button @click="toDo" style="width:80px;" class="del-btn-list">待定</el-button>
              <el-button @click="innerVisible=true" v-if="info.joinStatus!=2" style="width:80px;" class="del-btn-list">
                请假
              </el-button>
              <el-button type="primary" @click="changeMeeting('是否确认参会？')" v-if="info.joinStatus!=1" style="width:80px;">
                确认参会
              </el-button>
            </p>
          </template>
        </ai-title>
      </template>
      <template #content>
        <ai-dialog
            title="确认请假"
            :visible.sync="innerVisible"
            @onConfirm="queMeeting('writeInfo')"
            @onCancel="innerVisible=false;" @close="$refs.writeInfo.resetFields()"
            width="520px">
          <div class="addother_main" style="width:400px;margin:auto;">
            <el-form :model="writeInfo" status-icon ref="writeInfo" label-width="100px" class="demo-ruleForm">
              <el-form-item label="请假原因：" prop="reason" autocomplete="off"
                            :rules="{
                                        required: true, message: '请假原因不能为空', trigger: 'blur'
                                    }"
              >
                <el-input v-model.trim="writeInfo.reason" autocomplete="off" size="mini" placeholder="请输入..."
                          type="textarea" :rows="4" :maxlength="100" show-word-limit></el-input>
              </el-form-item>

            </el-form>
          </div>
        </ai-dialog>
        <ai-card title="会议说明">
          <template slot="content">
            <ai-wrapper class="mar-t16" label-width="70px" :columnsNumber="1">
              <ai-info-item label="会议标题："><span>{{ info.title }}</span></ai-info-item>
            </ai-wrapper>
            <!-- <ai-wrapper class="mar-t16" label-width="70px" :columnsNumber="2">
              <ai-info-item label="发起单位：" :value="info.unitName" openType="departmentName"/>
              <ai-info-item label="发起人：" :value="info.userName" openType="userName"/>
            </ai-wrapper> -->
            <ai-wrapper class="mar-t16" label-width="70px" :columnsNumber="1">
              <!-- <ai-info-item label="会议状态：" v-if="xq.joinStatus==1&&listType==1"><span>{{ xq.joinStatus }}</span>
              </ai-info-item> -->
              <ai-info-item label="发起时间："><span>{{ info.createTime }}</span></ai-info-item>
            </ai-wrapper>
            <ai-wrapper class="mar-t16" label-width="70px" :columnsNumber="2">
              <ai-info-item label="开始时间："><span>{{ info.startTime }}</span></ai-info-item>
              <ai-info-item label="结束时间："><span>{{ info.endTime }}</span></ai-info-item>
            </ai-wrapper>
            <ai-wrapper class="mar-t16" label-width="70px" :columnsNumber="2">
              <ai-info-item label="参会提醒："><span>{{
                  dict.getLabel("meetingNoticeBefore", info.noticeBefore) || "-"
                }}</span></ai-info-item>
              <ai-info-item label="确认提醒："><span>{{
                  dict.getLabel("meetingNoticeAfter", info.noticeAfter) || "-"
                }}</span>
              </ai-info-item>
            </ai-wrapper>
            <ai-wrapper class="mar-t16" label-width="70px" :columnsNumber="1">
              <ai-info-item label="会议地点："><span>{{ info.address }}</span></ai-info-item>
            </ai-wrapper>
            <ai-wrapper class="mar-t16" label-width="70px" :columnsNumber="1">
              <ai-info-item label="会议内容："><span v-html="info.content"></span></ai-info-item>
            </ai-wrapper>
          </template>
        </ai-card>
        <ai-card title="会议资料">
          <template slot="content">
            <ai-file-list :fileList="info.files" :fileOps="{name: 'name', size: 'fileSizeStr'}"></ai-file-list>
          </template>
        </ai-card>
        <ai-card title="参会名单">
          <template slot="content">
            <ai-search-bar>
              <template #left>
                <el-select v-model="search.joinStatus" placeholder="确认状态" size="small" clearable class="vc-input-160"
                           @change="searchMeetinguser">
                  <el-option
                      v-for="(item,k) in confirmStatus"
                      :key="k"
                      :label="item.label"
                      :value="k">
                  </el-option>
                </el-select>
              </template>
              <!--              <template #right>-->
              <!--                <el-input v-model="search.param" placeholder="姓名/手机号" @change="searchMeetinguser()"-->
              <!--                          size="small" suffix-icon="iconfont iconSearch" clearable/>-->
              <!--              </template>-->
            </ai-search-bar>
            <ai-table
                :tableData="info.attendees"
                :colConfigs="colConfigs"
                :isShowPagination="false"
            >
              <el-table-column slot="meetingUserName"
                               label="姓名"
                               align="center"
                               show-overflow-tooltip>
                <div slot-scope="{row}">
                  <template v-if="row.meetingUserName">
                    <ai-open-data type="userName" :openid="row.meetingUserName"/>
                  </template>
                </div>
              </el-table-column>

              <el-table-column slot="meetingUnitName"
                               label="所属部门"
                               align="center"
                               show-overflow-tooltip>
                <div slot-scope="{row}">
                  <template v-if="row.meetingUnitName">
                    <ai-open-data type="departmentName" :openid="row.meetingUnitName"/>
                  </template>
                </div>
              </el-table-column>

              <el-table-column slot="joinStatus"
                               prop="joinStatus"
                               label="确认状态"
                               align="center"
                               show-overflow-tooltip>
                <div slot-scope="{row}">
                  <p style="color:rgba(255,68,102,1);display:flex;justify-content:center;" v-if="row.joinStatus==2">
                    请假<i class="el-icon-warning" :title="row.absence" style="cursor: pointer;"></i>
                  </p>
                  <span v-else :style="{color:confirmStatus[row.joinStatus].color}"
                        v-text="confirmStatus[row.joinStatus].label"/>
                </div>
              </el-table-column>
              <el-table-column slot="option"
                               label="操作"
                               align="center"
                               v-if="listType==0"
                               show-overflow-tooltip>
                <div slot-scope="{row}" v-if="row.joinStatus==0">
                  <span class="el-icon-message-solid" style="cursor: pointer;" title="参会提醒"
                        @click="noticeMetting(row.meetingUserId)" v-if="detail.status==1"></span>
                </div>
              </el-table-column>
            </ai-table>
          </template>
        </ai-card>
      </template>
    </ai-detail>
  </section>
</template>
<script>
import {mapState} from "vuex";

export default {
  name: 'meetingDetail',
  inject: ['top'],
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    detail: Object,
    listType: String
  },
  data() {
    return {
      navId: '1',
      info: {},
      total: 0,
      writeInfo: {reason: ''},
      meetingUserList: [],
      innerVisible: false,
      search: {joinStatus: ''}
    }
  },
  created() {
    this.dict.load("meetingNoticeAfter", "meetingNoticeBefore").then(() => this.searchDetail(this.detail.id))
  },
  computed: {
    ...mapState(['user']),
    colConfigs() {
      return [
        {
          slot: 'meetingUserName'
        },
        // {
        //   prop: 'meetingUserPhone',
        //   align: 'center',
        //   label: '手机号码',
        // },
        {
          slot: 'meetingUnitName'
        },
        {
          slot: 'joinStatus',
        },
        {
          slot: 'option',
        }
      ]
    },
    confirmStatus() {
      return {
        0: {label: '未确认', color: "rgba(255,136,34,1)"},
        1: {label: '已确认', color: "rgba(34,102,255,1)"},
        2: {label: '请假', color: "rgba(255,68,102,1)"},
        3: {label: '待定', color: "rgba(255,136,34,1)"},
      }
    }
  },
  methods: {
    toDo() {
      this.$confirm("是否确认待定会议？").then(_ => {
        this.instance.post("/app/appmeetinginfo/tobeConfirm", null, {
          params: {
            meetingId: this.detail.id,
          }
        }).then(res => {
          if (res.code == 0) {
            this.$message.success("会议待定");
            setTimeout(_ => {
              this.$parent.goBack();
            }, 800)
          }
        })
      })
    },
    searchMeetinguser() {
      this.instance.post(`/app/appmeetinguser/list`, null, {
        params: {...this.search, size: 999, meetingId: this.info.id}
      }).then(res => {
        if (res?.data) {
          this.info.attendees = res.data.records;
          this.total = res.data.total;
          this.$store.dispatch('initOpenData')
        }
      });
    },
    searchDetail(id) {
      this.instance.post(`/app/appmeetinginfo/info-id`, null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.info = {
            ...res.data,
            content: this.formatContent(res.data.content || ""),
            files: res.data.files || []
          };
          this.searchMeetinguser()
        }
      });
    },
    changeMeeting(title, id) {
      this.$confirm(title, {
        type: 'warning'
      }).then(() => {
        if (title == '是否立即发布会议？') {
          this.fbMeeting();
        } else if (title == '是否删除会议？') {
          this.sdMeeting();
        } else if (title == '是否取消会议？') {
          this.qxMeeting();
        } else if (title == '是否确认参会？') {
          this.qrMeeting();
        } else if (title == '是否删除此参会人员？') {
          this.deleteMeetingPer(id)
        }
      })
    },
    deleteMeetingPer(id) {
      this.instance.post(`/app/appmeetinguser/delete`, null,
          {
            params: {
              id
            }
          }
      ).then(res => {

        if (res && res.code == 0) {
          this.$message.success("删除成功！");
          this.searchMeetinguser();
        }

      });
    },
    queMeeting(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.instance.post(`/app/appmeetinginfo/absent`, null,
              {
                params: {
                  meetingId: this.detail.id,
                  reason: this.writeInfo.reason
                }
              }
          ).then(res => {

            if (res && res.code == 0) {
              this.innerVisible = false;
              this.$parent.goBack();
            }

          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    qrMeeting() {
      this.instance.post(`/app/appmeetinginfo/confirm`, null,
          {
            params: {
              meetingId: this.detail.id

            }
          }
      ).then(res => {

        if (res && res.code == 0) {
          this.$message.success("确认参会成功！")
          this.$parent.goBack();
        }

      });
    },
    noticeMetting(meetingUserId) {
      this.instance.post(`/app/appmeetinginfo/notice`, null,
          {
            params: {
              meetingId: this.detail.id,
              noticeALL: !meetingUserId,
              meetingUserId
            }
          }
      ).then(res => {
        if (res && res.code == 0) {
          this.$message.success("提醒成功！")
        }

      });
    },
    fbMeeting() {
      this.instance.post(`/app/appmeetinginfo/release`, null,
          {
            params: {
              meetingId: this.detail.id
            }
          }
      ).then(res => {

        if (res && res.code == 0) {
          this.$message.success("发布成功！")
          this.$parent.goBack();
        }

      });

    },
    sdMeeting() {
      this.instance.post(`/app/appmeetinginfo/delete`, null,
          {
            params: {
              meetingId: this.detail.id
            }
          }
      ).then(res => {

        if (res && res.code == 0) {
          this.$message.success("删除成功！");
          this.$parent.goBack();
        }

      });
    },
    qxMeeting() {
      this.instance.post(`/app/appmeetinginfo/cancel`, null,
          {
            params: {
              meetingId: this.detail.id
            }
          }
      ).then(res => {

        if (res && res.code == 0) {
          this.$message.success("取消会议成功！");
          this.$parent.goBack();
        }

      });
    },
    editMeeting() {
      this.$parent.goBack();
      this.$emit('gotoEdit', this.info)
    },
  }
}
</script>
<style lang="scss" scoped>
.meetingDetail {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);

  .conference_top_area {
    display: flex;
    align-items: center;
  }

  .user-search {
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .float-right {
      width: calc(100% - 200px);
      text-align: right;
    }

    .input-162 {
      display: inline-block;
      width: 162px;
    }

  }

  .content {
    width: 1000px;
    height: calc(100% - 50px);
    overflow: hidden;
    margin: auto;
    display: flex;
    justify-content: space-around;

    .content-left {
      width: 160px;
      height: 100%;

      .content-left-nav {
        width: 158px;
        background-color: #ffffff;
        border-radius: 4px;
        border: solid 1px #eeeeee;
        margin-top: 56px;
        overflow: hidden;

        li {
          height: 48px;
          line-height: 48px;
          padding-left: 24px;
          font-size: 14px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0;
          color: #666666;
          cursor: pointer;
          border-left: 3px solid transparent;

          &:hover {
            border-left: 3px solid #5088ff;
          }

          a {
            display: block;
          }
        }

        .navActive {
          border-left: 3px solid #5088ff;
          color: #5088ff;
        }
      }

    }

    .content-right {
      width: 780px;
      height: calc(100% - 80px);
      overflow-y: auto;
      margin-left: 40px;
      box-sizing: border-box;
      overflow-x: hidden;

      .content-right-title {
        width: 780px;
        height: 56px;
        margin-bottom: 16px;
        box-shadow: inset 0px -1px 0px 0px #dad5d5;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          display: block;
          width: 150px;
          height: 56px;
          line-height: 56px;
          color: #333333;
          font-weight: bold;

          &:nth-of-type(2) {
            text-align: right;
            width: 200px;
          }

        }


      }

      .flie {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 0 8px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: rgba(51, 51, 51, 1);
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(208, 212, 220, 1);
        margin-bottom: 16px;
        cursor: pointer;

        p {
          display: flex;
          justify-content: flex-start;
          align-items: center
        }
      }

      .meeting_name {
        width: 100%;
        padding-bottom: 25px;
        font-size: 16px;
        box-shadow: inset 0px -1px 0px 0px #dad5d5;
        position: relative;
        overflow: hidden;

        .title {
          color: #333333;
          height: 28px;
          line-height: 28px;
          margin-left: 0;
          font-weight: bold;
          margin-top: 14px;
        }

        ul {
          overflow: hidden;

          li {
            width: 33.3%;
            float: left;
            line-height: 28px;
            font-size: 14px;

            span {
              width: 70px;
              display: block;
              float: left;
              color: rgba(153, 153, 153, 1)
            }

            p {
              width: calc(100% - 70px);
              float: left;
              color: rgba(51, 51, 51, 1);
            }
          ;
          }
        }

        .svg {
          width: 88px;
          height: 88px;
          position: absolute;
          right: -20px;
          bottom: -20px;
        }

      }


    }
  }
}
</style>
