<template>
  <div class="evaluation">
    <div class="tabBox">
      <n-tabs
        v-model:value="value"
        type="line"
        tab-style="min-width: 25%;"
        @update:value="handleUpdateValue"
      >
        <n-tab-pane
          v-for="panel in panels"
          :key="panel.value"
          :name="panel.label"
        >
          <Card :data="cardData" v-on:getInfo="getInfo" v-if="flag == 1" />
          <CardsDetails
            :info="cardInfo"
            :title="rightList[currentIndex].label"
            v-on:getFlag="getFlag"
            v-else
          />
        </n-tab-pane>
      </n-tabs>
    </div>
    <ul class="right">
      <li
        v-for="(r, i) in rightList"
        :key="i"
        :class="currentIndex === i ? 'bg' : ''"
        @click="changeRight(i)"
      >
        {{ r.label }}
      </li>
    </ul>
    <div class="searchox">
      <n-date-picker
        v-model:value="time"
        type="year"
        clearable
        style="width: 100px; margin: 0 10px"
        @update:value="handleUpdateValue"
      />
      <n-select
        v-model:value="mouthValue"
        filterable
        clearable
        :options="optionsMouth"
        style="width: 100px; margin: 0 10px"
        v-if="currentIndex == 4"
        @update:value="handleUpdateValue"
      />
      <n-radio-group
        v-model:value="orgValue"
        name="radiogroup"
        @update:value="handleUpdateValue"
      >
        <n-space>
          <n-radio v-for="org in organ" :key="org.value" :value="org.value">
            {{ org.label }}
          </n-radio>
        </n-space>
      </n-radio-group>
      <n-button
        type="primary"
        :text="true"
        style="margin: 0 10px"
        @click="handleClick('question')"
        >问题清单</n-button
      >
    </div>
    <div class="question" v-show="showQuestion">
      <QuestionModal ref="questionModalRef" :year="time" />
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted } from "vue";
import Card from "./components/Cards.vue";
import CardsDetails from "./components/CardsDetails.vue";
import QuestionModal from "./components/QuestionModal.vue";
import bus from "@/utils/util";
import { getEvaluationList } from "@/services";
import { getImageUrlForPublic, formatDate } from "/src/utils/util.js";

export default {
  name: "evaluation",
  components: {
    Card,
    CardsDetails,
    QuestionModal,
  },
  setup() {
    const questionModalRef = ref(null);
    const valueRef = ref("黄孝河流域");
    const panelsRef = ref([
      {
        value: 1,
        label: "黄孝河流域",
      },
      {
        value: 2,
        label: "机场河流域",
      },
    ]);
    const cardData = ref(null);
    const right = reactive({
      currentIndex: 0,
      rightList: [
        {
          label: "第一季度",
          value: 1,
        },
        {
          label: "第二季度",
          value: 2,
        },
        {
          label: "第三季度",
          value: 3,
        },
        {
          label: "第四季度",
          value: 4,
        },
        {
          label: "临时考核",
          value: 5,
        },
      ],
    });
    const state = reactive({
      flag: 1,
      cardInfo: null,
      completionStatus: "",
      // 右上侧搜索
      time: new Date(),
      mouthValue: 1,
      orgValue: 1,
      organ: [
        { label: "项目公司考评", value: 1 },
        { label: "水务局考评", value: 2 },
      ],
      optionsMouth: [
        { label: "1月", value: 1 },
        { label: "2月", value: 2 },
        { label: "3月", value: 3 },
        { label: "4月", value: 4 },
        { label: "5月", value: 5 },
        { label: "6月", value: 6 },
        { label: "7月", value: 7 },
        { label: "8月", value: 8 },
        { label: "9月", value: 9 },
        { label: "10月", value: 10 },
        { label: "11月", value: 11 },
        { label: "12月", value: 12 },
      ],
      // 问题弹窗
      showQuestion: false,
    });
    // 获取card子组件数据
    const getInfo = (info) => {
      state.flag = 2;
      state.cardInfo = info;
    };
    //  获取子组件CardsDetails的保存状态
    const getFlag = (flag) => {
      state.flag = flag;
      console.log("保存成功");
      getCardList();
    };
    // 改变右侧季度
    const changeRight = (i) => {
      right.currentIndex = i;
      state.flag = 1;
      getCardList();
    };
    // tabs切换
    const handleUpdateValue = (value) => {
      getCardList();
    };
    // 获取card数据
    const getCardList = async () => {
      let value = valueRef.value == "黄孝河流域" ? 1 : 2;
      let type = right.currentIndex == 4 ? 2 : 1;
      let time = type == 1 ? right.currentIndex + 1 : state.mouthValue;
      let pramas = {
        areaId: value,
        evaluateYear: formatDate(state.time, "YYYY"),
        evaluateType: type,
        evaluateTime: time,
        evaluateDept: state.orgValue,
        page: 1,
        limit: 10,
      };
      let res = await getEvaluationList(pramas);
      if (res.code === 0) {
        cardData.value = res.page.list.map((v) => {
          return {
            imgUrl: getImageUrlForPublic("weixiufenxi1"),
            facilitiesId: v.facilitiesId,
            facilitiesName: v.facilitiesName,
            finishStatus: v.finishStatus,
            score: v.score,
            scoreMonthId: v.scoreMonthId,
          };
        });
      }
      console.log(cardData.value);
    };

    // 按钮点击事件
    const handleClick = (type) => {
      switch (type) {
        case "question":
          questionModalRef.value.init();
          state.showQuestion = true;
          break;
        case "export":
          break;
      }
    };

    onMounted(() => {
      getCardList();
      bus.on("show", (e) => {
        state.showQuestion = e;
      });
    });
    return {
      questionModalRef,
      value: valueRef,
      panels: panelsRef,
      cardData,
      ...toRefs(right),
      ...toRefs(state),
      changeRight,
      getInfo,
      getFlag,
      handleUpdateValue,
      getCardList,
      handleClick,
    };
  },
};
</script>

<style lang="less" scoped>
.evaluation {
  position: relative;
  height: 100%;
  .tabBox {
    width: 97.5%;
  }
  .right {
    position: absolute;
    top: 15%;
    right: 0;
    width: 40px;
    li {
      padding: 10px;
      height: 130px;
      line-height: 20px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      background: url("../../../assets/Imgs/jixiao4.png") no-repeat center;
      cursor: pointer;
      &.bg {
        background: url("../../../assets/Imgs/jixiao5.png") no-repeat center;
        color: #145bf7;
      }
    }
  }
  .searchox {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 10px;
  }
  .question {
    position: absolute;
    top: 50px;
    left: 1%;
    width: 98%;
    height: calc(100% - 70px);
  }
}
</style>