<script setup lang="ts">
import { ElScrollbar } from "element-plus";
import { getComun, updateComun } from "../../api/voiceSystem/index";
import { ElMessage } from "element-plus";

const checkList = ref([]);
const comunList = ref([]);
const getComunList = async () => {
  let res = await getComun();
  if (res.code == 200 && res.data) {
    comunList.value = res.data || [];
    res.data.forEach((item) => {
      if (item.status == 1) {
        checkList.value.push(item.type);
      }
    });
  }
};
const updateComunList = async () => {
  let arr = [];
  let res1 = comunList.value.filter((item) => {
    if (checkList.value.indexOf(item.type) != -1) {
      console.log(item);
      item.status = 1;
    } else {
      item.status = 0;
    }
    return item;
  });
  res1.forEach((item) => {
    arr.push({
      id: item.id,
      status: item.status,
    });
  });
  let res = await updateComun(arr);
  console.log(res);
  if (res.code == 200) {
    ElMessage.success(res.message);
  } else {
    ElMessage.error(res.message);
  }
};
const choseItem = (e) => {
  console.log(e);
};
const init = () => {
  getComunList();
};
onMounted(() => {
  init();
});
</script>
<template>
  <div class="voice-system-container ya-split-panel-container">
    <ElScrollbar>
      <div class="voice-con">
        <div class="text ya-primary-text">通讯配置</div>
        <div class="title ya-regular-text">
          <i class="iconfont icon-tishi ya-primary-color"></i>
          勾选邮件发送或短信发送，下发任务时会自动发送邮件或短信，提醒用户登录系统查收任务。
        </div>
        <div class="voice-con-warp ya-border-color">
          <div class="voice-title ya-regular-text">请选择通讯工具</div>
          <div>
            <el-checkbox-group v-model="checkList" @change="choseItem">
              <el-checkbox v-for="item in comunList" :label="item.type" />
            </el-checkbox-group>
          </div>
          <div class="submit">
            <YaButton
              type="primary"
              title="保存配置"
              @click="updateComunList"
            ></YaButton>
          </div>
        </div>
      </div>
    </ElScrollbar>
  </div>
</template>
<style lang="scss" scoped>
.voice-system-container {
  width: 100%;
  height: calc(100vh - 120px);
  overflow: auto;
  .voice-con {
    padding: 24px;
  }
  .el-scrollbar {
    width: 100%;
  }
  .text {
    color: rgba(0, 0, 0, 0.8);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 24px;
  }
  .title {
    height: 36px;
    line-height: 36px;
    border-radius: 3px;
    background: rgba(0, 149, 255, 0.08);
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
    font-size: 14px;
    padding-left: 16px;
    .icon-tishi {
      font-size: 14px;
      color: rgba(0, 149, 255, 1);
    }
  }
  .voice-con-warp {
    margin-top: 24px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0 24px;
    .voice-title {
      margin-top: 16px;
      color: rgba(0, 0, 0, 0.8);
      font-size: 14px;
      border-radius: 4px;
    }
  }
  .submit {
    margin-top: 10px;
    margin-bottom: 16px;
  }
}
::v-deep .el-checkbox {
  display: block;
  // color: rgba(102, 102, 102, 1);
}
::v-deep .el-checkbox-group {
  margin-top: 20px;
}
::v-deep .el-checkbox__label {
  position: relative;
  top: -2px;
  font-size: 14px;
}
</style>
