<template>
  <div class="page_weightDetail">
    <van-sticky>
      <div class="weightDetailTitle">
        <i class="iconfont icon-zuojiantou jiantou"></i>
        <span class="titleName" @click="show = true">
          你你你
          <van-icon name="arrow-down" class="arrow" />
        </span>
      </div>

      <div class="optionsBox">
        <div class="optionsOne" @click="stateShow = true">
          <div style="display: flex;align-items: center;">
            {{ state }}
            <van-icon name="arrow-down" />
          </div>
        </div>
        <div class="toolOne" @click="startShow = true">
          <div style="display: flex;align-items: center;">
            {{ startTime }}
            <van-icon name="arrow-down" />
          </div>
        </div>
        <div class="toolOne" @click="endShow = true">
          <div style="display: flex;align-items: center;">
            {{ endTime }}
            <van-icon name="arrow-down" />
          </div>
        </div>
      </div>
    </van-sticky>

    <div class="chart1">统计图</div>
    <div>
      <bar-chart :options="options"></bar-chart>
    </div>
    <div class="chart1">统计表</div>
    <div>
      <el-table :data="tableData" style="width: 100%" height="500" v-loadmore="loadMore">
        <el-table-column fixed prop="name" label="姓名" width="70"></el-table-column>
        <el-table-column prop="date" label="检查日期" width="100"></el-table-column>
        <el-table-column prop="province" label="省份" width="120"></el-table-column>
        <el-table-column prop="city" label="市区" width="120"></el-table-column>
        <el-table-column prop="address" label="地址" width="300"></el-table-column>
        <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="70">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <van-popup v-model="show" position="top" :style="{ height: '100%' }">
        <div style="padding:10px;font-size:1.25rem;text-align:right" @click="show = false">
          <van-icon name="cross" />
        </div>
        <van-search
          class="doctorAdviceSearch"
          v-model="value"
          placeholder="请输入病人名字"
          @cancel="onCancel"
          @search="onSearch"
        />

        <van-index-bar class="indexBar" sticky highlight-color="#fb6463">
          <div v-for="(item, index) in firstNameTwo" :key="index" :index="index">
            <van-index-anchor :index="index">
              <!-- <span class="indexWord">{{ index }}</span> -->
            </van-index-anchor>
            <van-cell
              @click="chooseCity(citem)"
              v-for="(citem, cindex) in item"
              :key="cindex"
              :title="citem"
            />
          </div>
        </van-index-bar>
      </van-popup>
      <van-popup v-model="startShow" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="getstartTime"
          @cancel="startShow = false"
        />
      </van-popup>
      <van-popup v-model="endShow" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="getstartTime2"
          @cancel="endShow = false"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import BarChart from '../dqc/components/BarChart'
export default {
  components: {
    BarChart
  },
  data () {
    return {
      state: '体重统计',
      show: false,
      startShow: false,
      endShow: false,
      currentDate: new Date(),
      startTime: '请选择',
      endTime: '请选择',
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2025, 10, 1),
      options: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['次数'],
          left: 0
        },
        xAxis: {
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9']
        },
        yAxis: {
          axisLabel: {
            formatter: '{value} %'
          },
          show: false
        },
        series: [
          {
            name: '次数',
            type: 'line',
            data: [
              '78.57',
              '50',
              '80',
              '93.33',
              '92.86',
              '100',
              '12',
              '77',
              '37'
            ],
            barWidth: 30,
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: '{c}次'
              }
            },
            // 配置样式
            itemStyle: {
              // 通常情况下：

              // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              normal: {
                color: function (params) {
                  // 我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                  var colorList = [
                    ['#A9E0F3', '#9FBDFC'],

                    ['#FFD7C0', '#FF9994']
                  ]

                  var index = params.dataIndex
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex % colorList.length
                  }

                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: colorList[index][0] },
                    // { offset: 0.5, color: colorList[index][1] },
                    { offset: 1, color: colorList[index][1] }
                  ])
                },
                barBorderRadius: [5, 5, 0, 0] // 柱状角成椭圆形
              },

              // 鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          {
            name: '次数',
            type: 'line',
            data: ['10', '20', '30', '40.33', '52.86', '60', '70', '87', '97'],
            barWidth: 30,
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: '{c}次'
              }
            },
            // 配置样式
            itemStyle: {
              // 通常情况下：

              // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              normal: {
                color: function (params) {
                  // 我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                  var colorList = [
                    ['#A9E0F3', '#9FBDFC'],

                    ['#FFD7C0', '#FF9994']
                  ]

                  var index = params.dataIndex
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex % colorList.length
                  }

                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: colorList[index][0] },
                    // { offset: 0.5, color: colorList[index][1] },
                    { offset: 1, color: colorList[index][1] }
                  ])
                },
                barBorderRadius: [5, 5, 0, 0] // 柱状角成椭圆形
              },

              // 鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }
      ]
    }
  },
  methods: {
    getstartTime (value) {
      this.page = 1
      let year = value.getFullYear()
      let month = value.getMonth() + 1
      let day = value.getDate()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }

      this.startTime = `${year}-${month}-${day}`

      this.startShow = false
    },
    getstartTime2 (value) {
      this.page = 1
      let year = value.getFullYear()
      let month = value.getMonth() + 1
      let day = value.getDate()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }

      this.endTime = `${year}-${month}-${day}`

      this.endShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
.page_weightDetail {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  .weightDetailTitle {
    background: #fff;
    padding: 0 1.125rem;
    height: 3.125rem;
    display: flex;
    align-items: center;
  }
  .jiantou {
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 7rem;
  }
  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    .arrow {
      margin-left: 0.375rem;
    }
  }
  .optionsBox {
    display: flex;
    height: 3.125rem;
    align-items: center;
    width: 37.5rem;
    background: #fff;
    .optionsOne {
      //   max-width: 8.75rem;
      //   min-width: 6.25rem;
      padding: 0 0.75rem;
      height: 1.875rem;
      background: rgba(246, 246, 246, 1);
      border-radius: 5px;
      text-align: center;
      font-size: 0.8125rem;
      color: #8d8d8d;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-left: 0.8125rem;
    }
    .toolOne {
      width: 6.25rem;
      height: 1.875rem;
      background: rgba(246, 246, 246, 1);
      border-radius: 5px;
      text-align: center;
      font-size: 0.8125rem;
      color: #8d8d8d;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-left: 0.8125rem;
    }
  }
  .chart1 {
    font-size: 1rem;
    font-weight: bold;
    color: #000;
    margin: 0.625rem 0 0.625rem 0.8125rem;
  }
  .chart {
    font-size: 1rem;
    font-weight: bold;
    margin-left: 0.8125rem;
    color: #000;
  }
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>
<style lang="scss">
.page_weightDetail {
  .van-cell__value {
    display: flex;
    align-items: center;
  }
  .van-tabs__line {
    background-color: #5b98ff;
  }
}
</style>
