<template>
  <!-- 随访查询 -->
  <div class="screeningSearch">
    <div v-show="!isDetail && !isEdit">
      <div class="top">
        <form-components
          ref="form"
          :forms="formList"
          @handleSearch="onClickSearch"
        ></form-components>
      </div>
      <div class="bot">
        <el-table-self
          ref="table"
          :table-data="tableData"
          :columns="columns"
          :header-class="'newHeader'"
          :list-loading="listLoading"
          :current-page="pageIndex"
          :total-count="total"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          @pageSizeChange="handleSizeChange"
          @currentPageChange="handleCurrentChange"
          :sortChange="sortChange"
        />
      </div>
    </div>
    <div v-show="!isEdit">
      <FollowUpDetail
        :currentRow="currentRow"
        @handleEdit="handleEdit"
        ref="follow"
        v-if="isDetail"
        @back="back"
      ></FollowUpDetail>
    </div>
    <followupentry v-if="isEdit" @changeShow="changeShow"></followupentry>
  </div>
</template>
<script>
import FormComponents from "@/components/FormComponents"
import paginationMixin from "@/components/TabComponents/mixin"
import searchMixin from "../searchMixin"
import { getCurrentFormByType } from "@/api/coop-group.js"
import { getFollowSearch } from "@/api/followup"
import FollowUpDetail from "./FollowUpDetail.vue"
import followupentry from "../followupentry"
export default {
  components: {
    FormComponents,
    FollowUpDetail,
    followupentry,
  },
  mixins: [paginationMixin, searchMixin],
  data() {
    return {
      isDetail: false,
      isEdit: false,
      followId: "",
      listLoading: false,
      keyword: "",
      modifiedFlag: false,
      columns: [
        {
          label: "医联体",
          minWidth: 120,
          value: "unionName",
          formatter: (row) => {
            return row.unionName ? row.unionName : "--"
          },
          sortable: "custom",
        },
        {
          label: "姓名",
          minWidth: 120,
          formatter: (row) => {
            return row.name ? row.name : "--"
          },
          value: "name",
          sortable: "custom",
        },
        {
          label: "性别",
          minWidth: 80,
          value: "sex",
          formatter: (row) => {
            return this.$handle.formatDicList(
              this.dictMap["d-sex"],
              row.sex + ""
            )
          },
          sortable: "custom",
        },
        {
          label: "身份证",
          minWidth: 120,
          value: "idCard",
          formatter: (row) => {
            return row.idCard ? row.idCard : "--"
          },
          sortable: "custom",
        },
        {
          label: "年龄",
          minWidth: 120,
          value: "age",
          formatter: (row) => {
            return row.age ? row.age : "--"
          },
          sortable: "custom",
        },
        {
          label: "筛查时间",
          minWidth: 180,
          value: "screeningTime",
          formatter: (row) => {
            return row.screeningTime ? row.screeningTime : "--"
          },
          sortable: "custom",
        },
        {
          label: "审核状态",
          value: "checkStatus",
          minWidth: 120,
          formatter: (row) => {
            return this.$handle.formatDicList(
              this.dictMap["checkStatus"],
              String(row.checkStatus)
            )
          },
          sortable: "custom",
        },
        {
          label: "风险评估结果",
          minWidth: 130,
          value: "riskRank",
          formatter: (row) => {
            let riskRank = {
              low: "低危",
              medium: "中危",
              high: "高危",
            }
            return row.riskRank ? riskRank[row.riskRank] : "--"
          },
          sortable: "custom",
        },
        {
          label: "上次随访时间",
          value: "followTime",
          minWidth: 130,
          formatter: (row) => {
            return row.followTime ? row.followTime : "--"
          },
          sortable: "custom",
        },
        {
          label: "随访进度",
          value: "followBatch",
          minWidth: 120,
          formatter: ({ followBatch }) => {
            return followBatch
              ? `第${this.$handle.toChineseNumber(followBatch)}次随访`
              : "筛查"
          },
          sortable: "custom",
        },
        {
          label: "操作",
          width: 220,
          fixed: "right",
          operType: "button",
          operations: [
            {
              isIndex: true,
              func: this.handleDetail,
              formatter(row) {
                return {
                  label: "查看",
                  type: "text",
                }
              },
            },
            {
              isIndex: true,
              func: this.handleEdit,
              formatter(row) {
                return {
                  label: "修改",
                  type: "text",
                }
              },
              isHidden({ checkStatus, followBatch }) {
                return (
                  checkStatus === 3 || checkStatus === 4 || followBatch === 0
                )
              },
            },
          ],
        },
      ],
      tableData: [],
      formList: [
        {
          type: "daterange",
          label: "筛查时间",
          prop: "ScreeningTime",
          placeholder: "请选择时间",
          valueFormat: "yyyy-MM-dd",
        },
        {
          type: "select",
          label: "随访审核状态",
          prop: "checkStatus",
          trans: "checkStatus",
          placeholder: "请选择随访状态",
          rules: [],
          opts: [],
        },
        {
          type: "select",
          label: "随访进度",
          prop: "followBatch",
          trans: "follow_type",
          placeholder: "请选择随访进度",
          rules: [],
          opts: [],
        },
        {
          type: "select",
          label: "计划随访时间",
          prop: "nextFollowTime",
          trans: "next_follow_time",
          placeholder: "请选择计划随访时间",
          rules: [],
          opts: [],
        },
        {
          type: "input",
          label: "姓名",
          prop: "name",
          placeholder: "请输入姓名",
          rules: [],
        },
        {
          type: "input",
          label: "身份证",
          prop: "idCard",
          placeholder: "请输入身份证",
          rules: [],
        },
        {
          type: "input",
          label: "医联体",
          prop: "unionName",
          placeholder: "请输入医联体",
          rules: [],
        },
        {
          label: "筛查场景",
          type: "select",
          prop: "patientFrom",
          opts: [
            { label: "社区筛查", value: "1" },
            { label: "医院筛查", value: "2" },
            { label: "体检筛查", value: "3" },
          ],
        },
        {
          type: "btn",
          list: [
            {
              btnType: "button",
              type: "",
              style: {
                width: "80px",
                height: "32px",
                borderRadius: "4px",
                fontSize: "14px",
                marginLeft: "40px",
              },
              btnText: "查询",
              func: () => {
                this.onClickSearch()
              },
            },
            // {
            //   btnType: "tobeModified",
            //   tobeModified: 20,
            // },
          ],
        },
      ],
      cacheForm: {},
      currentRow: {},
    }
  },
  computed: {
    checkStatus() {
      return this.$route.query.checkStatus || ""
    },
  },
  watch: {
    pageSize(val) {
      sessionStorage.setItem("followQuery-pageSize", val)
    },
    //当前页
    pageIndex(val) {
      sessionStorage.setItem("followQuery-pageIndex", val)
    },
    checkStatus(val) {
      if (val) {
        this.$refs.form.initforms(
          {
            checkStatus: val,
          },
          true
        )
        // this.handleSearch()
      }
    },
  },
  created() {
    this.initSearchForm()
  },
  mounted() {
    const followId = this.$route.query.followId
    const isEdit = this.$route.query.model === "edit"
    // 从随访录入跳转过来显示处理
    if (followId) {
      this.isEdit = isEdit
      this.isDetail = !isEdit
      if (this.isDetail) {
        this.handleDetail(this.$route.query)
      }
    }
    this.pageSize = Number(sessionStorage.getItem("followQuery-pageSize")) || 10
    this.pageIndex =
      Number(sessionStorage.getItem("followQuery-pageIndex")) || 1
    this.getCurrentFormByType(2)
  },
  methods: {
    changeShow(isRefresh) {
      let query = {}
      if (this.isDetail) {
        const { patientId, followId, followBatch } = this.$route.query
        query = {
          patientId,
          followId,
          followBatch,
        }
      }
      if (isRefresh) {
        if (this.isDetail) {
          this.$refs.follow.refresh()
        }
        this.handleSearch()
      }
      this.$router.replace({ path: "/followupquery", query })
      this.isEdit = false
    },
    back() {
      this.isDetail = false
      const followId = this.$route.query.followId
      if (followId) {
        this.$router.replace({ path: "/followupquery", query: {} })
      }
    },
    changeModified() {
      this.modifiedFlag = !this.modifiedFlag
    },
    setSelectedIndex(i) {
      this.selectedIndex = i
      sessionStorage.setItem("homeSelectedIndex", this.selectedIndex)
    },
    handleSizeChange(v) {
      console.log(v)
    },
    handleEdit(data, i, index) {
      this.isEdit = true
      this.$router.replace({
        path: "/followupquery",
        query: {
          patientId: data.patientId,
          followId: data.followId,
          followBatch: data.followBatch,
          model: "edit",
          getData: 1,
          formType: 2,
        },
      })
    },
    handleDetail(row) {
      this.isDetail = true
      this.currentRow = row
      this.$router.replace({
        path: "/followupquery",
        query: {
          patientId: row.patientId,
          followId: row.followId,
          followBatch: row.followBatch,
        },
      })
    },
    onClickSearch() {
      this.pageIndex = 1
      this.handleSearch()
    },
    sortChange({ prop, order }) {
      const sort = order ? (order === "ascending" ? "asc" : "desc") : ""
      const sortField = order ? prop : ""
      this.handleSearch({ sortField, sort })
    },
    async handleSearch(form = {}) {
      this.listLoading = true
      if (this.checkStatus) {
        this.$refs.form.form.checkStatus = this.checkStatus
      }
      let params = {
        pageSize: this.pageSize,
        pageNum: this.pageIndex,
        formId: this.formId,
        ...this.$refs.form.form,
        ...form,
      }
      // params = Object.assign(this.cacheForm, params)
      for (let key in params) {
        if (params[key] !== "" && params[key] !== null) {
          if (key.includes("Time") && params[key]) {
            params["start" + key] = params[key][0]
            params["end" + key] = params[key][1]
            delete params.ScreeningTime
          } else {
            params[key] = params[key]
          }
        }
      }
      let res = await getFollowSearch(params)
      if (res.code == 1) {
        //分页内容
        const d = res.data
        this.total = d.total
        this.tableData = d["records"]
      }
      this.$router.push({ query: {} })
      this.listLoading = false
    },
    //查询表单枚举值字典
    initSearchForm() {
      this.formList.forEach((item, index) => {
        if (item.trans) {
          if (!item["opts"]) {
            item["opts"] = []
          } else {
            item["opts"] = this.dictMap[item.trans]
          }
        }
      })
      this.$forceUpdate()
    },
    //获取随访表单类型
    getCurrentFormByType(type) {
      getCurrentFormByType({
        type,
        groupId: this.$store.state.user.group.groupId || "",
      }).then((res) => {
        if (res.code === 1) {
          this.formId = res.data[0].id
          this.handleSearch()
        }
      })
    },
  },
}
</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;
  }
  .bot {
    padding: 0 24px;
  }
}
</style>