<template>
  <div class="screeningSearch">
    <div class="top">
      <div class="keyword">
        <div class="label">关键词：</div>
        <Input
          v-model="keyword"
          placeholder="请输入医联体/姓名/身份证"
          clearable
          style="width: 224px"
        />
        <Button class="btn">搜索</Button>
      </div>
      <div
        class="tobeModified"
        :style="{ backgroundColor: modifiedFlag ? '#4E68FF' : '#fff' }"
        @click="changeModified"
      >
        <Icon
          :style="{ color: modifiedFlag ? '#fff' : '#d9d9d9' }"
          type="md-checkmark"
          class="check"
        />
        <span :style="{ color: modifiedFlag ? '#fff' : '#000' }"
          >待修改（{{ tobeModified }}）</span
        >
      </div>
    </div>
    <div class="bot">
      <custom-table
        ref="customTable"
        :table-header="tableHeader"
        :table-data="tableData"
        :page="page"
        @changePage="changePage"
      ></custom-table>
    </div>
  </div>
</template>
<script>
import CustomTable from "@/components/CustomTable"
export default {
  components: {
    CustomTable,
  },
  data() {
    return {
      keyword: "",
      modifiedFlag: false,
      tobeModified: 20,
      tableHeader: [
        {
          title: "医联体",
          key: "name",
          align: "center",
          width: 100,
        },
        {
          title: "姓名",
          width: 100,
          key: "1",
          align: "center",
        },
        {
          title: "性别",
          width: 100,
          key: "2",
          align: "center",
        },
        {
          title: "身份证",
          width: 160,
          key: "3",
          align: "center",
        },
        {
          title: "年龄",
          width: 100,
          align: "center",
        },
        {
          title: "筛查时间",
          width: 100,
          key: "5",
          align: "center",
        },
        {
          title: "风险评估结果",
          width: 180,
          key: "6",
          align: "center",
        },
        {
          title: "上次随访时间",
          width: 180,
          key: "7",
          align: "center",
        },
        {
          title: "筛查审核状态",
          width: 180,
          key: "8",
          align: "center",
        },
        {
          title: "操作",
          width: 140,
          key: "action",
          fixed: "right",
          ellipsis: true,
          align: "center",
          render: (h, params) => {
            return h(
              "a",
              {
                on: {
                  click: () => {
                    console.log(params.row)
                  },
                },
              },
              "修改"
            )
          },
        },
      ],
      tableData: [
        {
          name: "1",
          1: 2,
        },
      ],
      page: {
        current: 1,
        size: 10,
        total: 20,
      },
    }
  },
  watch: {},
  mounted() {},
  methods: {
    changeModified() {
      this.modifiedFlag = !this.modifiedFlag
    },
    setSelectedIndex(i) {
      console.log(this.selectedIndex)
      this.selectedIndex = i
      sessionStorage.setItem("homeSelectedIndex", this.selectedIndex)
    },
    changePage(v) {
      this.page[v.type] = v.value
      console.log(this.page)
      this.$refs.customTable.loading = false
    },
  },
}
</script>
<style lang="scss" scoped>
.screeningSearch {
  .top {
    width: 100%;
    height: 72px;
    padding: 0 116px 0 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f6f6f6;
    .keyword {
      display: flex;
      align-items: center;
      .btn {
        width: 80px;
        height: 32px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #4e68ff;
        font-size: 14px;
        color: #4e68ff;
        margin-left: 40px;
      }
    }
    .tobeModified {
      // width: 134px;
      height: 32px;
      background: #ffffff;
      border-radius: 4px;
      padding: 16px 8px;
      border: 1px solid #d9d9d9;
      display: flex;
      align-items: center;
      cursor: pointer;
      .check {
        font-size: 18px;
        margin-right: 8px;
      }
      span {
        font-size: 16px;
        font-family: AlibabaPuHuiTiR;
        color: #333333;
      }
    }
  }
  .bot {
    padding: 0 24px;
  }
}
</style>
