import { defineComponent, ref, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Select, Slider } from "ant-design-vue";
import { RoadReport, ManiScore } from "../../../store/roadUnit/types";
import api from "@/http/api_sz_demo";

import backIcon from "@/assets/img/roadUnit/back.svg";
import arrowIcon from "@/assets/img/roadUnit/arrow.svg";
import style from "@/assets/style/RoadUnit/roadConfig.module.less";

import { useStore } from "@/hook/useStore";
import useRoadUnitStore from "@/store/roadUnit";

const { Option } = Select;

export default defineComponent({
  components: {
    Select,
    Option,
    Slider,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();

    /**
     * 选中的道路名称
     * 区域通行车辆、车次、车速分日表
     */
    const { road: roadName, areaInfoByDate } = useStore(useRoadUnitStore);

    /**
     * 道路列表
     */
    const roadList = computed(() =>
      areaInfoByDate.value.map((road) => {
        return road.road_name;
      })
    );

    /**
     * 当前配置初始值
     */
    const currentRoadReport = ref<RoadReport>({
      curMeanVel: 0,
      curPassVehNum: 0,
      curPassVehOcc: 0,
      curScore: 0,
    });

    /**
     * 通行分slider marker
     */
    const marks = computed<Record<number, number>>(() => {
      return {
        0: 0,
        [currentRoadReport.value.curScore]: currentRoadReport.value.curScore,
        100: 100,
      };
    });

    /**
     * 获取道路当前通行分
     */
    const getCurrentRoadReport = async () => {
      try {
        const res = (await api.roadUnit.getRoadReport(roadName.value)) as any;
        currentRoadReport.value = res.data as RoadReport;
        // 调整一栏同步至当前通行分
        trafficReport.value = currentRoadReport.value.curScore;
        maniReportScore.value.maniMeanVel = currentRoadReport.value.curMeanVel;
        maniReportScore.value.maniVehNum = currentRoadReport.value.curPassVehNum;
        maniReportScore.value.maniVehOcc = currentRoadReport.value.curPassVehOcc;
      } catch (err) {
        console.error(err);
      }
    };
    getCurrentRoadReport();

    /**
     * 通行分调整值
     */
    const trafficReport = ref<number>(0);

    /**
     * 调整后的配置
     */
    const initialManiReport = {
      maniMeanVel: 0,
      maniMeanVelPer: 0,
      maniVehNum: 0,
      maniVehNumPer: 0,
      maniVehOcc: 0,
      maniVehOccPer: 0,
    };
    const maniReportScore = ref<ManiScore>(initialManiReport);

    const handleChange = (e: number) => {
      trafficReport.value = e;
    };
    /**
     * 通行分调整slider change
     */
    const handleAfterChange = async () => {
      try {
        const res = (await api.roadUnit.getRoadScore(roadName.value, trafficReport.value)) as any;
        maniReportScore.value = res.data;
      } catch (e) {
        console.error(e);
      }
    };

    /**
     * 道路切换
     */
    const roadChange = (e: any) => {
      router.replace({
        path: route.path,
        query: {
          ...route.query,
          road: e,
        },
      });
    };

    /**
     * 监听道路切换
     */
    watch(roadName, () => {
      maniReportScore.value = initialManiReport;
      getCurrentRoadReport();
    });

    /**
     * 百分比filter
     */
    const perFilter = (per: number) => {
      return per ? per + "%" : "";
    };

    /**
     * 百分比class，决定颜色
     */
    const classFilter = (per: number) => {
      return per > 0 ? style.up : style.down;
    };

    /**
     * 返回道路信息页面
     */
    const goBack = () => {
      const { mode, area, time, road } = route.query;
      router.replace({
        path: route.path,
        query: { mode, area, time, road },
      });
    };

    return () => (
      <div class={style.config}>
        <div class={style.backButton} onClick={() => goBack()}>
          <img src={backIcon} />
          <span>返回</span>
        </div>
        <div class={style.headline}>道路通行分设置</div>
        <div class={style.roadSelect}>
          <Select value={roadName.value} onChange={(e) => roadChange(e)}>
            {roadList.value.map((item, index) => (
              <Option key={index} value={item}>
                {item}
              </Option>
            ))}
          </Select>
        </div>
        <div class={style.controlPanel}>
          <div class={style.item}>
            <div>
              <div class={style.title}>当前通行分</div>
              <div class={style.content}>
                <span class={style.count}>{currentRoadReport.value.curScore}</span>
              </div>
            </div>
            <img src={arrowIcon} />
            <div>
              <div class={style.title}>调整为</div>
              <div class={style.content}>
                <span class={style.count}>{trafficReport.value}</span>
              </div>
            </div>
          </div>
          <div class={style.item}>
            <Slider
              marks={marks.value}
              value={trafficReport.value}
              onChange={(e: number) => handleChange(e)}
              onAfterChange={() => handleAfterChange()}
            />
          </div>
          <div class={style.item}>
            <div class={style.diff}>
              <div class={style.title}>当前可通行车辆</div>
              <div class={style.content}>
                <span class={style.count}>{currentRoadReport.value.curPassVehNum}</span>
                <span class={style.unit}>辆</span>
              </div>
            </div>
            <img src={arrowIcon} />
            <div class={style.diff}>
              <div class={style.title}>调整后可通行车辆</div>
              <div class={style.content}>
                <span class={style.count}>{maniReportScore.value.maniVehNum}</span>
                <span class={style.unit}>辆</span>
              </div>
              <div class={[style.percent, classFilter(maniReportScore.value.maniVehNumPer)].join(" ")}>
                {perFilter(maniReportScore.value.maniVehNumPer)}
              </div>
            </div>
          </div>
          <div class={style.item}>
            <div class={style.diff}>
              <div class={style.title}>每日通行车次</div>
              <div class={style.content}>
                <span class={style.count}>{currentRoadReport.value.curPassVehOcc}</span>
                <span class={style.unit}>车次</span>
              </div>
            </div>
            <img src={arrowIcon} />
            <div class={style.diff}>
              <div class={style.title}>预计每日通行车次</div>
              <div class={style.content}>
                <span class={style.count}>{maniReportScore.value.maniVehOcc}</span>
                <span class={style.unit}>车次</span>
              </div>
              <div class={[style.percent, classFilter(maniReportScore.value.maniVehOccPer)].join(" ")}>
                {perFilter(maniReportScore.value.maniVehOccPer)}
              </div>
            </div>
          </div>
          <div class={style.item}>
            <div class={style.diff}>
              <div class={style.title}>当前平均车速</div>
              <div class={style.content}>
                <span class={style.count}>{currentRoadReport.value.curMeanVel}</span>
                <span class={style.unit}>km/h</span>
              </div>
            </div>
            <img src={arrowIcon} />
            <div class={style.diff}>
              <div class={style.title}>预计平均车速</div>
              <div class={style.content}>
                <span class={style.count}>{maniReportScore.value.maniMeanVel}</span>
                <span class={style.unit}>km/h</span>
              </div>
              <div class={[style.percent, classFilter(maniReportScore.value.maniMeanVelPer)].join(" ")}>
                {perFilter(maniReportScore.value.maniMeanVelPer)}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  },
});