<template>
  <ai-detail class="addThreeMeeting detail-content details-page no-content-border">
    <ai-title slot="title" title="补录三会一课" isShowBack @onBackClick="$parent.goBack()" isShowBottomBorder/>
    <template #content>
      <ai-card title="基本信息">
        <template #content>
          <el-form :model="form.basic" label-width="100px" ref="basicForm" :rules="fromRules">
            <div class="areaList" style="width:100%">
              <el-form-item label="会议分类：" style="width:100%;" prop="meetingClassification">
                <el-checkbox-group v-model="form.basic.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>
            </div>
            <div class="el-form-p">
              <el-form-item prop="meetingAgenda" label="会议名称：" ref="fromTitle">
                <el-input
                    v-model="form.basic.meetingAgenda"
                    size="small"
                    placeholder="限30字"
                    clearable
                    :maxLength="30"
                ></el-input>
              </el-form-item>
              <div class="el-form-p" style="margin-top:5px">
                <el-form-item
                    prop="appThreeMeetingOrganizationList"
                    label="与会组织："
                    ref="appThreeMeetingOrganizationList"
                >
                  <div class="organ" @click="showDialogVisible()">
                          <span v-if="form.basic.appThreeMeetingOrganizationList.length">
                            <span
                                v-for="(item,i) in form.basic.appThreeMeetingOrganizationList"
                                :key="i"
                                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>
              </div>
              <el-form-item prop="isOnline" label="举办方式：">
                <el-radio label="1" v-model="form.basic.isOnline">线上举办</el-radio>
                <el-radio label="0" v-model="form.basic.isOnline">线下举办</el-radio>
              </el-form-item>
              <el-form-item prop="meetingAddress" label="会议地点：" v-if="form.basic.isOnline==0">
                <el-input
                    v-model="form.basic.meetingAddress"
                    size="small"
                    placeholder="限60字"
                    clearable
                    :maxLength="60"
                ></el-input>
              </el-form-item>
              <el-row type="flex" justify="space-between">
                <el-form-item prop="startTime" label="开始时间：" ref="startTime">
                  <el-date-picker @change="dateChage()"
                                  value-format="yyyy-MM-dd HH:mm:ss"
                                  size="small"
                                  type="datetime"
                                  v-model="form.basic.startTime"
                                  placeholder="请选择..."
                  ></el-date-picker>
                </el-form-item>
                <el-form-item prop="endTime" label="结束时间：" ref="endTime">
                  <el-date-picker @change="dateChage()"
                                  value-format="yyyy-MM-dd HH:mm:ss"
                                  size="small"
                                  type="datetime"
                                  v-model="form.basic.endTime"
                                  placeholder="请选择..."
                                  :disabled="!Boolean(form.basic.startTime)"
                  ></el-date-picker>
                </el-form-item>
              </el-row>
              <el-form-item label="会议说明：" prop="meetingDescription" calss="uedtor" style="margin-top: 20px;">
                <ai-editor v-model="form.basic.meetingDescription" :instance="instance" :limit="3000"/>
              </el-form-item>
            </div>
          </el-form>
          <el-form label-width="100px" ref="fileForm" :rules="fromRules">
            <div class="el-form-p">
              <el-form-item label="附件：">
                <ai-uploader :instance="instance" v-model="fileList" fileType="file" :limit="10"></ai-uploader>
              </el-form-item>
            </div>
          </el-form>
        </template>
      </ai-card>
      <ai-card title="人员设置">
        <template #content>
          <el-form
              :model="form.meetingUser"
              label-width="100px"
              ref="meetingUserForm"
              :rules="fromRules">

            <div class="person">
              <el-form-item label="与会人员：" prop="participantList" label-width="106px"
                            style="width:100%;margin-bottom: 10px;"
                            ref="participantList">
                <div class="select-person" v-for="(item,index) in form.meetingUser.participantList"
                     :key="item+index" style="margin-bottom: 34px;">
                  <div class="person-pictrue" style="cursor: pointer;" @click="selectHost(index)">
                    <img :src="item.avatarUrl" v-if="item.avatarUrl">
                    <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.meetingUser.participantList"
                    :area-id="areaId"
                    :disable="participantDisable"
                    customOrg
                    :partyOrgList="form.basic.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-top: 20px;margin-bottom: 0;"
                            ref="recorderList">
                <ai-person-select :customClicker="true" customRightText :instance="instance"
                                  url="/admin/user/pageForWeb" headerTitle="人员列表" dialogTitle="选择"
                                  @selectPerson="changeRecorderList">
                  <template v-slot:option="{ item }">
                    <span class="iconfont iconProlife">{{ item.name }}</span>
                    <ai-id mode="show" :show-eyes="false" :value="item.idNumber"/>
                  </template>
                </ai-person-select>
              </el-form-item>
              <span class="tips">*从系统用户中选择，拥有签到管理权限</span>
            </div>
          </el-form>
        </template>
      </ai-card>
      <ai-card title="会议纪要">
        <template #content>
          <el-form
              :model="form.summary"
              label-width="100px"
              ref="summaryForm"
              :rules="summaryRules"
          >
            <div class="el-form-p">
              <el-form-item prop="content" label="纪要内容：">
                <el-input
                    type="textarea"
                    :rows="6"
                    placeholder="请输入内容"
                    v-model="form.summary.content"
                ></el-input>
              </el-form-item>
            </div>
            <div class="el-form-p">
              <el-form-item label="图片附件：">
                <el-upload
                    class="upload-demo upload-list"
                    ref="upload"
                    multiple
                    action
                    list-type="picture-card"
                    :file-list="form.summary.images"
                    :http-request="uploadFilePhoto"
                    :on-remove="handleRemoveFilePhoto"
                    :on-change="fileChangePhoto"
                    accept=".jpeg, .jpg, .png">
                  <div class="upload-img">
                    <div class="iconfont iconPhoto"></div>
                    <div class="upload-text">上传照片</div>
                  </div>
                </el-upload>
                <div style="color: #999;font-size: 12px">最多上传50张图片,单个文件最大10MB，支持jpg、jpeg、png格式</div>
              </el-form-item>
            </div>
          </el-form>
        </template>
      </ai-card>
    </template>
    <template #footer>
      <el-button size="small"  @click="toList()">取消</el-button>
      <el-button type="primary" size="small" @click="confirm()">保存</el-button>
    </template>
    <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"
                    @node-click="handleNodeClick"
                    :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="i"
                  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>
  </ai-detail>
</template>

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

export default {
  name: "supplement",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    isEdit() {
      return this.detail ? Boolean(this.detail.id) : false;
    },
    ...mapState(["user"]),

    participantDisable() {
      if (!this.form.meetingUser) return []

      const list = [
        ...this.form.meetingUser.recorderList,
        ...this.form.meetingUser.hostList
      ]

      return list || []
    }
  },
  data() {
    let endTimePass = (rule, value, callback) => {
      if (value) {
        if (
            moment(value).unix() - moment(this.form.basic.startTime).unix() > 0
        ) {
          callback();
        } else {
          callback(new Error("结束时间要大于开始时间"));
        }
      } else {
        callback(new Error("请填写结束时间"));
      }
    };
    let startTimePass = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error("请填写开始时间"));
      }
    };
    let meetingBeforePass = (rule, value, callback) => {
      if (value) {
        if (this.form.basic.meetingAfter) {
          callback();
        } else {
          callback(new Error("请填写签到时间"));
        }
      } else {
        callback(new Error("请填写签到时间"));
      }
    };
    return {
      dictList: [
        "meetingClassification",
        "feminderMethod",
        "addSignMethod"
      ],
      form: {
        basic: {
          editable: false,
          id: "",
          meetingClassification: [], //会议分类
          meetingAgenda: "",
          meetingAddress: "", //会议地址
          meetingDescription: "", //补充说明
          meetingBefore: "",
          meetingAfter: "",
          startTime: "", //开始时间
          endTime: "", //结束时间
          appThreeMeetingOrganizationList: [], //组织
          isOnline: "0"
        },
        file: {
          annex: [], //附件
          editable: false
        },
        meetingUser: {
          editable: false,
          hostList: [], //主持人
          recorderList: [], //记录人
          participantList: [] //参与人
        },
        summary: {
          createUserId: "",
          editable: false,
          content: "",
          images: [],
          meetingId: ""
        }
      },
      signStart: "",
      signEnd: "",
      areaId: "",
      fromRules: {
        meetingClassification: [
          {required: true, message: "请选择会议分类", trigger: "change"}
        ],
        meetingAgenda: [{required: true, message: "请输入会议标题", trigger: "change"}],
        isOnline: [{required: true, message: "请选择举办方式", trigger: "change"}],
        meetingAddress: [
          {required: true, message: "请输入会议地点", trigger: "change"}
        ],
        meetingDescription: [
          {required: true, message: "请输入补充说明", trigger: "change"}
        ],
        meetingBefore: [
          {required: true, validator: meetingBeforePass, trigger: "change"}
        ],
        startTime: [
          {required: true, validator: startTimePass, trigger: "change"}
        ],
        endTime: [
          {required: true, validator: endTimePass, trigger: "change"}
        ],
        hostList: [
          {required: true, message: "请选择主持人", trigger: "change"}
        ],
        recorderList: [
          {required: true, message: "请选择记录人", trigger: "change"}
        ],
        participantList: [
          {required: true, message: "请选择参与人", trigger: "change"}
        ],
        appThreeMeetingOrganizationList: [
          {required: true, message: "请选择党组织", trigger: "change"}
        ]
      },
      summaryRules: {
        content: [{required: true, message: "请输入正文内容", trigger: "change"}],
      },
      defaultProps: {
        children: "children",
        label: "name"
      },
      treeData: [], //tree
      dialogVisible: false, //弹窗
      filterText: "", //tree模糊搜索
      selectParty: [], //选中的党组织
      fileList: [],
    }
  },
  watch: {
    filterText(val) {
      this.$refs.partyTree.filter(val);
    },
    form: {
      handler(newVal) {
        if (newVal.basic.startTime && newVal.basic.meetingBefore) {
          let d = new Date(newVal.basic.startTime);
          let time = d.getTime();
          let min = Number(newVal.basic.meetingBefore) * 60000;
          let total = time - min;
          this.signStart = this.countTime(total);
        }
        if (newVal.basic.startTime && newVal.basic.meetingAfter) {
          let d = new Date(newVal.basic.startTime);
          let time = d.getTime();
          let min = Number(newVal.basic.meetingAfter) * 60000;
          let total = time + min;
          this.signEnd = this.countTime(total);
        }
      },
      deep: true
    }
  },
  methods: {
    deletePerson(index) {
      if (this.form.meetingUser.participantList[index].isHost) {
        this.form.meetingUser.participantList.map(e => {
          this.$set(e, "isHost", false);
        })
      }
      this.form.meetingUser.participantList.splice(index, 1);
    },
    selectHost(index) {
      this.form.meetingUser.participantList.map(e => {
        e.isHost = false;
      })
      this.form.meetingUser.participantList[index].isHost = true;
    },
    toList() {
      this.$parent.goBack();
    },
    //开始时间，结束时间验证
    dateChage() {
      this.$refs.startTime.$emit("el.form.change");
      this.$refs.endTime.$emit("el.form.change");
    },
    // 上传照片
    uploadFilePhoto(file) {
      let isPng = file.file.type == "image/jpeg" ||
          file.file.type == "image/png" ||
          file.file.type == "image/jpg";

      if (!isPng) {
        this.$message.warning("上传图片信息必须是jpeg/png/jpg格式!");
        for (let i = 0; i < this.form.summary.images.length; i++) {
          if (this.form.summary.images[i].uid == file.file.uid) {
            this.form.summary.images.splice(i, 1);
          }
        }
        return;
      }
      const isLt10M = file.file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.warning("图片大小不能超过 10MB!");
        for (let i = 0; i < this.form.summary.images.length; i++) {
          if (this.form.summary.images[i].uid == file.file.uid) {
            this.form.summary.images.splice(i, 1);
          }
        }
        return;
      }
      if (this.form.summary.images.length > 50) {
        this.$message.error("图片信息不能超过50张");
        this.form.summary.images.map((item, index) => {
          if (item.uid == file.file.uid) {
            this.form.summary.images.splice(index, 1);
          }
          return this.form.summary.images;
        });
        return;
      }
      let formData = new FormData();
      formData.append("file", file.file);
      this.instance.post(`/admin/file/add`, formData).then(res => {
        if (res.msg == "success") {
          this.$message({message: "图片上传成功", type: "success"});
          let imgInfo = res.data[0].split(";");
          let img = {
            fileId: imgInfo[1],
            accessUrl: imgInfo[0]
          };
          this.form.summary.images.map((item, index) => {
            if (item.uid == file.file.uid) {
              this.form.summary.images[index].fileId = img.fileId;
              this.form.summary.images[index].accessUrl = img.accessUrl;
              this.form.summary.images[index].url = img.accessUrl;
            }
            return this.form.summary.images;
          });
        }
      });
    },
    handleRemoveFilePhoto(file, fileList) {
      this.form.summary.images = fileList;
    },
    fileChangePhoto(file, fileList) {
      this.form.summary.images = fileList;
    },
    //会议签到时间计算
    countTime(total) {
      let now = new Date(total);
      let y = now.getFullYear();
      let m = now.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let da = now.getDate();
      da = da < 10 ? "0" + da : da;
      let h = now.getHours();
      h = h < 10 ? "0" + h : h;
      let minute = now.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      let seconds = now.getSeconds();
      seconds = seconds < 10 ? "0" + seconds : seconds;
      return y + "-" + m + "-" + da + " " + h + ":" + minute + ":" + seconds;
    },

    //纪要负责人
    changeRecorderList(val) {
      if (val) {
        this.$set(val, "meetingUserRole", "1");
        this.$set(val, "userName", val.name);
        this.form.meetingUser.recorderList.splice(0, 1, val);
      } else {
        this.form.meetingUser.recorderList = [];
      }
    },

    //与会人员
    handleSelectParty() {
      this.form.meetingUser.participantList.map(e => {
        e.meetingUserRole = "3";
        e.userName = e.name;
        this.$set(e, "isHost", false);
      })
    },

    //保存提交表单验证
    confirm() {
      this.$refs.basicForm.validate(validate => {
        let flag = validate;
        for (let k in this.form) {
          if (this.$refs[k + "Form"])
            this.$refs[k + "Form"].validate(v => {
              flag = flag && v;
            });
        }
        if (flag) {
          this.addUpdate();
        }
      });
    },
    //新增
    addUpdate() {
      let hasHost = false;
      this.form.meetingUser.participantList.map(e => {
        if (e.isHost) {
          hasHost = true;
          this.form.meetingUser.hostList.push({
            ...e,
            meetingUserRole: "0"
          })
        }
      })

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

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

      //发布状态
      let postStatus = 0;

      let appThreeMeetingUserList = [];
      let meetingList = [];

      //选择人员
      meetingList = [
        ...this.form.meetingUser.hostList,
        ...this.form.meetingUser.recorderList,
        ...this.form.meetingUser.participantList
      ];
      meetingList.forEach(i => {
        appThreeMeetingUserList.push({
          meetingUserId: i.id,
          meetingUserName: i.userName,
          meetingUserRole: i.meetingUserRole,
          organizationId: i.partyOrgId,
          organizationName: i.partyOrgName
        });
      });

//      this.form.summary.images = JSON.stringify(this.form.summary.images);
      let imgs = this.form.summary.images.map(e => {
        return {
          url: e.url
        }
      })
      this.instance
      .post(`/app/appthreemeetinginfo/makeup`, {
        ...this.form.basic,
        ...this.form.file,
        ...this.form.meetingUser,
        ...this.form.summary,
        annex: JSON.stringify(this.fileList),
        images: JSON.stringify(imgs),
        appThreeMeetingUserList,
        postStatus
      }).then(res => {
        if (res && res.code == 0) {
          this.$message.success("会议补录成功");
          this.$parent.goBack();
        }
      });
    },
    //显示树结构
    showDialogVisible() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.partyTree.setCheckedNodes(
            this.form.basic.appThreeMeetingOrganizationList
        );
      });
    },
    // 查询所有党组织 树形结构
    searchSysAll() {
      this.instance
      .post("/admin/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;
    },
    //点击节点
    handleNodeClick() {
    },
    //选中的数据
    handleCheckChange() {
      this.selectParty = this.$refs.partyTree.getCheckedNodes();
    },
    //取消选择
    cancelSelect(index) {
      this.selectParty.splice(index, 1);
      this.$refs.partyTree.setCheckedNodes(this.selectParty);
    },
    //删除选择
    delate(index) {
      this.form.basic.appThreeMeetingOrganizationList.splice(index, 1);
      this.form.meetingUser.hostList = [];
      this.form.meetingUser.recorderList = [];
      this.form.meetingUser.participantList = [];
    },
    //清空
    clearSelect() {
      this.$refs.partyTree.setCheckedKeys([]);
      this.selectParty = [];
      this.form.meetingUser.hostList = [];
      this.form.meetingUser.recorderList = [];
      this.form.meetingUser.participantList = [];
    },
    //确认选择
    confirmSelect() {
      this.form.basic.appThreeMeetingOrganizationList = this.selectParty;
    },
  },
  mounted() {
    this.dict.load(this.dictList);
    if (!this.isEdit) {
      this.form.basic.editable = true;
      this.form.file.editable = true;
      this.form.meetingUser.editable = true;
      this.form.summary.editable = true;
      this.searchSysAll();
    } else {
      if (this.copy) {
        for (let k in this.form) {
          this.form[k].editable = true;
        }
      }
      this.getDetailInfo();
    }
    this.areaId = this.user.info.areaId;
  }
};
</script>

<style scoped lang="scss">
.addThreeMeeting {

  :deep( .el-upload-list--picture-card ){
    .el-upload-list__item-actions {
      width: 84px !important;
      height: 84px !important;
    }
  }

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

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

  :deep( .el-upload-list__item ){
    margin-right: 16px;
  }

  :deep( .el-date-editor--datetime ){
    width: 100% !important;
  }

  :deep( .el-upload-list__item:nth-of-type(7) ){
    margin-right: 0;
  }

  :deep( .el-upload-list__item),
  .el-upload-list__item {
    img {
      width: 84px !important;
      height: 84px !important;
      border-radius: 2px !important;
    }
  }

  .upload-list {
    //   padding-bottom: 100px;

    :deep( .el-upload-list__item ){
      width: 84px !important;
      height: 84px !important;
      border-radius: 2px !important;
    }
  }

  .upload-img {
    width: 84px;
    height: 84px;
    background: rgba(245, 245, 245, 1);
    border-radius: 2px;
    border: 1px solid rgba(208, 212, 220, 1);

    .iconPhoto {
      margin-top: 20px;
      font-size: 32px;
      color: #8b9cb6;
    }
  }

  .upload-demo {
    // padding: 0 15px;
  }

  .upload-text {
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    height: 16px;
    line-height: 16px;
  }

  :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;
  }

  .content-left {
    width: 160px;
    height: 100%;
    // float:left;
    position: absolute;
    left: -224px;

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

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

    .iconDelete {
      color: #8899bb;
      margin-left: 4px;
      font-size: 16px;
    }
  }

  .flie:hover {
    background-color: #f3f6f9;
    border: none;
  }

  .flie:hover .iconDelete {
    color: #ff4466;
  }

  .person {
    width: 100%;

    .tips {
      box-sizing: border-box;
      padding: 0 106px;
      font-size: 12px;
      color: #999999;
      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: 20px;
          color: #333;
          width: 20px;
          height: 24px;
          border-radius: 50%;
          background-color: #fff;
        }
      }

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

    :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;
        }
      }
    }
  }

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

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

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

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

    :deep( .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;

      .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%;
        }

        :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;
    }
  }

  .el-checkbox {
    width: 20%;
  }
}
</style>



