<template>
  <div class="drawerRoot">
    <el-drawer
      :visible.sync="drawer"
      size="90%"
      :destroy-on-close="true"
      :before-close="beforeClose"
      @open="open"
    >
      <template slot="title" width="100%">
        <el-col :span="12">
          编辑模板
          <el-tag v-if="index">
            {{ formTemplate.tempName }}
          </el-tag>
        </el-col>
      </template>
      <div class="root">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="0">
            <el-form
              ref="formTemplate"
              :model="formTemplate"
              class="small-space"
              label-position="left"
              label-width="80px"
              style="margin-left: 50px"
            >
              <el-form-item label="模板名称" prop="tempName" required>
                <el-input v-model="formTemplate.tempName" type="text" style="width:400px" />
              </el-form-item>
              <el-form-item label="模板类型" prop="tempCategory" required>
                <el-select
                  v-model="formTemplate.tempCategory"
                  placeholder="模板类型"
                  style="width: 200px"
                  clearable
                >
                  <el-option
                    v-for="item in categoryList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-select
                  v-model="formTemplate.bglx"
                  placeholder="报告类型"
                  style="width: 215px"
                  clearable
                >
                  <!-- @change="getDicCodeList" -->
                  <el-option
                    v-for="item in bglxList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="检验类别">
                <el-select
                  v-model="formTemplate.jianyanleibie"
                  placeholder="检验类别"
                  style="width: 200px"
                  clearable
                  @change="getNblbListByJylb"
                >
                  <el-option
                    v-for="item in jylbList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
                <el-select
                  v-model="neibuleibie"
                  placeholder="内部类别"
                  multiple
                  style="width: 215px"
                  clearable
                >
                  <el-option
                    v-for="item in nblbList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="设备种类">
                <el-select
                  v-model="formTemplate.shebeizhongleidaima"
                  placeholder="设备种类"
                  style="width: 200px"
                  clearable
                  @change="getSblbList"
                >
                  <el-option
                    v-for="item in sbzlList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-select
                  v-model="formTemplate.shebeileibiedaima"
                  placeholder="设备类别"
                  style="width: 215px"
                  clearable
                >
                  <el-option
                    v-for="item in sblbList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-switch
                  v-model="sbpzLevelStatus"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="类别品种"
                  inactive-text="所有品种"
                  @change="getSbpzList"
                />
              </el-form-item>
              <el-form-item label="设备品种">
                <el-select
                  v-model="shebeipinzhongdaima"
                  placeholder="设备品种"
                  multiple
                  style="width: 420px"
                  clearable
                >
                  <el-option
                    v-for="item in sbpzList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="模板路径" prop="tempPath">
                <el-input v-model="formTemplate.tempPath" type="text" style="width:400px" />
              </el-form-item>
              <el-form-item label="检验依据" prop="jianyanyiju">
                <el-input v-model="formTemplate.jianyanyiju" type="text" style="width:400px" />
              </el-form-item>
              <el-form-item label="对应字典" prop="withDicCode">
                <el-select
                  v-model="formTemplate.withDicCode"
                  placeholder="对应字典"
                  style="width: 420px"
                  clearable
                >
                  <el-option
                    v-for="item in dicCodeList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="父类模板" prop="parentId">
                <el-select
                  v-model="formTemplate.parentId"
                  placeholder="父类模板"
                  style="width: 420px"
                  clearable
                >
                  <el-option
                    v-for="item in parentList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-row :gutter="10">
                <el-col>
                  <el-form-item label="版本号" prop="version" required>
                    <el-input
                      v-model="formTemplate.version"
                      type="text"
                      style="width: 200px"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="排序号" prop="sort">
                <el-input
                  v-model="formTemplate.sort"
                  type="text"
                  style="width: 200px"
                />
              </el-form-item>
              <el-form-item label="是否消红" prop="cleanState">
                <el-switch
                  v-model="formTemplate.cleanState"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                />
              </el-form-item>
              <el-form-item label="展示页码" prop="showPageStatus">
                <el-switch
                  v-model="formTemplate.showPageStatus"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                />
              </el-form-item>
            </el-form>
            <div class="bottomBox">
              <el-button type="primary" @click="update">
                保存修改
              </el-button>
              <el-button @click="$emit('closeTemplateDrawer')">
                取消
              </el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="模板配置" name="1">
            <div class="boxRoot">
              <div class="left">
                <div class="funbox">
                  <span>模板详情</span>
                  <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    @click="addTemFn"
                  >
                    新增
                  </el-button>
                </div>
                <el-table
                  ref="settingList"
                  :data="list"
                  border
                  fit
                  highlight-current-row
                  @current-change="rowClick"
                >
                  <el-table-column align="center" label="序号" width="50" type="index" />
                  <el-table-column align="center" label="检验项目索引" prop="sort" />
                  <el-table-column
                    align="center"
                    label="表格索引"
                    prop="tableIndex"
                  />
                  <el-table-column
                    align="center"
                    label="表格模式"
                    width="80"
                    prop="tableMode"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.tableMode === 0 ? "SN模式" : "KV模式" }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="写入模式"
                    width="80"
                    prop="writeMode"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.writeMode && writeModes[scope.row.writeMode] }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="首页检验项目起始页码"
                    prop="tableStartRow"
                    width="100"
                  />
                  <el-table-column
                    align="center"
                    label="首页检验项目行个数"
                    prop="tableRowCount"
                    width="100"
                  />
                  <el-table-column
                    align="center"
                    label="附页检验项目起始行"
                    prop="affiliatedTableStartRow"
                    width="100"
                  />
                  <el-table-column
                    align="center"
                    label="附页检验项目行个数"
                    prop="affiliatedTableRowCount"
                    width="100"
                  />
                  <el-table-column
                    :formatter="fmBglx"
                    align="center"
                    label="表格类型"
                    prop="tableType"
                    width="80"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.tableType === 1 ? "检验项目" : "目录页" }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="是否是子报告模板"
                    prop="isChild"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.isChild ? "是" : "否" }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="操作"
                    width="100"
                    fixed="right"
                  >
                    <template slot-scope="scope">
                      <el-button
                        type="primary"
                        size="mini"
                        icon="el-icon-edit"
                        circle
                        title="编辑"
                        @click="editFnTem(scope.row)"
                      />
                      <el-button
                        type="danger"
                        size="mini"
                        icon="el-icon-delete"
                        circle
                        title="删除"
                        @click="deleteModelFn(scope.row)"
                      />
                    </template>
                  </el-table-column>
                </el-table>
                <div class="bottomPage">
                  <pagination
                    v-show="totalCount > 0"
                    :total="totalCount"
                    :page-num.sync="listQuery.pageNum"
                    :page-row.sync="listQuery.pageRow"
                    @pagination="getList"
                  />
                </div>
              </div>
              <div class="right">
                <div class="funbox">
                  <span>模板详情</span>
                  <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    @click="addtemFn"
                  >
                    新增
                  </el-button>
                </div>
                <el-table :data="gridData" border fit>
                  <el-table-column align="center" label="序号" width="50">
                    <template slot-scope="scope">
                      <span v-text="getIndex(scope.$index)" />
                    </template>
                  </el-table-column>
                  <el-table-column
                    property="field"
                    label="列名"
                    min-width="150"
                    align="center"
                  />

                  <el-table-column
                    property="indexFromRight"
                    label="排序"
                    width="60"
                    align="center"
                  />
                  <el-table-column
                    property="modeName"
                    label="模式"
                    width="80"
                    align="center"
                  />
                  <el-table-column align="center" label="操作" min-width="100" fixed="right">
                    <template slot-scope="scope">
                      <el-button
                        type="primary"
                        size="mini"
                        icon="el-icon-edit"
                        circle
                        title="编辑"
                        @click="editFn(scope.row)"
                      />
                      <el-button
                        type="danger"
                        size="mini"
                        icon="el-icon-delete"
                        circle
                        title="删除"
                        @click="deleteFn(scope.row)"
                      />
                    </template>
                  </el-table-column>
                </el-table>
                <div class="bottomPage">
                  <pagination
                    v-show="totalCount1 > 0"
                    :total="totalCount1"
                    :page-num.sync="jyxmParams.pageNum"
                    :page-row.sync="jyxmParams.pageSize"
                    @pagination="getDemoList"
                  />
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <el-dialog title="新增" :visible.sync="dialogVisible" width="37%" @close="closeTemplateJyxmDialog">
      <el-form ref="templateJyxmForm" label-width="170px" :model="formLabelAlign">
        <el-form-item
          label="列对应的字段"
          prop="field"
          :rules="[{ required: true, message: '请输入字段名', trigger: 'blur' }]"
        >
          <el-input v-model="formLabelAlign.field" />
        </el-form-item>
        <el-form-item
          label="从右往左数对应的索引"
          prod="indexFromRight"
          :rules="[
            { required: true, message: '请输入对应索引', trigger: 'blur' },
          ]"
        >
          <el-input-number v-model="formLabelAlign.indexFromRight" :min="1" :max="10" label="索引" />
          <el-alert
            type="warning"
            title="从1开始数"
            style="display: inline"
            :closable="false"
          />
        </el-form-item>
        <el-form-item label="字段模式" prop="fieldMode">
          <el-radio-group v-model="formLabelAlign.fieldMode">
            <el-radio :label="0">
              普通模式
            </el-radio>
            <el-radio :label="1">
              USI模式
            </el-radio>
            <el-radio :label="2">
              UNN模式
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onsubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="新增" :visible.sync="dialogVisible1" width="50%" @close="close">
      <el-form ref="templateSettingForm" :model="form">
        <el-form-item label="检验项目索引" prop="sort" label-width="150px">
          <el-input-number v-model="form.sort" :min="0" :max="100" />
          <el-alert
            type="warning"
            title="从1开始数"
            style="display: inline"
            :closable="false"
          />
        </el-form-item>
        <el-form-item
          label="表格模式"
          prop="tableMode"
          label-width="150px"
        >
          <el-radio-group v-model="form.tableMode" @change="changeTableMode">
            <el-radio :label="0">
              SN模式
            </el-radio>
            <el-radio :label="1">
              KV模式
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="写入模式"
          prop="writeMode"
          label-width="150px"
        >
          <el-radio-group v-model="form.writeMode">
            <el-radio v-for="(item, writeModeIndex) in writeModes" :key="writeModeIndex" :label="writeModeIndex" :disabled="(form.tableMode === 0 && writeModeIndex === 2) || (form.tableMode === 1 && writeModeIndex !== 2)">
              {{ item }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="表格行寻找模式"
          prop="tableRowFindMode"
          label-width="150px"
        >
          <el-radio-group v-model="form.tableRowFindMode" @change="changeTableRowFindMode">
            <el-tooltip class="item" effect="dark" content="达到当前行数限制，或未找到行时自动翻页继续寻找下一行" placement="top-start">
              <el-radio :label="0">
                自动
              </el-radio>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="达到表格限定高度，将最后一行移除，在下一页继续写入" placement="top-start">
              <el-radio :label="1">
                表格高度限制
              </el-radio>
            </el-tooltip>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="表格索引"
          prop="tableIndex"
          label-width="150px"
        >
          <el-input-number
            v-model="form.tableIndex"
            :min="0"
            :max="100"
            :disabled="form.tableMode === 1"
          />
          <el-alert
            type="warning"
            title="从1开始数"
            style="display: inline"
            :closable="false"
          />
        </el-form-item>
        <el-form-item
          label="首页检验项目起始行"
          prop="tableStartRow"
          label-width="150px"
        >
          <el-input-number
            v-model="form.tableStartRow"
            :min="0"
            :max="100"
            :disabled="form.tableMode === 1"
          />
          <el-alert
            type="warning"
            title="从1开始数"
            style="display: inline"
            :closable="false"
          />
        </el-form-item>
        <el-form-item
          label="首页检验项目行个数"
          prop="tableRowCount"
          label-width="150px"
        >
          <el-input-number
            v-model="form.tableRowCount"
            :min="0"
            :max="100"
            :disabled="form.tableMode === 1 || form.tableRowFindMode === 1"
          />
          <el-alert
            type="warning"
            title="从1开始数"
            style="display: inline"
            :closable="false"
          />
        </el-form-item>
        <el-form-item
          label="附页检验项目起始行"
          prop="affiliatedTableStartRow"
          label-width="150px"
        >
          <el-input-number
            v-model="form.affiliatedTableStartRow"
            :min="0"
            :max="100"
            :disabled="form.tableMode === 1"
          />
          <el-alert
            type="warning"
            title="从1开始数"
            style="display: inline"
            :closable="false"
          />
        </el-form-item>
        <el-form-item
          label="附页检验项目行个数"
          prop="affiliatedTableRowCount"
          label-width="150px"
        >
          <el-input-number
            v-model="form.affiliatedTableRowCount"
            :min="0"
            :max="100"
            :disabled="form.tableMode === 1 || form.tableRowFindMode === 1"
          />
          <el-alert
            type="warning"
            title="从1开始数"
            style="display: inline"
            :closable="false"
          />
        </el-form-item>
        <el-form-item
          label="表格类型"
          prop="tableType"
          label-width="150px"
        >
          <el-radio v-model="form.tableType" :label="1">
            检验项目
          </el-radio>
          <el-radio v-model="form.tableType" :label="2">
            目录页
          </el-radio>
        </el-form-item>
        <el-form-item
          label="是否是子报告模板"
          prop="isChild"
          label-width="150px"
        >
          <el-switch
            v-model="form.isChild"
            active-text="是"
            inactive-text="不是"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="onsubmit1">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import TemplateApi from '@/api/template'

export default {
  components: { Pagination },
  props: {
    id: {
      type: Number,
      default: 0
    },
    drawer: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      default: 0
    },
    templateList: {
      type: Array,
      default: () => []
    },
    parentList: {
      type: Array,
      default: () => []
    },
    type: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeName: 0,
      settingList: [],
      formTemplate: {
        tempName: '',
        tempCategory: '',
        bglx: 1,
        jianyanleibie: '',
        shebeizhongleidaima: '',
        shebeileibiedaima: '',
        tempPath: '',
        jianyanyiju: '',
        withDicCode: '',
        parentId: '',
        version: '',
        sort: 0,
        cleanState: false,
        showPageStatus: true
      },
      templateSettingId: '',
      dialogVisible1: false,
      formLabelAlign: {
        field: '',
        fieldMode: 0,
        indexFromRight: '',
        templateId: '', // 模板id
        templateSettingId: '' // 配置id
      },
      form: {
        templateId: '',
        writeMode: 0,
        tableIndex: 1,
        tableMode: 0,
        tableRowFindMode: 0,
        tableStartRow: 0,
        tableRowCount: 0,
        affiliatedTableStartRow: 0,
        affiliatedTableRowCount: 0,
        sort: 1,
        tableType: 1,
        isChild: false
      },
      // formTemplate:{},
      dialogVisible: false,
      bglxList: [],
      categoryList: [
        {
          value: 'YSJL',
          label: '原始记录'
        }, {
          value: 'JYBG',
          label: '检验报告'
        }, {
          value: 'OTHER',
          label: '其他'
        }, {
          value: 'HZD',
          label: '回执单'
        }
      ],
      jylbList: [],
      neibuleibie: [],
      nblbList: [],
      dicCodeList: [],
      options: [],
      sbzlList: [],
      shebeipinzhongdaima: [],
      sblbList: [],
      sbpzList: [],
      totalCount: 0,
      listQuery: {
        pageNum: 1, // 页码
        pageRow: 20, // 每页条数
        templateId: null
      },
      list: [],
      gridData: [],
      sbpzLevelStatus: false,
      multipleSelection: [],
      moduleArr: [],
      jyxmParams: {
        pageNum: 1,
        pageSize: 20,
        templateId: '',
        templateSettingId: ''
      },
      totalCount1: 0,
      writeModes: ['CN模式', 'DN模式', 'KV模式', 'CFI模式', 'SA模式']
    }
  },
  mounted() {},
  methods: {
    changeTableMode() {
      switch (this.form.tableMode) {
        case 0:
          this.form.writeMode = 0
          this.form.tableIndex = 1
          this.form.tableStartRow = 1
          this.form.tableRowCount = this.form.tableRowFindMode ? 0 : 1
          this.form.affiliatedTableStartRow = 0
          this.form.affiliatedTableRowCount = 0
          break
        case 1:
          this.form.writeMode = 2
          this.form.tableIndex = 0
          this.form.tableStartRow = 0
          this.form.tableRowCount = 0
          this.form.affiliatedTableStartRow = 0
          this.form.affiliatedTableRowCount = 0
          break
        default:
          break
      }
    },
    changeTableRowFindMode() {
      this.form.tableRowCount = 0
      this.form.affiliatedTableRowCount = 0
    },
    close() {
      this.$refs.templateSettingForm.resetFields()
    },
    closeTemplateJyxmDialog() {
      this.$refs.templateJyxmForm.resetFields()
    },
    open() {
      this.listQuery.templateId = this.id
      this.form.templateId = this.id
      this.formLabelAlign.templateId = this.id
      if (this.id) {
        this.loadFormData(this.index)
        this.getList()
      } else {
        this.$refs['formTemplate'].resetFields()
        this.clearForm()
      }
      this.getSbList(undefined, undefined, 1)
      this.getBglxList()
      this.getJylbList()
      this.getTemplateIdentification()
    },
    getJylbList() {
      this.getNeibuList('jylb', null, null)
    },
    addTemFn() {
      this.dialogVisible1 = true
    },
    editFnTem(row) {
      this.form = row
      this.dialogVisible1 = true
    },
    addtemFn() {
      this.dialogVisible = true
    },
    getList() {
      this.listQuery.templateId = this.id
      // 查询列表
      this.api({
        url: '/templateSetting/list',
        method: 'get',
        params: this.listQuery
      }).then((data) => {
        // data.list((item)=>{
        //   if(item.tableMode)
        // })
        this.list = data.list
        this.totalCount = data.total * 1
        this.gridData = []
        if (data.list[0]) {
          this.templateSettingId = data.list[0].id
          this.getDemoList()
        }
      })
    },
    deleteModelFn(row) {
      TemplateApi.deleteModuleFn({
        ids: [row.id]
      }).then((data) => {
        this.getList()
      })
    },
    deleteFn(row, index) {
      const arr = []
      arr.push(row.id)
      TemplateApi.deleteTemplateJyxm({
        ids: arr
      }).then((data) => {
        this.getDemoList()
      })
    },
    getIndex($index) {
      // 表格序号
      return (this.listQuery.pageNum - 1) * this.listQuery.pageRow + $index + 1
    },
    getDemoList() {
      if (!this.templateSettingId) {
        this.$notify.error('未正确提供模板设置主键，无法加载检验项目列配置数据！')
        return
      }
      // 查询列表
      this.jyxmParams.templateSettingId = this.templateSettingId
      this.jyxmParams.templateId = this.id
      this.api({
        url: '/templateJyxm/list',
        method: 'get',
        params: this.jyxmParams
      }).then((data) => {
        data.list.map((item) => {
          if (item.fieldMode === 0) {
            item.modeName = '普通模式'
          } else if (item.fieldMode === 1) {
            item.modeName = 'USI模式'
          } else {
            item.modeName = 'UNN模式'
          }
        })
        this.gridData = data.list
        this.totalCount1 = data.total
      })
    },
    toggleFn(val) {
      this.multipleSelection = val
    },
    editFn(row) {
      this.dialogVisible = true
      this.formLabelAlign.field = row.filed
      this.formLabelAlign.fieldMode = row.fieldMode
      this.formLabelAlign.indexFromRight = row.indexFromRight
      this.formLabelAlign.templateSettingId = row.id
      this.formLabelAlign.templateId = this.id
    },
    handleChange(value) {
      this.formLabelAlign.indexFromRight = value
    },
    onsubmit() {
      this.formLabelAlign.templateSettingId = this.templateSettingId
      this.formLabelAlign.templateId = this.id
      this.api({
        url: '/templateJyxm',
        method: 'post',
        data: this.formLabelAlign
      }).then((res) => {
        this.dialogVisible = false
        this.getDemoList()
      })
    },
    onsubmit1() {
      this.api({
        url: '/templateSetting',
        method: this.form.id ? 'put' : 'post',
        data: this.form
      }).then((res) => {
        this.dialogVisible1 = false
        this.getList()
      })
    },
    fmBglx(row, column, cellValue) {
      for (let i = 0; i < this.bglxList.length; i++) {
        if (this.bglxList[i].value === cellValue) {
          return this.bglxList[i].name
        }
      }
    },
    fmSbzl(row, column, cellValue) {
      for (let i = 0; i < this.sbzlList.length; i++) {
        if (this.sbzlList[i].value === cellValue) {
          return this.sbzlList[i].label
        }
      }
    },
    handleSettingChange(row) {
      this.moduleArr = row
      // this.getDemoList(row.id)
    },
    getTemplateIdentification() {
      this.api({
        url: '/dicData/getDicDataByTypeCode',
        method: 'get',
        params: {
          typeCode: 'TEMPLATE_IDENTIFICATION'
        }
      }).then((data) => {
        this.options = data
      })
    },
    getDicDataByTypeCode(val, type, parentId) {
      this.api({
        url: '/dicData/getDicDataByTypeCode',
        method: 'get',
        params: {
          typeCode: val,
          parentId: parentId
        }
      }).then((data) => {
        if (type === 'dicCode') {
          this.dicCodeList = data
        }
      })
    },
    getSbpzList() {
      this.shebeipinzhongdaima = []
      this.getSbList(
        this.formTemplate.shebeizhongleidaima,
        this.sbpzLevelStatus ? this.formTemplate.shebeileibiedaima : undefined,
        this.sbpzLevelStatus ? 3 : 4
      )
    },
    getBglxList() {
      this.api({
        url: '/dicData/getDicDataByTypeCode',
        method: 'get',
        params: {
          typeCode: 'REPORT_CLASS'
        }
      }).then((data) => {
        this.bglxList = data
      })
    },
    getNblbListByJylb(val) {
      const sbzl = this.formTemplate.shebeizhongleidaima
      this.neibuleibie = []
      this.getNeibuList('nblb', val, sbzl)
    },
    handleClick(e) {
      this.activeName = e.index
    },
    getSblbList(val) {
      this.formTemplate.shebeileibiedaima = ''
      this.sbpzList = []
      this.shebeipinzhongdaima = []
      this.getSbList(val, undefined, 2)
      // 新增与内部类别级联关系
      const jylb = this.formTemplate.jianyanleibie
      this.neibuleibie = []
      this.getNeibuList('nblb', jylb, val)
      this.shebeipinzhongdaima = []
      this.sbpzLevelStatus = false
      this.getSbList(
        this.formTemplate.shebeizhongleidaima,
        this.sbpzLevelStatus ? this.formTemplate.shebeileibiedaima : undefined,
        this.sbpzLevelStatus ? 3 : 4
      )
    },
    getSbList(sbzl, sblb, level) {
      this.api({
        url: '/sedirectory/getList',
        method: 'get',
        params: {
          sbzl: sbzl,
          sblb: sblb,
          level: level
        }
      }).then((data) => {
        switch (level) {
          case 1:
            this.sbzlList = data
            break
          case 2:
            this.sblbList = data
            break
          case 3:
            this.sbpzList = data
            break
          default:
            this.sbpzList = data
            break
        }
      })
    },
    getDicCodeList(val) {
      for (let i = 0; i < this.bglxList.length; i++) {
        if (val === 1) {
          this.dicCodeList = []
          break
        } else if (val === this.bglxList[i].value) {
          this.getDicDataByTypeCode(
            this.bglxList[i].code,
            'dicCode',
            this.bglxList[i].id
          )
          break
        }
      }
    },
    getNeibuList(type, parentCode, species) {
      this.api({
        url: '/category/getCategoryList',
        method: 'get',
        params: {
          parentCode: parentCode,
          species: species
        }
      }).then((data) => {
        switch (type) {
          case 'jylb':
            this.jylbList = data
            break
          case 'nblb':
            this.nblbList = data
            break
        }
      })
    },
    loadFormData(index) {
      this.$set(this, 'formTemplate', this.templateList[index])
      this.getSbList(this.formTemplate.shebeizhongleidaima, undefined, 2)
      this.sbpzLevelStatus = false
      this.getSbList(
        this.formTemplate.shebeizhongleidaima,
        this.sbpzLevelStatus ? this.formTemplate.shebeileibiedaima : undefined,
        this.sbpzLevelStatus ? 3 : 4
      )
      this.shebeipinzhongdaima = JSON.parse(
        this.formTemplate.shebeipinzhongdaima
      )
      this.neibuleibie = JSON.parse(this.formTemplate.neibuleibie)
      this.getDicCodeList(this.formTemplate.bglx)
      this.getNeibuList(
        'nblb',
        this.formTemplate.jianyanleibie,
        this.formTemplate.shebeizhongleidaima
      )
    },
    update() {
      let methods = ''
      if (this.id) {
        if (this.type === 1 || this.type === 2) {
          delete this.formTemplate.id
          methods = 'post'
        } else {
          methods = 'put'
        }
      } else {
        methods = 'post'
      }
      this.formTemplate.neibuleibie = JSON.stringify(this.neibuleibie)
      this.formTemplate.shebeipinzhongdaima = JSON.stringify(this.shebeipinzhongdaima)
      this.api({
        url: '/template',
        method: methods,
        data: this.formTemplate
      }).then(_ => {
        this.$emit('closeTemplateDrawer')
      })
    },
    rowClick(row) {
      if (!row) {
        return false
      }
      this.templateSettingId = row.id
      this.$refs.settingList.toggleRowSelection(row)
      this.getDemoList()
    },
    clearForm() {
      this.formTemplate = {
        tempName: '',
        tempCategory: '',
        bglx: null,
        jianyanleibie: '',
        shebeizhongleidaima: '',
        shebeileibiedaima: '',
        tempPath: '',
        jianyanyiju: '',
        withDicCode: '',
        parentId: '',
        version: '',
        sort: null,
        cleanState: false,
        showPageStatus: true
      }
      this.neibuleibie = []
      this.shebeipinzhongdaima = []
    },
    beforeClose(done) {
      this.list.length = 0
      this.gridData.length = 0
      this.clearForm()
      this.$emit('closeTemplateDrawer')
    }
  }
}
</script>

<style scoped>
.root {
  padding: 0 30px;
  height: auto;
}
>>> .el-drawer__body {
  overflow-y: scroll;
}
.boxRoot {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
}
.boxRoot .left {
  width: 59%;
  border: 1px solid #eeeeee;
  padding: 20px;
}
.boxRoot .right {
  width: 40%;
  border: 1px solid #eeeeee;
  padding: 20px;
}
.funbox {
  width: 100%;
  box-sizing: border-box;
  padding: 0 30px;
  text-align: right;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.bottomBox {
  width: 100%;
  padding: 20px;
  text-align: center;
}
>>> .el-drawer__header {
  margin-bottom: 10px !important;
}
</style>
