<template>
  <div class="app-container home" ref="layout">
    <!-- 搜索条件 -->
    <div ref="topform" class="form">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="120px"
      >
        <el-form-item label="任务时间" prop="startTime">
          <el-date-picker
            v-model="dischargeTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            style="width: 220px"
            value-format="yyyy-MM-dd"
            end-placeholder="结束日期"
            @change="changeTime"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="模板名称" prop="patientPhone">
          <el-input
            v-model="queryParams.patientPhone"
            placeholder="请输入模板名称"
            clearable
            @keyup.enter.native="handleQuery"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="出院/就诊时间" prop="startTime">
          <el-date-picker
            v-model="dischargeTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            style="width: 220px"
            value-format="yyyy-MM-dd"
            end-placeholder="结束日期"
            @change="changeTime"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 底部 -->
    <div
      ref="table"
      :style="{ 'max-height': maxTableHeight + 'px' }"
      class="bottomsstics"
    >
      <!-- 左侧 -->
      <div class="left">
        <div>
          <div
            v-for="(item, index) in NameList"
            :key="index"
            class="itemlist"
            :class="itemid == item.id ? 'allactive' : 'all'"
            @click="itemdata(item)"
          >
            <div class="title">{{ item.name }}</div>
            <div class="times">时间:{{ item.date }}</div>
            <div class="times">填写率:{{ item.totle }}%</div>
            <div class="progress">
              <el-progress :percentage="50" :show-text="false"></el-progress>
              <span>12/45</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <div class="righttitle">{{newname}}    {{time}} </div>
        <div class="tabledata">
          <div class="toptitle">第1题:请问您吸烟吗?【单选题】</div>
          <div ref="table" class="tables">
            <el-table
              :max-height="maxTableHeight"
              v-loading="loading"
              :data="tableData"
            >
              <el-table-column label="选项" align="center" prop="name" />
              <el-table-column label="人数" align="center" prop="date" />
              <el-table-column label="比例" align="center" prop="date">
                <span> <el-progress :percentage="50"></el-progress></span>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleUpdate(scope.row)"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="tabledata">
          <div class="toptitle">第1题:请问您吸烟吗?【单选题】</div>
          <div ref="table" class="tables">
            <el-table
              :max-height="maxTableHeight"
              v-loading="loading"
              :data="tableData"
            >
              <el-table-column label="选项" align="center" prop="name" />
              <el-table-column label="人数" align="center" prop="date" />
              <el-table-column label="比例" align="center" prop="date">
                <span> <el-progress :percentage="50"></el-progress></span>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleUpdate(scope.row)"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="tabledata">
          <div class="toptitle">第1题:请问您吸烟吗?【单选题】</div>
          <div ref="table" class="tables">
            <el-table
              :max-height="maxTableHeight"
              v-loading="loading"
              :data="tableData"
            >
              <el-table-column label="选项" align="center" prop="name" />
              <el-table-column label="人数" align="center" prop="date" />
              <el-table-column label="比例" align="center" prop="date">
                <span> <el-progress :percentage="50"></el-progress></span>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleUpdate(scope.row)"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TaskStatistics",
  data() {
    return {
      maxTableHeight: undefined,
      // 任务时间
      dischargeTime: [],
      loading: false,
      newname:'',//标题
      time:'',//时间
      NameList: [
        {
          name: '预估病情',
          date: '2016-05-02',
          totle: 6,
          id: 1,
        }, {
          name: '烟草依赖评估量表',
          date: '2016-05-02',
          totle: 7,
          id: 2,

        },
        {
          name: '疾病恢复情况随访问卷',

          date: '2016-05-02',
          totle: 8,
          id: 3,

        }

      ],
      //   列表、
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      itemid: "",
      id: 1,
      queryParams: {

      },

    }
  },
  created() {
  },
  mounted() {
    this.getMaxTableHeight()
    this.screenChange()
  },
  methods: {
    // 查看
    handleUpdate(row) {
      this.$router.push({
        path: "/statisticalAnalysis/datialdata",
        query: {
          path: "/statisticalAnalysis/TaskStatistics",
          //   sn: 11111,
          //   patientName: row.patientName ? row.patientName : '',
          //   departmentId: row.departmentId ? row.departmentId : '',
          //   departmentName: row.departmentName ? row.departmentName : '',
        },
      });

    },
    // 左侧点击
    itemdata(item) {
      console.log(item, '9999')
      this.itemid = item.id
      this.newname=item.name
      this.time=item.date
    },
    resetQuery() { },
    handleQuery() { },
    changeTime() { },
    // 获取表格最高高度
    getMaxTableHeight() {
      const windowInnerHeight = window.innerHeight // 屏幕可视高度
      const formDiv = this.$refs.topform
      this.maxTableHeight = windowInnerHeight - 104 - this.getBoxHeight(formDiv)
    },
    // 屏幕resize监听
    screenChange() {
      // 屏幕resize监听事件：一旦屏幕宽高发生变化，就会执行resize
      window.addEventListener('resize', this.getMaxTableHeight, true)
      // 将屏幕监听事件移除
      // 这步是必须的。离开页面时不移除，再返回，或者进入到别的有相同元素的页面会报错
      // 或者将这里的方法直接写在beforeDestroy函数中也可以
      this.$once('hook:beforeDestroy', () => {
        window.removeEventListener('resize', this.getMaxTableHeight, true)
      })
    },

  }

}
</script>

<style scoped lang="scss">
::v-deep .el-progress {
  width: 64%;
  display: inline-block;
}
.app-container {
  padding: 0 !important;
}
.app-container {
  background: #f1f3f5;
  width: 100%;
  padding: 20px 20px 20px 20px;
}
.home {
  .form {
    width: 98%;
    margin: 10px auto;
    padding: 13px 0 0 0;
    background-color: #fff !important;
  }
  .bottomsstics {
    width: 98%;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    display: flex;
    justify-content: space-around;
    .left {
      height: 100%;
      width: 18%;
      background: #fff;
      overflow-y: auto;
      .allactive {
        width: 100%;
        background: #e8f4ff;
      }
      .all {
        width: 100%;
        margin: 0 auto;
        height: 170px;
        border-bottom: 1px solid #dcdfe6;
      }
      .itemlist {
        // width: 94%;
        margin: 0 auto;
        height: 170px;
        border-bottom: 1px solid #dcdfe6;

        .title {
          font-size: 19px;
          font-weight: 600;
          color: black;
          padding: 20px 0 10px 30px;
        }
        .times {
          padding: 0px 0 10px 30px;
          font-size: 16px;
          color: #aaacb2;
        }
        .progress {
          //   width: 70%;
          padding: 0px 0 10px 30px;
        }
        span {
          margin-left: 17px;
          color: #aaacb2;
        }
      }
    }
    .right {
      width: 100%;
      height: 100%;
      background: #fff;
      margin-left: 4px;
      overflow-y: auto;
      .righttitle {
        font-size: 19px;
        font-weight: 600;
        color: black;
        padding: 20px 0 10px 30px;
      }
      .tabledata {
        .tables {
          margin: 0 auto;
          width: 97%;
        }
        .toptitle {
          font-size: 18px;
          font-weight: 600;
          color: black;
          padding: 20px 0 15px 30px;
        }
      }
    }
  }
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;
  overflow-y: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>