<template>
  <div class="form-inline">
    <label class="control-label">{{ node.name }}({{ node.nodeId }})</label>
    <el-button type="primary" size="mini" @click="editTaskReminder"
      >设置催办</el-button
    >
    <br />
    <label
      v-if="!reminders.reminderList || reminders.reminderList.length == 0"
      class="control-label"
      style="color: #dd6161"
      >尚未配置催办任务</label
    >
    <div v-if="reminders.reminderList && reminders.reminderList.length > 0">
      <label
        style="display: block; text-align: left"
        class="control-label"
        v-for="taskReminder in reminders.reminderList"
        :key="taskReminder.name"
        >{{ taskReminder.name }}</label
      >
      <div class="control-label" style="text-align: right">
        查看更多信息请编辑
      </div>
      <br />
    </div>
    <ht-sidebar-dialog
      width="800px"
      :title="titleSetting"
      :visible="dialogVisibleSetting"
      :before-close="close"
      :close-on-click-modal="false"
      append-to-body      
      custom-class="flow-node-remind-dialog"
    >

 
      <div style="width: 100%; height: 100%;">
        <div class='remind-basic-info'>

          <el-form v-form v-model="reminder" data-vv-scope="settingSave" class="elForm">
            <el-tabs v-model="tabType" type="border-card">
              <el-tab-pane label="催办基本信息" name="information">
                <table
                  class="form-table remind-form-table"
                  cellspacing="0"
                  cellpadding="0"
                  border="0"
                >
                  <tbody>
                    <tr>
                      <th width="130px" class="is-required">催办名称:</th>
                      <td colspan="3">
                        <ht-input
                          v-model="reminder.name"
                          placeholder="请输入催办名称"
                          autocomplete="off"
                          validate="required"
                         style="width:80%"
                        ></ht-input>
                      </td>
                    </tr>
                    <tr>
                      <th width="130px">
                        <el-tooltip
                          content="脚本取值格式为{表单名}.data.{字段名}"
                          placement="top"
                        >
                          <i class="icon-notes"></i>
                        </el-tooltip>
                        日期类型:
                      </th>
                      <td colspan="3">
                        <el-radio-group v-model="reminder.dateScriptType">
                            <el-radio-button v-for='(dateItem) in options' :key='dateItem.key' :label="dateItem.key">{{dateItem.value}}</el-radio-button>
                        </el-radio-group>
                        <span
                          v-if="reminder.dateScriptType === '2'"
                          class="ml-10"
                        ><flow-var-selector
                          :defId="node.defId"
                          @node-click="varTreeOnConfirm($event, 'typeScript')"
                          :removeSub="true"
                          :includeBpmConstants="false"
                        /></span>

                        <span
                          v-if="reminder.dateScriptType === '2'"
                          class="ml-10"
                        >
                          <HtMonacoEditor style='margin-top:10px;' ref="codeEditor" language="java"  v-model="reminder.typeScript" height="160px"/>
                        </span>
                        <span
                          v-else
                          class="ml-10"
                        >
                        <ht-select

                          v-model="reminder.dateType"
                          :options="[
                            {key: 'caltime', value: '日历日'},
                            {key: 'worktime', value: '工作日'},
                          ]"
                          class="select-width"
                        />
                        </span>
                      </td>
                    </tr>
                    <tr>
                      <th width="130px" class="is-required">相对节点:</th>
                      <td>
                        <ht-select
                          placeholder="请选择"
                          clearable
                          v-model="reminder.relNodeId"
                          :options="nodeOptions"
                          :props="{key: 'nodeId', value: 'label'}"
                          validate="required"
                          class="select-width node-select-width"
                        />
                      </td>

                    </tr>
                    <tr>
                      <th >节点事件:</th>
                      <td>
                        <ht-select
                          clearable
                          v-model="reminder.relNodeEvent"
                          :options="[
                            {key: 'create', value: '创建'},
                            {key: 'complete', value: '完成'},
                          ]"
                          class="select-width"
                        />
                      </td>
                    </tr>
                        <tr>
                      <th width="130px">到期动作:</th>
                      <td colspan="3">
                        <ht-select
                          clearable
                          v-model="reminder.dueAction"
                          :options="[
                            {key: 'no-action', value: '无动作'},
                            {key: 'auto-next', value: '执行同意操作'},
                            {key: 'end-process', value: '结束该流程'},
                            {key: 'call-method', value: '调用指定方法'},
                            {key: 'back-to-start', value: '驳回发起人'},
                            {key: 'reject', value: '驳回上一步'},
                            {key: 'task-transfer', value: '转办指定用户'},
                          ]"
                          class="select-width"
                        />
                        <ht-user-selector-input
                          v-if="reminder.dueAction == 'task-transfer'"
                          class="spec-user-selector"
                          :appendToBody="true"
                          single
                          v-model="reminder.transferName"
                          :validate="reminder.dueAction === 'task-transfer'?'required':''"
                          :config="{id: 'reminder.transferId'}"
                        />
                      </td>
                    </tr>
                    <tr>
                      <th >
                        <el-tooltip
                          content=''
                          placement="top"
                        >
                          <div slot="content">脚本取值格式为{表单名}.getString({字段名})</br>如 table.getString("field")，其中table为表名，field为字段名</div>
                          <i class="icon-notes"></i>
                        </el-tooltip>
                    <i class="is-required">    </i>相对到期时间:
                      </th>
                      <td colspan="3">

                        <el-radio-group v-model="reminder.durationType">
                          <el-radio-button v-for='(dateItem) in options' :key='dateItem.key' :label="dateItem.key">{{dateItem.value}}</el-radio-button>
                        </el-radio-group>
                        <span
                          v-if="reminder.durationType === '2'"
                          class="ml-10"
                        >

                        <flow-var-selector
                          :defId="node.defId"
                          @node-click="
                            varTreeOnConfirm($event, 'durationScript')
                          "
                          :removeSub="true"
                          :includeBpmConstants="false"

                        />
                          </span>
                        <span class="ml-10" v-if="reminder.durationType === '2'">
<!--                        <codemirror-->
<!--                          v-model="reminder.durationScript"-->
<!--                          :options="cmOptions"-->
<!--                        />-->
                          <HtMonacoEditor style='margin-top:10px;' ref="codeEditor" language="java"  v-model="reminder.durationScript" height="160px"/>
                        </span>
                        <span class='ml-10' v-else>
                          <ht-duration
                            class="duration-wrap"
                            v-model="reminder.dueTime"
                            validate="required"
                            v-if="reminder.dateType === 'caltime'"
                          />
                          <template v-if="reminder.dateType === 'worktime'">
                            <ht-input
                              type="number"
                              v-model="reminder.dueTime"
                            />分钟
                          </template>
                        </span>
                      </td>
                    </tr>
                
                    <tr v-if="reminder.dueAction == 'call-method'">
                      <th width="130px">执行脚本:</th>
                      <td colspan="3">
                        <!-- 常用脚本选择对话框  -->
                        <el-button
                          @click="showDialog('eipScriptDialogDueScript')"
                          >常用脚本</el-button
                        >
                        <eip-script-dialog
                          ref="eipScriptDialogDueScript"
                          v-model="reminder.dueScript"
                          append-to-body
                        />
                        <br />
                        <ht-input
                          type="textarea"
                          :rows="5"
                          v-model="reminder.dueScript"
                          placeholder="请输入执行脚本"
                          autocomplete="off"
                          class="ht_tr"
                        ></ht-input>
                      </td>
                    </tr>
                    <tr>
                      <th width="130px">
                        <el-tooltip
                          class="item"
                          effect="dark"
                          content="return true,则执行该条催办；return false,表示不执行该催办。如果表达式为空，将视为返回true。"
                          placement="left-start"
                        >
                         <i class="icon-notes" style="margin-right:4px"></i>
                        </el-tooltip>条件表达式:
                      </th>
                      <td colspan="3">
                        <!-- 常用脚本选择对话框  -->
                        <el-button
                          @click="showDialog('eipScriptDialogCondition')"
                          >常用脚本</el-button
                        >
                        <eip-script-dialog
                          ref="eipScriptDialogCondition"
                          v-model="reminder.condition"
                          append-to-body
                        />
                        <HtMonacoEditor style='margin-top:10px;' ref="codeEditor" language="java"  v-model="reminder.condition" height="160px"/>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <div class='add-btn-wrap'>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="addRemind"
                  style="padding:7px 40px"
                  >新 增</el-button
                  >
                </div>
             
              </el-tab-pane>
              <el-tab-pane label="消息设置" name="news">
                <table
                  class="form-table"
                  cellspacing="0"
                  cellpadding="0"
                  border="0"
                >
                  <tbody>
                    <tr>
                      <th width="130px">催办类型:</th>
                      <td style="word-break:break-all">
                        <el-checkbox class="ht_ce" v-model="reminder.isSendMsg"
                          >催办期间定时发送消息</el-checkbox
                        >
                        <el-checkbox
                          v-if="reminder.isSendMsg"
                          class="ht_ce"
                          v-model="reminder.sendPerson"
                          >催办秘书</el-checkbox
                        >
                        <el-checkbox
                          v-if="reminder.isSendMsg"
                          class="ht_ce"
                          v-model="reminder.directLeader"
                          >催办直接上级</el-checkbox
                        >
                        <br>
                        <el-checkbox
                          v-if="reminder.isSendMsg"
                          class="ht_ce"
                          v-model="reminder.mainOrgLeader"
                          >催办主组织部门负责人</el-checkbox
                        >
                        <el-checkbox
                          v-if="reminder.isSendMsg"
                          class="ht_ce"
                          v-model="reminder.directUser"
                          >催办指定用户</el-checkbox
                        >
                      </td>
                      <td>
                        <ht-user-selector-input
                          v-if="reminder.directUser"
                          class="spec-user-selector"
                          :appendToBody="true"
                          v-model="reminder.directUserNames"
                          :config="{id: 'reminder.directUserIds'}"
                        />
                      </td>
                    </tr>
                    <tr v-if="reminder.isSendMsg">
                      <th width="130px" class="is-required">发送相对时间:</th>
                      <td>
                        <ht-select
                          v-model="reminder.relTimeType"
                          :options="options"
                          class="select-width"
                        />
                        <codemirror
                          v-model="reminder.relTimeScript"
                          :options="cmOptions"
                          v-if="reminder.relTimeType === '2'"
                        />
                        <template v-else>
                          <ht-duration
                            class="duration-wrap"
                            v-model="reminder.msgSendTime"
                            validate="required"
                            v-if="reminder.dateType === 'caltime'"
                          />
                          <template v-if="reminder.dateType === 'worktime'"
                            ><ht-input
                              type="number"
                              v-model="reminder.msgSendTime"
                            />分钟</template
                          >
                        </template>
                        <!-- <ht-duration v-model="reminder.msgSendTime" validate="required" /> -->
                      </td>
                    </tr>
                    <tr v-if="reminder.isSendMsg">
                      <th width="130px" class="is-required">发送信息次数:</th>
                      <td>
                        <ht-select
                          clearable
                          v-model="reminder.msgCount"
                          :options="[
                            {key: '1', value: '1次'},
                            {key: '2', value: '2次'},
                            {key: '3', value: '3次'},
                            {key: '4', value: '4次'},
                            {key: '5', value: '5次'},
                            {key: '6', value: '6次'},
                            {key: '7', value: '7次'},
                            {key: '8', value: '8次'},
                            {key: '9', value: '9次'},
                            {key: '10', value: '10次'},
                          ]"
                          validate="required"
                          class="select-width"
                        />
                      </td>
                    </tr>
                    <tr v-if="reminder.isSendMsg">
                      <th width="130px" class="is-required">发送消息间隔:</th>
                      <td>
                        <ht-duration
                          class="duration-wrap"
                          v-model="reminder.msgInterval"
                          validate="required"
                        />
                      </td>
                    </tr>
                    <tr v-if="reminder.isSendMsg">
                      <th width="130px">消息类型:</th>
                      <td>
                        <MessageTypeSelector
                          class="ht_ce"
                          ref="messageTypeSelector"
                          v-model="reminder.msgType"
                        ></MessageTypeSelector>
                      </td>
                    </tr>
                    <tr v-if="reminder.isSendMsg">
                      <th width="130px" class="is-required">富文本模板:</th>
                      <td>
                        <vue-ueditor-wrap
                          v-model="reminder.htmlMsg"
                          :config="myConfig"
                        ></vue-ueditor-wrap>
                      </td>
                    </tr>
                    <tr v-if="reminder.isSendMsg">
                      <th width="130px">普通文本内容:</th>
                      <td>
                        <ht-input
                          type="textarea"
                          :rows="5"
                          class="ht_tr"
                          v-model="reminder.plainMsg"
                          placeholder="请输入普通文本内容"
                          autocomplete="off"
                        ></ht-input>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </el-tab-pane>
            </el-tabs>
               <div class="reminder-list" v-if="tabType=='information'">
                  <el-table
                    :data="remindersCopy.reminderList"
                    border
                    ref="htTableSetting"
                    @row-click="orgRowClick"
                  >
                    <el-table-column prop="name" label="催办名称" />
                    <el-table-column label="操作" width="90" class-name="default-row">
                      <template v-slot="{$index}">
                        <el-button
                          size="mini"
                          type="text"
                         
                          @click="deleteSetting(remindersCopy.reminderList, $index)"
                        >删除</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>

                </div>
          </el-form>
        </div>

      </div>
      <div slot='footer' style="margin-bottom: 10px;text-align: right;">
        <el-button
          type="dfault"
          @click="close"
        >取消</el-button
        >
        <el-button
          type="primary"
          @click="saveRemind"
        >保存</el-button
        >
        <el-tooltip
          content="催办配置生效需要先进行以下配置:1.在系统配置中的定时计划选中催办定时计划;2.在触发器列表中配置催办触发器并启用"
          placement="top"
        >
          <i class="icon-notes"></i>
        </el-tooltip>
      </div>
    </ht-sidebar-dialog>
  </div>
</template>

<script>
import req from '@/request.js'
import {mapState, mapActions} from 'vuex'
import {Message} from 'element-ui'
const eipScriptDialog = () => import('@/components/dialog/EipScriptDialog.vue')
const MessageTypeSelector = () =>
  import('@/components/flow/MessageTypeSelector.vue')
const FlowVarSelector = () => import('@/components/flow/FlowVarSelector.vue')
export default {
  name: 'FlowNodeRemind',
  components: {MessageTypeSelector, eipScriptDialog, FlowVarSelector},
  props: {
    //任务节点信息
    node: {
      type: Object,
      required: true,
    },
    //流程配置信息
    defConfigData: {
      type: Object,
      required: true,
    },
    //催办配置的信息
    reminders: {
      type: Object,
      required: true,
    },
    //流程所有节点
    nodeList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      tabType: 'information', //催办设置 information：催办基本信息，news：消息设置
      titleSetting: '设置催办', //某个节点催办的标题
      dialogVisibleSetting: false, //是否显示设置节点催办侧边栏
      reminder: {
        dateType: 'caltime',
        relNodeEvent: 'create',
        dueAction: 'no-action',
        msgType: '',
        relNodeId: '',
        isAdd: true,
        isSendMsg: false,
        dueTime: 0,
        durationType: 1,
        relTimeType: 1,
        dateScriptType: 1,
      }, //初始化催办基本信息、消息设置
      myConfig: {
        initialFrameHeight: 240,
        UEDITOR_HOME_URL:
          window.location.origin +
          '/' +
          window.location.pathname.split('/')[1] +
          '/static/ueditor/',
        toolbars: [
          [
            // 'source', //源代码
            'undo', //撤销
            'bold', //加粗
            'indent', //首行缩进
            'italic', //斜体
            'underline', //下划线
            'strikethrough', //删除线
            'subscript', //下标
            'fontborder', //字符边框
            'superscript', //上标
            'formatmatch', //格式刷
            'forecolor', //字体颜色
            'justifyleft', //居左对齐
            'justifycenter', //居中对齐
            'justifyright', //居右对齐
            'justifyjustify', //两端对齐
            'fontfamily', //字体
            'fontsize', //字号
            'insertorderedlist', //有序列表
            'insertunorderedlist', //无序列表
            'lineheight', //行间距
            'inserttable', //插入表格
          ],
        ],
        // 初始容器宽度
        initialFrameWidth: '100%',
        zIndex: 9999,
        enableAutoSave: false,
        readonly: false,
      },
      isSave: false, //判断是否可以保存
      remindersCopy: [], //复制一份最开始的催办配置的信息
      cmOptions: {
        value: '',
        mode: 'groovy',
        readOnly: false,
        smartIndent: true,
        tabSize: 1,
        theme: 'base16-light',
        lineNumbers: true,
        line: true,
        autoRefresh: true,
      },
      options: [
        {key: '1', value: '常规'},
        {key: '2', value: '脚本'},
      ],
    }
  },
  computed: {
    nodeOptions() {
      if (!this.nodeList) {
        return []
      }
      return this.nodeList.map(node => {
        node.label = `${node.name}(${node.nodeId})`
        return node
      })
    }
  },
  methods: {
    //显示常用脚本
    showDialog(action) {
      this.$refs[action].showDialog()
    },
    //设置催办
    editTaskReminder() {
      this.remindersCopy = JSON.parse(JSON.stringify(this.reminders))
      this.isSave = false
      this.dialogVisibleSetting = true
      this.reminder = {
        dateType: 'caltime',
        relNodeEvent: 'create',
        dueAction: 'no-action',
        msgType: '',
        relNodeId: '',
        isAdd: true,
        isSendMsg: false,
        dueTime: 0,
        durationType: '1',
        relTimeType: '1',
        dateScriptType: '1',
      } //初始化催办基本信息、消息设置
    },
    //点击催办列表某一条数据时触发
    orgRowClick(row, column, event) {
      if (column.label != '操作') {
        //判断催办秘书是否选中 1：选中，2：未选中
        if (row.sendPerson == '1') {
          row.sendPerson = true
        } else {
          row.sendPerson = false
        }
        this.reminder = row
        this.isSave = true
      }
    },
    //保存催办
    saveRemind() {
      const this_ = this
      //判断是否有新增的数据
      if (!this_.isSave) {
        Message.warning('请先新增催办信息再保存')
        return
      } else if (this_.reminder.isSendMsg && !this_.reminder.htmlMsg) {
        Message.warning(
          '催办列表富文本模板字段未通过校验，请正确填写表单内容。'
        )
        return
      } else {
        //校验是否有必填字段没有填写
        for (let x = 0; x < this_.remindersCopy.reminderList.length; x++) {
          if (
            !this_.remindersCopy.reminderList[x].name ||
            !this_.remindersCopy.reminderList[x].relNodeId ||
            (!this_.remindersCopy.reminderList[x].dueTime &&
              !this_.remindersCopy.reminderList[x].relTimeType == '2') ||
            (this_.remindersCopy.reminderList[x].isSendMsg &&
              (!this_.remindersCopy.reminderList[x].msgSendTime ||
                !this_.remindersCopy.reminderList[x].msgCount ||
                !this_.remindersCopy.reminderList[x].msgInterval))
          ) {
            this_.$message({
              showClose: true,
              message:
                '催办列表第' +
                (x + 1) +
                '行有字段未通过校验，请正确填写表单内容。',
              type: 'warning',
            })
            return
          }
        }
        let remindersCopyJson = JSON.stringify(this_.remindersCopy) //转json字符串
        req
          .post(
            '${bpmModel}/flow/plugins/v1/remindersSave?defId=' +
              this_.node.defId +
              '&nodeId=' +
              this_.node.nodeId,
            remindersCopyJson
          )
          .then(function (data) {
            data = data.data
            if (data.state) {
              Message.success(
                this_.remindersCopy.reminderList.length +
                  '条催办，已经保存成功！'
              )
              this_.$emit('update:reminders', this_.remindersCopy) //子组件更新父组件的值
              this_.reminder = {
                dateType: 'caltime',
                relNodeEvent: 'create',
                dueAction: 'no-action',
                msgType: '',
                relNodeId: '',
                isAdd: true,
                isSendMsg: false,
                dueTime: 0,
              } //初始化催办基本信息、消息设置
              this_.dialogVisibleSetting = false
            } else {
              Message.error('催办保存出现异常：' + data.message)
            }
          })
      }
    },
    //新增催办
    addRemind() {
      const this_ = this
      this_.$validator.validateAll('settingSave').then((result) => {
        if (result) {
          if (
            this_.reminder.dueTime == 0 &&
            !this_.reminder.durationType == '2'
          ) {
            this_.$message({
              showClose: true,
              message: `相对到期时间不能小于1分钟`,
              type: 'warning',
            })
            return
          }
          if (
            this_.reminder.isSendMsg &&
            (!this_.reminder.msgSendTime || this_.reminder.msgSendTime == 0)
          ) {
            this_.$message({
              showClose: true,
              message: `发送相对时间不能小于1分钟`,
              type: 'warning',
            })
            return
          }
          //判断条件
          if (
            this_.reminder.relNodeId == this_.node.nodeId &&
            this_.reminder.relNodeEvent == 'complete'
          ) {
            Message.warning('无法设置本节点完成后执行催办操作')
            return
          }
          if (this_.reminder.isSendMsg && !this_.reminder.msgType) {
            Message.warning('请选择消息类型')
            return
          }

          if (
            this_.reminder.isSendMsg &&
            !this_.reminder.htmlMsg &&
            !this_.reminder.plainMsg
          ) {
            Message.warning('请输入消息内容')
            return
          }

          //新增数据
          if (this_.reminder.isAdd) {
            this_.isSave = true
            delete this_.reminder.isAdd
            if (!this_.remindersCopy.reminderList)
              this_.remindersCopy.reminderList = []
            this_.remindersCopy.reminderList.push(this.reminder) //新增催办基本信息、消息设置
            this_.reminder = {
              dateType: 'caltime',
              relNodeEvent: 'create',
              dueAction: 'no-action',
              msgType: '',
              relNodeId: '',
              isAdd: true,
              isSendMsg: false,
              dueTime: 0,
            } //初始化催办基本信息、消息设置
          }
        } else {
          let arr = this_.$validator.errors.items.filter(
            (item) => item.scope == 'settingSave'
          )
          let errorLength = arr.length
          this_.$message({
            showClose: true,
            message: `有${errorLength}个字段未通过校验，请正确填写表单内容。`,
            type: 'warning',
          })
        }
      })
    },
    //关闭设置节点催办列弹框
    close() {
      this.dialogVisibleSetting = false
    },
    //删除催办
    deleteSetting(list, index) {
      list.splice(index, 1)
      this.isSave = true
      this.reminder = {
        dateType: 'caltime',
        relNodeEvent: 'create',
        dueAction: 'no-action',
        msgType: '',
        relNodeId: '',
        isAdd: true,
        isSendMsg: false,
        dueTime: 0,
      } //初始化催办基本信息、消息设置
    },
    varTreeOnConfirm(node, type) {
      let method = ''
      if (node.dataType === 'number') method = '.asDouble()'
      else method = '.asText()'
      this.reminder[type] = this.reminder[type] || ''
      this.$set(
        this.reminder,
        type,
        this.reminder[type] + node.path + '.data.' + node.name + method
      )
      this.$forceUpdate()
    },
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
}
</script>

<style lang="scss" scoped>
div >>> .el-dialog__body {
  padding: 10px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
.ht_tr {
  width: 100%;
}
.ht_ce {
  margin-top: -10px !important;
}
.div_list {
  height: 30px;
  background: #e2e2e2;
  line-height: 30px;
  font-weight: bold;
  padding-left: 10px;
  margin-bottom: 10px;
}
>>> label.el-checkbox {
  margin: 5px 10px 0 0;
}
.ht {
  width: 300px;
}
.form-inline {
  float: left;
  width: 100%;
}
.left-label {
  width: 18%;
  float: left;
}
.control-label {
  word-break: break-all;
  text-align: right;
  color: #545252;
  font-size: 12px;
  padding: 0px 10px !important;
  font-weight: bold;
  line-height: 35px;
}
div >>> .box-card {
  margin-bottom: 20px;
}

div >>> .box-card .clearfix {
  padding-top: 20px;
}

div >>> .el-collapse-item__header {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  font-weight: bold;
}

div >>> .el-button {
 
  margin-right: 10px;
  margin-left: 0px !important;
}
>>> .CodeMirror {
  height: 200px;
  // width: 500px;
}
::v-deep .el-textarea .el-textarea__inner {
  resize: both;
  max-width: 600px;
}
::v-deep {
  .duration-wrap.inputs.ht-form-inputs__inline {
    width: 340px;
    .el-input-number {
      width: 100%;
    }
  }
  .CodeMirror{
    margin-top: 10px;
  }
}
/deep/.default-row > .cell {
  overflow: visible !important;
}
.reminder-list{
  margin-top: 24px;
}
.remind-basic-info{
  height: 100%;
  overflow: auto;
  .remind-form-table{
    tr,td,th{
      border:none;
    }

  }
  .form-table>tbody>tr>th, .form-table>tbody>tr>td, .form-table>tfoot>tr>td, .form-table>thead>tr>th{
    white-space:nowrap;
    padding: 10px;
    vertical-align: text-top;
  }
}
.ml-10{
  margin-left: 10px;
}
.add-btn-wrap{
  padding-left:141.75px;
  box-sizing: border-box;
}



  tbody{
    th{ color: #888888;
      text-align: left !important;
    }
  }
  .elForm{
   ::v-deep {
  .el-tabs__header {
    background: rgba(246, 246, 246, 0.39);
  }
  .el-tabs__item .is-top {
    color: #666666;
  }
  .el-tabs__item.is-active {
    font-weight: bold;
    color: #409eff;
  }
 .el-radio-button--small.is-active >.el-radio-button__inner{
    background: rgba(232,243,255,0.39);
border: 1px solid #409EFF;
color: #409EFF;
border-radius: 2px 0px 0px 2px;
  }
}
  }
  .select-width {
    width: 200px !important;
  }
  .node-select-width{
    width: 80% !important;
  }

</style>