<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" :name="panel">
          <Table :data="tableData" v-if="flag == 0" />
          <Card :data="cardData" v-on:getInfo="getInfo" v-else-if="flag == 1" />
          <CardsDetails
            :info="cardInfo"
            :title="rightList[currentIndex]"
            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 }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted } from "vue";
import Card from "./components/Cards.vue";
import Table from "./components/Table.vue";
import CardsDetails from "./components/CardsDetails.vue";
export default {
  name: "evaluation",
  components: {
    Card,
    Table,
    CardsDetails,
  },
  setup() {
    const valueRef = ref("2022年考核指标评价");
    const panelsRef = ref([
      "2022年考核指标评价",
      // "2021年考核指标评价",
      // "2020年考核指标评价",
      // "2019年考核指标评价",
      // "2018年考核指标评价",
    ]);
    const cardData = ref(null);
    const right = reactive({
      currentIndex: 0,
      rightList: [
        "年度考核",
        "第一季度",
        "第二季度",
        "第三季度",
        "第四季度",
        "临时考核",
      ],
    });
    const state = reactive({
      flag: 0,
      cardInfo: null,
      tableData: [],
      completionStatus: "",
    });
    // 获取card子组件数据
    const getInfo = (info) => {
      state.flag = 2;
      state.cardInfo = info;
    };
    //  获取子组件CardsDetails的保存状态
    const getFlag = (flag) => {
      console.log(flag, "jjjjjjjjjjjj");
      state.flag = flag;
      console.log("保存成功");
    };
    // 改变右侧季度
    const changeRight = (i) => {
      console.log(i);
      right.currentIndex = i;
      if (right.currentIndex == 0) {
        state.flag = 0;
      } else {
        state.flag = 1;
        getCardList();
      }
    };
    // tabs切换
    const handleUpdateValue = (value) => {
      getTableData();
    };
    // 获取card数据
    const getCardList = () => {
      cardData.value = Array.apply(null, { length: 10 }).map((_, index) => {
        return {
          imgUrl: `src/assets/Imgs/weixiufenxi1.png`,
          name:
            index == 0
              ? "西渠闸门"
              : index == 1
              ? "解放大道澳门路闸"
              : index == 2
              ? "中山大道前进四路闸"
              : index == 3
              ? "王家墩污水泵站"
              : index == 4
              ? "后湖二期泵站"
              : index == 5
              ? "铁路桥净水厂"
              : index == 6
              ? "机场河补水泵站"
              : index == 7
              ? "机场河CSO强化处理设施"
              : index == 8
              ? "常青花园地下调蓄池"
              : "黄孝河CSO强化处理设施",
          score:
            index == 0 ? Math.floor(Math.random() * (100 - 80)) + 80 : "--",
          doneStatus: index == 0 ? 1 : 0,
        };
      });
      console.log(cardData.value);
    };
    // 获取表格数据
    const getTableData = () => {
      state.tableData = Array.apply(null, { length: 10 }).map((_, index) => {
        return {
          key: index,
          assessment:
            index == 0
              ? "西渠闸门"
              : index == 1
              ? "解放大道澳门路闸"
              : index == 2
              ? "中山大道前进四路闸"
              : index == 3
              ? "王家墩污水泵站"
              : index == 4
              ? "后湖二期泵站"
              : index == 5
              ? "铁路桥泵站"
              : index == 6
              ? "机场河补水泵站"
              : index == 7
              ? "机场河CSO强化处理设施"
              : index == 8
              ? "长青花园地下调蓄池"
              : "黄孝河CSO强化处理设施",
          first: Math.floor(Math.random() * (100 - 80)) + 80,
          second: Math.floor(Math.random() * (100 - 80)) + 80,
          third: Math.floor(Math.random() * (100 - 80)) + 80,
          quarterOneRoutine: Math.floor(Math.random() * (100 - 80)) + 80,
          quarterOneFinal: Math.floor(Math.random() * (100 - 80)) + 80,
          fourth: Math.floor(Math.random() * (100 - 80)) + 80,
          fifth: Math.floor(Math.random() * (100 - 80)) + 80,
          sixth: Math.floor(Math.random() * (100 - 80)) + 80,
          quarterTwoRoutine: Math.floor(Math.random() * (100 - 80)) + 80,
          quarterTwoFinal: Math.floor(Math.random() * (100 - 80)) + 80,
          seventh: Math.floor(Math.random() * (100 - 80)) + 80,
          eighth: Math.floor(Math.random() * (100 - 80)) + 80,
          ninth: Math.floor(Math.random() * (100 - 80)) + 80,
          quarterThrRoutine: Math.floor(Math.random() * (100 - 80)) + 80,
          quarterThrFinal: Math.floor(Math.random() * (100 - 80)) + 80,
          tenth: Math.floor(Math.random() * (100 - 80)) + 80,
          eleventh: Math.floor(Math.random() * (100 - 80)) + 80,
          twelfth: Math.floor(Math.random() * (100 - 80)) + 80,
          quarterFouRoutine: Math.floor(Math.random() * (100 - 80)) + 80,
          quarterFouFinal: Math.floor(Math.random() * (100 - 80)) + 80,
          total: 92,
        };
      });
    };
    onMounted(() => {
      getTableData();
    });
    return {
      value: valueRef,
      panels: panelsRef,
      cardData,
      ...toRefs(right),
      ...toRefs(state),
      changeRight,
      getInfo,
      getFlag,
      handleUpdateValue,
      getCardList,
      getTableData,
    };
  },
};
</script>

<style lang="less" scoped>
.evaluation {
  position: relative;
  .tabBox {
    width: 95%;
  }

  .right {
    position: absolute;
    top: 20px;
    right: 0;
    li {
      padding: 10px;
      width: 30px;
      height: 130px;
      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;
      }
    }
  }
}
</style>