<template>
  <el-container>
    <el-main v-loading="pageLoading" class="transition-box">
      <!-- <i
        v-if="contrast"
        :class="asideShow ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
        :title="asideShow ? '收起' : '展开'"
        class="arrow"
        @click="asideShow = !asideShow"
      ></i>-->
      <el-empty v-if="isEmpty" description="暂无数据"></el-empty>
      <template v-if="!isEmpty">
        <!-- 多次记录 -->
        <el-row v-if="form.fillType === 1">
          <tags-scroll-bar
            v-if="repeatedlyList.length > 0"
            ref="tags"
            :tags-list="repeatedlyList"
            :props="{ label: 'time' }"
            :disabled="disabled"
            @change="changeRepeate"
            @add="handleAdd"
          ></tags-scroll-bar>
        </el-row>
        <el-row class="header">
          <!-- <template v-if="formData.percent.autoPercent">
            <span class="label">自动采集完整度：</span>
            <span class="value">{{ formData.percent.autoPercent }}%</span>
          </template>
          <template v-if="formData.percent.personalPercent">
            <span class="label">人工补录完整度：</span>
            <span class="value"
              >{{ formData.percent.personalPercent }}%</span
            ></template
          >-->

          <div class="label">
            <!-- 仅显示重要字段 ： -->
          </div>
          <div class="value">
            <!-- <el-switch v-model="isShowImprotant" @change="imFieldChange">
            </el-switch>-->
          </div>
        </el-row>
        <div
          ref="my-form"
          class="my-form"
          :class="externalScroll ? 'no-scroll' : ''"
        >
          <!-- <read-form
            ref="form"
            :options="survivalForm"
            v-if="survivalFlag"
          ></read-form>-->
          <custom-form
            ref="form"
            :options="widgetFormPreview"
            :form-edit="formData.formEdit"
            @scrollTop="scrollTop"
            @handleConfirm="handleConfirm"
            @onPrev="onPrev"
          ></custom-form>
        </div>
      </template>
    </el-main>
    <el-aside
      v-if="contrast"
      :width="sideWidth"
      class="transition-box"
      :class="{ hidden: !asideShow }"
    >
      <div class="side-content"></div>
    </el-aside>
  </el-container>
</template>
<script>
import { getPatientDetail, getRecordList } from "@/api/patient.js"
import { getFormDetail } from "@/api/field"
import CustomForm from "@/components/FormComponents/CustomForm/index"
import ReadForm from "@/components/FormComponents/ReadForm/index"
import TagsScrollBar from "@/components/TagsScrollBar/index"
export default {
  name: "FormTab",
  components: { CustomForm, TagsScrollBar, ReadForm },
  props: {
    externalScroll: Boolean, //外部滚动
    disabled: Boolean,
    contrast: Boolean, //同屏对照
    form: Object,
    patientId: String,
    patientStandbyId: String,
    getAll: Boolean, // 获取页面所有数据
    survivalFlag: Boolean, //存活的显示
    formInitial: {}, // 第四步的数据
  },
  provide() {
    return {
      formId: this.form.formId,
      getPatientId: () => {
        return this.patientId || this.patientStandbyId
      },
    }
  },
  data() {
    return {
      btnType: "",
      isShowImprotant: false,
      asideShow: false,
      widgetFormPreview: {},
      formData: {
        formEdit: {
          // risk_rank: "中危",
          // risk_score: "5分",
          // screening_advise: "立刻住院",
        },
        percent: {},
        formRecordId: null,
      },
      loading: false,
      formloading: false,
      repeatedlyList: [],
      formCacheList: [],
      survivalForm: {
        column: [],
        labelPosition: "right",
        labelSuffix: "：",
        labelWidth: 100,
        gutter: 0,
        menuBtn: true,
        submitBtn: true,
        submitText: "提交",
        emptyBtn: true,
        emptyText: "清空",
        nextTabBtn: true,
        nextTabText: "下一页",
        menuPosition: "center",
        group: [
          {
            label: "个人信息",
            prop: "1669858228269_22763",
            arrow: true,
            collapse: true,
            display: true,
            labelWidth: 8,
            column: [
              {
                type: "input",
                display: true,
                importantField: true,
                styles: {},
                autoRequired: 0,
                personalRequired: 0,
                prop: "name",
                label: "姓名",
                fieldType: "varchar",
                fieldLength: "50",
                tableName: "存活情况",
                tableCode: "gas_survival_situation",
                tableId: "1598137567272861697",
                notFilter: false,
                cType: "",
                subfield: false,
              },
              {
                type: "input",
                display: true,
                importantField: true,
                styles: {},
                autoRequired: 0,
                personalRequired: 0,
                prop: "contact_phone",
                label: "手机号",
                fieldType: "varchar",
                fieldLength: "20",
                tableName: "存活情况",
                tableCode: "gas_survival_situation",
                tableId: "1598137567272861697",
                notFilter: false,
                cType: "",
                subfield: false,
              },
              {
                type: "input",
                display: true,
                importantField: true,
                styles: {},
                autoRequired: 0,
                personalRequired: 0,
                prop: "telephone",
                label: "联系电话",
                fieldType: "varchar",
                fieldLength: "20",
                tableName: "存活情况",
                tableCode: "gas_survival_situation",
                tableId: "1598137567272861697",
                notFilter: false,
                cType: "",
                subfield: false,
              },
              {
                type: "input",
                display: true,
                importantField: true,
                styles: {},
                autoRequired: 0,
                personalRequired: 0,
                prop: "sex",
                label: "性别",
                fieldType: "tinyint",
                fieldLength: "2",
                tableName: "存活情况",
                tableCode: "gas_survival_situation",
                tableId: "1598137567272861697",
                notFilter: false,
                cType: "",
                subfield: false,
              },
              {
                type: "input",
                display: true,
                importantField: true,
                styles: {},
                autoRequired: 0,
                personalRequired: 0,
                prop: "birthday",
                label: "出生日期",
                fieldType: "date",
                fieldLength: "",
                tableName: "存活情况",
                tableCode: "gas_survival_situation",
                tableId: "1598137567272861697",
                notFilter: false,
                cType: "",
                subfield: false,
              },
              {
                type: "input",
                display: true,
                importantField: true,
                styles: {},
                autoRequired: 0,
                personalRequired: 0,
                prop: "age",
                label: "年龄",
                fieldType: "int",
                fieldLength: "4",
                tableName: "存活情况",
                tableCode: "gas_survival_situation",
                tableId: "1598137567272861697",
                notFilter: false,
                cType: "",
                subfield: false,
              },
            ],
          },
          {
            label: "第一次随访计划",
            prop: "1669858313508_15760",
            arrow: true,
            collapse: true,
            display: true,
            labelWidth: 8,
            column: [
              {
                type: "radio",
                display: true,
                importantField: true,
                styles: {},
                prop: "is_continue_follow",
                label: "是否随访",
                dicData: [
                  {
                    label: "是",
                    value: "1",
                    id: "1595347527757000705",
                    parentId: "",
                  },
                  {
                    label: "否",
                    value: "0",
                    id: "1595347502595371010",
                    parentId: "",
                  },
                ],
                dynamicshSet: [],
                dicType: "d-sf",
                props: {
                  label: "label",
                  value: "value",
                },
                fieldType: "tinyint",
                fieldLength: "2",
                tableName: "随访计划",
                tableCode: "gas_follow",
                tableId: "1597491580053323777",
                notFilter: false,
                cType: "",
                subfield: false,
                value: "1",
                span: 24,
                autoRequired: 0,
                personalRequired: 0,
              },
              {
                type: "date",
                display: true,
                importantField: true,
                styles: {},
                prop: "first_follow_time",
                label: "随访时间",
                format: "yyyy-MM-dd",
                valueFormat: "yyyy-MM-dd",
                dicType: "",
                fieldType: "date",
                tableName: "随访计划",
                tableCode: "gas_follow",
                tableId: "1597491580053323777",
                notFilter: false,
                cType: "",
                subfield: false,
                span: 12,
                autoRequired: 0,
                personalRequired: 0,
                width: 12,
              },
              {
                type: "input",
                display: true,
                importantField: true,
                styles: {},
                prop: "follow_contents",
                label: "随访内容",
                fieldType: "text",
                tableName: "随访计划",
                tableCode: "gas_follow",
                tableId: "1597491580053323777",
                notFilter: false,
                cType: "",
                subfield: false,
                autoRequired: 0,
                personalRequired: 0,
                span: 12,
                width: 12,
              },
            ],
          },
        ],
      },
    }
  },
  // mixins: [resizeMixin],
  computed: {
    isEmpty() {
      return !(Object.keys(this.widgetFormPreview) || this.widgetFormPreview)
        .length
    },
    sideWidth() {
      return this.asideShow ? "200px" : "0px"
    },
    pageLoading() {
      return this.loading || this.formloading
    },
  },
  watch: {
    formInitial: {
      handler(v) {
        if (v) {
          this.$set(this.formData, "formEdit", { ...v })
          console.log(this.formData.formEdit)
        }
      },
      deep: true,
    },
  },
  created() {
    this.initForm()
    if (this.getAll) {
      // 监听patientId 获取页面所有数据
      this.$watch(
        "patientId",
        () => {
          this.initData()
        },
        { immediate: true }
      )
    } else {
      // 监听form.silent 获取当前tab页数据
      this.$watch(
        "form.silent",
        () => {
          this.initData()
        },
        { immediate: true }
      )
    }
  },
  methods: {
    initData() {
      this.formData.formRecordId = null
      this.formCacheList = []
      this.getPatientDetail()
      if (this.form.fillType === 1) {
        this.$nextTick(() => {
          this.$refs.form && this.$refs.form.resetForm()
        })
        this.getRecordList()
      }
    },
    scrollTop() {
      this.$refs["my-form"].scrollTop = 0
    },

    handleAdd() {
      this.$refs.form && this.$refs.form.resetForm()
      this.formData = {
        formEdit: {},
        percent: {},
        formRecordId: null,
      }
    },
    // 切换时间
    changeRepeate(index) {
      const item = this.repeatedlyList[index]
      if (item.id === this.formData.formRecordId) return
      const data = this.formCacheList.find((_) => _.formRecordId === item.id)
      if (data) {
        this.$refs.form && this.$refs.form.resetForm()
        this.formData = data
        return
      }
      this.formData.formRecordId = item.id
      this.getPatientDetail()
    },

    imFieldChange(val) {
      this.$refs.form.imFieldChange(val)
    },
    initForm() {
      this.formloading = true
      if (this.form.formJson) {
        const obj = eval("(" + this.form.formJson + ")")
        if (this.disabled) {
          obj.menuBtn = false
          obj.disabled = true
          obj.detail = true
        }
        setTimeout(() => {
          this.widgetFormPreview = obj
          this.formloading = false
        }, 100)
        return
      }
      getFormDetail(this.form.formId)
        .then((res) => {
          if (res.code === 1 && res.data) {
            const formJson = res.data.formJson
            this.$emit("setFormJson", formJson)
            const obj = eval("(" + formJson + ")")
            if (this.disabled) {
              obj.menuBtn = false
              obj.disabled = true
              obj.detail = true
            } else if (res.data.name == "风险评估") {
              obj.detail = true
            }
            this.widgetFormPreview = obj
          }
        })
        .finally(() => {
          this.formloading = false
        })
    },

    handleConfirm(data, done) {
      this.$emit(
        "handleConfirm",
        {
          data,
          formId: this.form.formId,
          patientId: this.patientId || this.patientStandbyId,
          formRecordId: this.formData.formRecordId,
        },
        done,
        (res) => {
          // 多次填写的表单新增时，获取最新数据
          if (this.form.fillType === 1 && !this.formData.formRecordId) {
            this.getRecordList(res.data.formRecordId)
          }
          this.formatData(res, this.form.fillType !== 1)
        }
      )
    },
    onPrev(done) {
      this.$emit("onPrev", done)
    },

    getPatientDetail() {
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.resetForm()
      })
      if (!this.patientId || this.form.silent) return
      this.loading = true
      getPatientDetail({
        patientId: this.patientId,
        formId: this.form.formId,
        formRecordId: this.formData.formRecordId,
      })
        .then((res) => {
          this.formatData(res)
        })
        .finally(() => {
          this.loading = false
        })
    },
    formatData(res, cache) {
      const d = res.data || {}
      const form = d.data || {}
      if (form["YZZKJC"] && typeof form["YZZKJC"] === "string") {
        form["YZZKJC"] = JSON.parse(form["YZZKJC"])
      }
      if (!cache) {
        this.formData.formEdit = form
      }
      this.formData.formRecordId = d.formRecordId
      this.formData.percent = d.percent || {}
      const index = this.formCacheList.findIndex(
        (_) => _.formRecordId === d.formRecordId
      )
      if (index > -1) {
        this.formCacheList.splice(index, 1, this.deepClone(this.formData))
      } else {
        this.formCacheList.push(this.deepClone(this.formData))
      }
    },
    getRecordList(formRecordId) {
      if (!this.patientId) return
      getRecordList({
        patientId: this.patientId,
        formId: this.form.formId,
      }).then((res) => {
        this.repeatedlyList = res.data.map((_, index) => {
          return {
            ..._,
            time: _.createTime,
          }
        })
        this.$nextTick(() => {
          const el = this.$refs.tags
          if (el) {
            el.tabActive =
              formRecordId ||
              (this.repeatedlyList[0] && this.repeatedlyList[0].id)
          }
        })
      })
    },
  },
}
</script>
<style scoped lang="scss">
.el-main {
  position: relative;
  padding: 0;

  .arrow {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    font-size: 22px;
    z-index: 9;
  }
  .header {
    height: 20px;
    // box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    padding-right: 20px;
    position: relative;
    font-size: 15px;
  }
}
.el-aside {
  padding-left: 10px;
  border-left: 1px solid #ccc;
  .side-content {
    // height: calc(100vh - #{"272px"});
    // overflow: auto;
  }
}
.my-form {
  height: calc(100vh - #{"270px"});
  overflow-y: auto;
  padding-top: 20px;
  position: relative;
  &::-webkit-scrollbar-thumb {
    background-color: #fff;
  }
  &:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
  }
  &.no-scroll {
    height: auto;
  }
}
.label {
  font-size: 14px;
  color: #8492a6;
  line-height: 38px;
  float: left;
  margin-right: 20px;
}
.value {
  font-size: 14px;
  line-height: 38px;
  float: left;
  font-weight: 600;
  margin-right: 50px;
}
.el-slider {
  float: left;
  width: 150px;
}

.transition-box {
  transition: all 0.2s;
  &.hidden {
    opacity: 0;
    height: 0px;
  }
}
</style>
