<template>
  <!-- 随访审核详情 -->
  <div class="follow-form">
    <!-- <ConfigForms form-type="2" formClass="follow-form"></ConfigForms> -->
    <el-container>
      <el-aside width="auto">
        <div class="follow-tab">
          <p class="tab-title">筛查病例数据</p>
          <el-tabs tab-position="right" style="height: 200px;" v-model="activeTab">
            <el-tab-pane
              :label="'第'+ Number(index+1) + '次随访数据'"
              v-for="(item,index) in formDataList"
              :key="index"
              :name="String(index)"
            ></el-tab-pane>
          </el-tabs>
        </div>
      </el-aside>
      <el-main>
        <read-form ref="form" :options="followupForm" :formEdit="formEdit"></read-form>
      </el-main>
      <el-aside width="auto" class="transition-box">
        <div class="follow-list">
          <ul class="list">
            <li v-for="(item, index) in screenList" :key="index">
              <div class="time">{{ item.time }}</div>
              <div class="time">{{ item.code }}</div>
              <div class="time">{{ item.name }}</div>
            </li>
          </ul>
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import ConfigForms from "@/views/screening/components/ConfigForms.vue"
import ReadForm from "@/components/FormComponents/ReadForm/index"
export default {
  name: "followReview",
  components: {
    ConfigForms,
    ReadForm
  },
  props: {
    tabActive:{
      type:String,
    },
    formDataList: {
      type: Array,
    },
  },
  data() {
    return {
      followupForm:{
        column: [],
        labelPosition: 'left',
        labelSuffix: '：',
        labelWidth: 180,
        gutter: 0,
        menuBtn: true,
        submitBtn: true,
        submitText: '提交',
        emptyBtn: true,
        emptyText: '清空',
        nextTabBtn: true,
        nextTabText: '下一页',
        menuPosition: 'center',
        group: [
           {
            label: '第二次随访调查',
            prop: '1669858313508_15761',
            arrow: true,
            collapse: true,
            display: true,
            labelWidth: 8,
            column: [
              {
                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: 24,
                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: 24,
                width: 12
              }
            ]
          }, 
          {
            label: '是否接受胃镜检查',
            prop: '1669860991131_8643',
            arrow: true,
            collapse: true,
            display: true,
            labelWidth: 8,
            showIndex:true,
            column: [{
              type: 'radio',
              display: true,
              importantField: true,
              styles: {},
              label: '是否接受检查',
              prop: 'is_accept',
              dicData: [{
                label: '是',
                value: '1',
                id: '1595347527757000705',
                parentId: ''
              }, {
                label: '否',
                value: '0',
                id: '1595347502595371010',
                parentId: ''
              }],
              dynamicshSet: [{
                value: '1',
                target: '1669861007378_67152'
              }],
              dicType: 'd-sf',
              props: {
                label: 'label',
                value: 'value'
              },
              fieldType: 'tinyint',
              fieldLength: '2',
              tableName: '胃镜检查',
              tableCode: 'gastroscope',
              tableId: '1597468524048121858',
              notFilter: false,
              cType: '',
              subfield: false,
              autoRequired: 0,
              personalRequired: 0,
              span: 24,
              lg: 24
            }]
          }, 
          {
            label: '胃镜检查结果',
            prop: '1669861007378_67152',
            arrow: true,
            collapse: true,
            display: true,
            labelWidth: 8,
            showIndex:true,
            column: [
              {
                type: 'datetime',
                display: true,
                importantField: true,
                styles: {},
                color:"#4B65FF",
                label: '检查时间',
                prop: 'check_time',
                dicData: [{
                  label: '是',
                  value: '1',
                  id: '1595347527757000705',
                  parentId: ''
                }, {
                  label: '否',
                  value: '0',
                  id: '1595347502595371010',
                  parentId: ''
                }],
                dynamicshSet: [],
                dicOption: 'static',
                dicType: '',
                props: {
                  label: 'label',
                  value: 'value'
                },
                fieldType: 'datetime',
                fieldLength: '',
                format: 'yyyy-MM-dd HH:mm:ss',
                valueFormat: 'yyyy-MM-dd HH:mm:ss',
                tableName: '胃镜检查',
                tableCode: 'gastroscope',
                tableId: '1597468524048121858',
                notFilter: false,
                cType: '',
                subfield: false,
                autoRequired: 0,
                personalRequired: 0,
                span: 24,
                width: 12
              }, 
              {
                type: 'radio',
                display: true,
                importantField: true,
                styles: {},
                prop: 'check_type',
                label: '胃镜检查方式',
                fieldType: 'int',
                fieldLength: '11',
                autoRequired: 0,
                personalRequired: 0,
                dicData: [
                    {
                      label: '胃镜普通白光检查',
                      value: '1',
                      id: '1597475602204557314',
                      parentId: ''
                    }, {
                      label: '胃镜普通白光检查+LCI检查',
                      value: '2',
                      id: '1597475677853024258',
                      parentId: ''
                    }, {
                      label: '磁控胶囊胃镜检查',
                      value: '3',
                      id: '1597475763517489154',
                      parentId: ''
                    }
                  ],
                  dynamicshSet: [],
                  dicType: 'gas_check_type',
                  props: {
                    label: 'label',
                    value: 'value'
                  },
                  tableName: '胃镜检查',
                  tableCode: 'gastroscope',
                  tableId: '1597468524048121858',
                  notFilter: false,
                  cType: '',
                  subfield: false,
                  span: 24
              }, 
              {
                type: 'radio',
                display: true,
                importantField: true,
                styles: {},
                autoRequired: 0,
                personalRequired: 0,
                dicData: [{
                  label: '未见异常',
                  value: '1',
                  id: '1597476184780800001',
                  parentId: ''
                }, {
                  label: '异常',
                  value: '2',
                  id: '1597476229722767361',
                  parentId: ''
                }],
                dynamicshSet: [{
                  value: '2',
                  target: 'detail_check_type'
                }, {
                  value: '2',
                  target: 'diagnosis'
                }],
                dicType: 'check_result',
                props: {
                  label: 'label',
                  value: 'value'
                },
                prop: 'check_result',
                label: '检查结果',
                fieldType: 'tinyint',
                fieldLength: '2',
                tableName: '胃镜检查',
                tableCode: 'gastroscope',
                tableId: '1597468524048121858',
                notFilter: false,
                cType: '',
                subfield: false,
                span: 24
              }, 
              {
                type: 'checkbox',
                display: true,
                importantField: true,
                styles: {},
                autoRequired: 0,
                personalRequired: 0,
                dicData: [{
                  label: 'NBI',
                  value: '1',
                  id: '1597476883899973634',
                  parentId: ''
                }, {
                  label: 'FICE',
                  value: '2',
                  id: '1597476919312482306',
                  parentId: ''
                }, {
                  label: 'I-SC',
                  value: '3',
                  id: '1597476961561706498',
                  parentId: ''
                }, {
                  label: 'BLI',
                  value: '4',
                  id: '1597476996303126529',
                  parentId: ''
                }, {
                  label: '放大内镜',
                  value: '5',
                  id: '1597477029488459778',
                  parentId: ''
                }, {
                  label: '激光共聚焦显微内镜',
                  value: '6',
                  id: '1597477062287917057',
                  parentId: ''
                }, {
                  label: '荧光内镜',
                  value: '7',
                  id: '1597477097977249793',
                  parentId: ''
                }, {
                  label: '化学染色',
                  value: '8',
                  id: '1597477133691748353',
                  parentId: ''
                }],
                dynamicshSet: [],
                dicType: 'gas_detail_check_type',
                props: {
                  label: 'label',
                  value: 'value'
                },
                prop: 'detail_check_type',
                label: '胃镜精查方式',
                fieldType: 'varchar',
                fieldLength: '255',
                tableName: '胃镜检查',
                tableCode: 'gastroscope',
                tableId: '1597468524048121858',
                notFilter: false,
                cType: '',
                subfield: false,
                span: 24
              }, 
              {
                type: 'radio',
                display: true,
                importantField: true,
                styles: {},
                autoRequired: 0,
                personalRequired: 0,
                dicData: [{
                  label: '未见异常',
                  value: '1',
                  id: '1597476184780800001',
                  parentId: ''
                }, {
                  label: '异常',
                  value: '2',
                  id: '1597476229722767361',
                  parentId: ''
                }],
                dynamicshSet: [{
                  value: '2',
                  target: 'esophagus_level'
                }, {
                  value: '2',
                  target: 'esophagus_position'
                }, {
                  value: '2',
                  target: 'early_esophagus_cancer'
                }, {
                  value: '2',
                  target: 'period_esophagus_cancer'
                }, {
                  value: '2',
                  target: 'is_barret_esophagus'
                }, {
                  value: '2',
                  target: 'is_back_esophagus'
                }, {
                  value: '2',
                  target: 'inogm_level'
                }, {
                  value: '2',
                  target: 'inogm_position'
                }, {
                  value: '2',
                  target: 'early_gastric_cancer'
                }, {
                  value: '2',
                  target: 'period_gastric_cancer'
                }, {
                  value: '2',
                  target: 'atrophic_gastriti'
                }, {
                  value: '2',
                  target: 'gastric_ulcer'
                }, {
                  value: '2',
                  target: 'gastric_polyp_type'
                }, {
                  value: '2',
                  target: 'gastric_polyp'
                }, {
                  value: '2',
                  target: 'non_atrophic_gastriti'
                }, {
                  value: '2',
                  target: 'is_duodenal_ulcer'
                }, {
                  value: '2',
                  target: 'other_pathology'
                }],
                dicType: 'check_result',
                props: {
                  label: 'label',
                  value: 'value'
                },
                prop: 'diagnosis',
                label: '最后诊断',
                fieldType: 'tinyint',
                fieldLength: '4',
                tableName: '胃镜检查',
                tableCode: 'gastroscope',
                tableId: '1597468524048121858',
                notFilter: false,
                cType: '',
                subfield: false,
                span: 24
              }, 
            ]
          },
          {
            label: '实验室检查',
            prop: '1669863751318_50013',
            arrow: true,
            collapse: true,
            display: true,
            labelWidth: 8,
            showIndex:true,
            column: [
              {
                type: 'input',
                display: true,
                importantField: true,
                styles: {},
                prop: 'G_17',
                label: '胃泌素17',
                fieldType: 'varchar',
                fieldLength: '255',
                tableName: '实验室检查',
                tableCode: 'gas_exam',
                tableId: '1597466741234040833',
                notFilter: false,
                cType: '',
                subfield: false,
                autoRequired: 0,
                personalRequired: 0,
                span: 24,
                width: 12,
                unit:"pmol/L",
                color:"#5972FF"
              }, 
              {
                type: 'input',
                display: true,
                importantField: true,
                styles: {},
                prop: 'PG_I',
                label: '胃蛋白酶原I（PG I）',
                fieldType: 'varchar',
                fieldLength: '255',
                tableName: '实验室检查',
                tableCode: 'gas_exam',
                tableId: '1597466741234040833',
                notFilter: false,
                cType: '',
                subfield: false,
                span: 24,
                width: 12
              }, 
              {
                type: 'input',
                display: true,
                importantField: true,
                styles: {},
                prop: 'PG_II',
                label: '胃蛋白酶原II（PG II）',
                fieldType: 'varchar',
                fieldLength: '255',
                tableName: '实验室检查',
                tableCode: 'gas_exam',
                tableId: '1597466741234040833',
                notFilter: false,
                cType: '',
                subfield: false,
                span: 24,
                width: 12
              }, 
              {
                type: 'radio',
                display: true,
                importantField: true,
                styles: {},
                prop: 'IgG',
                label: 'Hp抗体（IgG）检测',
                fieldType: 'varchar',
                fieldLength: '255',
                autoRequired: 0,
                personalRequired: 0,
                dicData: [{
                  label: '阴性',
                  value: '1',
                  id: '1598150963816923138',
                  parentId: ''
                }, {
                  label: '阳性',
                  value: '2',
                  id: '1598150992287858689',
                  parentId: ''
                }],
                dynamicshSet: [],
                dicType: 'hp_antibody',
                props: {
                  label: 'label',
                  value: 'value'
                },
                tableName: '实验室检查',
                tableCode: 'gas_exam',
                tableId: '1597466741234040833',
                notFilter: false,
                cType: '',
                subfield: false,
                span: 24
              }, 
              {
                type: 'input',
                display: true,
                importantField: true,
                styles: {},
                prop: 'img_path',
                label: '图片资料',
                fieldType: 'varchar',
                fieldLength: '255',
                tableName: '实验室检查',
                tableCode: 'gas_exam',
                tableId: '1597466741234040833',
                notFilter: false,
                cType: '',
                subfield: false,
                span: 24,
                width: 12
              }
            ]
          },
          {
              label: '风险评估',
              prop: '1669864316349_49130',
              arrow: true,
              collapse: true,
              display: true,
              labelWidth: 8,
              showIndex:true,
              column: [
                {
                  type: 'input',
                  display: true,
                  importantField: true,
                  styles: {},
                  autoRequired: 0,
                  personalRequired: 0,
                  prop: 'risk_score',
                  label: '风险评分',
                  fieldType: 'varchar',
                  fieldLength: '255',
                  tableName: '风险评估',
                  tableCode: 'gas_risk_assessment',
                  tableId: '1598151898370768898',
                  notFilter: false,
                  cType: '',
                  subfield: false,
                  span: 24,
                  width: 12
                }, 
                {
                  type: 'input',
                  display: true,
                  importantField: true,
                  styles: {},
                  prop: 'risk_rank',
                  label: '风险等级',
                  fieldType: 'varchar',
                  fieldLength: '20',
                  tableName: '风险评估',
                  tableCode: 'gas_risk_assessment',
                  tableId: '1598151898370768898',
                  notFilter: false,
                  cType: '',
                  subfield: false,
                  span: 24,
                  width: 12
                }, 
              ]
          },
          {
            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
              }
            ]
          }, 
        ]
      },
      // formEdit:{
      // },
      activeTab:'0',
      screenList: [
        {
          time: "2020-12-12 11:11:11",
          code: "UK102",
          name: "修改第一次随访计划",
        },
      ],
    }
  },
  watch:{
    tabActive(val){
      this.activeTab = val
    }
  },
  computed:{
    //当前随访数据
    formEdit:{
      get(){
        return this.formDataList[this.activeTab]
      },
      set(){

      }
    }
  },
  created() {
  },
  mounted(){
    this.formEdit = this.formDataList[this.activeTab]
  },
  methods: {},
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-tabs--card > .el-tabs__header {
    width: calc(100% - 100px);
    border-bottom: none;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: none;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item {
    min-width: 116px;
    text-align: center;
    background: #f0f1fa;
    font-size: 14px;
    border: none;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    background: #4e68ff;
    color: #fff;
  }
  .el-main {
    padding: 0px 20px;
  }
  .el-aside {
    padding-bottom: 20px;
  }
}
.follow-tab {
  ::v-deep {
    border-radius: 4px;
    border: 1px solid #cccccc;
    height: 100%;
    .el-tabs__header {
      margin-left: 0px;
    }
    .el-tabs__nav-wrap.is-right::after {
      width: 0px;
    }
    .el-tabs__active-bar.is-right {
      width: 3px;
      height: 52px !important;
    }
    .el-tabs--right {
      height: auto !important;
    }
    .tab-title {
      padding: 16px;
      background: #fafafa;
      color: #333333;
      border-bottom: 1px solid #cccccc;
    }
    .el-tabs__item {
      padding: 16px;
      width: 180px;
      background: #fafafa;
      height: auto;
      line-height: inherit;
      border-bottom: 1px solid #cccccc;
      transition: all 1s;
    }
    .el-tabs__item.is-active {
      background: transparent;
    }
  }
}
.follow-list {
  border-radius: 4px;
  border: 1px solid #cccccc;
  height: 100%;
  background: #fafafa;
  li {
    padding: 16px;
    border-bottom: 1px solid #ccc;
    // cursor: pointer;
    .time {
      font-size: 14px;
      margin-bottom: 8px;
      font-family: AlibabaPuHuiTiR;
      text-align: left;
      &:first-child {
        color: #4e68ff;
      }
    }
  }
}
.follow-form {
  ::v-deep {
    .el-collapse-item__header {
      // border-width: 0px 0px 0px;
      border: none !important;
    }
    .row24 {
      border-top: 1px solid #cccccc;
    }
    .custom-form-item {
      border-width: 1px 0px 0px;
    }
    .el-collapse-item {
      margin-bottom: 20px;
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid #cccccc;
    }
    .el-collapse-item:not(:last-child) {
    }
    .el-collapse-item__wrap {
      border: none;
    }
    // .row24.el-col-lg-12:nth-child(2n) {
    //   border-width: 0px 0px 0px 1px;
    // }
    .el-form-item {
      padding: 0px;
    }
  }
}
</style>
