<template>
  <div class="flex">
    <el-card shadow="always" :body-style="{ padding: '10px' }">
      <div
        class="flex text-14px cursor-pointer"
        v-for="(item, index) in list"
        :key="index"
        style="height: 48px; line-height: 48px; width: 240px"
        @click="handleChoose(item.value)"
        :class="{ actived: item.value == msgType }"
      >
        <div class="font-bold pl-20px">{{ item.name }}</div>
      </div>
    </el-card>
    <el-card shadow="always" :body-style="{ padding: '10px' }" class="ml-20px flex-1">
      <el-form :model="form" ref="msgForm" :rules="rules" label-width="100px" :inline="false">
        <el-form-item prop="isEnable">
          <template #label>
            <div class="flex justify-center" style="align-items: center">
              <Tooltip message="是否发送对应消息通知" />
              <span>是否启用</span>
            </div>
          </template>
          <el-radio-group v-model="form.isEnable">
            <el-radio :label="1"> 启用 </el-radio>
            <el-radio :label="0"> 禁用 </el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="form.isEnable">
          <el-form-item label="微信通知" prop="wxMsg">
            <el-radio-group v-model="form.wxMsg">
              <el-radio :label="1"> 启用 </el-radio>
              <el-radio :label="0"> 禁用 </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="发送对象" prop="msgTo">
            <div>
              <el-checkbox-group v-model="form.msgTo">
                <el-checkbox :label="1"> 创建人 </el-checkbox>
                <el-checkbox :label="2"> 申请人 </el-checkbox>
                <el-checkbox :label="3"> 指定用户 </el-checkbox>
                <el-checkbox v-if="form.wxMsg" :label="4"> 微信群 </el-checkbox>
              </el-checkbox-group>
              <div class="flex">
                <div v-if="form.msgTo.includes(3)" class="flex mr-20px" style="align-items: center">
                  <div class="mr-15px" style="width: 80px">指定用户：</div>
                  <el-select
                    v-model="form.msgToUsers"
                    placeholder="选择用户，可多选"
                    filterable
                    multiple
                    style="width: 300px"
                  >
                    <el-option
                      v-for="item in userOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
                <div v-if="form.msgTo.includes(4)" class="flex mr-20px" style="align-items: center">
                  <div
                    class="mr-15px flex"
                    style="align-items: center; width: 180px; text-align: right"
                  >
                    <Tooltip message="已添加微信机器人的群" />
                    <span>微信群名称：</span>
                  </div>
                  <el-input v-model="form.wxGroup" placeholder="请输入群名称" />
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="发送时间" prop="sendTime">
            <div>
              <el-radio-group v-model="form.sendTime">
                <el-radio :label="1"> 立即发送 </el-radio>
                <el-radio :label="2"> 指定时间 </el-radio>
              </el-radio-group>
              <div v-if="form.sendTime == 2">
                <span class="mr-15px">指定时间：</span>
                <el-radio-group v-model="form.msgTimeType" @change="form.days = []">
                  <el-radio :label="1"> 每日 </el-radio>
                  <el-radio :label="2"> 次日 </el-radio>
                  <el-radio :label="3"> 每周 </el-radio>
                  <el-radio :label="4"> 每月 </el-radio>
                </el-radio-group>
                <div v-if="[3, 4].includes(form.msgTimeType)" class="mt-15px">
                  <span class="mr-15px">日期：</span>
                  <el-select v-model="form.days" placeholder="选择日期，可多选" multiple filterable>
                    <el-option
                      v-for="item in dayOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
                <div class="mt-15px">
                  <span class="mr-15px">具体时间：</span>
                  <el-time-picker
                    v-model="form.msgTime"
                    placeholder="具体时间"
                    :clearable="false"
                    format="HH:mm"
                    value-format="HH:mm"
                    class="ml-20px"
                  />
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="消息模板" prop="msgTemplate">
            <el-input
              v-model="form.msgTemplate"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 6 }"
              placeholder="请输入模板内容"
            />
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="flex justify-center" style="align-items: center">
                <Tooltip message="当库存达到多少时，发送预警消息" />
                <span>预警阈值</span>
              </div>
            </template>
            <el-input-number v-model="form.limit" :min="1" />
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
const list = [
  { name: '库存预警通知', value: 'KCYJTZ' },
  { name: '采购申请通知', value: 'CGSQTZ' },
  { name: '审核结果通知', value: 'CGSHJGTZ' }
]

const msgType = ref('KCYJTZ')

const form = ref({
  isEnable: true,
  wxMsg: false,
  msgTo: [],
  msgToUsers: [],
  wxGroup: '',
  sendTime: 1,
  msgTimeType: 1,
  msgTime: '00:00',

  days: []
})
const rules = ref({})
const userOptions = ref([
  { label: '张张', value: '1' },
  { label: '李李', value: '2' },
  { label: '王王', value: '3' },
  { label: '赵赵', value: '4' }
])

const dayOptions = computed(() => {
  const weekList = [
    { label: '周一', value: 1 },
    { label: '周二', value: 2 },
    { label: '周三', value: 3 },
    { label: '周四', value: 4 },
    { label: '周五', value: 5 },
    { label: '周六', value: 6 },
    { label: '周日', value: 7 }
  ]
  let monthList = []
  for (let i = 0; i < 28; i++) {
    monthList.push({ label: `${i + 1}日`, value: i + 1 })
  }
  let obj = {
    3: weekList,
    4: monthList
  }
  return obj[form.value.msgTimeType] || []
})

function handleChoose(type) {
  msgType.value = type
}

function onSubmit() {
  console.log('保存成功')
}
</script>

<style lang="scss" scoped>
.actived {
  background-color: #f0f7ff;
}
</style>
