<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2023年3月19日 14:25:22
 */
import AnalysisChart1 from "@/pages/components/analysis/chart1.vue";
import AnalysisChart2 from "@/pages/components/analysis/chart2.vue";
import { onMounted, ref } from "vue";
import { $image, $response, $api } from "@/api";
import { onShow } from "@dcloudio/uni-app";
import { useStore } from "@/store";
const $store = useStore();

const $props = defineProps({
  id: {
    type: String,
    default: "",
  },
});

let type = ref(1);

const analysis_content = ref({
  title: "",
  result: "",
  name: "",
  value: "",
  date: "",
  content: "",
  table: {
    name: "",
    list: [],
  },
});
const chart1_option = ref({
  show: false,
  range: [],
  min: 0,
  max: 0,
});
const chart2_option = ref({
  show: false,
  data: [],
  min: 0,
  max: 0,
  unit: "",
});
onMounted(() => {
  GetGreySet();
  ReportAnalysis();
});
const date_active = ref(0);
const data_show = ref(false);
const ReportAnalysis = async () => {
  uni.showLoading({
    title: "加载中...",
  });
  const response = await $api("ReportAnalysis", {
    id_number: $store.getUser().id_number,
    id: $props.id,
  });
  $response(response, () => {
    uni.hideLoading();
    analysis_content.value = response.data.info;
    console.log(analysis_content.value);
    response.data.chart1_option.min = Number(response.data.chart1_option.min);
    response.data.chart1_option.max = Number(response.data.chart1_option.max);
    chart1_option.value = response.data.chart1_option;
    chart2_option.value = response.data.chart2_option;
    data_show.value = response.data.show;
    date_arr.value = response.data.date_list.map((item, key) => {
      if (response.data.date === item) {
        date_active.value = key;
      }
      return {
        label: item,
        value: item,
      };
    });
    uni.setNavigationBarTitle({
      title: analysis_content.value.title,
    });
  });
};

const chooseTypeClick = (status) => {
  if (type.value == status) return;
  type.value = status;
  // let date = $props.date || analysis_content.value.date;
  // uni.redirectTo({
  //   url: `/pages/main/analysis_content/analysis_content?hospital=${$props.hospital}&type=${type}&id=${$props.id}&id_number=${$props.id_number}&date=${date}`,
  // });
};

const date_arr = ref([]);
// const dateChange = (e) => {
//   let index = Number(e.detail.value);
//   let date = date_arr.value[index].value;
//   uni.redirectTo({
//     url: `/pages/main/analysis_content/analysis_content?hospital=${$props.hospital}&type=${$props.type}&id=${$props.id}&id_number=${$props.id_number}&date=${date}`,
//   });
// };
//设置灰度
const SysGreyType = ref(0);
const GetGreySet = () => {
  uni.getStorage({
    key: "SysGreytype",
    success: function (res) {
      console.log(res.data);
      if (res.data == 1) {
        SysGreyType.value = 1;
      }
    },
  });
};
</script>
<template>
  <view class="pt-12rpx px-20rpx box-border">
    <view
      v-if="data_show"
      class="info_wrapper"
      :class="SysGreyType == 1 ? 'grey' : ''"
    >
      <view v-if="chart1_option.show" class="info_chart_wrapper">
        <AnalysisChart1 :option="chart1_option"></AnalysisChart1>
      </view>
      <view class="info_content_wrapper">
        <view class="info_content_result_wrapper"
          >本次体检：{{ analysis_content.result }}</view
        >
        <view class="info_content_line_wrapper"></view>
        <view class="info_content_content_wrapper">
          <view>{{ analysis_content.name }}：{{ analysis_content.value }}</view>
          <view class="info_content_date_wrapper">
            <view>日期：</view>
            <!-- <picker
              v-if="date_arr.length"
              @change="dateChange"
              :value="date_active"
              :range="date_arr"
              range-key="label"
            >
					</picker> -->
            <view>{{ analysis_content.date }}</view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="data_show" class="table_wrapper">
      <view
        class="table_type_group_wrapper"
        :class="SysGreyType == 1 ? 'grey' : ''"
      >
        <view
          @click="chooseTypeClick(1)"
          class="table_type_group_item_wrapper"
          :class="type == 1 ? 'table_type_group_item_active_wrapper' : ''"
          >趋势图表</view
        >
        <view
          @click="chooseTypeClick(2)"
          class="table_type_group_item_wrapper"
          :class="type == 2 ? 'table_type_group_item_active_wrapper' : ''"
          >详细数据</view
        >
      </view>
      <view
        class="table_content_wrapper"
        :class="SysGreyType == 1 ? 'grey' : ''"
      >
        <AnalysisChart2
          :option="chart2_option"
          v-if="chart2_option.show && type === 1"
        ></AnalysisChart2>
        <view class="table_content_table_wrapper" v-if="type === 2">
          <!-- <view
            class="table_content_table_line_item_wrapper table_content_table_title_wrapper"
            >临床意义
          </view> -->
          <view class="table_content_table_line_wrapper">
            <view
              class="table_content_table_line_item_wrapper table_content_table_title_wrapper"
              >日期</view
            >
            <view
              class="table_content_table_line_item_wrapper table_content_table_line_center_wrapper table_content_table_title_wrapper"
            >
              {{ analysis_content.table?.name }}
            </view>
            <view
              class="table_content_table_line_item_wrapper table_content_table_title_wrapper"
              >评估</view
            >
          </view>
          <view
            class="table_content_table_line_wrapper"
            v-for="(i, k) in analysis_content?.table?.list"
            :key="k"
          >
            <view
              class="table_content_table_line_item_wrapper"
              :class="[
                !!(k % 2) ? '' : 'table_content_table_line_item_active_wrapper',
              ]"
              >{{ i.date }}
            </view>
            <view
              class="table_content_table_line_item_wrapper table_content_table_line_center_wrapper"
              :class="[
                !!(k % 2) ? '' : 'table_content_table_line_item_active_wrapper',
              ]"
              >{{ i.value }}</view
            >
            <view
              class="table_content_table_line_item_wrapper"
              :class="[
                !!(k % 2) ? '' : 'table_content_table_line_item_active_wrapper',
              ]"
              >{{ i.assess }}</view
            >
          </view>
        </view>
      </view>
    </view>
    <view
      class="w-180rpx rounded-r-full text-#0E0E0E text-25rpx px-40rpx center justify-start h-60rpx box-border bg-gradient-to-r from-#edf6f5 to-#bbdfe2 -sml-20rpx -ml-20rpx mt-25rpx"
    >
      临床意义
    </view>
    <view
      v-if="data_show"
      class="content_wrapper"
      :class="SysGreyType == 1 ? 'grey' : ''"
    >
      <view class="content_text_wrapper">
        <text v-html="analysis_content.content"></text>
      </view>
    </view>
  </view>
</template>
<style scoped>
.info_content_date_wrapper {
  display: flex;
  align-items: center;
}

.table_content_table_line_item_wrapper {
  width: 210rpx;
  text-align: center;
  height: 60rpx;
  font-size: 26rpx;
  font-weight: 500;
  color: #333333;
  line-height: 60rpx;
  margin-top: 10rpx;
}

.table_content_table_line_item_active_wrapper {
  background: #f1f5f8;
}

.table_content_table_title_wrapper {
  background: #efefef;
}

.table_content_table_line_center_wrapper {
  margin-left: 3rpx;
  margin-right: 3rpx;
}

.table_content_table_wrapper {
  margin-top: 45rpx;
}

.table_content_table_line_wrapper {
  display: flex;
  justify-content: center;
}

.table_type_group_item_wrapper {
  font-size: 28rpx;
  font-weight: normal;
  color: #757575;
  /* line-height: 68rpx; */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 212rpx;
}

.table_type_group_wrapper {
  width: 430rpx;
  height: 62rpx;
  background: #d0f3ee;
  border-radius: 8rpx;
  margin: 30rpx auto 0;
  border: #16c5a9 solid 3rpx;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.table_type_group_item_active_wrapper {
  background: #16c5a9;
  color: #ffffff;
}

.content_text_wrapper {
  font-size: 24rpx;
  font-weight: 500;
  color: #343434;
  line-height: 48rpx;
  padding: 15rpx 35rpx;
}

.info_content_content_wrapper {
  width: 318rpx;
  padding-bottom: 10rpx;
  background: #fff8ed;
  border-radius: 1rpx;
  margin-top: 9rpx;
  font-size: 26rpx;
  font-weight: 500;
  color: #444444;
  line-height: 50rpx;
  padding-top: 20rpx;
  padding-left: 12rpx;
}

.info_content_line_wrapper {
  width: 330rpx;
  height: 1rpx;
  background: #bfbfbf;
  border-radius: 1rpx;
  margin-top: 21rpx;
}

.info_content_result_wrapper {
  font-size: 30rpx;
  font-weight: 500;
  color: #d38014;
  line-height: 1;
  margin-left: 12rpx;
}

.info_content_wrapper {
  width: 330rpx;
  margin-left: 39rpx;
}

.info_chart_wrapper {
  width: 294rpx;
  height: 338rpx;
}

.content_wrapper {
  width: 100%;
  padding-bottom: 100rpx;
  background: #ffffff;
  box-shadow: 0px 1rpx 1rpx 0px rgba(2, 2, 4, 0.05);
  border-radius: 10rpx;
  margin-top: 15rpx;
}

.table_wrapper {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 1rpx 1rpx 0px rgba(2, 2, 4, 0.05);
  border-radius: 10rpx;
  margin-top: 15rpx;
  overflow: hidden;
  padding-bottom: 34rpx;
}

.info_wrapper {
  width: 100%;
  height: 375rpx;
  background: #ffffff;
  box-shadow: 0px 1rpx 1rpx 0px rgba(2, 2, 4, 0.05);
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.analysis_title_text_wrapper {
  color: #57c1b0;
  font-size: 28rpx;
  font-weight: bold;
  line-height: 1;
  margin-left: 18rpx;
}

.analysis_title_icon_wrapper image {
  width: 10rpx;
  height: 32rpx;
  display: block;
}

.analysis_title_icon_wrapper {
  width: 10rpx;
  height: 32rpx;
  margin-left: 31rpx;
}

.analysis_title_wrapper {
  height: 80rpx;
  display: flex;
  align-items: center;
}
.grey {
  filter: grayscale(100%);
}
</style>
