<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>
          <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
            required
            label="发送人员:"
          >
            <el-input
              disabled
              type="textarea"
              :rows="4"
              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="company"
            label="单位"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号"
            sortable="custom"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="gender"
            label="性别"
            sortable="custom"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              {{ $getDictLabel("gender", scope.row.gender) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="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>

  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
export default {
  name: "meetingsDetail",
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/sys/user/page",
        getDataListIsPage: true,
        deleteURL: "/sys/user",
        deleteIsBatch: true,
        exportURL: "/sys/user/export",
      },
      dataform1: {
        meetingContent: "1111",
        people:
          "张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧，张网吧",
      },
      dataForm: {
        company: "",
        name: "",
      },
    };
  },
  methods: {
    init() {
      console.log(this.$route.query.id);
      this.dataForm.id = this.$route.query.id;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        }
      });

      console.log("ppp", this.dataForm.sex);
      console.log("pppo", typeof this.dataForm.sex);
    },
    // 获取信息
    getInfo() {
      this.$http
        .get(`/meeting/meeting/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          console.log("ppppppp", this.dataForm);
          console.log("ppp", this.dataForm.sex);
          this.dataForm.sex = this.dataForm.sex + "";
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-textarea__inner {
  font-size: 22px;
}
/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;
    }
  }

  .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>