<template>
  <div class="base-screen-container">
    <!-- <ts-form-item>
      <ts-input v-model="selectData.cellId" title="单元格" disabled readonly ></ts-input>
    </ts-form-item>-->
    <!-- 是否默认筛选 -->
    <div v-if="selectData.state!='5'&&selectData.state!='7'&&selectData.state!='9'">
      <!-- <ts-form-item :titleWidth="110"> -->
      <!-- <div class="form-title_blue">数据源配置(入参)</div> -->
      <div v-if="selectData.state!=1">
        <attrDSParamMuti :selectItem="selectData" @onClickField="onClickField"></attrDSParamMuti>
        <!-- <ts-multi-mdl
          :mulitValue="selectData.dataSourceData"
          :fields="sourceDatas"
          width="calc(100% - 15px)"
          style="padding-left:15px"
          @change="onClickField($event,'dataSourceData')"
        ></ts-multi-mdl>-->
      </div>
      <div v-else>
        <attrDSParamMuti
          :selectItem="selectData"
          @onClickField="onClickField"
          :addFieldData="addFieldData"
        ></attrDSParamMuti>
        <!-- <ts-multi-mdl
          :mulitValue="selectData.dataSourceData"
          :fields="clickField"
          width="calc(100% - 15px)"
          style="padding-left:15px"
          @change="onClickField($event,'dataSourceData')"
        ></ts-multi-mdl>-->
      </div>
    </div>
    <!--文本-->
    <div v-if="selectData.state == '5'">
      <div class="form-title_blue">数据源配置</div>
      <!--文本标签-->
      <ts-form-item>
        <ts-radio
          title="数据类型"
          v-model="selectData.dsType"
          :data="textDataType"
          type="group"
          :isDefaultFirst="true"
          @change="refresh($event)"
        ></ts-radio>
      </ts-form-item>
      <ts-form-item v-if="!selectData.dsType||selectData.dsType == 2">
        <ts-input
          v-model="selectData.controlName"
          title="控件值"
          @change="refresh(arguments,'inputType')"
        ></ts-input>
      </ts-form-item>
      <!--数据源下拉-->
      <div v-if="selectData.dsType==0||selectData.dsType==1">
        <attr-data-source
          ref="attrDS"
          :isShowResult="true"
          :isShowTitle="false"
          :isShowDsType="false"
        ></attr-data-source>
        <ts-form-item>
          <ts-select
            :key="'selectDataCode'+selectData.id"
            ref="selectDataSourceCode"
            :source="selectDataSourceCode"
            v-model="selectData.selectDataSourceCode"
            title="字段值"
            @selected="refresh(arguments,'selectDataSourceCode')"
          ></ts-select>
        </ts-form-item>
        <!-- <ts-form-item>
          <ts-select
            :key="'selectDataVal'+selectData.id"
            :source="dataSourceData"
            v-model="selectData.selectDataSource"
            title="数据源"
            @selected="refresh(arguments,'selectDataSource')"
          ></ts-select>
        </ts-form-item>
        <ts-form-item
          v-if="selectData.selectDataSourceResultData&&selectData.selectDataSourceResultData.length>0"
        >
          <ts-select
            :key="'selectDataResult'+selectData.id"
            :source="selectDataSourceResult"
            v-model="selectData.selectDataSourceResult"
            title="结果集"
            @selected="refresh(arguments,'selectDataSourceResult')"
          ></ts-select>
        </ts-form-item>
        <ts-form-item>
          <ts-select
            :key="'selectDataCode'+selectData.id"
            ref="selectDataSourceCode"
            :source="selectDataSourceCode"
            v-model="selectData.selectDataSourceCode"
            title="字段值"
            @selected="refresh(arguments,'selectDataSourceCode')"
          ></ts-select>
        </ts-form-item>-->
      </div>
    </div>
    <div class="form-title_blue" v-if="selectData.state!='8'&&selectData.state!='9'">页面元素配置</div>
    <ts-form-item v-if="selectData.state=='1'">
      <ts-switch
        title="默认筛选"
        on-label="是"
        off-label="否"
        v-model="selectData.isSelect"
        @change="refresh($event,'isSelect')"
      ></ts-switch>
    </ts-form-item>
    <!-- 日期-->
    <template v-if="selectData.state == '1' && !selectData.isSelect ">
      <ts-form-item>
        <ts-radio
          title="传参格式"
          v-model="selectData.dateType"
          :data="allDateType"
          type="group"
          :isDefaultFirst="true"
          @change="refresh($event,'dateType')"
        ></ts-radio>
      </ts-form-item>
      <ts-form-item>
        <ts-select
          :key="'dimensionLevelId'+selectData.id"
          :source="sourceDate"
          v-model="selectData.dimensionLevelId"
          title="默认维度"
          @selected="refresh(arguments,'dimensionLevel')"
        >
          <ts-popover slot="title">选择后，将不显示区间</ts-popover>
        </ts-select>
      </ts-form-item>
      <ts-form-item>
        <ts-select
          :key="'startDate'+selectData.id"
          :source="screenStartDate"
          v-model="selectData.startDateId"
          :title="'默认'+(!selectData.dimensionLevelId?'起始':'时间')"
          @selected="refresh(arguments,'startDate')"
        ></ts-select>
      </ts-form-item>
      <ts-form-item v-if="!selectData.dimensionLevelId">
        <ts-select
          :key="'endDate'+selectData.id"
          :source="screenEndDate"
          v-model="selectData.endDateId"
          title="默认结束"
          @selected="refresh(arguments,'endDate')"
        ></ts-select>
      </ts-form-item>
    </template>
    <ts-form-item v-if="selectData.state=='4'">
      <ts-switch
        title="预览隐藏"
        on-label="是"
        off-label="否"
        v-model="selectData.isShow"
        @change="refresh($event,'isShow')"
      ></ts-switch>
    </ts-form-item>
    <ts-form-item
      v-if="(selectData.state=='1'&&!selectData.isSelect)||selectData.state=='2'||selectData.state=='3'||selectData.state=='6'"
    >
      <ts-input
        v-model="selectData.placeholder"
        title="控件提示"
        placeholder="提示文本"
        @change="refresh($event,'placeholder')"
      ></ts-input>
    </ts-form-item>
    <ts-form-item
      :key="selectData.id+631"
      v-if="selectData.state=='6'||selectData.state=='3'||selectData.state=='1'"
    >
      <ts-input
        :key="selectData.id+6311"
        v-model="selectData.titleClue"
        title="条件提示"
        placeholder="条件提示"
        @change="refresh($event,'titleClue')"
      ></ts-input>
    </ts-form-item>

    <ts-form-item
      :key="selectData.id+63122"
      v-if="(selectData.state=='1'&&!selectData.isSelect)||selectData.state=='2'||selectData.state=='3'||selectData.state=='4'||selectData.state=='6'"
    >
      <ts-input
        :key="selectData.id+63132"
        v-model="selectData.controlName"
        title="控件标题"
        @change="refresh($event,'controlName')"
      ></ts-input>
    </ts-form-item>
    <ts-form-item v-if="selectData.state=='4'">
      <ts-radio
        title="单选形式"
        v-model="selectData.groupType"
        :data="groupTypeSource"
        type="group"
        :isDefaultFirst="true"
        @change="refresh($event,'groupType')"
      ></ts-radio>
    </ts-form-item>
    <!--下拉框数据配置-->
    <div v-if="selectData.state=='2'||selectData.state=='3'||selectData.state=='4'">
      <ts-form-item>
        <ts-radio
          title="回显类型"
          v-model="selectData.dataType"
          :data="dataTypeSource"
          type="group"
          :isDefaultFirst="true"
          @change="refresh($event,'dataType')"
        ></ts-radio>
      </ts-form-item>
      <!--维度下拉-->
      <template v-if="selectData.dataType==0">
        <ts-form-item v-if="selectData.state=='2'||selectData.state=='3'||selectData.state=='4'">
          <ts-select
            :key="'controlVal'+selectData.id"
            :source="screenControlVal"
            v-model="selectData.fieldNamesId"
            title="控件值"
            name="fieldNamesId"
            @selected="refresh(arguments,'controlVal')"
          ></ts-select>
        </ts-form-item>
        <ts-form-item
          v-if="selectData.state=='1'||selectData.state=='2'||selectData.state=='3'||selectData.state=='4'"
        >
          <ts-select
            :key="'dimensionLevelId'+selectData.id"
            :source="dimensionLevelData"
            v-model="selectData.dimensionLevelId"
            title="默认维度"
            @selected="refresh(arguments,'dimensionLevel')"
          ></ts-select>
        </ts-form-item>
      </template>
      <!--数据源下拉-->
      <div v-if="selectData.dataType==1">
        <ts-form-item>
          <ts-select
            :key="'selectDataVal'+selectData.id"
            :source="dataSourceChild"
            v-model="selectData.selectDataSource"
            title="数据源"
            @selected="refresh(arguments,'selectDataSource')"
          ></ts-select>
        </ts-form-item>
        <ts-form-item
          v-if="selectData.selectDataSourceResultData&&selectData.selectDataSourceResultData.length>0"
        >
          <ts-select
            :key="'selectDataResult'+selectData.id"
            :source="selectDataSourceResult"
            v-model="selectData.selectDataSourceResult"
            title="结果集"
            @selected="refresh(arguments,'selectDataSourceResult')"
          ></ts-select>
        </ts-form-item>
        <ts-form-item>
          <ts-select
            :key="'selectDataCode'+selectData.id"
            ref="selectDataSourceCode"
            :source="selectDataSourceName"
            v-model="selectData.selectDataSourceCode"
            title="值"
            @selected="refresh(arguments,'selectDataSourceCode')"
          ></ts-select>
        </ts-form-item>
        <ts-form-item>
          <ts-select
            :key="'selectDataName'+selectData.id"
            ref="selectDataSourceName"
            :source="selectDataSourceName"
            v-model="selectData.selectDataSourceName"
            title="显示"
            @selected="refresh(arguments,'selectDataSourceName')"
          ></ts-select>
        </ts-form-item>
      </div>
      <div v-if="selectData.dataType==2">
        <ts-multi-mdl
          :mulitValue="selectData.dataTypeList"
          :fields="dataTypeFields"
          title="选项内容"
          width="100%"
          @change="refresh($event,'dataTypeList')"
        ></ts-multi-mdl>
      </div>
    </div>
    <div v-if="selectData.state == '7'">
      <ts-form-item>
        <ts-input v-model="selectData.controlName" title="控件名称" @change="refresh(arguments)"></ts-input>
      </ts-form-item>
      <ts-form-item>
        <ts-select
          :source="clickEventSource"
          v-model="selectData.clickEventId"
          title="超链接"
          name="clickEvent"
          @selected="refresh(arguments,'clickEvent')"
        ></ts-select>
      </ts-form-item>
    </div>
    <!--文本-->
    <template v-if="selectData.state == '5'">
      <ts-form-item>
        <ts-switch
          title="自动换行"
          v-model="selectData.isLine"
          on-label="是"
          off-label="否"
          @change="refresh(arguments)"
        ></ts-switch>
      </ts-form-item>
      <ts-form-item>
        <ts-input
          v-model="selectData.fontSize"
          title="字体大小"
          @change="refresh(arguments)"
          type="number"
          :showSuffix="true"
          :clearable="false"
        >
          <span slot="suffix">px</span>
        </ts-input>
      </ts-form-item>
      <ts-form-item>
        <ts-input
          v-model="selectData.lineHeight"
          title="行间距"
          @change="refresh(arguments)"
          type="number"
          :showSuffix="true"
          :clearable="false"
        >
          <span slot="suffix">px</span>
        </ts-input>
      </ts-form-item>
           <ts-form-item>
       <ts-radio
          title="文字对齐"
          v-model="selectData.textAlign"
          :data="dataTypeSource2"
          type="group"
          :isDefaultFirst="true"
          @change="refresh($event,'textAlign')"
        ></ts-radio>
      </ts-form-item>
      <ts-color-picker v-model="selectData.fontColor" @change="refresh($event)" title="字体颜色"></ts-color-picker>
      <ts-color-picker v-model="selectData.backgroundColor" @change="refresh($event)" title="背景颜色"></ts-color-picker>
       <ts-color-picker v-model="selectData.backgroundColor2" @change="refresh($event)" title="上下渐变"></ts-color-picker>
          <ts-form-item>
        <ts-input
          v-model="selectData.alink"
          title="跳转Url"
          @change="refresh(arguments)"
          :clearable="false"
        >
         <ts-popover slot="title">如果是本项目的菜单，请填写菜单路径；如果是外部系统页面，则需带https://或 http://开头。</ts-popover>
        </ts-input>
      </ts-form-item>

    </template>
    <div v-if="selectData.state=='6'">
      <ts-form-item>
        <ts-radio
          title="类别"
          v-model="selectData.inputType"
          :data="inputTypeData"
          type="group"
          :isDefaultFirst="true"
          @change="refresh($event,'inputType')"
        ></ts-radio>
      </ts-form-item>
      <!-- <ts-form-item>
        <ts-radio
          title="控件值"
          v-model="selectData.isDimension"
          :data="isDimension"
          type="group"
          
          :isDefaultFirst="true"
          @change="refresh(arguments,'isDimension')"
        ></ts-radio>
      </ts-form-item>-->
      <div v-if="!selectData.inputType || selectData.inputType =='text'">
        <ts-form-item>
          <ts-input
            v-model="selectData.defaultCode"
            title="默认值"
            @change="refresh($event,'defaultCode')"
          ></ts-input>
        </ts-form-item>
      </div>
      <div v-if="selectData.inputType =='number'">
        <ts-form-item>
          <ts-input
            v-model="selectData.min"
            title="最小值"
            type="number"
            :clearable="false"
            @change="refresh($event,'min')"
          ></ts-input>
        </ts-form-item>
        <ts-form-item>
          <ts-input
            v-model="selectData.max"
            title="最大值"
            type="number"
            :clearable="false"
            @change="refresh($event,'max')"
          ></ts-input>
        </ts-form-item>
      </div>
      <div v-if="selectData.inputType =='date'">
        <!-- <ts-form-item>
            <ts-switch
              title="是否显示时间"
              on-label="是"
              off-label="否"
              v-model="selectData.isTime"
              @change="refresh($event,'isTime')"
            ></ts-switch>
        </ts-form-item>-->
        <ts-form-item>
          <ts-radio
            title="时间类型"
            v-model="selectData.isTime"
            :data="showTimeType"
            type="group"
            :isDefaultFirst="true"
            @change="refresh(arguments,'isTime')"
          ></ts-radio>
        </ts-form-item>
        <!-- <ts-form-item>
            <ts-switch
              title="是否为区间"
              on-label="是"
              off-label="否"
              v-model="selectData.isRange"
              @change="refresh($event,'isRange')"
            ></ts-switch>
        </ts-form-item>-->
        <ts-form-item>
          <ts-select
            :key="'startDate'+selectData.id"
            :source="screenStartDate"
            v-model="selectData.startDateId"
            title="默认显示"
            @selected="refresh(arguments,'startDate')"
          ></ts-select>
        </ts-form-item>
        <!-- <ts-form-item>
        <ts-select
          :key="'endDate'+selectData.id"
          :source="screenEndDate"
          v-model="selectData.endDateId"
          title="默认结束日期"
          
          @selected="refresh(arguments,'endDate')"
        ></ts-select>
        </ts-form-item>-->
      </div>
      <!-- <ts-form-item :titleWidth="110">
        <ts-select
          :source="inputControlValSource"
          v-model="selectData.fieldNamesId"
          name="fieldNamesId"
          width="60%"
          style="margin-left:100px"
          @selected="refresh(arguments,'inputControlValue')"
        ></ts-select>
      </ts-form-item>
      <ts-form-item>
        <ts-select
          :key="'andOrId'+selectData.id"
          :source="inputOperateSource"
          v-if="selectData.isDimension == '1'"
          v-model="selectData.andOrId"
          title="属性类型"
          
          @selected="refresh(arguments,'andOrId')"
        ></ts-select>
        <ts-select
          :key="'operateId'+selectData.id"
          v-else
          :source="inputOperateSource"
          v-model="selectData.operateId"
          title="属性类型"
          
          @selected="refresh(arguments,'operateId')"
        ></ts-select>
      </ts-form-item>-->
    </div>
    <template v-if="selectData.state == '9'&&selectData.isHide">
      <ts-form-item>
        <ts-select
          :key="'timerName'+selectData.id"
          :source="timerNameSource"
          v-model="selectData.timerName"
          title="间隔时间"
          @selected="refresh(arguments,'timerName')"
        ></ts-select>
        <!-- <ts-input
          v-model="selectData.timerName"
          title="隔间时间"
          :clearable="false"
          type="number"
          :min="0"
          @change="refresh($event,'width')"
        >
          <ts-popover slot="title">若为0，则宽度自适应；</ts-popover>
        </ts-input>-->
      </ts-form-item>
    </template>
    <template v-if="selectData.state == '10'">
      <ts-form-item>
        <ts-switch
          off-label="否"
          on-label="是"
          title="自动展开"
          v-model="selectData.expandAll"
          @change="refresh($event)"
          :key="'expandAll'+selectData.id"
        >
        </ts-switch>
      </ts-form-item>
      <ts-form-item>
        <ts-switch
          off-label="否"
          on-label="是"
          title="可复选"
          v-model="selectData.isCheckbox"
          @change="refresh($event)"
          :key="'isCheckbox'+selectData.id"
        >
        </ts-switch>
      </ts-form-item>
      <ts-form-item>
        <ts-switch
          off-label="否"
          on-label="是"
          title="可选父节点"
          v-model="selectData.isParent"
          @change="refresh($event)"
          :key="'noParent'+selectData.id"
        >
        </ts-switch>
      </ts-form-item>
    </template>
  </div>
</template>

<script>
import previewRealDate from '../../utils/dateUtils'
import attrDSParamMuti from './attrDSParamMuti'
import attrDataSource from './attrDataSource'
export default {
  name: 'attrScreen',
  props: ['biCustom', 'biModel'],
  components: { attrDSParamMuti, attrDataSource },
  data() {
    return {
      selectData: JSON.parse(JSON.stringify(this.$store.state.bi.selectData)),
      dataSourceDataList:
        JSON.parse(JSON.stringify(this.$store.state.bi.dataSource)) || [],
      // 默认维度下拉
      sourceDate: {
        dataType: 'local',
        data: [
          { LEVEL_NAME: 'L_YEAR', DESCRIPTION: '年' },
          // { LEVEL_NAME: "L_QUARTER", DESCRIPTION: "季度"},
          { LEVEL_NAME: 'L_MONTH', DESCRIPTION: '月' }
          // { LEVEL_NAME: "L_DAY", DESCRIPTION: "天"}
        ],
        code: 'LEVEL_NAME',
        text: 'DESCRIPTION',
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      },
      dimensionLevelData: {
        dataType: 'json',
        url: '/ts-bi/api/bi/cube/queryDimLevels',
        method: 'get',
        data: {
          dimension:
            { ...this.$store.state.bi.selectData }.state == 1
              ? 'DIM_DATE_DAY'
              : { ...this.$store.state.bi.selectData }.fieldNamesId || ''
        },
        page: 'pageNo',
        code: 'LEVEL_NAME',
        text: 'DESCRIPTION',
        condition: 'condition',
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      },
      timerNameSource: {
        dataType: 'local',
        data: [
          { value: '0', label: 'off' },
          { value: 5000, label: '5秒' },
          { value: 30000, label: '30秒' },
          { value: 60000, label: '1分钟' },
          { value: 300000, label: '5分钟' },
          { value: 600000, label: '10分钟' },
          { value: 900000, label: '15分钟' },
          { value: 1800000, label: '30分钟' },
          { value: 3600000, label: '1小时' },
          { value: 7200000, label: '2小时' },
          { value: 86400000, label: '一天' }
        ],
        code: 'value',
        text: 'label',
        value: {}
      },
      // 参数配置的类型
      paramTypeConfig: {
        dataType: 'local',
        code: 'value',
        text: 'label',
        data: [
          { value: 'STRING', label: 'STRING' },
          { value: 'NUMBER', label: 'NUMBER' },
          { value: 'DATE', label: 'DATE' }
        ],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      },
      dataSourceDateType: {
        dataType: 'local',
        code: 'value',
        text: 'label',
        data: [
          { value: '0', label: '起始日期' },
          { value: '1', label: '结束日期' }
        ],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      },
      isSelect: [
        { value: '1', text: '是' },
        { value: '0', text: '否' }
      ],
      inputTypeData: [
        { value: 'text', text: '默认文本' },
        { value: 'date', text: '日期' },
        { value: 'number', text: '数字' }
      ],
      showTimeType: [
        { value: 'YYYY-MM-DD', text: '日期' },
        { value: 'YYYY-MM-DD hh:mm:ss', text: '日期时间' }
        // { value: 'YYYY-MM', text: '年月' },
      ],
      isDimension: [
        { value: '1', text: '维度' },
        { value: '0', text: '指标' }
      ],
      groupTypeSource: [
        { value: '', text: '单选框' },
        { value: 'group', text: '单选按钮' }
      ],
      // 下拉数据类型
      dataTypeSource: [
        // { value: '0', text: '维度' },
        { value: '1', text: '数据源' },
        { value: '2', text: '选项设置' }
      ],
       dataTypeSource2: [
        { value: 'left', text: '居左' },
        { value: 'center', text: '居中' },
        { value: 'right', text: '居右' }
      ],

      // 标签数据类型
      textDataType: [
        { value: '2', text: '静态设值' },
        { value: '0', text: '自定义服务' },
        { value: '1', text: 'URL' }
      ],
      dateType: [
        { value: 'range', text: '日期' },
        { value: 'rangetime', text: '日期时间' }
      ],
      clickEventSource: {
        dataType: 'local',
        code: 'id',
        text: 'name',
        data: [
          { id: 0, name: '查询' },
          { id: 1, name: '刷新' },
          { id: 2, name: '导出' }
          // { id: 2, name: '打印' },
          // { id: 3, name: '关闭' }
        ],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      },
      screenStartDate: {
        dataType: 'local',
        code: '_id',
        text: '_name',
        data: [
          { _name: '今日', _id: 'jr', type: '0' },
          { _name: '昨日', _id: 'zr', type: '1' },
          { _name: '本周第一天', _id: 'bzdyt', type: 'bz' },
          { _name: '本月第一天', _id: 'bydyt', type: 'now' },
          { _name: '本季第一天', _id: 'bjdyt', type: 'j' },
          { _name: '本年第一天', _id: 'bndyt', type: 'y' },
          { _name: '上周第一天', _id: 'szdyt', type: 'sz' },
          { _name: '上月第一天', _id: 'sydyt', type: 'prev' },
          { _name: '上季第一天', _id: 'sjdyt', type: 'pj' },
          { _name: '上年第一天', _id: 'sndyt', type: 'py' }
        ],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      },
      screenEndDate: {
        dataType: 'local',
        code: '_id',
        text: '_name',
        data: [
          { _name: '今日', _id: 'jr', type: '0' },
          { _name: '昨日', _id: 'zr', type: '1' },
          { _name: '本周最后一天', _id: 'bzzhyt', type: 'bz' },
          { _name: '本月最后一天', _id: 'byzhyt', type: 'now' },
          { _name: '本季最后一天', _id: 'bjzhyt', type: 'j' },
          { _name: '本年最后一天', _id: 'bnzhyt', type: 'y' },
          { _name: '上周最后一天', _id: 'szzhyt', type: 'sz' },
          { _name: '上月最后一天', _id: 'syzhyt', type: 'prev' },
          { _name: '上季最后一天', _id: 'sjzhyt', type: 'pj' },
          { _name: '上年最后一天', _id: 'snzhyt', type: 'sndyt' }
        ],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      },
      dataSourceData: {
        dataType: 'local',
        data: this.dataSourceDataList,
        code: 'id',
        text: 'queryName',
        condition: 'condition',
        isReq: true,
        value: {
          // name: item.dataSourceName,
          // code: item.dataSourceId
        }
      },

      ssoModel: {
        dataType: 'local',
        code: 'dimensionName',
        text: '_name',
        data: this.biCustom ? this.biCustom.weidu : []
      },
      dataTypeFields: this.dataTypeFieldsFn(),
      addFieldData: {
        3: [
          {
            name: 'dataSourceDateType',
            type: 'select',
            id: 'dataSourceDateType',
            width: '50%',
            placeholder: '日期分类',
            value: 'dataSourceDateType',
            source: {
              isReq: true,
              dataType: 'local',
              data: [
                { value: '0', label: '起始日期' },
                { value: '1', label: '结束日期' }
              ],
              code: 'value',
              text: 'label',
              value: {
                name: '',
                code: ''
              }
            }
          }
        ]
      }
    }
  },
  computed: {
    dataSourceChild() {
      return {
        dataType: 'local',
        data: this.dataSourceDataList,
        code: 'id',
        text: 'queryName',
        condition: 'condition',
        isReq: true,
        value: {
          // name: item.dataSourceName,
          // code: item.dataSourceId
        }
      }
    },
    allDateType() {
      if (this.selectData.dimensionLevelId == 'L_YEAR') {
        return [
          { value: 'range', text: '日期' },
          { value: 'rangetime', text: '日期时间' },
          { value: 'yyyy', text: 'yyyy' }
        ]
      } else if (this.selectData.dimensionLevelId == 'L_MONTH') {
        return [
          { value: 'range', text: '日期' },
          { value: 'rangetime', text: '日期时间' },
          { value: 'yyyyMM', text: 'yyyyMM' },
          { value: 'yyyy-MM', text: 'yyyy-MM' }
        ]
      } else {
        return this.dateType
      }
    },

    // 下拉数据源-显示
    selectDataSourceName() {
      return this.dataSourceColSource(this.selectData.selectDataSourceData)
    },
    // sourceDatas() {
    //   const _this = this
    //   return [
    //     {
    //       name: 'dataSourceId',
    //       type: 'select',
    //       id: 'dataSourceId',
    //       value: 'dataSourceName', // 为了保证旧数据的稳定性
    //       width: '100%',
    //       placeholder: '数据源',
    //       isGanged: true, // 是否联动  默认false boolean
    //       gangedId: 'dataSourceCol', // 联动项id
    //       source: {
    //         dataType: 'local',
    //         data: this.dataSourceDataList,
    //         code: 'id',
    //         text: 'queryName',
    //         value: {
    //           name: '',
    //           code: ''
    //         }
    //       },
    //       // changed: (item, row, index) => {
    //       //   item.dataSourceCol = ''
    //       //   row[1].source.value = {
    //       //     code: '',
    //       //     name: ''
    //       //   }
    //       //   _this.selectData.dataSourceData[0] = item
    //       //   _this.setStoreNatureArr()
    //       // },
    //       formatter: row => {
    //         let childDatasList = JSON.parse(row.conditionDefine)
    //         return {
    //           data: childDatasList
    //         }
    //       }
    //     },
    //     {
    //       name: 'dataSourceCol',
    //       type: 'select',
    //       id: 'dataSourceCol',
    //       value: 'dataSourceCol',
    //       width: '100%',
    //       placeholder: '参数名',
    //       source: {
    //         dataType: 'local',
    //         data: [],
    //         code: 'name',
    //         text: 'name',
    //         value: {
    //           name: '',
    //           code: ''
    //         }
    //       }
    //     }
    //   ]
    // },
    // clickField() {
    //   return [
    //     {
    //       name: 'dataSourceId',
    //       type: 'select',
    //       value: 'dataSourceName', // 为了保证旧数据的稳定性
    //       id: 'dataSourceId',
    //       width: '100%',
    //       placeholder: '数据源',
    //       isGanged: true, // 是否联动  默认false boolean
    //       gangedId: 'dataSourceCol', // 联动项id
    //       source: {
    //         dataType: 'local',
    //         data: this.dataSourceDataList,
    //         code: 'id',
    //         text: 'queryName',
    //         value: {
    //           name: '',
    //           code: ''
    //         }
    //       },
    //       formatter: row => {
    //         let childDatasList = JSON.parse(row.conditionDefine)
    //         return {
    //           data: childDatasList
    //         }
    //       }
    //     },
    //     {
    //       name: 'dataSourceCol',
    //       type: 'select',
    //       id: 'dataSourceCol',
    //       value: 'dataSourceCol',
    //       width: '50%',
    //       placeholder: '参数名',
    //       source: {
    //         dataType: 'local',
    //         data: [],
    //         code: 'name',
    //         text: 'name',
    //         value: {
    //           name: '',
    //           code: ''
    //         }
    //       }
    //     },
    //     {
    //       name: 'dataSourceDateType',
    //       type: 'select',
    //       id: 'dataSourceDateType',
    //       width: '50%',
    //       placeholder: '日期分类',
    //       value: 'dataSourceDateType',
    //       source: {
    //         dataType: 'local',
    //         data: this.dataSourceDateType.data,
    //         code: 'value',
    //         text: 'label',
    //         value: {
    //           name: '',
    //           code: ''
    //         }
    //       }
    //     }
    //   ]
    // },
    screenControlVal() {
      return {
        dataType: 'local',
        code: 'dimensionName',
        text: '_name',
        data: this.getScreenControlVal(),
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    },
    // 下拉数据源-值
    selectDataSourceCode() {
      return this.dataSourceColSource(
        this.selectData.selectDataSourceCodeOption
      )
    },
    // 下拉数据源-值
    selectDataSourceResult() {
      return this.dataSourceColSource(
        this.selectData.selectDataSourceResultData
      )
    },
    // 输入值
    inputControlValSource() {
      if (this.biCustom) {
        var controlVal = []
        if (this.biCustom.weidu && this.selectData.isDimension == '1') {
          controlVal = JSON.parse(JSON.stringify(this.biCustom.weidu))
          for (var i = 0; i < controlVal.length; i++) {
            if (controlVal[i].dimensionName == 'DIM_DATE_DAY') {
              controlVal.splice(i, 1)
              break
            }
          }
        } else if (this.selectData.isDimension == '0') {
          controlVal = JSON.parse(JSON.stringify(this.biCustom.norm))
        }
      }
      return {
        dataType: 'local',
        code: this.selectData.isDimension == '1' ? 'dimensionName' : '_id',
        choice: true,
        text: '_name',
        data: controlVal,
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    },
    inputOperateSource() {
      return {
        dataType: 'local',
        code: this.selectData.isDimension == '1' ? 'dimensionName' : '_id',
        text: '_name',
        data:
          this.selectData.isDimension == '1'
            ? [
                { _name: '并且(and)', _id: 'and' },
                { _name: '或者(or)', _id: 'or' }
              ]
            : [
                { _name: '<', _id: '0' },
                { _name: '<=', _id: '1' },
                { _name: '>', _id: '2' },
                { _name: '>=', _id: '3' },
                { _name: '=', _id: '4' },
                { _name: '!=', _id: '5' },
                { _name: 'like', _id: '6' },
                { _name: 'in', _id: '7' }
              ],

        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    }
  },
  mounted() {
    this.changeDimen()
  },
  created() {
    // this.getScreenControlVal()
  },
  methods: {
    onClickField(ev, type) {
      this.$nextTick(() => {
        this.selectData[type] = ev
        this.setStoreNatureArr()
      })
    },
    // 数据源
    dataSourceColSource(data) {
      return {
        dataType: 'local',
        code: 'name',
        text: 'name',
        data: data || [],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    },
    // 改变参数值
    changValue(ev, item) {
      item.value = ev.value
      this.setStoreNatureArr()
    },
    // 比较页签配置
    dataTypeFieldsFn() {
      return [
        {
          name: 'value',
          id: 'value',
          type: 'text',
          width: '50%',
          placeholder: '值'
        },
        {
          placeholder: '显示名',
          name: 'text',
          id: 'text',
          type: 'text',
          width: '50%'
        }
      ]
    },
    refresh(ev, key) {
      this.$nextTick(() => {
        switch (key) {
          case 'dataTypeList':
            this.selectData[key] = ev
            break
          case 'inputType':
            if (ev.label == 'text') {
              this.selectData.inputType = ''
              this.selectData.controlType = '文本输入框'
              this.selectData.placeholder = '文本输入框'
            } else if (ev.label == 'number') {
              this.selectData.inputType = ev.label
              this.selectData.controlType = '数字输入框'
              this.selectData.placeholder = '数字输入框'
            } else if (ev.label == 'date') {
              this.selectData.inputType = ev.label
              this.selectData.controlType = '日期输入框'
              this.selectData.placeholder = '日期输入框'
            }
            break
          case 'isTime': //是否显示时间
            this.selectData.isTime = ev[0].label
            this.onDateTime()
            break
          case 'isRange': //是否显示区间
            this.selectData.isRange = ev
            this.onDateTime()
            break
          case 'isSelect': //是否选择默认
            this.selectData.isSelect = ev
            if (ev && this.selectData.w == 6) {
              this.selectData.w = 15
            } else if (!ev && this.selectData.w == 15) {
              this.selectData.w = 6
            }
            break
          case 'clickEvent': //按钮的超链接
            
            this.selectData.controlName = ev[0].name
            this.selectData.clickEventId = ev[0].id
            this.selectData.clickEvent = ev[0].name
            break
          case 'startDate': //开始日期
            this.selectData.startDateId = ev[0]._id
            this.selectData.startDate = ev[0]._name
            this.selectData.startDateType = ev[0].type
            break
          case 'endDate': //结束日期
            this.selectData.endDateId = ev[0]._id
            this.selectData.endDate = ev[0]._name
            this.selectData.endDateType = ev[0].type
            break
          case 'dimensionLevel': //默认维度
            this.selectData.dimensionLevelId = ev[0].LEVEL_NAME
            this.selectData.dimensionLevel = ev[0].DESCRIPTION
            break
          case 'controlVal': //控件值
            this.selectData.fieldNamesId = ev[0].dimensionName
            this.selectData.fieldNames = ev[0]._name
            this.selectData.dimensionLevelId = ''
            this.selectData.dimensionLevel = ''
            this.dimensionLevelData.data.dimension = this.selectData.fieldNamesId
            break
          case 'isDimension': // 控件值（维度和指标的选择）
            this.selectData.fieldNamesId = ''
            this.selectData.fieldNames = ''
            this.selectData.andOr = ''
            this.selectData.andOrId = ''
            this.selectData.operate = ''
            this.selectData.operateId = ''
            break
          case 'andOrId': // 维度操作
            this.selectData.andOr = ev[0]._name
            this.selectData.andOrId = ev[0]._id
            break
          case 'operateId': // 维度操作
            this.selectData.operate = ev[0]._name
            this.selectData.operateId = ev[0]._id
            break
          case 'inputControlValue': // 输入框控件值
            this.selectData.fieldNames = this.selectData.fieldNames
              ? this.selectData.fieldNames + ',' + ev[0]._name
              : ev[0]._name

          case 'selectDataSource': // 下拉数据源
            this.selectData.selectDataSourceCode = ''
            this.selectData.selectDataSourceName = ''
            this.selectData.selectDataSourceResult = ''

            this.selectData.selectDataSourceData = []
            this.selectData.selectDataSourceResultData = []
            if (ev[0].serviceType == '2') {
              // 结果集
              for (let item of JSON.parse(ev[0].columnDefine)) {
                this.selectData.selectDataSourceResultData.push({
                  name: item.name,
                  tableColumns: item.tableColumns
                })
              }
            } else {
              for (let item of JSON.parse(ev[0].columnDefine)) {
                this.selectData.selectDataSourceData.push({
                  name: item.name
                })
              }
            }
            this.$store.commit('setSelectData', { ...this.selectData })
            break
          case 'selectDataSourceResult': // 下拉数据源-结果集
            this.selectData.selectDataSourceCode = ''
            this.selectData.selectDataSourceName = ''
            this.selectData.selectDataSourceData = []
            for (let item of ev[0].tableColumns) {
              this.selectData.selectDataSourceData.push({
                name: item.name
              })
            }
            break
        }
        this.setStoreNatureArr()
      })
    },
    // setValue() {
    //   let item = this.selectData

    // },
    onDateTime() {
      // if (this.selectData.isRange && this.selectData.isTime == 'YYYY-MM-DD hh:mm:ss') {
      //   this.selectData.dataType = 'rangetime'
      // } else if (this.selectData.isRange && this.selectData.isTime == "YYYY-MM-DD") {
      //   this.selectData.dataType = 'range'
      // } else
      if (!this.selectData.isRange && this.selectData.isTime == 'YYYY-MM-DD') {
        this.selectData.dataType = 'date'
      } else if (
        !this.selectData.isRange &&
        this.selectData.isTime == 'YYYY-MM-DD hh:mm:ss'
      ) {
        this.selectData.dataType = 'datetime'
      }
    },
    // onRelation(type, index) {
    //   //关联指标的操作
    //   switch (type) {
    //     case 'add':
    //       var relation = {
    //         id: '',
    //         i: this.$utils.uuid(16),
    //         dataSourceId: '',
    //         dataSourceCol: '',
    //         dataSourceDateType: '0'
    //       }
    //       relation.id = this.$utils.uuid(16)
    //       this.selectData.dataSourceData.push(relation)
    //       break
    //     case 'delete':
    //       for (var i = 0; i < this.selectData.dataSourceData.length; i++) {
    //         if (this.selectData.dataSourceData[i].i == index && index != 0) {
    //           this.selectData.dataSourceData.splice(i, 1)
    //           break
    //         }
    //       }
    //       break
    //   }
    //   this.$store.commit('saveArr', { data: { ...this.selectData } })
    //   this.$store.commit('setNatureArr', { ...this.$store.state.bi.natureArr })
    // },
    //控件值
    getScreenControlVal() {
      var controlVal = []
      if (
        this.biCustom &&
        (Object.keys(this.biCustom).length > 0 || this.biCustom.weidu)
      ) {
        controlVal = JSON.parse(JSON.stringify(this.biCustom.weidu))
        for (var i = 0; i < controlVal.length; i++) {
          if (controlVal[i].dimensionName == 'DIM_DATE_DAY') {
            controlVal.splice(i, 1)
            break
          }
        }
      }
      // this.screenControlVal.data = controlVal
      return controlVal
    },
    // 动态改变默认维度
    changeDimen() {
      this.selectData.inputType = this.selectData.inputType || 'text'
      this.dimensionLevelData.data.dimension =
        this.selectData.state == 1
          ? 'DIM_DATE_DAY'
          : this.selectData.fieldNamesId || ''
    },
    onSelectDataSource(ev, item) {
      item.selectDataSourceResultData = []
      item.conditionData = []
      if (ev.conditionDefine) {
        item.conditionData = []
        for (let con of JSON.parse(ev.conditionDefine)) {
          item.conditionData.push({
            columnType: con.columnType,
            value: con.value,
            defaultValue: con.defaultValue,
            name: con.name
          })
        }
      }
      item.dataSourceId = ev.id
      item.dataSourceCol = ''
      item.defaultValue = ''
      item.selectDataSourceResult = ''
      item.dataSourceName = ev.queryName
      this.$refs['colSource' + item.i][0].source.data = item.conditionData
      this.setStoreNatureArr()
    },
    // 监听数据源字段
    onSelectColSource(ev, item) {
      item.dataSourceCol = ev.name
      item.columnType = ev.columnType
      item.defaultValue = ev.defaultValue
      // item.value = ev.defaultValue
      this.setStoreNatureArr()
    },
    // 监听日期控件的日期类型
    onSelectDataSourceDateType(ev, item) {
      item.dataSourceDateType = ev.value
      this.setStoreNatureArr()
    },
    setStoreNatureArr() {
      this.$store.commit('setSelectData', { ...this.selectData })
      this.$store.commit('saveArr', {
        data: { ...this.selectData },
        biModel: this.biModel
      })
      if (this.biModel == 'mobile') {
        this.$store.commit('setPhoneNature', [...this.$store.state.bi.phoneNature])
      } else {
        this.$store.commit('setNatureArr', { ...this.$store.state.bi.natureArr })
      }
    }
  },
  watch: {
    '$store.state.bi.selectData': {
      handler(val) {
        this.selectData = JSON.parse(JSON.stringify(val))
        this.changeDimen()
      }
    },
    '$store.state.bi.dataSource': {
      handler(val) {
        this.dataSourceDataList = [...val]
      },
      deep: true
    },
    biCustom: {
      handler(val, old) {
        this.getScreenControlVal()
      },
      deep: true
    }
    // 'biCustom.norm': {
    //   handler(val, old) {
    //     if (this.selectData.state !== '1') {
    //       //非时间组件，则清空
    //       this.selectData.fieldNamesId = ''
    //       this.selectData.fieldNames = ''
    //       this.selectData.dimensionLevelId = ''
    //       this.selectData.dimensionLevel = ''
    //     }
    //   },
    //   deep: true
    // }
  }
}
</script>
<style lang="less" scoped>
/deep/.vxe-radio-button /deep/.vxe-radio--label {
  padding: 0 3px;
}
.base-screen-container {
  .attr_chart_title {
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    font-size: 12px;
  }
  /deep/ .el-checkbox__label {
    font-size: 12px;
  }
  .form-autoEdit-list {
    padding: 0;
    .form-autoEdit-item-i {
      background: rgba(215, 215, 215, 1);
      margin-left: 0px;
    }
    .form-autoEdddit-item {
      display: flex;
      justify-content: center;
      margin-top: 2px;
      padding: 0 10px;
      .form__title {
        width: auto;
        padding: 0 5px;
      }
      .txt {
        width: 3px !important;
        height: 23px;
        text-align: center;
        line-height: 23px;
        font-size: 12px;
        color: #555;
      }
      .form-autoEdit-item-add-btn {
        .vxe-button--icon.iconfont {
          color: var(--base-acv) !important;
        }
      }
      .form__box {
        margin: 0 2px;
      }
      .vxe-input--inner {
        margin: 0 1px;
      }
      .con {
        margin: 5px;
        position: relative;
        display: flex;
        align-items: center;
        // justify-content: space-around;
        // div {
        //   display: flex;
        //   align-items: center;
        //   flex: 1;
        // }
      }
    }
  }
}
</style>
