<template>
  <el-card
    shadow="never"
    class="aui-card--fill"
  >
    <div class="meetingsDetail">
      <div class="title"><span class="substyle">会议内容 </span> </div>
      <div class="meetingsContent">
        <el-form>
          <div
            class="meeting"
            style="width:100%;border:2px solid #ccc;border-radius:5px;margin-bottom:20px"
          >
            <el-form-item prop="title">
              <el-input
                v-model="dataform1.title"
                style="font-size:22px;border:0"
                disabled
                placeholder="暂无标题"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="content"
              label=""
            >

              <el-input
                type="textarea"
                :rows="14"
                resize="none"
                v-model="dataform1.content"
                disabled
                :autosize="{ minRows: 6, maxRows: 14 }"
                placeholder="暂无内容"
              ></el-input>

            </el-form-item>
          </div>
          <!-- <el-form-item label="">
            <el-input
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 14 }"
              v-model="dataform1.meetingContent"
              resize="none"
              placeholder="暂无"
              disabled
            ></el-input>
          </el-form-item> -->
          <el-form-item label="已发送人员:">
            <el-input
              disabled
              type="textarea"
              :rows="4"
              resize="none"
              class="sendpeople"
              placeholder="暂无"
              v-model="dataform1.people"
            ></el-input>

          </el-form-item>
        </el-form>

        <div class="title other"><span class="substyle ">报名参会人员 </span> </div>
        <el-form
          :inline="true"
          :model="dataForm"
          @keyup.enter.native="getDataList()"
        >
          <el-form-item>
            <el-input
              v-model="dataForm.company"
              placeholder="请输入单位名称"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-input
              v-model="dataForm.name"
              placeholder="请输入姓名"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button @click="getDataList()">{{ $t('query') }}</el-button>
          </el-form-item>

          <el-form-item>
            <el-button
              v-if="$hasPermission('sys:user:export')"
              type="info"
              @click="exportHandle()"
            >{{ $t('export') }}</el-button>
          </el-form-item>

        </el-form>
        <el-table
          v-loading="dataListLoading"
          :data="dataList"
          border
          @selection-change="dataListSelectionChangeHandle"
          @sort-change="dataListSortChangeHandle"
          style="width: 100%;"
        >
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column
            prop="userInfo.company"
            label="单位"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="userInfo.name"
            label="姓名"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="userInfo.email"
            label="邮箱"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="userInfo.mobile"
            label="手机号"
            sortable="custom"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="userInfo.sex"
            label="性别"
            sortable="custom"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.userInfo.sex==1">男</span>
              <span v-if="scope.row.userInfo.sex==2">女</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="userInfo.position"
            label="职位"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="createDate"
            label="报名时间"
            header-align="center"
            align="center"
            width="200"
          ></el-table-column>

        </el-table>
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle"
        >
        </el-pagination>
      </div>

      <div class="footer">
        <el-button
          style="border:1px solid #17B3A3;color:#17B3A3;width:100px;float:right;margin-top:20px"
          @click="goback"
        >
          返回
        </el-button>

      </div>
    </div>

  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
export default {
  name: "meetingsDetail",
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL:
          "/meeting/wlmeetingstaff/page?registrationState=1&meetingId=" +
          this.$route.query.id,
        getDataListIsPage: true,

        deleteIsBatch: true,
        exportURL: "/meeting/wlmeetingstaff/export",
      },
      dataform1: {
        meetingContent: "1111",
        people: "",
      },
      dataForm: {
        company: "",
        name: "",
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    //返回按钮事件
    goback() {
      this.$router.go(-1);
    },
    init() {
      console.log(this.$route.query.id);
      this.dataform1.id = this.$route.query.id;
      this.$nextTick(() => {
        // this.$refs["dataForm"].resetFields();
        if (this.dataform1.id) {
          this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      this.$http
        .get(`/meeting/meeting/${this.dataform1.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataform1 = {
            ...this.dataform1,
            ...res.data,
          };
          console.log("ppppppp", this.dataform1);
          this.dataform1.people = this.dataform1.invitedUserNames.join(",");
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
.meeting {
  /deep/.el-input__inner {
    font-size: 22px !important;
    border: 0;
  }
  /deep/.el-textarea__inner {
    font-size: 16px;
    border: 0;
    padding: 0 0 0 30px;
  }
}

/deep/.el-input.is-disabled .el-input__inner {
  color: #000;
  background: #fff;
  // border: 0;
  flex: 1;
}
/deep/.el-textarea.is-disabled .el-textarea__inner {
  color: #000;
  background: #fff;
}

/deep/.el-form-item__content {
  display: flex;
}

.meetingsDetail {
  width: 100%;
  font-size: 18px;
  .title {
    width: 99%;
    margin: 0 auto;
    margin-bottom: 20px;

    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;

    .substyle {
      border-left: 5px solid #43cc93;
      padding-left: 10px;
    }
  }
  .footer {
    width: 100%;
  }

  .other {
    //background: #eee;
    margin-top: 50px;
  }

  .sendpeople {
    /deep/.el-textarea__inner {
      font-size: 14px;
    }
  }
  .meetingsContent {
    width: 98%;
    margin: 0 auto;
    .sendbtn {
      border: 1px solid #17b3a3;
      color: #17b3a3;
    }
  }
}
</style>