<template>
  <div class="design-column">
    <el-form
      :model="designColumn"
      :rules="rules"
      data-vv-scope="designColumn"
      ref="designColumnForm"
      label-width="120px"
      class="design-column-form"
      label-position="rigth"
    >
      <el-form-item
        label="栏目类型:"
        prop="colType"
        :class="{'validate-success': designColumn.colType}"
      >
        <div class="column-type__wrap">
          <div
            class="type-item"
            v-for="item in columnTypeList"
            :key="item.key"
            :class="{
              'is-active': designColumn.colType === item.key,
              'is-disabled': operateType === 'edit'
            }"
          >
            <div class="type-btn" @click="handleClickType(item)">
              <i :class="item.icon" class="type-icon"></i>
              <span class="column-type-name">{{ item.name }}</span>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item
        label="常用应用："
        prop="myApplication"
        v-if="designColumn.colType === 'myApplication'"
      >
        <el-select
          class="full-width-select"
          key="myApplication"
          v-model="designColumn.myApplication"
          multiple
          filterable
          :validate="{required: true}"
          placeholder="请选择"
          clearable
          collapse-tags
        >
          <!-- @change="handleMyApplication" -->
          <el-option
            v-for="item in myApplicationOptionsList"
            :key="item.id"
            :label="item.name"
            :value="item.alias"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <ht-form-item
        label="更多路径"
        v-if="
          designColumn.colType !== 'swipeSlide' &&
            column.showTitle &&
            designColumn.model != 'tab'
        "
      >
        <ht-input
          style="width: 100%;"
          class="full-input"
          autocomplete="off"
          v-model="column.colUrl"
          :maxlength="100"
          :showWordLimit="true"
        ></ht-input>
      </ht-form-item>
      <el-form-item
        label="选择流程:"
        prop="processPublicity"
        v-if="designColumn.colType === 'processPublicity'"
      >
        <el-select
          class="full-width-select"
          key="processPublicity"
          v-model="designColumn.processPublicity"
          multiple
          filterable
          :validate="{required: true}"
          placeholder="请选择"
          clearable
          @change="handleProcessChange"
        >
          <el-option
            v-for="item in processOptionsList"
            :key="item.defKey"
            :label="item.name"
            :value="item.defKey"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="['combination'].includes(designColumn.colType)"
        label="模式:"
        prop="model"
        class="combination-form-item"
      >
        <el-radio-group :value="designColumn.model" @input="handleModelInput">
          <template
            v-for="(item, index) in modelList.filter(item =>
              column.isPublic == 1 ? item.key != 'blend' : true
            )"
          >
            <el-radio :label="item.key" :key="item.key" :class="item.key">{{
              item.value
            }}</el-radio>
            <el-image
              :key="index"
              class="item-image"
              :class="[
                `${item.key}-image`,
                column.isPublic == 1 && item.key == 'tab' ? 'mobile-tab' : ''
              ]"
              :src="item.imgSrc"
              fit="contain"
            ></el-image>
          </template>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="['processCenter', 'combination'].includes(designColumn.colType)"
        :label="`${configLabel}:`"
        prop="selectType"
      >
        <div class="select-btn" @click="handleSelect(designColumn.colType)">
          选择
        </div>
        <div class="select-column__wrap">
          <template
            v-for="item in designColumn.selectType"
            v-if="
              ['combination'].includes(designColumn.colType) &&
                column.showTitle &&
                item &&
                designColumn.model == 'tab'
            "
          >
            <div class="select-column__wrap__div">
              <div class="select-column-item" :key="item.key">
                {{ item.name }}
              </div>
              <ht-form-item label="更多路径">
                <ht-input
                  class="full-input"
                  autocomplete="off"
                  v-model="item.colUrl"
                  :maxlength="100"
                  :showWordLimit="true"
                ></ht-input>
              </ht-form-item>
            </div>
          </template>
          <div class="select-column__wrap" v-else>
            <div class="select-column-item" :key="item.key">
              {{ item.name }}
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item
        label="过滤类型:"
        prop="filterType"
        v-if="isProcessCenter && designColumn.selectType.length"
      >
        <el-radio-group
          v-model="designColumn.filterType"
          @change="handleFilterTypeChange"
        >
          <el-radio
            v-for="(item, index) in filterTypeOptions"
            :label="item.key"
            :key="index"
            >{{ item.value }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item
        :label="filterScopeLabel"
        prop="filterScope"
        v-if="isProcessCenter && designColumn.filterType !== 'all'"
        class="announcement-scope__form-item"
      >
        <tree-Select
          v-if="designColumn.filterType === 'processCategories'"
          v-model="designColumn.filterScope"
          multiple
          :options="filterScopeOptions"
          noOptionsText="暂无数据"
          noChildrenText="暂无数据"
          placeholder="请选择"
          z-index="9999"
          appendToBody
          :normalizer="filterScopeNormalizer"
          :disable-branch-nodes="false"
        />
        <el-select
          v-else
          class="full-width-select"
          v-model="designColumn.filterScope"
          multiple
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in filterScopeOptions"
            :key="item.value"
            :label="item.name"
            :value="item.defKey"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="['dataSheets', 'statisticalChart'].includes(designColumn.colType)"
        :label="`${configLabel}:`"
        prop="dataType"
        class="data-type__form-item"
      >
        <template slot="label">
          <el-tooltip
            v-if="designColumn.colType === 'dataSheets'"
            content="表单列表和数据列表类型不支持操作列、功能按钮、汇总、左树右列、多表头等数据展示"
            placement="top"
          >
            <i class="el-icon-question"></i>
          </el-tooltip>
          <span>{{ configLabel }}:</span>
        </template>
        <!-- 手机端的数据列表过滤 -->
        <el-select
          v-if="column.isPublic == 1 && designColumn.colType == 'dataSheets'"
          v-model="designColumn.currentDataType"
          placeholder="请选择"
          class="prefix-select"
          :class="[isDisabledDataSelect ? 'disabled-selected' : '']"
          :disabled="isDisabledDataSelect"
          @change="dataTypeChange"
        >
          <el-option
            v-for="preItem in DataTypeOptions.filter(item => {
              return item.key == 'formTable'
            })"
            :key="preItem.key"
            :label="preItem.value"
            :value="preItem.key"
          >
          </el-option>
        </el-select>
        <el-select
          v-else
          v-model="designColumn.currentDataType"
          placeholder="请选择"
          class="prefix-select"
          :class="[isDisabledDataSelect ? 'disabled-selected' : '']"
          :disabled="isDisabledDataSelect"
          @change="dataTypeChange"
        >
          <el-option
            v-for="preItem in DataTypeOptions"
            :key="preItem.key"
            :label="preItem.value"
            :value="preItem.key"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="designColumn.dataType"
          placeholder="请选择"
          class="data-type-select"
          clearable
          filterable
          @change="handleDataChange"
        >
          <el-option
            v-for="item in currentOptionData"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="['news', 'swipeSlide'].includes(designColumn.colType)"
        :label="`${configLabel}:`"
        prop="announcementOrPictures"
        class="announcement-scope__form-item"
      >
        <tree-Select
          v-model="designColumn.announcementOrPictures"
          multiple
          :options="optionTreeData"
          :normalizer="normalizer"
          noOptionsText=" "
          noChildrenText=" "
          placeholder="请选择"
          z-index="9999"
          @input="handleTreeChange"
          :disable-branch-nodes="true"
        />
      </el-form-item>
      <el-form-item
        v-if="['officialAccounts'].includes(designColumn.colType)"
        prop="AppID"
        label="AppID:"
        class="official-item is-required"
      >
        <ht-input
          class="fix-width-input"
          v-model="column.appid"
          autocomplete="off"
          placeholder="请输入corpId"
        ></ht-input>
        <el-tooltip placement="top">
          <div slot="content">
            开发者ID(AppID)。在微信公众平台-开发-基本配置
          </div>
          <i class="icon-notes" />
        </el-tooltip>
      </el-form-item>
      <el-form-item
        v-if="['officialAccounts'].includes(designColumn.colType)"
        prop="AppSecret"
        label="AppSecret:"
        class="official-item is-required"
      >
        <ht-input
          class="fix-width-input"
          v-model="column.secret"
          autocomplete="off"
          placeholder="请输入corpSecret"
        ></ht-input>
        <el-tooltip placement="top">
          <div slot="content">开发者密码(AppSecret)。</div>
          <i class="icon-notes" />
        </el-tooltip>
      </el-form-item>
      <el-form-item
        v-if="['officialAccounts'].includes(designColumn.colType)"
        prop="pullFrequency"
        label="拉取频率:"
      >
        <el-radio-group
          v-model="designColumn.timeType"
          @change="timeTypeChange"
        >
          <el-radio label="day">每天</el-radio>
          <el-radio label="month">每月</el-radio>
        </el-radio-group>
        <div class="select-time__wrap">
          <el-time-picker
            v-if="designColumn.timeType === 'day'"
            v-model="designColumn.date"
            value-format="HH:mm:ss"
            placeholder="请选择时间"
          >
          </el-time-picker>
          <el-date-picker
            v-else
            v-model="designColumn.date"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择日期时间"
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item v-if="designColumn.colType === 'custom'" label="数据来源:">
        <el-input
          v-model="designColumn.dataFrom"
          autocomplete="off"
          placeholder="请输入方法路径"
          :readonly="designColumn.dataMode === 1"
        >
          <el-select
            v-model="designColumn.dataMode"
            slot="prepend"
            placeholder="请选择"
            style="width: 116px"
            @change="changeDataMode"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in dataModelOptions"
              :key="item.key"
            ></el-option>
          </el-select>
          <!-- 1-对话框，3-RESTful接口,5-关联查询 -->
          <el-button
            type="primary"
            v-if="designColumn.dataMode === 3"
            @click="showSetParamDialog()"
            slot="append"
            >参数设置</el-button
          >
          <el-button
            type="primary"
            v-else
            icon="el-icon-search"
            @click="selectQuery()"
            slot="append"
            >选 择</el-button
          >
        </el-input>
      </el-form-item>
      <el-form-item
        v-if="designColumn.dataMode === 3"
        label="请求类型:"
        prop="requestType"
      >
        <ht-radio
          v-model="designColumn.requestType"
          :options="requestTypeOptions"
        ></ht-radio>
      </el-form-item>
      <el-form-item
        v-if="
          designColumn.colType === 'custom' ||
            designColumn.colType === 'dataSheets'
        "
        :label="designColumn.colType === 'custom' ? '栏目模板' : 'css扩展：'"
        :class="{'css-form-item': designColumn.colType === 'dataSheets'}"
      >
        <div
          class="template-header"
          :class="{
            'css-template-header': designColumn.colType === 'dataSheets'
          }"
        >
          <div class="template-header-left">
            <template v-if="designColumn.colType === 'custom'">
              <div
                class="header-left-item"
                :class="{'is-active': currentTemplate === btn.key}"
                v-for="btn in templateBtn"
                :key="btn.key"
                @click="handleClickTemplate(btn)"
              >
                {{ btn.name }}
              </div>
            </template>
            <el-tooltip
              class="instructions-tooltip"
              effect="dark"
              :content="tipContent"
              placement="right-start"
            >
              <span class="instructions">使用说明</span>
            </el-tooltip>
            <el-button
              v-if="designColumn.colType === 'custom'"
              icon="el-icon-caret-right"
              type="primary"
              plain
              size="mini"
              :disabled="!designColumn.templateHtml2"
              style="margin-left: 15px"
              @click="handleRunCode"
            >
              Run code
            </el-button>
          </div>
          <span
            :title="'全屏'"
            class="fullscreen-icon"
            @click="isScreenFull = !isScreenFull"
          >
            <i class="top-link-icon icon-quanpingbianji"></i>
          </span>
        </div>
      </el-form-item>
      <el-form-item
        v-if="designColumn.colType === 'custom' && currentTemplate === 'html'"
      >
        <codemirror
          ref="htmlCode"
          key="htmlCode"
          v-model="designColumn.templateHtml2"
          :options="cmOptions"
          class="code"
        >
        </codemirror>
      </el-form-item>
      <el-form-item
        v-if="designColumn.colType === 'custom' && currentTemplate === 'js'"
      >
        <codemirror
          ref="jsCode"
          key="jsCode"
          v-model="designColumn.templateJavaScript2"
          :options="jsOptions"
          class="code"
        >
        </codemirror>
      </el-form-item>
      <el-form-item
        v-if="designColumn.colType === 'custom' && currentTemplate === 'css'"
      >
        <codemirror
          ref="cssCode"
          key="cssCode"
          v-model="designColumn.templateStyle2"
          :options="cssOptions"
          class="code"
        >
        </codemirror>
      </el-form-item>
      <el-form-item v-if="designColumn.colType === 'dataSheets'">
        <codemirror
          ref="cssCode"
          key="cssCode"
          v-model="column.style"
          :options="cssOptions"
          class="code"
        >
        </codemirror>
      </el-form-item>
      <!-- 把是否分页移到栏目设计 -->
      <el-form-item
        v-if="
          isShowRefeshTime ||
            (designColumn.colType === 'dataSheets' &&
              designColumn.currentDataType !== 'linkedQuery')
        "
        label="数据显示量:"
        class="page-form-item"
      >
        <div class="set-page__wrap">
          <!-- <span class="text">每页数量</span> -->
          <ht-input
            v-model="column.refeshTime"
            type="number"
            :max="refeshTimeMax"
            :min="0"
            style="width:150px"
            class="page-number__input"
            placeholder="请输入"
            :validate="{
              regex: {exp: '^[0-9]+$', message: '请输入大于0的数字。'}
            }"
          ></ht-input>
          <span class="unit">条</span>
        </div>
      </el-form-item>
    </el-form>
    <ht-select-column-dialog
      v-if="showSelectDialog"
      :show-select-dialog.sync="showSelectDialog"
      :dialog-title="configLabel"
      :column-type="columnType"
      :isPublic="isPublic"
      :selected-model="designColumn.model"
      :selectType="designColumn.selectType"
      @selected-column="handleSelectColumn"
    />
    <el-dialog
      :title="
        designColumn.colType === 'custom' ? '栏目模板编辑器' : '栏目样式编辑器'
      "
      :visible.sync="isScreenFull"
      v-if="isScreenFull"
      fullscreen
      append-to-body
      :close-on-click-modal="false"
      :show-close="false"
      class="is-fullscreen__dialog"
    >
      <div class="dialog-button">
        <el-button
          @click="isScreenFull = !isScreenFull"
          size="mini"
          type="primary"
          style="margin-right: 15px"
        >
          {{ $t('eip.common.save') }}</el-button
        >
        <span
          :title="'退出全屏'"
          class="fullscreen-icon"
          @click="isScreenFull = !isScreenFull"
        >
          <i class="top-link-icon icon-restore"></i>
        </span>
      </div>
      <codemirror
        v-if="currentTemplate === 'html'"
        ref="htmlCode"
        key="htmlCode"
        v-model="designColumn.templateHtml2"
        :options="cmOptions"
        class="code"
      >
      </codemirror>
      <codemirror
        v-else-if="currentTemplate === 'js'"
        ref="jsCode"
        key="jsCode"
        v-model="designColumn.templateJavaScript2"
        :options="jsOptions"
        class="code"
      >
      </codemirror>
      <codemirror
        v-else
        ref="cssCode"
        key="cssCode"
        v-model="designColumn.templateStyle2"
        :options="cssOptions"
        class="code"
      >
      </codemirror>
    </el-dialog>
    <custom-query-selector-dialog
      ref="customQuerySelectorDialog"
      :single="true"
      @onConfirm="selectedCustomDialog"
    />
    <index-column-setparam
      ref="indexColumnSetparam"
      :set-params="designColumn.dataParam"
      @handleDataparamSave="handledataParamSave"
    ></index-column-setparam>
  </div>
</template>

<script>
import flow from '@/api/flow.js'
import form from '@/api/form.js'
import portal from '@/api/portal.js'
import sysType from '@/api/sysType.js'

import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import TreeSelect from '@riophae/vue-treeselect'
import _ from 'lodash'
const IndexColumnSetparam = () =>
  import('@/components/portal/IndexColumnSetparam.vue')
import CustomQuerySelectorDialog from '@/components/dialog/CustomQuerySelectorDialog.vue'
import {
  COLUMN_TYPE_LIST,
  MOBILE_COLUMN_TYPE_LIST,
  FILTER_TYPE_OPTIONS,
  DATA_TYPE,
  MODEL_LIST,
  DATA_MODEL_OPTIONS,
  REQUEST_TYPE_OPTIONS,
  TEMPLATE_BTN,
  GET_COLUMN_METHOD,
  GET_FILTER_SCOPE_METHOD,
  DESIGN_COLUMN_FORM_RULES,
  GET_COLUMNTYPE_METHOD
} from '../const.js'

export default {
  name: 'DesignColumn',
  components: {
    IndexColumnSetparam,
    CustomQuerySelectorDialog,
    TreeSelect
  },
  props: {
    designColumn: {
      type: Object,
      default: () => {}
    },
    column: {
      type: Object,
      default: () => {}
    },
    isPublic: {
      type: Number
    },
    myApplicationOptionsList: {
      type:Array
    }
  },
  data() {
    return {
      columnTypeList: COLUMN_TYPE_LIST,
      processOptions: [],
      filterTypeOptions: FILTER_TYPE_OPTIONS,
      filterScopeOptions: [],
      selectTypeLabel: '选择类型',
      showSelectDialog: false,
      showData: null,
      currentDataList: [],
      sheetOrChartLabel: '数据类型',
      configLabel: '选择类型',
      modelList: MODEL_LIST,
      dataModelOptions: DATA_MODEL_OPTIONS,
      requestTypeOptions: REQUEST_TYPE_OPTIONS,
      isScreenFull: false,
      columnType: '',
      cmOptions: {
        value: '',
        mode: 'vue',
        readOnly: false,
        smartIndent: true,
        tabSize: 2,
        theme: 'base16-light',
        lineNumbers: true, // 是否显示行数
        lineWrapping: true, // 是否自动换行
        styleActiveLine: true, // line选择是是否加亮
        matchBrackets: true, // 括号匹配
        line: true,
        autoRefresh: true
      },
      jsOptions: {
        value: '',
        mode: 'javascript',
        readOnly: false,
        smartIndent: true,
        tabSize: 2,
        theme: 'base16-light',
        lineNumbers: true, // 是否显示行数
        lineWrapping: true, // 是否自动换行
        styleActiveLine: true, // line选择是是否加亮
        matchBrackets: true, // 括号匹配
        line: true,
        autoRefresh: true
      },
      cssOptions: {
        value: '',
        mode: 'css',
        readOnly: false,
        smartIndent: true,
        tabSize: 2,
        theme: 'base16-light',
        lineNumbers: true, // 是否显示行数
        lineWrapping: true, // 是否自动换行
        styleActiveLine: true, // line选择是是否加亮
        matchBrackets: true, // 括号匹配
        line: true
      },
      templateBtn: TEMPLATE_BTN,
      currentTemplate: 'html',
      normalizer(node) {
        return {
          id: node.id,
          label: node.name
        }
      },
      treeData: [],
      idArr: [],
      announcementOrPictures: [],
      rules: DESIGN_COLUMN_FORM_RULES,
      formTableData: [],
      dataList: [],
      linkQueryList: [],
      refeshTime: null
    }
  },
  computed: {
    DataTypeOptions() {
      return DATA_TYPE.filter(item => item.group === this.designColumn.colType)
    },
    optionTreeData() {
      return this.treeData.filter(item => {
        return this.designColumn.colType === 'news'
          ? item.path === '100.'
          : item.path === '200.'
      })
    },
    isProcessCenter() {
      return this.designColumn.colType === 'processCenter'
    },
    operateType() {
      return this.$route.query.type
    },
    filterScopeLabel() {
      return this.designColumn.filterType === 'sponsorship'
        ? '所属部门'
        : '过滤范围'
    },
    tipContent() {
      return this.designColumn.colType === 'custom'
        ? '通过html和js自定义栏目,html必须有一个标签包裹,js必须在{}内编写'
        : '通过写css自定义栏目样式'
    },
    currentOptionData() {
      const TYPE_MAP = {
        formTable: this.formTableData,
        dataTable: this.dataList,
        linkedQuery: this.linkQueryList,
        dataChart: this.currentDataList,
        processChart: this.currentDataList
      }
      return TYPE_MAP[this.designColumn.currentDataType]
    },
    processOptionsList() {
      if (
        this.designColumn.processOptions &&
        this.designColumn.processOptions.length > 0 &&
        this.column.isPublic == 1
      ) {
        return this.designColumn.processOptions.filter(
          item => item.supportMobile == 1
        )
      } else {
        return this.designColumn.processOptions
      }
    },
    isShowRefeshTime() {
      if (this.column.isPublic == 1) {
        //移动端
        return [
          'processCenter',
          'officialAccounts',
          'processPublicity',
          'processCenter',
          'dataSheets',
          'news',
          'swipeSlide',
          'personalMatters'
        ].includes(this.designColumn.colType)
      } else {
        //应用端，管理端
        return ['processCenter', 'dataSheets', 'news', 'swipeSlide'].includes(
          this.designColumn.colType
        )
      }
    },
    refeshTimeMax() {
      return this.column.isPublic == 1 ? 10 : 20
    },
    isFormPublic() {
      return this.$store.getters['flow/getFormPublic']
    },
    isDisabledDataSelect() {
      if (
        this.column.isPublic == 1 &&
        this.designColumn.colType == 'dataSheets'
      ) {
        return (
          this.DataTypeOptions.filter(item => {
            return item.key == 'formTable'
          }) &&
          this.DataTypeOptions.filter(item => {
            return item.key == 'formTable'
          }).length <= 1
        )
      } else {
        return this.DataTypeOptions && this.DataTypeOptions.length <= 1
      }
    }
  },
  watch: {
    designColumn: {
      handler(val) {
        if (val.announcementOrPictures && val.announcementOrPictures.length)
          this.announcementOrPictures = JSON.parse(
            JSON.stringify(this.designColumn.announcementOrPictures)
          )
      },
      immediate: true
    },
    'designColumn.colType': {
      handler(val) {
        GET_COLUMN_METHOD[val] && this[GET_COLUMN_METHOD[val]]()
      },
      immediate: true
    },
    'designColumn.filterType': {
      handler(val) {
        GET_FILTER_SCOPE_METHOD[val] && this[GET_FILTER_SCOPE_METHOD[val]]()
      },
      immediate: true
    },
    'designColumn.selectType': {
      handler(val) {
        if (val && val.length == 0) {
          this.designColumn.filterType = 'all'
        }
      }
    },
    'designColumn.currentDataType': {
      handler(val) {
        this.currentDataList = []
        this.formTableData = []
        this.dataList = []
        this.linkQueryList = []
        GET_COLUMNTYPE_METHOD[val] && this[GET_COLUMNTYPE_METHOD[val]]()
      },
      immediate: true,
      deep: true
    },
    'designColumn.myApplication': {
      handler(val) {
        if (val) {
          this.handleMyApplication(val)
        }
      },
      immediate: true,
      deep: true
    },
    'column.isPublic': {
      handler(val, oldVal) {
        
        if (val == 1) {
          this.columnTypeList = MOBILE_COLUMN_TYPE_LIST
          if(this.designColumn.colType == 'dataSheets'){
            this.designColumn.currentDataType = 'formTable'
          }
        } else {
          this.columnTypeList = _.cloneDeep(COLUMN_TYPE_LIST)

          if (val == 0) {
            this.columnTypeList.forEach((item, index) => {
              if (item.key == 'myApplication') {
                this.columnTypeList.splice(index, 1)
              }
            })
          }
        }
        console.log(
          'asd',
          ['myApplication'].includes(this.designColumn.colType)
        )

        /**
         * //myApplication 我的应用 从应用端切换后 清空重选
         * 只支持应用端
         */
        if (
          oldVal == 2 &&
          val != 2 &&
          ['myApplication'].includes(this.designColumn.colType)
        ) {
          this.designColumn.colType = ''
          this.$emit('process-change', {})
        }

        //不支持手机端的
        if (
          (oldVal == 2 || oldVal == 0) &&
          val == 1 &&
          ['schedule','personalMatters','meetingRoom'].includes(this.designColumn.colType)
        ) {
          this.designColumn.colType = ''
            this.$emit('process-change', {})
        }
      },
      immediate: true,
      deep: true
    },
    'column.alias': {
      handler(val, oldVal) {
        if (this.isPublic == 1) {
          if (
            this.designColumn.colType == 'news' &&
            this.column.colUrl.includes('/mobile/newsList?alias=')
          ) {
            this.column.colUrl = `/mobile/newsList?alias=${val}`
          }
        }
      }
    },
    isFormPublic(val) {
      this.handleNumShow()
    }
  },
  created() {
    this.getTreedata()
  },
  methods: {
    loopFn(arr) {
      for (let i = 0; i < arr.length; i++) {
        let item = arr[i]
        this.idArr.push(item.id)
        if (Array.isArray(item.children)) this.loopFn(item.children)
      }
    },
    // 过滤删除的新闻公共
    async handleNewsOrPic() {
      // this.$nextTick(() => {
      Promise.all(this.idArr).then(res => {
        if (this.announcementOrPictures.length > 0) {
          for (let j = 0; j < this.announcementOrPictures.length; j++) {
            let item = this.announcementOrPictures[j]
            if (!this.idArr.includes(item)) {
              let $index = this.designColumn.announcementOrPictures.indexOf(
                item
              )
              $index > -1 &&
                this.designColumn.announcementOrPictures.splice($index, 1)
            }
          }
        }
      })
      // })
    },
    //获取表单列表
    async getFormListData() {
      const param = {
        pageBean: {
          pageSize: -1
        },
        sorter: [
          {
            direction: 'DESC',
            property: 'create_time_'
          },
          {
            direction: 'DESC',
            property: 'UPDATE_TIME_'
          }
        ],
        querys: []
      }
      //手机端
      if (this.isPublic == 1) {
        param.querys.push(
          {
            property: 'mobile_form_alias_',
            value: '',
            group: 'mobile_alias_empty',
            relation: 'OR',
            operation: 'NOT_EQUAL'
          },
          {
            property: 'mobile_form_alias_',
            value: null,
            group: 'mobile_alias_empty',
            relation: 'OR',
            operation: 'NOTNULL'
          }
        )
      }
      await form.getDataTemplateData(param).then(res => {
        if (res && res.rows && res.rows.length) {
          this.formTableData = res.rows.map(item => {
            return {
              ...item,
              label: item.name,
              value: item.alias
            }
          })
        }
      })
    },
    //获取数据列表
    getDataTable() {
      const param = {
        pageBean: {
          pageSize: -1
        }
      }
      form.getViewList(param,'').then(res => {
        if (res && res.rows && res.rows.length) {
          this.dataList = res.rows.map(item => {      
            return {
              ...item,
              label: item.name,
              value: item.alias
            }
          })
        }
      })
    },
    getLinkedQueryList() {
      const param = {
        pageBean: {
          pageSize: -1
        },
        sorter: [
          {
            property: 'CREATE_TIME_',
            direction: 'DESC'
          }
        ]
      }
      form.getLinkedQuery(param).then(({data}) => {
        if (data && data.rows && data.rows.length) {
          this.linkQueryList = data.rows.map(item => {
            return {
              ...item,
              label: item.name,
              value: item.alias
            }
          })
        }
      })
    },
    timeTypeChange() {
      this.designColumn.date = ''
    },
    handleNeedPageChange(val) {
      this.column.refeshTime = val ? 10 : 0
      this.handlerNumShow(this.designColumn.colType)
    },
    handleClickType(item) {
      
      if (this.designColumn.colType && this.designColumn.colType !== item.key) {
        this.$confirm(
          '系统将不会保存您所做的更改，是否要切换栏目类型?',
          '切换栏目类型',
          {
            confirmButtonText: '取消',
            cancelButtonText: '确定',
            customClass: 'col-msg__box',
            type: 'warning',
            closeOnClickModal: false
          }
        )
          .then(() => {})
          .catch(() => {
            this.setColumnType(item)
          })
      } else {
        this.setColumnType(item)
      }
    },
    setColumnType(item) {
      
      this.configLabel = item.configLabel
      this.designColumn.colType = item.key
      if (this.isPublic == 1) {
        if (this.designColumn.colType == 'news') {
          this.column.colUrl = `/mobile/newsList?alias=${this.column.alias}`
        } else {
          this.column.colUrl = item.colUrl
        }
      } else {
        this.column.colUrl = ''
      }
      //  清空校验结果
      this.$refs['designColumnForm'].clearValidate()
      this.$emit('click-type', item)
    },
    handleSelect(item) {
      this.columnType = item
      this.showSelectDialog = true
    },
    //获取选择流程中心、组合栏目时选择的流程或者栏目
    handleSelectColumn(data) {
      if (this.designColumn.colType == 'combination') {
        const idsArr = []
        data.forEach(item => {
          idsArr.push(item.id)
        })
        const ids = idsArr.join(',')
        portal.getListByIds(ids).then(res => {
          if (res && res.data.length) {
            const selectedMap = res.data.reduce((pre, cur) => {
              pre[cur.id] = cur
              return pre
            }, {})
            this.designColumn.selectType = idsArr.map(id => {
              return {
                ...selectedMap[id]
              }
            })
          }
          this.$emit(
            'submit-column',
            this.designColumn.selectType,
            this.columnType
          )
        })
      } else {
        this.designColumn.selectType = data
        this.$emit('submit-column', data, this.columnType)
      }
      this.showSelectDialog = false
    },
    dataTypeChange(value) {
      this.$set(this.designColumn, 'dataType', '')
      if (value === 'linkedQuery') {
        this.$set(this.column, 'needPage', 0)
      }
      if (this.designColumn.colType === 'dataSheets') {
        this.$emit('process-change', {})
      }
    },
    // 获取已办结流程
    getDoneProcessList() {
      const param = {
        pageBean: {
          page: 1,
          pageSize: -1
        },
        querys: [
          {
            property: 'wfInst.status_',
            value: 'end',
            group: 'filter',
            relation: 'AND',
            operation: 'EQUAL'
          }
        ]
      }
      flow.getDoneData(param).then(({data}) => {
        this.$set(this.designColumn, 'processOptions', data.rows || [])
      })
    },
    // 处理树形结构
    treeDelLast(arr) {
      return arr.map(item => {
        if (item.children && item.children.length) {
          this.treeDelLast(item.children)
        } else {
          delete item.children
        }
        return item
      })
    },
    // 获取新闻公告，轮播图范围
    getTreedata() {
      form.getTreedata().then(resp => {
        this.treeData = this.treeDelLast(resp)
        this.loopFn(this.treeData)
        this.handleNewsOrPic()
      })
    },
    //获取图表应用流程图表的数据
    getFlowChartList() {
      const pageBean = {
        page: 1,
        pageSize: -1
      }
      const param = {
        pageBean
      }
      flow.getFlowChartList(param).then(response => {
        if (response.rows && response.rows.length) {
          this.currentDataList = response.rows.filter(item => item.type == '1')
          this.currentDataList.forEach(item => {
            this.$set(item, 'label', item.name)
            this.$set(item, 'value', item.id)
          })
        }
      })
    },
    //获取图表应用数据图表的数据
    getCustomChartList() {
      const pageBean = {
        page: 1,
        pageSize: -1
      }
      const param = {
        pageBean
      }
      form.getCustomChartList(param).then(response => {
        if (response.rows && response.rows.length) {
          this.currentDataList = response.rows
          this.currentDataList.forEach(item => {
            this.$set(item, 'label', item.name)
            //改为绑定别名
            this.$set(item, 'value', item.alias)
          })
        }
      })
    },
    handleDataChange(key) {
      this.designColumn.dataType = key
      let showData = []
      if (this.designColumn.colType === 'dataSheets') {
        if (this.designColumn.currentDataType === 'formTable') {
          showData = {
            dataType: key,
            currentDataType: this.designColumn.currentDataType
          }
        } else if (this.designColumn.currentDataType === 'linkedQuery') {
          const currentSelectObj = this.linkQueryList.find(
            item => item.value === key
          )
          showData = {
            ...currentSelectObj,
            dataType: key,
            currentDataType: this.designColumn.currentDataType
          }
        }else{
          const sqlAliasObj = this.dataList.find(
            item => item.value === key
          )
          showData = {
            sqlAlias:sqlAliasObj.sqlAlias,
            dataType: key,
            currentDataType: this.designColumn.currentDataType
          }
        }
      } else {
        showData.push({
          dataType: key,
          currentDataType: this.designColumn.currentDataType
        })
      }
      this.$emit('process-change', showData)
    },
    async handleTreeChange(node, instanceId) {
      this.$emit('process-change', node)
    },
    selectQuery() {
      this.$refs.customQuerySelectorDialog.showDialog()
    },
    showSetParamDialog() {
      this.$refs.indexColumnSetparam.showDialog()
    },
    handleClickTemplate(btn) {
      this.currentTemplate = btn.key
    },
    handleFilterTypeChange(val) {
      this.designColumn.filterScope = []
      this.filterScopeOptions = []
    },
    getProcessDefData() {
      const params = {
        pageBean: {
          page: 1,
          pageSize: -1,
          total: 0
        },
        sorter: [
          {
            property: 'createTime',
            direction: 'DESC'
          }
        ]
      }
      flow.getDefPage(params).then(res => {
        if (res.rows && res.rows.length > 0) {
          this.filterScopeOptions = res.rows
          this.$set(this.designColumn, 'processOptions', res.rows || [])
        }
      })
    },
    getProcessCategories() {
      sysType.getTypesByKey('FLOW_TYPE').then(data => {
        if (data && data.length > 0) {
          this.filterScopeOptions = this.deleteChildren(data)
        }
      })
    },
    deleteChildren(arr) {
      const childs = [...arr]
      for (let i = childs.length; i--; i > 0) {
        if (childs[i].children) {
          if (childs[i].children.length) {
            this.deleteChildren(childs[i].children)
          } else {
            delete childs[i].children
          }
        }
      }
      return arr
    },
    filterScopeNormalizer(node) {
      return {
        id: node.id,
        label: node.name
      }
    },
    validateDesignColumnForm() {
      let result = true
      this.$refs.designColumnForm.validate(valid => {
        result = valid
      })
      return result
    },
    getDepartmentData() {
      const param = {
        pageBean: {
          page: 1,
          pageSize: -1
        }
      }
      flow.getDepartmentList(param).then(({data}) => {
        if (data && data.rows && data.rows.length > 0) {
          this.filterScopeOptions = data.rows.map(item => {
            return {
              ...item,
              defKey: item.id
            }
          })
        }
      })
    },
    handleRunCode() {
      this.$emit('custom-change', this.designColumn, this.columnType)
    },
    //参数设置
    handledataParamSave(val) {
      this.designColumn.dataParam = val
    },
    //选择关联查询
    selectedCustomDialog(rsl) {
      this.designColumn.dataFrom = JSON.stringify(rsl[0])
    },
    changeDataMode() {
      this.designColumn.dataFrom = ''
    },
    handleMyApplication(val) {
      this.showData = []
      if (
        this.myApplicationOptionsList &&
        this.myApplicationOptionsList.length > 0
      ) {
        this.myApplicationOptionsList.forEach(item => {
          if (val.includes(item.alias)) {
            this.showData.push(item)
          }
        })

        this.$emit('process-change', this.showData)
      }
    },
    handleProcessChange(val) {
      const {processOptions} = this.designColumn
      if (processOptions && processOptions.length > 0) {
        const result =
          processOptions.filter(item => val.includes(item.defKey)) || []
        this.$emit('process-change', result)
      }
    },
    handleModelInput(val) {
      if (this.designColumn.model && this.designColumn.model !== val) {
        this.$confirm(
          '更改栏目组合模式将会清空已选栏目，是否要切换栏目组合模式?',
          '切换栏目组合模式',
          {
            confirmButtonText: '取消',
            cancelButtonText: '确定',
            customClass: 'col-msg__box',
            type: 'warning',
            closeOnClickModal: false
          }
        )
          .then(() => {})
          .catch(() => {
            this.designColumn.model = val
            this.designColumn.selectType = []
            this.$emit(
              'submit-column',
              this.designColumn.selectType,
              this.columnType
            )
          })
      } else {
        this.designColumn.model = val
        this.designColumn.selectType = []
        this.$emit(
          'submit-column',
          this.designColumn.selectType,
          this.columnType
        )
        const combinationDefaultHeightMap = {
          upDown: 532,
          blend: 432,
          tab: 496
        }
        this.column.colHeight = combinationDefaultHeightMap[val]
      }
    },
    handleNumShow(val) {
      //处理数据显示量
      if (this.operateType == 'add' && this.isShowRefeshTime) {
        if (this.column.isPublic == 1) {
          this.column.refeshTime = 5
        } else {
          this.column.refeshTime = 10
        }
      }
      if (this.operateType == 'add' && val == 'commonProcess') {
        this.column.refeshTime = 6
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.design-column-form {
  margin-top: 24px;
  .column-type__wrap {
    display: flex;
    flex-wrap: wrap;
    .type-item {
      text-align: center;
      line-height: 32px;
      margin-right: 16px;
      margin-bottom: 16px;
      width: 104px;
      height: 32px;
      border-radius: 2px;
      background: #f6f6f6;
      color: #555555;
      cursor: pointer;
      // &:nth-child(6n) {
      //   margin-right: 0;
      // }
      .type-icon {
        padding-right: 8px;
      }
    }
    .is-active {
      color: #409eff;
      border: 1px solid #409eff;
    }
    .is-disabled {
      cursor: not-allowed;
      .type-btn {
        pointer-events: none;
      }
    }
  }
  .is-error {
    .column-type__wrap {
      border: 1px solid #f56c6c;
    }
  }
  .validate-success {
    .column-type__wrap {
      border: none;
    }
    ::v-deep {
      .el-form-item__error {
        display: none;
      }
    }
  }
  .full-width-select {
    width: 100%;
  }
  .select-btn {
    width: 62px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border: 1px solid #409eff;
    border-radius: 2px;
    color: #409eff;
    cursor: pointer;
  }
  .select-column__wrap {
    display: flex;
    flex-wrap: wrap;
    padding-top: 12px;
    &__div {
      display: flex;
      .select-column-item {
        width: 150px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .select-column-item {
      height: 32px;
      margin-right: 16px;
      line-height: 32px;
      text-align: center;
      padding: 0 10px;
      color: #333;
      background: rgba(244, 244, 244, 0.39);
      border-radius: 2px;
      &:nth-child(6n) {
        margin-right: 0;
      }
    }
  }
  .data-type__form-item {
    ::v-deep {
      .prefix-select {
        .el-input {
          width: 102px;
          .el-input__inner {
            border-right: none;
            border-color: #dcdee0;
            background: #f2f2f2;
            color: #333;
            border-radius: 2px 0 0 2px;
          }
          .el-select__caret {
            color: #333;
          }
        }
      }
      .data-type-select {
        width: 100%;
        .el-input {
          width: 100%;
          .el-input__inner {
            border-radius: 0 2px 2px 0;
            //border-left: none;
          }
        }
      }
      .el-form-item__content {
        display: flex;
      }
    }
  }
  .announcement-scope__form-item {
    ::v-deep {
      .vue-treeselect__control {
        border-radius: 2px;
        height: 30px;
        line-height: 31px;
      }
      .vue-treeselect__multi-value {
        // height: 31px;
        line-height: 30px;
      }
      .vue-treeselect__multi-value-item-container {
        padding-top: 2px;
      }
      .vue-treeselect__multi-value-item {
        background: #f4f4f4;
        color: #333333;
        height: 30px;
        line-height: 30px;
        padding: 0 6px;
      }
      .vue-treeselect__value-remove {
        background: #dbdbdb;
        color: #333333;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        margin-top: 7px;
      }
      .vue-treeselect__input-container {
        padding-top: 0;
      }
    }
  }
  .select-time__wrap {
    ::v-deep {
      .el-date-editor.el-input {
        width: 328px;
      }
    }
  }
  .combination-form-item {
    ::v-deep {
      .el-form-item__content {
        position: relative;
      }
      .item-image {
        display: none;
        position: absolute;
        z-index: 2;
        top: -92px;
        left: -44px;
      }
      .upDown:hover + .item-image,
      .blend:hover + .item-image,
      .tab:hover + .item-image {
        display: block;
      }
      .blend-image {
        left: 64px;
      }
      .tab-image {
        left: 170px;
      }
      .mobile-tab {
        left: 64px;
      }
    }
  }
  .css-form-item {
    margin-bottom: 14px;
  }
  .template-header {
    display: flex;
    justify-content: space-between;
    .template-header-left {
      display: flex;
      .header-left-item {
        width: 56px;
        height: 32px;
        text-align: center;
        background: rgba(255, 255, 255, 0.39);
        border: 1px solid #dcdee0;
        border-radius: 0px 2px 2px 0px;
        color: #666666;
        &:first-child {
          border-right: none;
          border-radius: 2px 0 0 2px;
        }
      }
      .is-active {
        color: #409eff;
        background: #e8f3ff;
        border: 1px solid #409eff;
        &:first-child {
          border-right: 1px solid #409eff;
        }
      }
      .instructions {
        margin-left: 16px;
        color: #409eff;
        border-bottom: 1px solid #409eff;
      }
    }
  }
  .css-template-header {
    .template-header-left {
      .instructions {
        margin-left: 0;
      }
    }
  }
  .fix-width-input {
    width: 100%;
  }

  ::v-deep .official-item {
    .el-form-item__content {
      display: flex;
      align-items: center;
    }
    .icon-notes {
      margin-left: 8px;
      color: #999;
    }
  }
}
.is-fullscreen__dialog {
  /deep/ .el-dialog {
    .el-dialog__body {
      padding: 10px 32px;
    }
    .dialog-button {
      position: absolute;
      top: 20px;
      right: 32px;
    }
    .code {
      height: 85vh;
      .CodeMirror {
        height: 100%;
        font-family: monospace;
        color: black;
        direction: ltr;
        resize: both;
      }
    }
  }
}
/deep/.el-input-group__append,
/deep/.el-input-group__prepend {
  background-color: #f2f2f2;
  color: #333333;
  border-color: #dcdee0;
  border-radius: 2px;
}

.fullscreen-icon {
  border: 1px solid #dcdee0;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  color: #666666;
}
::v-deep {
  .disabled-selected {
    .el-input__inner {
      text-align: center;
      padding-left: 0;
      padding-right: 0;
    }
    .el-select__caret {
      display: none;
    }
  }
}
</style>
