<template>
  <div class="addThreeMeeting">
    <ai-detail>
      <ai-title slot="title" :title="`${form.id?'编辑':'添加'}三会一课`" isShowBack @onBackClick="$parent.goBack()"
                isShowBottomBorder/>
      <template #content>
        <ai-card>
          <template #content>
            <el-form :model="form" label-width="100px" ref="basicForm" :rules="fromRules" size="small">
              <ai-title title="基本信息" isShowBottomBorder/>
              <el-form-item label="会议分类：" prop="meetingClassification">
                <el-checkbox-group v-model="form.meetingClassification">
                  <el-checkbox :label="op.dictValue" v-for="(op,j) in dict.getDict('meetingClassification')" :key="j">
                    {{ op.dictName }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item prop="meetingAgenda" label="会议名称：" ref="fromTitle">
                <el-input
                    v-model="form.meetingAgenda"
                    placeholder="限30字"
                    clearable
                    :maxLength="30"
                />
              </el-form-item>
              <el-form-item prop="appThreeMeetingOrganizationList" label="与会组织："
                            ref="appThreeMeetingOrganizationList">
                <div class="organ" @click="showDialogVisible()">
                          <span v-if="form.appThreeMeetingOrganizationList.length">
                            <span v-for="(item,i) in form.appThreeMeetingOrganizationList" :key="item.name"
                                  class="organzation">{{ item.name || item.organizationName }}
                                <span class="iconfont iconOverrule" @click.stop="delate(i)"></span>
                            </span>
                          </span>
                  <span v-else>请选择</span>
                </div>
              </el-form-item>
              <el-form-item prop="isOnline" label="举办方式">
                <!--            <el-radio label="1" v-model="form.isOnline">线上举办</el-radio>-->
                <el-radio label="0" v-model="form.isOnline">线下举办</el-radio>
              </el-form-item>
              <el-form-item prop="meetingAddress" label="会议地点：" v-if="form.isOnline==0">
                <el-input
                    v-model="form.meetingAddress"
                    placeholder="限60字"
                    clearable
                    :maxLength="60"
                />
              </el-form-item>
              <el-row type="flex" justify="space-between">
                <el-form-item prop="startTime" label="开始时间：" ref="startTime">
                  <el-date-picker @change="dataChange()"
                                  value-format="yyyy-MM-dd HH:mm:ss"
                                  type="datetime"
                                  v-model="form.startTime"
                                  placeholder="请选择..."
                  />
                </el-form-item>
                <el-form-item prop="endTime" label="结束时间：" ref="endTime">
                  <el-date-picker @change="dataChange()"
                                  value-format="yyyy-MM-dd HH:mm:ss"
                                  type="datetime"
                                  v-model="form.endTime"
                                  placeholder="请选择..."
                                  :disabled="!Boolean(form.startTime)"
                  ></el-date-picker>
                </el-form-item>
              </el-row>
              <el-form-item label="会议说明：" prop="meetingDescription" calss="uedtor" style="margin-top: 16px;">
                <ai-editor v-model="form.meetingDescription" :instance="instance"/>
              </el-form-item>
<!--              <el-form-item label="附件：">-->
<!--                <ai-uploader :instance="instance" v-model="form.fileList" fileType="file"-->
<!--                             :limit="9"></ai-uploader>-->
<!--              </el-form-item>-->
              <ai-title title="人员设置" isShowBottomBorder/>
              <div class="person">
                <el-form-item label="与会人员：" prop="participantList" label-width="106px" ref="participantList">
                  <div class="select-person" v-for="(item,index) in form.participantList" :key="item.name"
                       style="margin-bottom: 36px;">
                    <div class="person-pictrue" style="cursor: pointer;" @click="selectHost(index)">
                      <img :src="item.avatarUrl" alt="" v-if="item.avatarUrl"
                           style="position: absolute;left: 0;top:0;">
                      <div
                          style="overflow: hidden;width:40px;white-space: nowrap;background-color:#2266FF;border-radius:50%;"
                          v-else>{{ item.name }}
                      </div>
                      <span class="host">主持人</span>
                      <span class="iconfont del-icon iconOverrule" @click.stop="deletePerson(index)"></span>
                    </div>
                    <span class="person-name">{{ item.name }}</span>
                    <span style="position: absolute;left: 0;top: 60px;color: #2266FF;" v-if="item.isHost">
                          <span class="iconfont iconzxjyzdls" style="color: #8899BB;"></span>
                          <span style="font-size: 12px;">主持人</span>
                        </span>
                  </div>
                  <ai-party-member
                      :instance="instance"
                      customCliker
                      dialogTitle="添加人员"
                      v-model="form.participantList"
                      :key="partyKey"
                      customOrg
                      v-if="isShowChooseUser"
                      :disable="hostDisable"
                      :area-id="areaId"
                      :meta="[1]"
                      :partyOrgList="form.appThreeMeetingOrganizationList"
                      @change="handleSelectParty">
                    <div class="select-person add-person">
                      <div class="add-icon"><span class="el-icon-plus icon-add"></span></div>
                      <span class="person-name">选择</span>
                    </div>
                  </ai-party-member>
                </el-form-item>
                <span class="tips">*从党员用户中选择，必须设置一名主持人(点击与会人员头像设置或变更主持人)</span>
              </div>
              <div class="person">
                <el-form-item label="纪要负责人：" label-width="106px" style="width:100%;margin-bottom: 0;"
                              ref="recorderList">
                  <ai-person-select :customClicker="true" :chooseUserList="form.recorderList" customRightText
                                    :instance="instance" url="/admin/user/pageForWeb" headerTitle="人员列表"
                                    dialogTitle="选择" @selectPerson="changeRecorderList">
                    <template v-slot:option="{ item }">
                      <span class="iconfont iconProlife">{{ item.name }}</span>
                      <span>{{ item.phone }}</span>
                    </template>
                  </ai-person-select>
                </el-form-item>
                <span class="tips">*从系统用户中选择，拥有签到管理权限</span>
              </div>
              <ai-title title="会议投票设置" isShowBottomBorder/>
              <el-form-item label="是否投票：">
                <el-radio v-for="op in dict.getDict('yesOrNo')"
                          :key="op.dictValue" :label="op.dictValue" v-model="form.isVote">
                  {{ op.dictName }}
                </el-radio>
              </el-form-item>
              <template v-if="form.isVote==1">
                <el-form-item label="投票主题：" prop="voteTopic">
                  <el-input type="textarea" v-model="form.voteTopic" maxlength="80" show-word-limit rows="4"/>
                </el-form-item>
                <el-form-item label="投票选项：" required>
                  <el-radio label="1" v-model="voteOps">同意/不同意</el-radio>
                </el-form-item>
                <el-form-item label="投票形式：" prop="anonymous">
                  <ai-select v-model="form.anonymous" :selectList="dict.getDict('ThreeMeetingAnonymous')"/>
                </el-form-item>
                <el-form-item label="截止时间：" prop="voteDeadline">
                  <el-date-picker v-model="form.voteDeadline" type="datetime" placeholder="请选择"
                                  value-format="yyyy-MM-dd HH:mm:ss"/>
                </el-form-item>
              </template>
              <ai-title title="其他设置" isShowBottomBorder/>
              <el-form-item v-if="form.isOnline==0" label="签到方式：" prop="signMethod">
                <el-radio-group v-model="form.signMethod">
                  <el-radio label="1">签到</el-radio>
                  <el-radio label="0">不签到</el-radio>
                </el-radio-group>
              </el-form-item>
              <div class="person" v-if="form.signMethod=='1'">
                <el-form-item label="签到负责人：" label-width="106px" style="width:100%" ref="chargeOfSignInList">
                  <ai-person-select :customClicker="true" :chooseUserList="form.chargeOfSignInList"
                                    :instance="instance" customRightText url="/admin/user/pageForWeb"
                                    headerTitle="人员列表" dialogTitle="选择" :isMultiple="true"
                                    @selectPerson="changeCharge">
                    <template v-slot:option="{ item }">
                      <span class="iconfont iconProlife">{{ item.name }}</span>
                      <span>{{ item.phone }}</span>
                    </template>
                  </ai-person-select>
                </el-form-item>
                <span class="tips">*从系统用户中选择，拥有签到管理权限</span>
              </div>
              <div class="areaList" v-if="form.signMethod=='1'">
                <el-form-item label="签到时间：" style="width:100%;"
                              :prop="form.signMethod=='1'?'meetingBefore':'meetingBeforeCo'">
                  会议开始时间前
                  <el-input v-model="form.meetingBefore" class="time-input"
                            oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                  分钟，至会议开始时间后
                  <el-input v-model="form.meetingAfter" class="time-input"
                            oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                  分钟，可进行签到。
                  <P>
                    可签到时间为
                    <span style="color:#5088FF"
                          v-if="form.meetingBefore&&form.meetingAfter&&form.startTime">({{ signStart }} ~ {{
                        signEnd
                      }})</span>
                    <span style="color:#5088FF" v-else>-</span>
                  </P>
                </el-form-item>
              </div>
              <el-form-item label="提醒方式：" style="width:100%;" prop="reminderMethod">
                <el-checkbox-group v-model="form.reminderMethod">
                  <el-checkbox label="5" style="width: 100%;"
                               :disabled="form.reminderMethod.indexOf('0')>-1 || form.reminderMethod.indexOf('1')>-1||form.reminderMethod.indexOf('2')>-1||form.reminderMethod.indexOf('3')>-1 || form.reminderMethod.indexOf('4')>-1">
                    不提醒
                  </el-checkbox>
                  <el-checkbox label="0" style="width: 16%;" :disabled="form.reminderMethod.indexOf('5') > -1">立即通知
                  </el-checkbox>
                  <el-checkbox label="1" style="width: 16%;" :disabled="form.reminderMethod.indexOf('5') > -1">提前10分钟
                  </el-checkbox>
                  <el-checkbox label="2" style="width: 16%;" :disabled="form.reminderMethod.indexOf('5') > -1">提前30分钟
                  </el-checkbox>
                  <el-checkbox label="3" style="width: 16%;" :disabled="form.reminderMethod.indexOf('5') > -1">提前1小时
                  </el-checkbox>
                  <el-checkbox label="4" style="width: 16%;" :disabled="form.reminderMethod.indexOf('5') > -1">提前2小时
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </template>
        </ai-card>
      </template>
      <template #footer>
        <el-button size="small" @click="confirm()">取消</el-button>
        <el-button type="primary" size="small" @click="confirm('1')">立即发布</el-button>
        <el-button size="small" @click="confirm('0')">保存</el-button>
      </template>
    </ai-detail>
    <el-dialog width="644px" title="选择党组织" :visible.sync="dialogVisible" class="select-party">
      <div>
        <el-row type="flex" justify="space-between">
          <el-row class="search-panel" type="flex" justify="space-between">
            <div class="add-item" style="padding-bottom:3px;overflow-x: hidden">
              <p class="add_top">
                <span>党组织</span>
                <el-input placeholder="党组织名称" size="small" style="width:166px;" clearable
                          suffix-icon="el-icon-search"
                          v-model="filterText"></el-input>
              </p>
              <div class="tree_list">
                <el-tree
                    :data="treeData"
                    show-checkbox
                    node-key="id"
                    ref="partyTree"
                    :filter-node-method="filterNode"
                    @check-change="handleCheckChange"
                    :highlight-current="true"
                    :props="defaultProps">
                </el-tree>
              </div>
            </div>
          </el-row>
          <div class="selected-people add-item">
            <p class="add_top">
              <span>已选择</span>
              <el-button icon="iconfont iconDelete" size="mini"
                         @click="clearSelect()">清空
              </el-button>
            </p>
            <div class="add_tag" v-if="selectParty.length" style="width:100%;">
              <el-tag v-for="(item,i) in selectParty" :disable-transitions="true" :key="item.name" type="info">
                {{ item.name }}
                <span class="iconfont iconOverrule icon-color89B" style="float: right;"
                      @click.stop="cancelSelect(i)"></span>
              </el-tag>
            </div>
            <div class="add_tag" v-else
                 style="display:flex;align-items:center;justify-content:center;width:100%;">
              <span>暂无数据</span>
            </div>
          </div>
        </el-row>
      </div>
      <div slot="footer" style="text-align: center;">
        <el-button style="width:92px" size="small" class="delete-btn" @click="dialogVisible=false">取消
        </el-button>
        <el-button style="width:92px" size="small" type="primary"
                   @click="dialogVisible=false,confirmSelect()">确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapState} from "vuex";
import moment from 'dayjs';

export default {
  name: "add",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    detail: Object,
  },
  computed: {
    ...mapState(["user"]),
    hostDisable() {
      if (!this.form.meetingUser) return []
      const list = [
        ...this.form.chargeOfSignInList,
        ...this.form.participantList,
        ...this.form.recorderList
      ]
      return list || []
    },
    color() {
      return ["#FF4466", "#2EA222", "#2266FF", "#FF8822", "#333333"]
    },
  },
  data() {
    const endTimePass = (rule, value, callback) => {
      if (value) {
        if (moment(value).unix() - moment(this.form.startTime).unix() > 0) {
          callback()
        } else {
          callback(new Error('结束时间要大于开始时间'));
        }
      } else {
        callback(new Error('请填写结束时间'));
      }
    }
    const startTimePass = (rule, value, callback) => {
      if (value) {
        if (moment(value).unix() - moment(new Date()).unix() > 0) {
          callback()
        } else {
          callback(new Error('开始时间要大于当前时间'));
        }
      } else {
        callback(new Error('请填写开始时间'));
      }
    }
    return {
      form: {
        meetingClassification: [],    //会议分类
        meetingAgenda: "",  //会议名称
        meetingAddress: "",//会议地点
        meetingDescription: "",//会议说明
        hostList: [],  //主持人
        meetingBefore: "",
        meetingAfter: "",
        startTime: "",//开始时间
        endTime: "",//结束时间
        reminderMethod: ["5"],//提醒方式,默认不签到
        signMethod: "0",//签到方式 默认不签到
        appThreeMeetingOrganizationList: [],//组织
        participantList: [],//与会人员
        recorderList: [],//纪要负责人
        chargeOfSignInList: [],//签到负责人
        annex: "",
        fileList: [],
        isOnline: "0",
        isVote: "0"
      },
      signStart: "",
      signEnd: "",
      areaId: "",
      voteOps: '1',
      fromRules: {
        meetingClassification: [{required: true, message: "请选择会议分类", trigger: "change"}],
        meetingAgenda: [{required: true, message: "请输入会议名称", trigger: "change"}],
        meetingAddress: [{required: true, message: "请输入会议地点", trigger: "change"}],
        isOnline: [{required: true, message: "请选择举办方式", trigger: "change"}],
        voteTopic: [{required: true, message: "请输入投票主题", trigger: "change"}],
        anonymous: [{required: true, message: "请选择投票形式", trigger: "change"}],
        voteDeadline: [{required: true, message: "请选择截止时间", trigger: "change"}],
        meetingDescription: [{required: true, message: "请输入补充说明", trigger: "change"}],
        meetingBefore: [{required: true, message: '请填写签到时间', trigger: "change"}],
        meetingBeforeCo: [{required: false, message: '请填写签到时间', trigger: "change"}],
        startTime: [{required: true, validator: startTimePass, trigger: "change"}],
        endTime: [{required: true, validator: endTimePass, trigger: "change"}],
        signMethod: [{required: true, message: "请选择签到方式", trigger: "change"}],
        reminderMethod: [{required: true, message: "请选择提醒方式", trigger: "change"}],
        hostList: [{required: true, message: "请选择主持人", trigger: "change"}],
        recorderList: [{required: true, message: "请选择纪要负责人", trigger: "change"}],
        chargeOfSignInList: [{required: true, message: "请选择签到负责人", trigger: "change"}],
        participantList: [{required: true, message: "请选择与会人员", trigger: "change"}],
        appThreeMeetingOrganizationList: [{required: true, message: "请选择党组织", trigger: "change"}]
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      treeData: [],//tree
      dialogVisible: false,//弹窗
      filterText: "",//tree模糊搜索
      selectParty: [],//选中的党组织
      partyKey: 1,
      isShowChooseUser: true,
      search: {
        postStatus: "",
        meetingUserName: "",
      },
    };

  },
  watch: {
    filterText(val) {
      this.$refs.partyTree.filter(val);
    },
    selectParty(newVal) {
      ++this.partyKey

      if (!newVal.length) {
        this.isShowChooseUser = false

        this.$nextTick(() => {
          setTimeout(() => {

            this.isShowChooseUser = true
          }, 1000)
        })
      }
      this.$set(this.form, 'hostList', [])
      this.$set(this.form, 'recorderList', [])
      this.$set(this.form, 'chargeOfSignInList', [])
      this.$set(this.form, 'participantList', [])
    },
    form: {
      handler(newVal) {
        if (newVal.startTime && newVal.meetingBefore) {
          let d = new Date(newVal.startTime);
          let time = d.getTime();
          let min = (Number(newVal.meetingBefore)) * 60000
          let total = time - min;
          this.signStart = this.$moment(total).format('YYYY-MM-DD HH:mm:ss');
        }
        if (newVal.startTime && newVal.meetingAfter) {
          let d = new Date(newVal.startTime);
          let time = d.getTime();
          let min = (Number(newVal.meetingAfter)) * 60000
          let total = time + min;
          this.signEnd = this.$moment(total).format('YYYY-MM-DD HH:mm:ss');
        }
      },
      deep: true
    }
  },
  methods: {
    deletePerson(index) {
      if (this.form.participantList[index].isHost) {
        this.form.participantList.map(e => {
          this.$set(e, "isHost", false);
        })
      }
      this.form.participantList.splice(index, 1);
    },
    //选择主持人
    selectHost(index) {
      this.form.participantList.map(e => {
        e.isHost = false;
      })
      this.form.participantList[index].isHost = true;
    },

    //开始时间，结束时间验证
    dataChange() {
      this.$refs.startTime.$emit('el.form.change');
      this.$refs.endTime.$emit('el.form.change');
      if (!this.form.startTime) {
        this.form.endTime = null
      }
    },

    //与会人员
    handleSelectParty() {
      this.form.participantList.map(e => {
        e.meetingUserRole = "3";
        e.userName = e.name;
        this.$set(e, "isHost", false);
      })
    },
    //纪要负责人
    changeRecorderList(val) {
      if (val) {
        this.$set(val, "meetingUserRole", "1");
        this.$set(val, "userName", val.name);
        this.form.recorderList.splice(0, 1, val);
      } else {
        this.form.recorderList = [];
      }
    },
    //签到负责人
    changeCharge(val) {
      val.map((e) => {
        this.$set(e, "meetingUserRole", "2");
        this.$set(e, "userName", e.name);
      })
      this.form.chargeOfSignInList = val;
    },

    //参与人
    changeParticipantList(val) {
      this.$set(val, "meetingUserRole", "3");
      this.$set(val, "userName", val.name);
      this.form.participantList.push(val);
    },

    //保存提交表单验证
    confirm(status) {
      if (status == '1') {
        this.$refs.basicForm.validate(validate => {
          if (validate) {
            this.addUpdate(status);
          }
        });
      } else if (status == '0') {
        if (this.form.meetingAgenda == "") {
          return this.$message.error("请填写会议名称");
        } else if (!this.form.appThreeMeetingOrganizationList.length) {
          return this.$message.error("请选择与会组织");
        } else {
          this.addUpdate(status);
        }
      } else {  //取消返回主页
        this.$confirm('是否放弃编辑内容').then(() => {
          this.$parent.goBack();
        });
      }
    },

    //新增
    addUpdate(status) {
      let hasHost = false;
      this.form.participantList.map(e => {
        if (e.isHost) {
          hasHost = true;
          this.form.hostList.push({
            ...e,
            meetingUserRole: "0"
          })
        }
      })

      if (!hasHost && status == '1') {
        return this.$message.error("请选择主持人");
      }

      if (this.form.signMethod == '0') {
        this.form.chargeOfSignInList = [];
        this.form.meetingBefore = "";
        this.form.meetingAfter = "";
      }

      //会议分类
      this.form.meetingClassification = this.form.meetingClassification.join(",");

      //提醒方式
      this.form.reminderMethod = this.form.reminderMethod.join(",");

      //发布状态
      let postStatus = status;

      let appThreeMeetingUserList = [];

      let meetingList = [];

      //选择人员
      meetingList = [...this.form.hostList, ...this.form.recorderList, ...this.form.chargeOfSignInList, ...this.form.participantList]
      meetingList.forEach(i => {
        appThreeMeetingUserList.push({
          "meetingUserId": i.id,
          "meetingUserName": i.name,
          "meetingUserRole": i.meetingUserRole,
          "avatarUrl": i.avatarUrl ? i.avatarUrl : ""
        })
      })
      //附件
      this.form.annex = JSON.stringify(this.form.fileList);

      if (this.form.meetingBefore === '' && this.form.signMethod != 0) {
        this.form.meetingBefore = 60
      }
      if (this.form.meetingAfter === '' && this.form.signMethod != 0) {
        this.form.meetingAfter = 60
      }

      this.instance.post(`/app/appthreemeetinginfo/addOrUpdate`, {
        ...this.form,
        ...this.form.file,
        ...this.form.meetingUser,
        appThreeMeetingUserList,
        postStatus,
        id: this.detail.id
      }).then(res => {
        if (res && res.code == 0) {
          this.$message.success(status == '1' ? "会议新增成功" : "保存成功");
          this.$parent.goBack();
        }
      })
    },

    //获取会议详请
    getDetailInfo() {
      this.detail.id && this.instance.post(`/app/appthreemeetinginfo/queryDetailById?id=${this.detail.id}`).then(res => {
        if (res && res.data) {
          this.form = res.data
          this.form.meetingClassification = res.data.meetingClassification.split(",");
          this.form.meetingAgenda = res.data.meetingAgenda;
          this.form.meetingAddress = res.data.meetingAddress;
          this.form.startTime = res.data.startTime;
          this.form.endTime = res.data.endTime;
          this.form.appThreeMeetingOrganizationList = res.data.appThreeMeetingOrganizationList;
          this.form.meetingDescription = res.data.meetingDescription;
          this.form.fileList = JSON.parse(res.data.annex || '[]');
          this.form.participantList = res.data.participantList.map(e => {
            return {
              ...e,
              name: e.meetingUserName,
              isHost: res.data.hostList.length ? (e.id == res.data.hostList[0].id) : false
            }
          });
          this.form.recorderList = res.data.recorderList.map(e => {
            return {...e, name: e.meetingUserName}
          });
          this.form.chargeOfSignInList = res.data.chargeOfSignInList.map(e => {
            return {...e, name: e.meetingUserName}
          });
          this.form.signMethod = res.data.signMethod;
          this.form.reminderMethod = res.data.reminderMethod.split(",");
          this.form.meetingBefore = res.data.meetingBefore;
          this.form.meetingAfter = res.data.meetingAfter;
        }
      });
    },

    //显示树结构
    showDialogVisible() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.partyTree.setCheckedNodes(
            this.form.appThreeMeetingOrganizationList
        );
      });
    },
    // 查询所有党组织 树形结构
    searchSysAll() {
      this.instance
      .post("/app/partyOrganization/queryAllChildren", null, {
        params: {id: this.user.info.organizationId}
      })
      .then(res => {
        if (res && res.code == 0) {
          res.data = res.data.map(a => {
            return {...a};
          });
          this.treeData = res.data.filter(
              e => e.id == this.user.info.organizationId
          );
          this.treeData.map(t => this.addChild(t, res.data));
          if (this.filterText) {
            this.$nextTick(() => {
              this.$refs.partyTree.filter(this.filterText);
            });
          }
        }
      });
    },
    //节点过滤/搜索
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //选中的数据
    handleCheckChange() {
      this.selectParty = this.$refs.partyTree.getCheckedNodes()
    },
    //取消选择
    cancelSelect(index) {
      this.selectParty.splice(index, 1)
      this.$refs.partyTree.setCheckedNodes(this.selectParty);
    },
    //删除选择
    delate(index) {
      let parentId = this.form.appThreeMeetingOrganizationList[index].parentId
      this.form.appThreeMeetingOrganizationList.splice(index, 1);
      this.form.appThreeMeetingOrganizationList.map((item, i) => {
        if (item.id == parentId) {
          this.delate(i)
        }
      })

      this.form.hostList = []
      this.form.recorderList = []
      this.form.chargeOfSignInList = []
      this.form.participantList = []
    },
    //清空
    clearSelect() {
      this.$refs.partyTree.setCheckedKeys([]);
      this.selectParty = [];
      this.form.hostList = []
      this.form.recorderList = []
      this.form.chargeOfSignInList = []
      this.form.participantList = []
    },
    //确认选择
    confirmSelect() {
      this.form.appThreeMeetingOrganizationList = this.selectParty;
    },
  },
  created() {
    this.areaId = this.user.info.areaId;
    this.dict.load('yesOrNo', 'ThreeMeetingAnonymous', "meetingClassification", "feminderMethod", "addSignMethod", "postStatus").then(() => {
      this.searchSysAll();
      if (this.detail && this.detail.id) {
        this.getDetailInfo();
      }
    });
  },
  filters: {
    formatTime(time) {
      return moment(time).format("YYYY-MM-DD HH:mm");
    }
  }
};
</script>

<style scoped lang="scss">
.addThreeMeeting {
  height: 100%;

  ::v-deep .el-form {
    .ailist-title {
      padding-left: 0;
      margin-bottom: 8px;
    }

    .el-form-item {
      .el-date-editor {
        width: 100%;
      }
    }
  }

  ::v-deep .el-dialog__body {
    padding-top: 16px !important;
  }

  .host {
    font-size: 12px;
    width: 40px;
    height: 40px;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    color: #ffffff;
    background-color: transparent;
    border-radius: 50%;
    opacity: 0;

    &:hover {
      opacity: 1;
      background-color: #AAAAAA;
    }
  }

  ::v-deep .el-upload--picture-card {
    width: 84px !important;
    height: 84px !important;
    line-height: 30px !important;
    background: rgba(245, 245, 245, 1) !important;
    border-radius: 2px !important;
    border: none !important;
  }

  .tips {
    box-sizing: border-box;
    padding: 0 106px;
    font-size: 12px;
    color: #999999;
    line-height: 16px;
  }

  .person {
    width: 100%;
    margin-top: 16px;

    .emcee {
      position: absolute;
      left: 0;
      top: 0;
      color: #2266FF;
      padding: 0 106px;
      font-size: 12px;
      line-height: 16px;
    }

    .select-person {
      display: flex;
      flex-direction: column;
      position: relative;
      // width:70px;
      margin: 0 15px;
      height: 70px;
      justify-content: center;
      align-items: center;

      .person-pictrue {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        position: relative;

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }

        .del-icon {
          position: absolute;
          top: -12px;
          right: -4px;
          font-size: 16px;
          color: #333;
          width: 20px;
          height: 24px;
          border-radius: 50%;
          background-color: #fff;
        }
      }

      .person-name {
        font-size: 14px;
        color: #666;
        line-height: normal;
      }

    }

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

    .add-person {
      display: flex;
      flex-direction: column;
      position: relative;
      // width:70px;
      margin: 0 15px;
      height: 70px;
      justify-content: center;
      align-items: center;

      .add-icon {
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin: 0 auto 4px;
        text-align: center;
        font-size: 20px;
        color: #2266FF;
        border: 1px dashed #2266ff;
        border-radius: 50%;
        box-sizing: border-box;

        .icon-add {
          color: #2266FF;
          font-size: 20px;
          margin-top: 5px;
        }
      }

    }
  }

  ::v-deep p.add_top {
    margin: 0;
  }

  .time-input {
    width: 48px;
    height: 32px;
    margin: 0 8px;

    ::v-deep .el-input__inner {
      line-height: 32px;
      height: 32px;
      padding: 0 10px;
    }
  }

  ::v-deep .select-party {
    .el-dialog__header {
      padding: 13px 16px;
      border-bottom: 1px solid #eee;
    }

    .el-dialog__body {
      padding: 24px 40px 48px;
    }

    .el-tree {
      background-color: #fcfcfc;
      height: calc(100% - 40px);
      width: 350px;
    }

    .add-item {
      width: 274px;
      height: 360px;
      background: rgba(252, 252, 252, 1);
      border-radius: 2px;
      border: 1px solid rgba(208, 212, 220, 1);
      position: relative;
      overflow: auto;
      box-sizing: border-box;
      margin: 0;

      .add_top {
        width: 100%;
        height: 40px;
        background: rgba(245, 245, 245, 1);
        border-bottom: 1px solid rgba(208, 212, 220, 1);
        padding: 0 8px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .tree_list {
        width: 100%;
        overflow: auto;
        height: calc(100% - 40px);


      }

      .add_buttom {
        position: absolute;
        left: 0;
        bottom: 0;
        font-size: 12px;
        width: 310px;
        height: 32px;
        line-height: 32px;
        z-index: 10000;
        background: rgba(245, 246, 247, 1);
        color: rgba(51, 51, 51, 1);
        box-shadow: 0 1px 0 0 rgba(216, 220, 227, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }

      .add_tag {
        width: 310px;
        height: calc(100% - 40px);
        overflow-y: auto;

        .el-tag {
          margin: 8px 8px 0 8px;
          background: rgba(238, 238, 238, 1);
          border: none;
          color: #666;
          max-width: calc(100% - 16px);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 100%;
        }

        ::v-deep .el-tag .el-icon-close {
          color: #666;
        }
      }
    }
  }

  .organ {
    width: auto;
    height: auto;
    padding: 0 10px;
    line-height: 32px;
    border: 1px solid #D0D4DC;
    border-radius: 5px;
    cursor: pointer;
    box-sizing: border-box;
    color: #666;

    .organzation {
      background-color: #eee;
      margin-right: 4px;
      padding: 4px;
    }
  }
}
</style>



