<template>
  <el-dialog title="查看参会名单" :visible.sync="isParticipateShow" width="700px" append-to-body @close="closeDlg">
    <div class="partic-list-dialog-container">
      <div>
        <el-input style="width: 392px; margin-bottom: 20px" v-model="roadShowTheme" placeholder="请输入路演主题名称"></el-input>
      </div>
      <div v-if="isShowPermission" style="margin-bottom: 20px">
        <el-tag type="info" size="small"> {{ this.chartPermissionName }}</el-tag>
      </div>
      <el-select
        v-else
        v-model="hashtagValue"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="请输入路演主题标签(可多选)"
        :remote-method="remoteMethodHandler"
        style="width: 392px; margin-bottom: 20px"
        @change="tagSelectHandler"
      >
        <el-option v-for="item in hashtagOptions" :key="item.Md5Key" :label="item.TagName" :value="item.Md5Key"> </el-option>
      </el-select>
      <el-table :data="tableData" border>
        <el-table-column align="center" prop="RealName" label="姓名"></el-table-column>
        <el-table-column align="center" prop="Position" label="职位"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <span class="deletesty" @click="deleteItem(row)"> 删除</span>
          </template>
        </el-table-column>
      </el-table>
      <div @click="addItem" class="add-box">
        <img :src="$icons.addblue" alt="" />
        <span>添加</span>
      </div>
    </div>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button @click="closeDlg">关闭</el-button>
      <el-button type="primary" @click="saveTagsHandler">保存</el-button>
    </div>
    <addParticipateDia
      :isAddParticipateShow="isAddShow"
      :RsCalendarId="RsCalendarId"
      isType="查看"
      :addRoadShowTheme="roadShowTheme"
      @close="isAddShow = false"
      @confirm="
        getTableData();
        isAddShow = false;
      "
    />
  </el-dialog>
</template>

<script>
import { roadshowInterence } from "@/api/api.js";
import addParticipateDia from "./addParticipateDia.vue";
export default {
  props: {
    isParticipateShow: {
      type: Boolean,
      default: false,
    },
    RsCalendarId: {
      type: Number,
      default: 0,
    },
    ResearcherId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      tableData: [],
      isAddShow: false,
      hashtagValue: [], // 主题标签
      hashtagOptions: [], // 主题数据
      tagList: [], // /标签类型
      tagName: "",
      chartPermissionName: "",
      isShowPermission: false,
      roadShowTheme: "",
    };
  },
  watch: {
    isParticipateShow(newval) {
      if (newval) {
        this.getTableData();
        this.getIsPermissionName();
      }
    },
  },
  methods: {
    getTableData() {
      roadshowInterence
        .getMeetingUserList({
          RsCalendarId: this.RsCalendarId,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.tableData = res.Data.List;
          this.hashtagOptions = res.Data.ListLebel;
          this.roadShowTheme = res.Data.RoadShowTheme || "";

          if (this.hashtagOptions.length) {
            this.hashtagValue = [];
            this.hashtagOptions.forEach((item) => {
              this.hashtagValue.push(item.Md5Key);
            });
            this.tagSelectHandler();
          }
        });
    },
    addItem() {
      this.isAddShow = true;
    },
    deleteItem(row) {
      roadshowInterence
        .deleteMeetingUser({
          RsCalendarMeetingUserId: row.RsCalendarMeetingUserId,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.$message.success("删除成功");
          this.getTableData();
        });
    },
    // 获取标签
    async remoteMethodHandler(query) {
      if (query !== "") {
        let KeyWord = this.tagName ? this.tagName + "," + query : query;
        const res = await roadshowInterence.rai_serve_search_tag({
          KeyWord,
          ResearcherId: this.ResearcherId,
        });
        if (res.Ret === 200) {
          this.hashtagOptions = res.Data.List || [];
        }
      } else if (!this.hashtagValue.length && !query) {
        this.hashtagOptions = [];
      }
    },
    // 标签选择后处理
    tagSelectHandler() {
      let tagListArr = [];
      let nameArr = [];
      this.hashtagOptions.forEach((item) => {
        if (this.hashtagValue.length && this.hashtagValue.includes(item.Md5Key)) {
          tagListArr.push({
            TagType: item.TagType,
            TagId: item.TagId,
          });
          nameArr.push(item.TagName);
        }
      });
      this.tagList = tagListArr;
      this.tagName = nameArr.join(",");
    },
    // 提交标签
    saveTagsHandler() {
      if (!this.roadShowTheme) return this.$message.error("请输入路演主题名称");

      roadshowInterence
        .addMeetingUser({
          RsCalendarId: this.RsCalendarId,
          TagList: this.tagList,
          RoadShowTheme: this.roadShowTheme,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.$message.success("提交成功");
          this.closeDlg();
        });
    },
    // 进入看看是否是策略
    async getIsPermissionName() {
      const res = await roadshowInterence.rai_serve_search_chcck_PermissionName({ ResearcherId: this.ResearcherId });
      if (res.Ret === 200) {
        this.chartPermissionName = res.Data.ChartPermissionName;
        this.isShowPermission = res.Data.Belong;
        this.tagList = res.Data.List;
      }
    },
    // 关闭弹框
    closeDlg() {
      this.hashtagValue = ""; // 主题标签
      this.hashtagOptions = []; // 主题数据
      this.tagList = []; // /标签类型
      this.tagName = "";
      this.chartPermissionName = "";
      this.isShowPermission = false;
      this.roadShowTheme = "";
      this.$emit("close");
    },
  },
  components: { addParticipateDia },
};
</script>

<style scoped lang="scss">
.partic-list-dialog-container {
  .add-box {
    margin-top: 15px;
    display: flex;
    align-items: center;
    color: #5882ef;
    cursor: pointer;
    img {
      width: 16px;
      height: 16px;
      margin-right: 10px;
    }
  }
}
</style>
