<template>
  <div class="setting">
    <div class="remind">
      <!-- <div>提醒</div> -->
      <div class="remind-icon">
        <!-- <van-cell style="width:80vw;" title="单元格" is-link value="内容" /> -->
        <van-cell class="commonCell" title="提醒" :border="false" :value="getRemindStr()" is-link
          @click="showremindPopup = true" />
        <!-- <van-icon style="width:5vw; position:relative; top:-4vw; left: 4vw;" name="arrow" /> -->
        <!-- <van-cell style="width: 80vw;" @click="showremindPopup = true" :value="getRemindStr()" /> -->
        <van-popup v-model="showremindPopup" position="right" :style="{ width: '100%', height: '100%' }">
          <van-nav-bar title="提醒" style="width:100vw; height: 52PX;" left-arrow @click-left="onClickLeft" />
          <van-radio-group v-model="dataForm.remindTime">
            <van-cell-group>
              <van-cell class="remindCell" title="无" clickable @click="dataForm.remindTime = '0'">
                <template #right-icon>
                  <van-radio name="0" />
                </template>
              </van-cell>
              <van-cell class="remindCell" title="会议开始时" clickable @click="dataForm.remindTime = '1'">
                <template #right-icon>
                  <van-radio name="1" />
                </template>
              </van-cell>
              <van-cell class="remindCell" title="5分钟前" clickable @click="dataForm.remindTime = '2'">
                <template #right-icon>
                  <van-radio name="2" />
                </template>
              </van-cell>
              <van-cell class="remindCell" title="15分钟前" clickable @click="dataForm.remindTime = '3'">
                <template #right-icon>
                  <van-radio name="3" />
                </template>
              </van-cell>
              <van-cell class="remindCell" title="1小时前" clickable @click="dataForm.remindTime = '4'">
                <template #right-icon>
                  <van-radio name="4" />
                </template>
              </van-cell>
              <van-cell class="remindCell" title="1天前" clickable @click="dataForm.remindTime = '5'">
                <template #right-icon>
                  <van-radio name="5" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-popup>
      </div>
    </div>
    <div style="width:120%; height:3vw; margin-left: -5vw; background-color: #f5f6f8;"></div>
    <div class="host">
      <div class="host-icon">
        <van-cell class="commonCell" title="指定主持人" @click="showhostPopup = true" is-link :value="dataForm.host">
        </van-cell>
        <van-popup v-model="showhostPopup" position="right" :style="{ width: '100%', height: '100%' }">
          <van-nav-bar title="主持人" style="width:100vw; height: 52PX;" left-arrow @click-left="onClickLeft" />
          <van-radio-group v-model="dataForm.host">
            <van-cell-group>
              <van-cell v-for="(item,index) in totalUsers" :key="index" class="remindCell" :title="item.fullname"
                clickable @click="confirmHost(item.fullname)">
                <template #right-icon>
                  <van-radio :name="item.fullname" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-popup>
      </div>
    </div>
    <div style="width:125%; height:3vw; margin-left: -5vw; background-color: #f5f6f8;"></div>
    <div class="host checkCell" :style="{ borderBottom: dataForm.checkedPW ? '1px solid #CCCCCC' : '' }" style="padding-left: 8PX;">
      <div>入会密码</div>
      <div class="host-icon switch-icon" style="margin-left:52vw;">
        <van-switch v-model="dataForm.checkedPW" size="60px" inactive-color="#dcdee0" />
      </div>
    </div>
    <div v-if="dataForm.checkedPW">
      <div style="width:60vw; height: 52PX; ">
        <van-field class="" style="width:160PX; height: 60%; line-height: 52PX;" type="number" maxlength="6"
          v-model="dataForm.password" placeholder="请输入4-6位密码" />
      </div>
    </div>
    <div style="width:125%; height:3vw; margin-left: -5vw; background-color: #f5f6f8;"></div>
    <div class="host checkCell" style="border-bottom: 1px solid #CCCCCC; padding-left: 8PX; ">
      <div>开启等候室</div>
      <div class="host-icon switch-icon" style="margin-left:48vw;">
        <van-switch v-model="dataForm.isWaitRoom" inactive-color="#dcdee0" />
      </div>
    </div>
    <div class="host checkCell" style="padding-left: 8PX;">
      <div>允许成员在主持人进会前加入</div>
      <div class="host-icon switch-icon" style="margin-left:12.5vw;">
        <van-switch v-model="dataForm.isOpen" inactive-color="#dcdee0" />
      </div>
    </div>
    <div style="width:125%;  height:3vw; margin-left: -5vw; background-color: #f5f6f8;"></div>
    <div class="mute">
      <!-- <div>成员入会时静音</div> -->
      <div class="muteCell">
        <van-cell class="commonCell" title="成员入会时静音" is-link @click="showremutePopup = true" :value="dataForm.muteStr">
        </van-cell>
        <van-popup v-model="showremutePopup" position="bottom" :style="{ width: '100%', textAlign: 'center' }">
          <van-cell class="muteCellItem" title="开启" clickable @click="onConfirmMute(0)">
          </van-cell>
          <van-cell class="muteCellItem" title="关闭" clickable @click="onConfirmMute(1)">
          </van-cell>
          <van-cell class="muteCellItem" title="超过6人后自动开启" clickable @click="onConfirmMute(2)" style=" ">
          </van-cell>
          <div style="width:125%; height:2vw;  background-color: #f5f6f8;"></div>
          <van-cell class="muteCellItem" title="取消" clickable @click="showremutePopup = false">
          </van-cell>
        </van-popup>
      </div>
    </div>
    <div class="mute">
      <!-- <div>入会成员限制</div> -->
      <div class="muteCell">
        <van-cell class="commonCell" title="入会成员限制" is-link style=" border: none;" @click="showreLimitUserPopup = true"
          :value="dataForm.limitUserStr">
        </van-cell>
        <van-popup v-model="showreLimitUserPopup" position="bottom" :style="{ width: '100%', textAlign: 'center' }">
          <van-cell class="muteCellItem" title="所有成员可入会" clickable @click="onConfirmLimitUser(0)">
          </van-cell>
          <van-cell class="muteCellItem" title="仅企业内部成员可入会" clickable @click="onConfirmLimitUser(1)">
          </van-cell>
          <div style="width:120%; height:2vw;   background-color: #f5f6f8;"></div>
          <van-cell class="muteCellItem" title="取消" clickable @click="showreLimitUserPopup = false">
          </van-cell>
        </van-popup>
      </div>
    </div>
    <div class="host checkCell" style="border-bottom: 1px solid #CCCCCC; padding-left: 8PX; ">
      <div>开启屏幕水印</div>
      <div class="host-icon switch-icon" style="margin-left:46vw;">
        <van-switch v-model="dataForm.isWatermark" inactive-color="#dcdee0" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {

  },
  data() {
    return {
      isClearRemind: true,
      showremindPopup: false,
      showhostPopup: false,
      showremutePopup: false,
      showreLimitUserPopup: false,
      dataForm: {
        remindTime: 0,
        // remindStr: '',
        host: '',
        checkedPW: false,
        password: '',
        isWaitRoom: false,
        isWatermark: false,
        isOpen: true,
        limitUser: 0,
        limitUserStr: '所有成员可入会',
        mute: 1,
        muteStr: '关闭'
      },
      remindArr: ['无', '会议开始时', '5分钟前', '15分钟前', '1小时前', '1天前'],
      remindColumns: [],
      remindDict: [],
      activeIcon: '@/assets/img/meetingAppIconfontSvg/selected.svg',
      totalUsers: []
    }
  },
  computed: {},
  filters: {},
  watch: {
    dataForm: {
      handler(newVal) {
        console.log(newVal, 'newVal')
        if (newVal.remindTime.length != 0) {
          this.isClearRemind = false
        }
        localStorage.setItem('setting', JSON.stringify(this.dataForm))

      },
      deep: true
    }, // 值可以为methods的方法名
    // isClearRemind: {
    //   handler(newVal) {
    //     if (newVal) {
    //       this.dataForm.remindStr = ''
    //       this.dataForm.remindTime = 0

    //     }
    //   },
    // }
  },
  created() {
    // localStorage.setItem('setting', JSON.stringify(this.dataForm))
    window.scrollTo(0, 0);
    this.remindDict = this.getDictData('tx')
    this.remindDict.forEach(e => {
      this.remindColumns.push(e.text)
    });
    // setTimeout(()=>{
    if (localStorage.getItem('setting') != undefined) {
      this.dataForm = JSON.parse(localStorage.getItem('setting'))
    }else{
      let initSetting = {
        checkedPW:false,
        host:"",
        isOpen:true,
        isWaitRoom:false,
        isWatermark:false,
        limitUser:0,
        limitUserStr:"所有成员可入会",
        mute:1,
        muteStr:"关闭",
        password:"",
        remindTime:"0"
      }
      localStorage.setItem('setting',JSON.stringify(initSetting))
    }

    this.loadHost()

    // },100)
    // console.log(this.remindColumns,'this.remindColumns')
  },
  methods: {
    loadHost() {
      let deptUrl = `http://183.230.176.125:8896/api/org/v1/org/getOrgListByDemId?demId=1258608622670319616`
      this.$http.get(deptUrl).then(res => {
        console.log(res, 'res')
        if (res.status == 200) {

          let totalDeptList = res.data

          let url = `http://183.230.176.125:8896/api/user/v1/users/getOrgUserQuery`
          this.$http.post(url, {
            groupRelation: "AND",
            groupTree: {},
            pageBean: {
              page: 1,
              pageSize: 100,
              showTotal: true
            },
            params: {},
            querys: [
              {
                "property": "ORG_ID_",
                "value": totalDeptList[0].id,
                "group": "orgTree",
                "relation": "AND",
                "operation": "IN"
              }
            ],
            sorter: [

            ]
          }).then(res => {
            let userList = res.data.rows
            if (res.status == 200) {
              userList.forEach(item => {
                item.isChecked = false
                this.totalUsers.push(item)
              })
              // this.childUserList[index].forEach((e, i) => {
              //   this.users.push(e.name)
              // })
            } else {
              Message.error(res.data.errmsg)
            }

          })
        }
      })
    },
    confirmHost(name) {
      this.dataForm.host = name;
      this.showhostPopup = false;
    },
    onClickLeft() {
      this.showremindPopup = false;
      this.showhostPopup = false;
    },
    onConfirmMute(value) {
      this.dataForm.mute = value;
      if (value == 0) {
        this.dataForm.muteStr = '开启'
      } else if (value == 1) {
        this.dataForm.muteStr = '关闭'
      } else {
        this.dataForm.muteStr = '超过6人后自动开启'
      }
      console.log(this.dataForm.mute, 'this.dataForm.mute')

      this.showremutePopup = false;
    },
    onConfirmLimitUser(value) {
      this.dataForm.limitUser = value;
      if (value == 0) {
        this.dataForm.limitUserStr = '所有成员可入会'
      } else if (value == 1) {
        this.dataForm.limitUserStr = '仅企业内部成员可入会'
      }
      // console.log(this.dataForm.mute, 'this.dataForm.mute')

      this.showreLimitUserPopup = false;
    },
    getRemindStr() {
      let index = parseInt(this.dataForm.remindTime)
      return this.remindArr[index]
    },
    // getMindStr(value) {
    //   if (value = '1') {
    //     return '无';
    //   } else if (value = '2') {
    //     return '会议开始时';
    //   } else if (value = '3') {
    //     return '5分钟前';
    //   } else if (value = '4') {
    //     return '15分钟前';
    //   } else if (value = '5') {
    //     return '1小时前';
    //   } else {
    //     return '1天前';
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.setting {
  margin: 5vw;
  margin-top: 45PX !important;
}

.remind {
  width: 95vw;
  height: 52PX;
  display: flex;
  align-items: center;

  // border-bottom: 1px solid #CCCCCC;
}

.remindCell--clickable {
  cursor: pointer;
  background-color: transparent !important;
}

.mute {
  width: 95vw;
  height: 52PX;
  display: flex;
  align-items: center;

  border-bottom: 1px solid #CCCCCC;
}

.muteCell {
  width: 90vw;
}

.muteCell .van-cell {
  width: 93vw !important;
  padding-right: -3vw;
}


.muteCellItem {
  width: 100vw !important;
  margin-left: 5vw;
  text-align: center;
  align-items: center;
  height: 15vw;
}

.checkGroup .van-checkbox {
  width: 100%;
  height: 14vw;
  margin: 0 5vw;
  border-bottom: 1px solid #CCCCCC;
}

.remind-icon .van-cell .van-cell__title {
  // width: 10vw !important;
  // margin-left: -3vw;
}

.remind-icon .van-cell__value {
  // width: 60vw;
}

.remindCell {
  width: 90vw;
  height: 52PX;
  align-items: center;
  margin-left: 5vw;
  border-bottom: 1px solid #CCCCCC;
  border-radius: 0 !important;
}

.host {
  width: 95vw;
  height: 52PX;
  display: flex;
  align-items: center;
  // border-bottom: 1px solid #CCCCCC;
}

// .host-icon .van-icon-arrow:before {
//   margin-left: 46vw;
// }

.van-cell {
  // width:100vw;
  border-radius: 0%;
  // border: none !important;
  -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}

.commonCell {
  width: 93vw;
  position: relative;
  left: -1vw;
}

.van-cell::after {
  border-bottom: none !important;
}

// .van-cell::before {
//   background-color: transparent !important;
// }

.hostCell .van-cell__value {
  position: relative;
  left: 47vw;
  color: gray;
  width: auto;
}

.checkCell {
  // width: 90vw;
  justify-content: space-between;
}

.switch-icon {
  padding-right: 4vw;
}

.van-radio {
  overflow: visible !important;
}

.van-field__control {
  width:180PX;
}

.van-switch {
  width: 4em;
  height: 2em;
}
/deep/.van-switch__node {
  width: 2em;
  height: 2em; 
}
/deep/.van-switch--on .van-switch__node {
  transform: translateX(2em);
}


</style>
