<template>
  <div id="AssessmentNotice">
    <div id="AssTitle">
      <n-space justify="space-between">
        <n-radio-group
          v-model:value="radioValue"
          name="radiogroup"
          style="height: 48px; line-height: 40px"
        >
          <n-space>
            <n-radio
              v-for="song in songs"
              :key="song.value"
              :value="song.value"
            >
              {{ song.label }}
            </n-radio>
          </n-space>
        </n-radio-group>
        <n-button type="info" @click="Release = true"> 发布考核通知 </n-button>
      </n-space>
    </div>
    <div id="AssCentent1">
      <n-space justify="end">
        <div class="AssTitleList">
          <Checkbox class="CheckboxStyle" /><span class="AssTitleFont"
            >:当天安排有 <b>常规考核</b>
          </span>
        </div>
        <div class="AssTitleList">
          <Checkbox class="CheckboxStyle2" /><span class="AssTitleFont"
            >:当天安排有 <b>临时考核</b></span
          >
        </div>
      </n-space>
      <n-calendar
        @update:value="handleUpdateValue"
        #="{ _, year, month, date }"
      >
        <!-- 通过判断获取对应的年/月 在这个月当中去加载有工作内容的日期-->
        <span
          v-show="
            workForDay.includes(date) &&
            month == monthNow &&
            year == yearNow &&
            radioValue != '1'
          "
          ><Checkbox class="CheckboxStyle" />
        </span>
        <span
          v-show="
            workForDay2.includes(date) &&
            month == monthNow &&
            year == yearNow &&
            radioValue != '2'
          "
          ><Checkbox class="CheckboxStyle2" />
        </span>
      </n-calendar>
      <!-- 当天的考核安排详情 -->
      <n-modal
        v-model:show="isCalender"
       preset="card"
        :show-icon="false"
        :title="DialogTitle"
        to="#AssessmentNotice"
        displayDirective="show"
          :style="{ width: '440px' }"
      >
        <div class="AssTable">
          <div class="AssTableHeader">
            <span class="AssTableList1">时间</span>
            <span class="AssTableList2">安排</span>
          </div>
          <div class="AssTableBody">
            <p
              class="AssTableBodyList"
              v-for="(item, index) in AssTableData"
              :key="index"
            >
              <span class="AssTableList1">{{ item.time }}</span>
              <span class="AssTableList2">
                <n-space vertical>
                  <n-tag
                    v-for="(item2, index2) in item.datas"
                    :type="item2.type == 1 ? 'warning' : 'success'"
                  >
                    {{ item2.name }}
                  </n-tag>
                </n-space>
              </span>
            </p>
          </div>
        </div>
      </n-modal>
      <!-- 发布考核通知 -->
      <n-modal
        v-model:show="Release"
       preset="card"
        :show-icon="false"
        title="发布考核通知"
        to="#AssessmentNotice"
        displayDirective="show"
        style="width: 650px"
      >
        <n-form
          ref="formRef"
          :model="formModel"
          :rules="formRules"
          label-placement="left"
          label-width="auto"
          require-mark-placement="right-hanging"
          :style="{
            width: '550px',
          }"
        >
          <n-form-item label="主题" path="inputValue">
            <n-input v-model:value="formModel.inputValue" placeholder="主题" />
          </n-form-item>
          <n-form-item label="考核类型" path="selectValue">
            <n-select
              v-model:value="formModel.selectValue"
              placeholder="考核类型"
              :options="generalOptions"
              @update:value="selectValueUpdateValue"
            />
          </n-form-item>
          <n-form-item label="考核对象" path="checkboxGroupValue">
            <n-checkbox-group v-model:value="formModel.checkboxGroupValue">
              <n-button size="small" @click="GroupOptionsAllOk()">
                全选
              </n-button>
              <n-space>
                <n-checkbox
                  :value="item.value"
                  v-for="(item, index) in GroupOptions"
                  :key="index"
                >
                  {{ item.label }}
                </n-checkbox>
              </n-space>
            </n-checkbox-group>
          </n-form-item>
          <n-form-item label="发送对象">
            <n-dynamic-tags v-model:value="formModel.tagsValue">
              <template #input="{ submit }">
                <n-auto-complete
                  v-model:value="tagsInputValue"
                  size="small"
                  :options="tagsOptions"
                  placeholder="输入名字"
                  :clear-after-select="true"
                  @select="submit($event)"
                />
              </template>
            </n-dynamic-tags>
          </n-form-item>
          <n-form-item label="考核时间" path="datetimeValue">
            <n-date-picker
              v-model:value="formModel.datetimeValue"
              type="datetime"
              actions="[ 'now', 'confirm']"
              value-format="yyyy.MM.dd HH:mm:ss"
            />
          </n-form-item>
          <n-form-item label="考核要求" path="textareaValue">
            <n-input
              v-model:value="formModel.textareaValue"
              placeholder="考核要求"
              type="textarea"
              :autosize="{
                minRows: 3,
                maxRows: 5,
              }"
            />
          </n-form-item>
          <div style="display: flex; justify-content: flex-end">
            <n-button round type="primary" @click="handleValidateButtonClick">
              发布
            </n-button>
            <n-button round @click="handleValidateButtonClick2">
              取消
            </n-button>
          </div>
        </n-form>
      </n-modal>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref, reactive, toRefs, onMounted } from "vue";
import { useMessage } from "naive-ui";
import { Checkbox } from "@vicons/ionicons5";

export default defineComponent({
  name: "AssessmentNotice",
  components: {
    Checkbox,
  },

  setup() {
    const formRef = ref(null);
    let allData = reactive({
      // 单选
      radioValue: "0",
      songs: [
        {
          value: "0",
          label: "全部考核",
        },
        {
          value: "1",
          label: "常规考核",
        },
        {
          value: "2",
          label: "临时考核",
        },
      ],
      // 日历中有计划的日期
      workForDay: [1, 3, 5, 7, 9, 20, 21, 22, 23, 24],
      workForDay2: [1, 2, 3, 6, 9, 14, 16, 22, 26, 24],
      monthNow: 3,
      yearNow: 2022,
      // 是否展示弹窗
      isCalender: false,
      DialogTitle: "",
      // 某一天的所有时刻安排信息
      AssTableData: [],
      // 考核通知弹窗
      Release: false,
      // 考核通知form表单
      formModel: {
        inputValue: null,
        selectValue: "2",
        checkboxGroupValue: null,
        tagsValue: ["张三", "王五"],
        AssessmentTime: null,
        datetimeValue: Date.now(),
      },
      formRules: {
        inputValue: {
          required: true,
          trigger: ["input"],
          message: "请输入 inputValue",
        },
        selectValue: {
          required: true,
          trigger: ["blur", "change"],
          message: "请选择 selectValue",
        },
        checkboxGroupValue: {
          type: "array",
          required: true,
          trigger: "change",
          message: "请选择 checkboxGroupValue",
        },
        datetimeValue: {
          type: "number",
          required: true,
          trigger: ["change"],
          message: "请选择 datetimeValue",
        },
        textareaValue: {
          required: true,
          trigger: ["input"],
          message: "请输入 textareaValue",
        },
        // tagsValue: {
        //   required: false,
        //   trigger: ["change"],
        //   message: "请选择 tagsValue",
        // },
      },
      generalOptions: [
        {
          label: "常规考核",
          value: "2",
        },
        {
          label: "临时考核",
          value: "1",
        },
      ],
      GroupOptions: [
        {
          label: "西渠闸门",
          value: "1",
        },
        {
          label: "解放大道澳门路闸",
          value: "2",
        },
        {
          label: "中山大道前进四路闸",
          value: "3",
        },
        {
          label: "王家墩污水泵站",
          value: "4",
        },
        {
          label: "后湖二期泵站",
          value: "5",
        },
        {
          label: "铁路桥泵站",
          value: "6",
        },
        {
          label: "机场河补水泵站",
          value: "7",
        },
        {
          label: "常青花园地下调蓄池",
          value: "8",
        },
        {
          label: "黄孝河CSO强化处理设施",
          value: "9",
        },
        {
          label: "机场河CSO强化处理设施",
          value: "10",
        },
      ],
      tagsInputValue: " ",
      tagsOptions: [
        { label: "张三", value: "张三" },
        { label: "李四", value: "李四" },
        { label: "王五", value: "王五" },
        { label: "黄六", value: "黄六" },
      ],
    });

    // 获取某一天的考核安排数据
    async function getTableData(date) {
      if (
        allData.workForDay.includes(date) &&
        allData.workForDay2.includes(date)
      ) {
        // 临时+常规
        let res = await AssessmentNoticeData();
        if (res.code == 200) {
          allData.AssTableData = res.data;
        }
      } else if (allData.workForDay2.includes(date)) {
        // 临时
        let res = await AssessmentNoticeData1();
        if (res.code == 200) {
          allData.AssTableData = res.data;
        }
      } else {
        // 常规
        let res = await AssessmentNoticeData2();
        if (res.code == 200) {
          allData.AssTableData = res.data;
        }
      }
    }

    // 全选考核对象
    function GroupOptionsAllOk() {
      // console.log(123);
      allData.formModel.checkboxGroupValue = [];
      for (let i = 0; i < allData.GroupOptions.length; i++) {
        allData.formModel.checkboxGroupValue.push(
          allData.GroupOptions[i].value
        );
      }
    }

    // 监听类型选择
    function selectValueUpdateValue(value, option) {
      if (value == 1) {
        //  隐藏时间
      } else {
        // 显示时间
      }
    }

    // 提交验证
    function handleValidateButtonClick(e) {
      e.preventDefault();
      formRef.value?.validate((errors) => {
        if (!errors) {
          console.log("验证成功");
          message.success(`发布成功！`);
          handleValidateButtonClick2();
        } else {
          console.log(errors);
          console.log("验证失败");
        }
      });
    }
    // 关闭窗口
    function handleValidateButtonClick2() {
      clearForm();
      allData.Release = false;
    }
    //清除表单
    function clearForm() {
      allData.formModel.inputValue = null;
      allData.formModel.selectValue = "2";
      allData.formModel.checkboxGroupValue = null;
      allData.formModel.tagsValue = ["张三", "王五"];
      allData.formModel.AssessmentTime = null;
      allData.formModel.datetimeValue = Date.now();
    }
    onMounted(() => {
      // getTableData();
    });

    const message = useMessage();
    return {
      formRef,
      ...toRefs(allData),
      handleUpdateValue(_, { year, month, date }) {
        if (
          allData.workForDay.includes(date) ||
          (allData.workForDay2.includes(date) &&
            month == allData.monthNow &&
            year == allData.yearNow)
        ) {
          allData.DialogTitle = `${year}年${month}月${date}日考核安排`;
          allData.isCalender = true;
          getTableData(date);
        } else {
          message.info(`当前日期无考核安排`);
        }
      },
      getTableData,
      GroupOptionsAllOk,
      handleValidateButtonClick,
      selectValueUpdateValue,
      handleValidateButtonClick2,
      clearForm,
    };
  },
  computed: {},
  methods: {},
});
</script>
<style lang="less" scoped>
#AssessmentNotice {
  width: 100%;
  height: 100%;

  #AssTitle {
    width: 100%;
    height: 60px;

    .AssTitleList {
      width: 180px;
      margin-left: 12px;

      .AssTitleFont {
        width: auto;
        // height: 40px;
        line-height: 40px;
      }
    }
  }
  #AssCentent2 {
    width: 100%;
    height: calc(100% - 60px);
  }
  #AssCentent1 {
    width: 100%;
    height: calc(100% - 60px);
  }
  .CheckboxStyle {
    color: #18a058;
    width: 28px;
    height: 28px;
    vertical-align: middle;
  }
  .CheckboxStyle2 {
    color: #f0a020;
    width: 28px;
    height: 28px;
    vertical-align: middle;
  }
  .AssTable {
    width: 390px;
    height: 500px;

    .AssTableHeader {
      width: 390px;
      height: 40px;
      list-style: 40px;
      display: inline-block;

      span {
        font-weight: 600;
        font-size: 14px;
        border-bottom: 1px solid;
        height: 40px;
        line-height: 40px;
      }
    }
    .AssTableBody {
      width: 390px;
      height: 460px;
      overflow-y: auto;

      .AssTableBodyList {
        width: 380px;
        height: auto;
        min-height: 20px;
        border-bottom: 1px solid var(--color-kaohe);

        .AssTableList1 {
          height: 100%;
          line-height: 20px;
        }
        .AssTableList2 {
          height: auto;
          padding: 5px 0;
        }
      }
    }
    .AssTableList1 {
      width: 80px;
      display: inline-block;
      text-align: center;
    }
    .AssTableList2 {
      width: 300px;
      display: inline-block;
      text-align: center;
    }
  }
}
</style>