<template>
  <div class="foreBox">
    <div v-if="!onlyRead && isPlatform" class="moveIcon">
      <p @click="moveAll(1)"><i style="font-size: 20px" class="el-icon-back" /></p>
      <p style="margin-top: 5px" @click="moveAll(2)"><i class="el-icon-back" style="transform: rotateY(180deg);font-size: 20px" /></p>
    </div>
    <div style="display: flex;margin-top: 32px">
      <div style="width: 200px;padding-right: 8px;text-align: left;overflow-x: auto">
        <p style="font-weight: bold;margin-bottom: 12px;text-align: left">描述项模板</p>
        <el-button v-if="!treeCaseList.length && !onlyRead && isPlatform" type="primary" size="small" @click="append(1)">+新增</el-button>
        <el-tree
          ref="tree"
          :data="treeCaseList"
          :props="treeProps"
          :default-expand-all="true"
          :expand-on-click-node="false"
          node-key="id"
          highlight-current
          @node-click="templateData"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span style="display: inline-block;min-width: 80px">
              <span>{{ node.label }}</span>
            </span>
            <span>
              <el-button v-if="!data.treeId && !onlyRead && isPlatform" icon="el-icon-plus" style="font-size: 12px;color: #409EFF" type="text" @click.stop="append(2, data)" />
              <el-button v-if="!onlyRead && isPlatform" icon="el-icon-delete" style="font-size: 12px;color: #F56C6C" type="text" @click.stop="remove(node, data)" />
            </span>
          </span>
        </el-tree>
      </div>
      <el-table
        id="foreCheck"
        ref="multipleTable"
        :data="tableData"
        style="margin: 8px 8px 0 0"
        @select="selection"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          align="center"
          label="OD"
        >
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.sort === 1">
                <p style="margin:0 16px 6px 0">结膜：充血</p>
                <treeSelect
                  v-model="dataForm.jiemCxOd"
                  :only-read="onlyRead"
                  :props="treeProps"
                  style="display: inline-block;"
                  :options="scope.row.data"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'od', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.sort === 2">
                <p style="margin:0 16px 6px 0">结膜：分泌物</p>
                <treeSelect
                  v-model="dataForm.jiemFmwOd"
                  :only-read="onlyRead"
                  :props="treeProps"
                  style="display: inline-block;"
                  :options="scope.row.data"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'od', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '眼睑' && scope.row.id">
                <treeSelect
                  v-model="dataForm.yanjOd"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'od', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '泪器' && scope.row.id">
                <treeSelect
                  v-model="dataForm.leiqOd"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'od', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '角膜' && scope.row.id">
                <treeSelect
                  v-model="dataForm.jiaomOd"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'od', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '前房' && scope.row.id">
                <treeSelect
                  v-model="dataForm.qianfOd"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'od', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '虹膜' && scope.row.id">
                <treeSelect
                  v-model="dataForm.hongmOd"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'od', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '瞳孔' && scope.row.id">
                <treeSelect
                  v-model="dataForm.tongkOd"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'od', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '晶状体' && scope.row.id">
                <treeSelect
                  v-model="dataForm.jingztOd"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'od', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '睫状体' && scope.row.id">
                <treeSelect
                  v-model="dataForm.jieztOd"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'od', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '眼位' && scope.row.id">
                <treeSelect
                  v-model="dataForm.yanwOd"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'od', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '眼眶' && scope.row.id">
                <treeSelect
                  v-model="dataForm.yankOd"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'od', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '眼球运动' && scope.row.id">
                <treeSelect
                  v-model="dataForm.yanqydOd"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'od', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="!scope.row.sort && !scope.row.id">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          class="move"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <div v-if="!onlyRead && isPlatform">
              <p @click="moveHandle(scope.$index,1, scope.row)"><i style="font-size: 20px" class="el-icon-back" /></p>
              <p style="margin-top: 5px" @click="moveHandle(scope.$index,2, scope.row)"><i class="el-icon-back" style="transform: rotateY(180deg);font-size: 20px" /></p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="OS"
        >
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.sort === 1">
                <span style="margin-right: 16px">结膜：充血</span><treeSelect
                  v-model="dataForm.jiemCxOs"
                  :only-read="onlyRead"
                  :props="treeProps"
                  style="display: inline-block;"
                  :options="scope.row.data"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'os', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.sort === 2">
                <p style="margin:0 16px 6px 0">结膜：分泌物</p><treeSelect
                  v-model="dataForm.jiemFmwOs"
                  :only-read="onlyRead"
                  :props="treeProps"
                  style="display: inline-block;"
                  :options="scope.row.data"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'os', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '眼睑' && scope.row.id">
                <treeSelect
                  v-model="dataForm.yanjOs"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'os', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '泪器' && scope.row.id">
                <treeSelect
                  v-model="dataForm.leiqOs"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'os', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '角膜' && scope.row.id">
                <treeSelect
                  v-model="dataForm.jiaomOs"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'os', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '前房' && scope.row.id">
                <treeSelect
                  v-model="dataForm.qianfOs"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'os', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '虹膜' && scope.row.id">
                <treeSelect
                  v-model="dataForm.hongmOs"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'os', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '瞳孔' && scope.row.id">
                <treeSelect
                  v-model="dataForm.tongkOs"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'os', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '晶状体' && scope.row.id">
                <treeSelect
                  v-model="dataForm.jingztOs"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'os', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '睫状体' && scope.row.id">
                <treeSelect
                  v-model="dataForm.jieztOs"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'os', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '眼位' && scope.row.id">
                <treeSelect
                  v-model="dataForm.yanwOs"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'os', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '眼眶' && scope.row.id">
                <treeSelect
                  v-model="dataForm.yankOs"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'os', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <span v-if="scope.row.name === '眼球运动' && scope.row.id">
                <treeSelect
                  v-model="dataForm.yanqydOs"
                  :only-read="onlyRead"
                  :options="scope.row.data"
                  :props="treeProps"
                  :multiple="true"
                  :filterable="true"
                  :check-strictly="true"
                  :default-expand-all="true"
                  @handleNode="handleNode(scope.$index,'os', $event)"
                  @add="addTree(scope.row, $event)"
                  @remove="removeTree"
                />
              </span>
              <!--              <span v-if="scope.row.sort === 99">-->
              <!--                <treeSelect-->
              <!--                  v-model="scope.row.os"-->
              <!--                  :only-read="onlyRead"-->
              <!--                  :options="scope.row.data"-->
              <!--                  :props="treeProps"-->
              <!--                  :multiple="true"-->
              <!--                  :filterable="true"-->
              <!--                  :check-strictly="true"-->
              <!--                  :default-expand-all="true"-->
              <!--                  @handleNode="handleNode(scope.$index,'os', $event)"-->
              <!--                  @add="addTree(scope.row, $event)"-->
              <!--                  @remove="removeTree"-->
              <!--                />-->
              <!--              </span>-->
              <span v-if="!scope.row.sort && !scope.row.id">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="form" style="margin-top: 16px">
        <el-form-item label="名称：" label-width="120px">
          <el-input v-model="form.name" auto-complete="off" style="width: 300px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handSaveBtn">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新建模板" :visible.sync="templateFlag" width="40%">
      <el-form :model="form" style="margin-top: 16px">
        <el-form-item label="名称：" label-width="120px">
          <el-input v-model="form.name" auto-complete="off" style="width: 300px" />
        </el-form-item>
        <el-form-item label="目录：" label-width="120px">
          <el-tree
            ref="tree"
            :data="treeTemplate"
            :props="treeProps"
            :default-expand-all="true"
            :expand-on-click-node="false"
            node-key="id"
            highlight-current
            @node-click="templateNodeClick"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="templateFlag = false">取 消</el-button>
        <el-button type="primary" @click="saveTreeTemplete">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import eventBus from '@/page-subspecialty/utils/eventBus'
import treeSelect from '@/components/360View/itemSelect'
import axios from 'axios'
import Cookies from 'js-cookie'
// import ForeForm from '@/components/360View/medicalRecord/outPatientRecord/foreForm.vue'
const Base64 = require('js-base64').Base64
export default {
  components: {
    // ForeForm,
    treeSelect
  },
  mixins: [],
  props: {
    patientIdNumber: {
      type: String,
      default: ''
    },
    patientId: {
      type: String,
      default: ''
    },
    isSearch: {
      type: String,
      default: ''
    },
    caseId: {
      type: String,
      default: ''
    },
    isPlatform: {
      type: Boolean,
      default: true
    },
    onlyRead: {
      type: Boolean,
      default: false
    }
  },
  inject: ['refresh'],
  data() {
    return {
      userData: {},
      title: '',
      sourceData: [],
      treeCaseList: [],
      treeTemplate: [],
      addType: '',
      treeProps: {
        value: 'id',
        label: 'name',
        children: 'child'
      },
      type: '',
      doctorId: '',
      deleteId: '',
      treeId: '',
      treeFlag: '',
      treeName: '',
      weight: '',
      parentId: 0,
      collectId: '',
      form: {
        name: ''
      },
      multipleSelection: [],
      templateFlag: false,
      dialogFormVisible: false,
      dataForm: {
        id: '',
        patientId: '',
        hongmOd: '', // 虹膜
        hongmOs: '', // 虹膜
        jiaomOd: '', // 角膜
        jiaomOs: '', // 角膜
        jiemCxOd: '', // 结膜眼睑充血
        jiemCxOs: '', // 结膜眼睑充血
        jiemFmwOd: '', // 结膜：分泌物
        jiemFmwOs: '', // 结膜：分泌物
        jieztOd: '', // 睫状体
        jieztOs: '', // 睫状体
        jingztOd: '', // 晶状体
        jingztOs: '', // 晶状体
        leiqOd: '', // 泪器
        leiqOs: '', // 泪器
        qianfOd: '', // 前房
        qianfOs: '', // 前房
        tongkOd: '', // 瞳孔
        tongkOs: '', // 瞳孔
        yanjOd: '', // 眼睑
        yanjOs: '', // 眼睑
        yankOd: '', // 眼眶
        yankOs: '', // 眼眶
        yanqydOd: '', // 眼球运动
        yanqydOs: '', // 眼球运动
        yanwOd: '', // 眼位
        yanwOs: '' // 眼位
      },
      tableData: [
        {
          name: '眼睑'
        }, {
          name: '眼睑',
          sort: 99,
          id: 1,
          type: 'anion',
          od: 'yanjOd',
          os: 'yanjOs'
        }, {
          name: '结膜'
        }, {
          name: '结膜',
          id: 2,
          sort: 1,
          type: 'jimmy',
          od: 'jiemCxOd',
          os: 'jiemCxOs'
        }, {
          name: '结膜',
          id: 3,
          sort: 2,
          type: 'jimmy',
          od: 'jiemFmwOd',
          os: 'jiemFmwOs'
        }, {
          name: '泪器'
        }, {
          name: '泪器',
          sort: 99,
          id: 4,
          type: 'liq',
          od: 'leiqOd',
          os: 'leiqOs'
        }, {
          name: '角膜'
        }, {
          name: '角膜',
          sort: 99,
          id: 5,
          type: 'Giacomo',
          od: 'jiaomOd',
          os: 'jiaomOs'
        }, {
          name: '前房'
        }, {
          name: '前房',
          sort: 99,
          id: 6,
          type: 'Jianfeng',
          od: 'qianfOd',
          os: 'qianfOs'
        }, {
          name: '虹膜'
        }, {
          name: '虹膜',
          sort: 99,
          id: 7,
          type: 'mongo',
          od: 'hongmOd',
          os: 'hongmOs'
        }, {
          name: '瞳孔'
        }, {
          name: '瞳孔',
          sort: 99,
          id: 8,
          type: 'tonguing',
          od: 'tongkOd',
          os: 'tongkOs'
        }, {
          name: '晶状体'
        }, {
          name: '晶状体',
          sort: 99,
          id: 9,
          type: 'jingling',
          od: 'jingztOd',
          os: 'jingztOs'
        }, {
          name: '睫状体'
        }, {
          name: '睫状体',
          sort: 99,
          id: 10,
          type: 'jingles',
          od: 'jieztOd',
          os: 'jieztOs'
        }, {
          name: '眼位'
        }, {
          name: '眼位',
          sort: 99,
          id: 11,
          type: 'yawn',
          od: 'yanwOd',
          os: 'yanwOs'
        }, {
          name: '眼眶'
        }, {
          name: '眼眶',
          sort: 99,
          id: 12,
          type: 'yanking',
          od: 'yankOd',
          os: 'yankOs'
        }, {
          name: '眼球运动'
        }, {
          name: '眼球运动',
          sort: 99,
          id: 13,
          type: 'yang',
          od: 'yanqydOd',
          os: 'yanqydOs'
        }]
    }
  },
  watch: {
    caseId: {
      handler: function(newV, oldV) {
        this.queryOptions()
        this.getforeList()
        this.$nextTick(() => {
          this.tableData.forEach(item => {
            item.flag = false
            this.$refs.multipleTable.toggleRowSelection(item, false)
          })
        })
      }
    }
  },
  mounted() {
    this.userData = JSON.parse(window.sessionStorage.getItem('qg-userData'))
    this.doctorId = this.userData.id
    this.queryOptions()
    this.getforeList()
    // 查询左侧病历树
    this.queryTreeCase()
  },
  methods: {
    async getforeList() {
      const { data: res } = await this.$http.get('/mjz/getMjzQdjcInfo', {
        params: {
          caseId: this.caseId,
          patientId: this.patientId
        }
      })
      if (res.code === 0) {
        if (res.data) {
          this.dataForm = this.handleData(res.data)
          eventBus.$emit('getForeData', this.dataForm)
        }
      } else {
        this.$message.error(res.msg)
      }
    },
    handleData(data) {
      for (const aKey in data) {
        if (aKey !== 'caseId' && aKey !== 'id' && aKey !== 'patientId') {
          if (data[aKey]) {
            data[aKey] = data[aKey].split(',')
          }
        }
      }
      return data
    },
    // 表格复选框
    selection(selection, val) {
      if (!val.id) {
        const data = this.tableData.filter(item => item.name === val.name)
        if (val.flag) {
          data.forEach(row => {
            row.flag = false
            this.$refs.multipleTable.toggleRowSelection(row, false)
          })
        } else {
          data.forEach(row => {
            row.flag = true
            this.$refs.multipleTable.toggleRowSelection(row, true)
          })
        }
      } else {
        const data = this.tableData.filter(item => item.id === val.id)
        if (val.flag) {
          data.forEach(row => {
            row.flag = false
          })
        } else {
          data.forEach(row => {
            row.flag = true
          })
        }
      }
    },
    // 保留下拉框的label，添加到数据集用于展示
    handleNode(index, type, event) {
      if (event) {
        if (type === 'os') {
          this.tableData[index].osValue = event
        } else if (type === 'od') {
          this.tableData[index].odValue = event
        }
      }
    },
    // 添加数据集
    addForeData() {
      const selectData = this.tableData.filter(item => item.flag === true)
      if (!selectData.length) return this.$message.warning('请勾选数据!')
      const data = selectData.filter(item => {
        return item.type !== undefined
      })
      eventBus.$emit('sendForData', JSON.parse(JSON.stringify(data)))
    },
    // 获取下拉选择项,把数据封装进表格中
    queryOptions() {
      const treeList = []
      this.tableData.forEach(item => {
        item.flag = false
        if (item.type) {
          const p = this.queryTree(item.type)
          treeList.push(p)
        }
      })
      Promise.all(treeList).then((result) => {
        if (result.length) {
          result.forEach(item => {
            item.forEach(row => {
              this.tableData.forEach((e, index) => {
                if (e.type === row.type) {
                  e.data = item
                  const sort = e.sort
                  if (sort === 1 || sort === 2 || sort === 99) {
                    e.sort = ''
                    this.$nextTick(() => {
                      e.sort = sort
                    })
                  }
                }
              })
            })
          })
        }
        // this.sourceData = Object.assign([], this.tableData)
      }).catch((error) => {
      })
    },
    // 全部移动
    moveAll(type) {
      if (type === 1) {
        this.tableData.forEach(item => {
          if (item.sort) {
            this.dataForm[item.od] = this.dataForm[item.os]
            item.odValue = item.osValue
          }
        })
      } else {
        this.tableData.forEach(item => {
          if (item.sort) {
            this.dataForm[item.os] = this.dataForm[item.od]
            item.osValue = item.odValue
          }
        })
      }
    },
    // 移动
    moveHandle(index, type, row) {
      if (row.id) {
        if (type === 1) { // 左移
          this.dataForm[row.od] = this.dataForm[row.os]
          this.tableData[index].odValue = row.osValue
        } else { // 右移
          this.dataForm[row.os] = this.dataForm[row.od]
          this.tableData[index].osValue = row.odValue
        }
      } else {
        if (type === 1) {
          this.tableData.forEach(item => {
            if (item.name === row.name) {
              this.dataForm[item.od] = this.dataForm[item.os]
              item.odValue = item.osValue
            }
          })
        } else {
          this.tableData.forEach(item => {
            if (item.name === row.name) {
              this.dataForm[item.os] = this.dataForm[item.od]
              item.osValue = item.odValue
            }
          })
        }
      }
    },
    // 保存前段检查
    async saveFore() {
      for (const resKey in this.dataForm) {
        if (Array.isArray(this.dataForm[resKey])) {
          this.dataForm[resKey] = this.dataForm[resKey].join(',')
        }
      }
      const { data: res } = await this.$http.post('/mjz/saveMjzQdjc', this.dataForm)
      if (res.code === 0) {
        await this.getforeList()
      } else {
        this.$message.error(res.msg)
      }
    },
    handSaveBtn() {
      if (this.addType === 1) {
        this.handleSaveTree()
      } else {
        this.handleSaveCase()
      }
    },
    // 新增选择下拉树
    addTree(item, event) {
      this.title = '新增子级'
      this.addType = 1
      this.form.name = ''
      this.type = event.type
      this.parentId = event.id
      this.treeFlag = event.flag
      this.dialogFormVisible = true
    },
    // 新增保存树-眼睛部位下拉选择
    async handleSaveTree() {
      const params = {
        doctorId: this.doctorId,
        name: this.form.name,
        flag: this.treeFlag, // // 1公共树,2个人树
        type: this.type,
        parentId: this.parentId
      }
      const { data: res } = await this.$http.post('/treetag/addTree', params)
      if (res.code === 0) {
        this.dialogFormVisible = false
        this.updataList()
        this.$message.success('保存成功')
      } else {
        this.$message.error(res.msg)
      }
    },
    // 删除选择下拉树
    removeTree(item) {
      this.type = item.type
      this.deleteId = item.id
      this.$confirm('确定删除该节点?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleRemove()
      }).catch(() => {

      })
    },
    // 删除选择下拉树
    async handleRemove() {
      const params = {
        id: this.deleteId
      }
      const { data: res } = await this.$http.post('/treetag/deleteTree', params)
      if (res.code === 0) {
        this.$message.success('删除成功')
        this.updataList()
      } else {
        this.$message.error(res.msg)
      }
    },
    // 刷新单个选择下拉树
    updataList() {
      this.queryTree(this.type).then((res) => {
        this.tableData.forEach(item => {
          if (item.type === this.type) {
            const sort = item.sort
            item.sort = ''
            this.$nextTick(() => {
              item.sort = sort
            })
            item.data = res
          }
        })
      })
    },
    // 封装查询单个下拉选择树
    queryTree(type) {
      const baseUrl = window.SITE_CONFIG['apiURL'] + '/treetag/findTree'
      return new Promise((resolve, reject) => {
        axios.defaults.headers.common['token'] = window.sessionStorage.getItem('xa-token') || ''
        axios.get(baseUrl, {
          params: {
            doctorId: this.doctorId,
            type: type
          }
        }).then(res => {
          if (res.data.code === 0) {
            const data = res.data
            resolve(data.data)
          }
        })
          .catch(error => {
            reject(error)
          })
      })
    },
    // 点击左侧模板数据查询表格内容
    async templateData(data, node) {
      const { data: res } = await this.$http.get('/mjz/getMjzQdjcInfoTemplate', {
        params: {
          id: data.id,
          patientId: this.patientId
        }
      })
      if (res.code === 0) {
        if (res.data) {
          this.dataForm = this.handleData(res.data)
        }
      } else {
        this.$message.error(res.msg)
      }
    },
    // 点击保存模板后弹框
    handleTemplate() {
      this.form.name = ''
      this.treeId = ''
      this.queryTemplate()
      this.templateFlag = true
    },
    // 保存模板时选择树节点
    templateNodeClick(node) {
      this.treeId = node.id
    },
    // 保存模板树
    async saveTreeTemplete() {
      if (!this.treeId) return this.$message.warning('请选择目录!')
      const params = {
        doctorId: this.doctorId,
        name: this.form.name,
        type: 2, // 2前段检查 3后段检查
        treeId: this.treeId,
        parentId: this.parentId
      }
      for (const resKey in this.dataForm) {
        if (Array.isArray(this.dataForm[resKey])) {
          this.dataForm[resKey] = this.dataForm[resKey].join(',')
        }
      }
      const { data: res } = await this.$http.post('/mjz/saveMjzQdjcTemplate', { ...params, ...this.dataForm })
      if (res.code === 0) {
        this.templateFlag = false
        await this.queryTreeCase()
        this.$message.success('保存成功')
      } else {
        this.$message.error(res.msg)
      }
    },
    // 新增左侧描述项树弹框
    append(type, data) {
      this.addType = 2
      this.form.name = ''
      type === 1 ? this.title = '新增父级' : this.title = '新增子级'
      type === 1 ? this.parentId = 0 : this.parentId = data.id
      this.dialogFormVisible = true
    },
    // 新增左侧描述项树
    async handleSaveCase() {
      const params = {
        type: 2,
        doctorId: this.doctorId,
        name: this.form.name,
        weight: this.weight,
        parentId: this.parentId
      }
      const { data: res } = await this.$http.post('/treetemplate/addTree', params)
      if (res.code === 0) {
        this.dialogFormVisible = false
        await this.queryTreeCase()
        this.$message.success('保存成功')
      } else {
        this.$message.error(res.msg)
      }
    },
    // 删除左侧树/模板节点弹框
    remove(node, data) {
      this.deleteId = data.id
      let url = ''
      if (data.type) {
        // 模板节点
        url = '/mjz/delMjzQdjcInfoTemplate'
      } else {
        // 树节点
        url = '/treetemplate/deleteTree'
      }
      this.$confirm('确定删除该节点?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.removeTemplate(url)
      }).catch(() => {

      })
    },
    // 删除左侧树/模板节点
    async removeTemplate(url) {
      const params = {
        id: this.deleteId
      }
      const { data: res } = await this.$http.post(url, params)
      if (res.code === 0) {
        this.$message.success('删除成功')
        await this.queryTreeCase()
        await this.getforeList('2')
      } else {
        this.$message.error(res.msg)
      }
    },
    // 查询弹框模板树
    async queryTemplate() {
      const { data: res } = await this.$http.get('/treetemplate/findTree', {
        params: {
          type: 2,
          doctorId: this.doctorId
        }
      })
      if (res.code === 0) {
        this.treeTemplate = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    // 使用递归遍历树，合并模板节点和child节点
    fn(data) {
      data.forEach((item, i) => {
        if (item.list && item.list.length) {
          item.child = item.child.concat(item.list)
          // 调用递归函数
        }
        if (item.child) {
          this.fn(item.child)
        }
      })
      return data
    },
    // 查询左侧病历树
    async queryTreeCase() {
      const { data: res } = await this.$http.get('/treetemplate/findTreeCase', {
        params: {
          type: 2,
          doctorId: this.doctorId
        }
      })
      if (res.code === 0) {
        this.treeCaseList = this.fn(res.data)
      } else {
        this.$message.error(res.msg)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.foreBox{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  position: relative;
  .btnBox{
    position: fixed;
    right: 84px;
    text-align: right;
    margin-right: 16px;
    background-color: white;
    z-index: 999;
  }
  .moveIcon{
    position: absolute;
    left: calc(50% + 112px);
    top: 40px;
    z-index: 9;
  }
  .custom-tree-node{
    width: 100%;
  }
}
</style>
<style lang="scss">
.foreBox{
  .el-form-item__content{
    text-align: left;
  }
  .el-tree-node>.el-tree-node__children{
    overflow-x: auto;
  }
}
</style>
