<template>
  <div class="order">
    <van-form @submit="onSubmit">
      <van-field
        v-model="form.theme"
        label="会议主题"
        placeholder="请填写会议主题"
        :rules="[{required: true, message: '请填写会议主题'}]"
      />

      <van-field
        readonly
        clickable
        name="picker"
        :value="form.meetingTypeName"
        label="会议类型"
        placeholder="点击选择会议类型"
        @click="meetingType.showPicker = true"
      />
      <van-popup v-model="meetingType.showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="meetingType.columns"
          @confirm="onConfirmMeetingType"
          @cancel="meetingType.showPicker = false"
        />
      </van-popup>

      <van-field
        v-model="form.users_"
        label="参会人"
        placeholder="点击选择参会人"
        @focus="onFocusUser"
      />

      <van-field
        readonly
        clickable
        name="datetimePicker"
        :value="form.startTime"
        label="开始时间"
        placeholder="点击选择开始日期时间"
        @click="startTime.showPicker = true"
      />
      <van-popup v-model="startTime.showPicker" position="bottom">
        <van-datetime-picker
          v-model="form.startTime_"
          type="datetime"
          :formatter="formatter"
          :min-date="minDate"
          @confirm="onConfirmStartTime"
          @cancel="startTime.showPicker = false"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        name="picker"
        :value="form.hour"
        label="时长"
        placeholder="点击选择时长"
        @click="hour.showPicker = true"
      />
      <van-popup v-model="hour.showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="hour.columns"
          @confirm="onConfirmHour"
          @cancel="hour.showPicker = false"
        />
      </van-popup>
      <van-field
        v-if="this.form.hour_ == 4"
        readonly
        clickable
        name="datetimePicker"
        :value="form.endTime"
        label="结束时间"
        placeholder="点击选择结束日期时间"
        @click="endTime.showPicker = true"
      />
      <van-popup v-model="endTime.showPicker" position="bottom">
        <van-datetime-picker
          v-model="form.endTime_"
          type="datetime"
          :formatter="formatter"
          :min-date="minDate"
          @confirm="onConfirmEndTime"
          @cancel="endTime.showPicker = false"
        />
      </van-popup>

      <template>
        <template v-if="form.meetingType == '1'">
          <van-field
            readonly
            clickable
            name="picker"
            :value="form.room"
            label="会议室"
            placeholder="点击选择会议室"
            @click="room.showPicker = true"
          />
          <van-popup v-model="room.showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="room.columns"
              @confirm="onConfirmRoom"
              @cancel="room.showPicker = false"
            />
          </van-popup>
        </template>
        <van-field
          v-else
          v-model="form.room"
          label="会议室"
          placeholder="点击选择会议室"
          @focus="onFocusPlace"
        />
      </template>

      <van-field
        v-model="form.remark"
        rows="2"
        autosize
        label="描述"
        type="textarea"
        maxlength="200"
        placeholder="请输入描述"
        show-word-limit
      />

      <van-collapse v-model="activeName" accordion class="more">
        <van-collapse-item title="更多设置" name="1">
          <van-field
            readonly
            clickable
            name="picker"
            :value="form.remindTime_"
            label="提醒"
            placeholder="点击选择提醒"
            @click="remindTime.showPicker = true"
          />
          <van-popup v-model="remindTime.showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="remindTime.columns"
              @confirm="onConfirmRemindTime"
              @cancel="remindTime.showPicker = false"
            />
          </van-popup>

          <van-field
            readonly
            clickable
            name="picker"
            :value="form.host_"
            label="指定主持人"
            placeholder="点击选择指定主持人"
            @click="host.showPicker = true"
          />
          <van-popup v-model="host.showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="host.columns"
              @confirm="onConfirmHost"
              @cancel="host.showPicker = false"
            />
          </van-popup>

          <van-field name="switch" label="是否开启入会密码" label-width="320px">
            <template #input>
              <van-switch v-model="switchCheckedPassword" size="20" />
            </template>
          </van-field>
          <van-field
            v-if="switchCheckedPassword"
            v-model="form.password"
            label="入会密码"
            placeholder="请填写入会密码"
          />

          <van-field name="switch" label="开启等候室" label-width="320px">
            <template #input>
              <van-switch v-model="form.isWaitRoom" size="20" />
            </template>
          </van-field>

          <van-field
            name="switch"
            label="允许成员在主持人进会前加入"
            label-width="320px"
          >
            <template #input>
              <van-switch v-model="form.isOpen" size="20" />
            </template>
          </van-field>

          <van-cell
            is-link
            title="成员入会时静音"
            @click="showremutePopup.show = true"
          >
            {{ form.showremutePopup }}
          </van-cell>
          <van-action-sheet
            v-model="showremutePopup.show"
            :actions="showremutePopup.actions"
            cancel-text="取消"
            @select="onSelectShowremutePopup"
          />

          <van-cell
            is-link
            title="入会成员限制"
            @click="showreLimitUserPopup.show = true"
          >
            {{ form.showreLimitUserPopup }}
          </van-cell>
          <van-action-sheet
            v-model="showreLimitUserPopup.show"
            :actions="showreLimitUserPopup.actions"
            cancel-text="取消"
            @select="onSelectShowreLimitUserPopup"
          />

          <van-field name="switch" label="是否开启屏幕水印" label-width="320px">
            <template #input>
              <van-switch v-model="form.isWatermark" size="20" />
            </template>
          </van-field>
        </van-collapse-item>
      </van-collapse>

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>

    <van-dialog
      v-model="dialogShow"
      title="参会人选择"
      show-cancel-button
      @confirm="onDialogConfirm"
    >
      <van-checkbox-group v-model="usersResult" class="group">
        <van-checkbox
          class="itemCheckbox"
          :name="item.id"
          v-for="item in host.columns"
          :key="item.id"
        >
          {{ item.name }}
        </van-checkbox>
      </van-checkbox-group>
    </van-dialog>

    <van-dialog
      v-model="dialogShowPlace"
      title="会议室选择"
      show-cancel-button
      @confirm="onDialogConfirmPlace"
    >
      <van-checkbox-group
        v-model="placesResult"
        class="group"
        style="height: 21em"
      >
        <van-checkbox
          class="itemCheckbox"
          :name="item.id"
          v-for="item in room.columns"
          :key="item.id"
        >
          {{ item.text }}
        </van-checkbox>
      </van-checkbox-group>
    </van-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      form: {
        meetingType: '', // 会议类型
        users_: '', // 参会人数据
        startTime: '',
        startTime_: new Date(),
        endTime: '',
        endTime_: new Date(),
        isOpen: 0, // 是否允许成员在主持人进会前加入
        showremutePopup: '', // 成员入会时静音
        room: '', // 会议室
      },
      usersResult: [], // 选择参会人数据
      placesResult: [], // 选择会议室
      dialogShow: false, //控制弹框显示
      dialogShowPlace: false,
      minDate: new Date(),
      activeName: '', // 控制更多设置展开与否
      meetingType: {
        columns: [],
        showPicker: false,
      },
      startTime: {
        showPicker: false,
      },
      hour: {
        showPicker: false,
        columns: [
          {val: 0, text: '半小时'},
          {val: 1, text: '1小时'},
          {val: 2, text: '2小时'},
          {val: 3, text: '3小时'},
          {val: 4, text: '自定义时间'},
        ],
      },
      endTime: {
        showPicker: false,
      },
      room: {
        showPicker: false,
        columns: [],
      },
      remindTime: {
        showPicker: false,
        columns: [
          {
            value: 0,
            text: '无',
          },
          {
            value: 1,
            text: '会议开始时',
          },
          {
            value: 2,
            text: '5分钟前',
          },
          {
            value: 3,
            text: '15分钟前',
          },
          {
            value: 4,
            text: '1小时前',
          },
          {
            value: 5,
            text: '1天前',
          },
        ],
      },
      host: {
        columns: [],
        showPicker: false,
      },
      switchCheckedPassword: false,
      showremutePopup: {
        show: false,
        actions: [
          {name: '关闭', val: 0},
          {name: '开启', val: 1},
          {name: '超过6人后自动开启', val: 2},
        ],
      },
      showreLimitUserPopup: {
        show: false,
        actions: [
          {name: '所有成员可入会', val: 0},
          {name: '仅企业内部成员可入会', val: 1},
        ],
      },
    }
  },
  created() {
    this.form.startTime = this.formatDateTime(new Date())
    this.meetingType.columns = this.getDictData('hylx')
    this.loadHost()
    this.loadDataRoom()
  },
  methods: {
    onSubmit() {
      this.$http
        .post(`${window.context.xqhk}/meeting/v1/saveMeeting`, this.form)
        .then((res) => {
          this.$router.push({
            path: '/unfinished',
          })
        })
    },
    loadDataRoom() {
      let url = `${window.context.xqhk}/bizMeetingPlaceName/v1/getJson`
      this.$http
        .post(url, {
          groupRelation: 'AND',
          pageBean: {
            page: 1,
            pageSize: -1,
            showTotal: true,
          },
        })
        .then((res) => {
          let data = (res && res.data && res.data.value) || []
          data.forEach((item) => {
            this.room.columns.push({
              id: item.id,
              text: item.name,
            })
          })
        })
    },
    loadHost() {
      let deptUrl = `${window.context.xqhk}/api/org/v1/org/getOrgListByDemId?demId=1258608622670319616`
      this.$http.get(deptUrl).then((res) => {
        if (res.status == 200) {
          let totalDeptList = res.data
          let url = `${window.context.xqhk}/api/user/v1/users/getOrgUserQuery`
          this.$http
            .post(url, {
              groupRelation: 'AND',
              pageBean: {
                page: 1,
                pageSize: -1,
              },
              querys: [
                {
                  property: 'ORG_ID_',
                  value: totalDeptList[0].id,
                  group: 'orgTree',
                  relation: 'AND',
                  operation: 'IN',
                },
              ],
            })
            .then((res) => {
              let list = (res && res.data && res.data.rows) || []
              list.forEach((item) => {
                this.host.columns.push({
                  id: item.id,
                  text: item.fullname,
                  name: item.fullname,
                })
              })
            })
        }
      })
    },
    // 会议类型选择时间
    onConfirmMeetingType(data) {
      this.form.meetingTypeName = data.text
      this.form.meetingType = data.value
      this.form.room = ''
      this.form.places = []
      this.meetingType.showPicker = false
    },
    // 参会人选择时间
    onFocusUser() {
      this.dialogShow = true
    },
    // 会议室地点
    onFocusPlace() {
      this.dialogShowPlace = true
    },
    format(date) {
      return date >= 10 ? date : '0' + date
    },
    formatDateTime(date) {
      return (
        date.getFullYear() +
        '-' +
        this.format(date.getMonth() + 1) +
        '-' +
        this.format(date.getDate()) +
        ' ' +
        this.format(date.getHours()) +
        ':' +
        this.format(date.getMinutes()) +
        ':' +
        this.format(date.getSeconds())
      )
    },
    formatter(type, val) {
      if (type === 'year') {
        return val + '年'
      }
      if (type === 'month') {
        return val + '月'
      }
      if (type === 'day') {
        return val + '日'
      }
      if (type === 'hour') {
        return val + '时'
      }
      if (type === 'minute') {
        return val + '分'
      }
      return val
    },
    // 开始时间事件
    onConfirmStartTime(date) {
      this.form.startTime = this.formatDateTime(date)
      this.form.startTime_ = date
      this.startTime.showPicker = false
    },
    // 选择时长事件
    onConfirmHour(hour) {
      this.form.hour = hour.text
      this.form.hour_ = hour.val
      if (!this.form.startTime) return this.$toast('请选择开始时间!')
      const date = new Date(this.form.startTime_)
      if (hour.val === 0) {
        date.setMinutes(date.getMinutes() + 30)
      } else {
        date.setHours(date.getHours() + hour.val)
      }
      this.form.endTime = this.formatDateTime(date)
      this.form.endTime_ = date
      this.hour.showPicker = false
    },
    // 结束时间事件
    onConfirmEndTime(date) {
      if (new Date(date) - new Date(this.form.startTime_) < 0)
        return this.$toast('结束时间应该在开始时间之后!')
      this.form.endTime = this.formatDateTime(date)
      this.form.endTime_ = date
      this.endTime.showPicker = false
    },
    // 选择会议室事件
    onConfirmRoom(room) {
      this.form.room = room.text
      this.form.places = [
        {
          placeId: room.id,
        },
      ]
      this.room.showPicker = false
    },
    // 更多设置--选择提醒事假
    onConfirmRemindTime(remindTime) {
      this.form.remindTime_ = remindTime.text
      const date = new Date(this.form.startTime_)
      if (remindTime.value === 0) return
      if (remindTime.value === 1) this.form.remindTime = this.form.startTime
      if (remindTime.value === 2) {
        date.setMinutes(date.getMinutes() - 5)
        this.form.remindTime = this.formatDateTime(date)
      }
      if (remindTime.value === 3) {
        date.setMinutes(date.getMinutes() - 15)
        this.form.remindTime = this.formatDateTime(date)
      }
      if (remindTime.value === 4) {
        date.setHours(date.getHours() - 1)
        this.form.remindTime = this.formatDateTime(date)
      }
      if (remindTime.value === 5) {
        date.setDate(date.getDate() - 1)
        this.form.remindTime = this.formatDateTime(date)
      }
      this.remindTime.showPicker = false
    },
    // 更多设置--选择指定主持人事件
    onConfirmHost(host) {
      this.form.host_ = host.text
      this.form.host = host.id
      this.host.showPicker = false
    },
    // 成员入会时静音
    onSelectShowremutePopup(item) {
      this.showremutePopup.show = false
      this.form.showremutePopup = item.name
    },
    // 入会成员限制
    onSelectShowreLimitUserPopup(item) {
      this.showreLimitUserPopup.show = false
      this.form.showreLimitUserPopup = item.name
    },
    // 选择参会人弹框点击确认按钮
    onDialogConfirm() {
      let arr_ = []
      this.usersResult.forEach((item) => {
        arr_.push({
          userId: item,
        })
      })
      this.form.users = arr_
      let arr = []
      this.host.columns.forEach((item) => {
        this.usersResult.forEach((item_) => {
          if (item.id === item_) {
            arr.push(item.name)
          }
        })
      })
      this.form.users_ = arr.join(',')
    },
    // 会议室
    onDialogConfirmPlace() {
      let arr_ = []
      this.placesResult.forEach((item) => {
        arr_.push({
          placeId: item,
        })
      })
      this.form.places = arr_
      let arr = []
      this.room.columns.forEach((item) => {
        this.placesResult.forEach((item_) => {
          if (item.id === item_) {
            arr.push(item.text)
          }
        })
      })
      this.form.room = arr.join(',')
    },
  },
}
</script>
<style lang="scss" scoped>
/deep/ .van-field__body input {
  font-size: 1.2em;
}
/deep/ .van-ellipsis {
  font-size: 1.5em;
}
/deep/ .van-cell__title span {
  font-size: 1.2em;
}
.more /deep/ .van-collapse-item__content {
  padding: 0;
}
.group {
  height: 35em;
  overflow: auto;
}
.itemCheckbox {
  padding: 1.2em 1.8em;
  border-bottom: 1px solid rgb(221, 221, 221);
}
</style>
