<template>
  <div class="base-detail-container">
    <!-- <div class="form-title_blue">属性设置</div> -->
    <ts-form-item>
      <ts-input v-model="selectData.controlType" title="控件类型" disabled readonly></ts-input>
    </ts-form-item>
    <ts-form-item>
      <ts-input :value="selectData.type + '_'+selectData.id" title="控件ID" disabled readonly></ts-input>
    </ts-form-item>
    <template v-if="selectData.type!=='link'">
      <div class="flexbox">
        <ts-color-picker
          v-model="selectData.groundColor"
          @change="refresh($event,'groundColor')"
          title="背景颜色"
          width="180px"
        ></ts-color-picker>
        <a class="form__title transparent" @click="onGroundTransparent()">透明</a>
      </div>
      <ts-form-item>
        <ts-switch
          off-label="否"
          on-label="是"
          title="固定高度"
          v-model="selectData.HPosition"
          @change="refresh($event)"
          :key="'HPosition'+selectData.id"
        >
          <tsPopover slot="title">
            注：默认为浏览器的相对高度，用于高度等比功能，自动填充等；
            <br />开启后，高度为固定值，不可根据浏览器变化而变化
          </tsPopover>
        </ts-switch>
      </ts-form-item>
      <ts-row type="flex">
        <ts-col :flex="1">
          <ts-switch
            :key="'isFullHeight'+selectData.id"
            title="填充底部"
            v-model="selectData.isFullHeight"
            on-label="是"
            off-label="否"
            @change="refresh($event,'isFullHeight')"
          >
            <tsPopover slot="title">注：只有底部元素具有此功能，否则界面将混乱</tsPopover>
          </ts-switch>
        </ts-col>
        <ts-col :flex="1">
          <ts-switch
            :key="'isHide'+selectData.id"
            title="默认隐藏"
            v-model="selectData.isHide"
            on-label="是"
            off-label="否"
            @change="refresh($event,'isHide')"
          ></ts-switch>
        </ts-col>
      </ts-row>
    </template>
    <!-- <ts-form-item>
      <ts-select
        ref="roleSelect"
        v-model="selectData.roleIds"
        title="角色控制"
        :source="roledata"
        :key="selectData.id+'roleIds'"
        @selected="refresh($event,'roleIds')"
      ></ts-select>
    </ts-form-item>-->

    <ts-form-item
      v-if="selectData.type!='table'&&(selectData.type!='screen'||selectData.state=='10')"
    >
      <ts-switch
        title="显示边框"
        v-model="selectData.showBorder"
        on-label="是"
        off-label="否"
        :key="selectData.id"
        @change="refresh($event, 'showBorder')"
      ></ts-switch>
    </ts-form-item>
    <tsImgSelect
      title="大屏边框"
      placeholder
      :source="borderTypeSource"
      v-model="selectData.borderType"
      @selected="refresh($event,'borderType')"
      :key="'borderType'+selectData.id"
    ></tsImgSelect>
    <template
      v-if="(selectData.type != 'screen'|| (selectData.type == 'screen'&&selectData.state==5))&&selectData.type != 'tab' &&selectData.type != 'filter'&&selectData.type != 'link'&&!(selectData.type=='biElement'&&selectData.state==4)"
    >
      <attrFilterMuti
        :selectItem="selectData"
        @onClickField="onClickField"
        :natureArrIds="natureArrIds"
      ></attrFilterMuti>
      <!-- <ts-form-item>
        <ts-select
          :key="'filter'+selectData.id"
          :source="selectOption"
          v-model="selectData.filterId"
          title="关联筛选"
          @selected="refresh($event,'filterId')"
        >
          <tsPopover slot="title">注：需使用BI筛选器时，使用关联筛选器参数进行查询</tsPopover>
        </ts-select>
      </ts-form-item>-->
    </template>
    <template v-if="selectData.type == 'filter'">
      <ts-row type="flex">
        <ts-col :flex="1">
          <ts-switch
            :key="'isNoTop'+selectData.id"
            title="取消置顶"
            v-model="selectData.isNoTop"
            on-label="是"
            off-label="否"
            @change="refresh($event,'isNoTop')"
          ></ts-switch>
        </ts-col>
        <ts-col :flex="1">
          <ts-switch
            v-if="!selectData.noArea"
            :key="'noDate'+selectData.id"
            title="取消日期"
            v-model="selectData.noDate"
            on-label="是"
            off-label="否"
            @change="refresh($event,'noDate')"
          >
            <tsPopover slot="title">注：【日期】和【院区】不能同时取消</tsPopover>
          </ts-switch>
        </ts-col>
      </ts-row>
      <ts-row type="flex">
        <ts-col :flex="1">
          <ts-switch
            v-if="!selectData.noDate"
            :key="'noArea'+selectData.id"
            title="取消院区"
            v-model="selectData.noArea"
            on-label="是"
            off-label="否"
            @change="refresh($event,'noArea')"
          >
            <tsPopover slot="title">注：【日期】和【院区】不能同时取消</tsPopover>
          </ts-switch>
        </ts-col>
        <ts-col :flex="1">
          <ts-switch
            v-if="!selectData.noArea"
            :key="'single'+selectData.id"
            title="切换单选"
            v-model="selectData.single"
            on-label="是"
            off-label="否"
            @change="refresh($event,'single')"
          ></ts-switch>
        </ts-col>
      </ts-row>
      <ts-row type="flex">
        <ts-col :flex="1">
          <ts-switch
            :key="'simple'+selectData.id"
            title="简版筛选"
            v-model="selectData.simple"
            on-label="是"
            off-label="否"
            @change="refresh($event,'simple')"
          >
            <tsPopover slot="title">注：简化版筛选只有院区与时间选择</tsPopover>
          </ts-switch>
        </ts-col>
        <ts-col :flex="1">
          <ts-select
            v-if="!selectData.noDate"
            :key="'defaultTime'+selectData.id"
            title="默认时间"
            :source="defaultDate"
            v-model="selectData.defaultTime"
            @selected="refresh($event,'defaultTime')"
          ></ts-select>
        </ts-col>
      </ts-row>
            <ts-row type="flex">
        <ts-col :flex="1">
          <ts-switch
            :key="'areaSingle'+selectData.id"
            title="多机构"
            v-model="selectData.areaSingle"
            on-label="是"
            off-label="否"
            @change="refresh($event,'areaSingle')"
          >
            <tsPopover slot="title"></tsPopover>
          </ts-switch>
        </ts-col>
      </ts-row>
      
    </template>

    <template v-if="selectData.type == 'business'">
      <ts-form-item>
        <ts-input :value="selectData.bTitle" title="组件名称" disabled readonly></ts-input>
      </ts-form-item>
      <ts-form-item>
        <ts-select
          :key="'nowVC'+selectData.id"
          :source="versionCodeSource"
          v-model="selectData.versionCode"
          title="当前版本:"
          @selected="changeNowVersion"
        >
          <!-- <p slot="after">{{selectData.versionNote}}######</p> -->
        </ts-select>
      </ts-form-item>
    </template>
    <template
      v-if="selectData.type == 'panel'||(selectData.type == 'biElement'&&(selectData.state==1 ||selectData.state==5))"
    >
      <div class="form-title_blue">页面元素配置</div>
      <ts-color-picker
        v-model="selectData.panelBackgroundColor"
        @change="refresh($event, 'panelBackgroundColor')"
        title="面板背景"
      ></ts-color-picker>
      <ts-form-item v-if="selectData.type == 'panel'">
        <ts-input v-model="selectData.controlTitle" title="标题" @change="refresh($event,'title')"></ts-input>
      </ts-form-item>
      <template
        v-if="selectData.controlTitle||(selectData.type == 'biElement'&&(selectData.state==1 ||selectData.state==5))"
      >
        <ts-form-item>
          <ts-radio
            title="标题结构"
            v-model="selectData.titleStructure"
            :data="panelTitleStyle"
            type="group"
            :isDefaultFirst="true"
            @change="refresh(arguments)"
          ></ts-radio>
        </ts-form-item>
        <ts-color-picker
          :key="selectData.id+'titleBackgroundddd'"
          v-model="selectData.titleBackgroundColor"
          @change="refresh($event, 'titleBackground')"
          title="标题背景"
        ></ts-color-picker>
        <ts-form-item>
          <ts-radio
            title="标题方位"
            v-model="selectData.titlePosition"
            :data="titlePositionSource"
            type="group"
            :isDefaultFirst="true"
            @change="refresh(arguments)"
          ></ts-radio>
        </ts-form-item>

        <ts-row type="flex">
          <ts-col>
            <ts-switch
              title="标题加粗"
              v-model="selectData.titleWeight"
              on-label="是"
              off-label="否"
              @change="refresh($event,'titleWeight')"
            ></ts-switch>
          </ts-col>
        </ts-row>
        <ts-color-picker
          :key="selectData.id+'titleColor'"
          v-model="selectData.titleColor"
          @change="refresh($event, 'titleColor')"
          title="标题颜色"
        ></ts-color-picker>
      </template>

      <ts-checkbox
        v-model="selectData.borderChoose"
        title="显示边框"
        :data="borderOption"
        width="100%"
        :key="selectData.id"
        @change="refresh($event, 'borderChoose')"
      ></ts-checkbox>
      <ts-color-picker
        :key="selectData.id+'borderColor'"
        v-model="selectData.borderColor"
        @change="refresh($event, 'borderColor')"
        title="边框颜色"
      ></ts-color-picker>
      <ts-form-item v-if="selectData.type == 'panel'">
        <ts-input
          v-model="selectData.rightTitle"
          title="右上角标题"
          @change="refresh($event,'rightTitle')"
        ></ts-input>
      </ts-form-item>
      <template v-if="selectData.type == 'panel'&&selectData.rightTitle">
        <div class="form-title_blue">右上角标题配置</div>
        <div class="flexbox">
          <div class="form__title">字体色</div>
          <ts-color-picker
            style="flex:0.5"
            :key="selectData.id+'rightColor'"
            v-model="selectData.rightColor"
            @change="refresh($event, 'rightColor')"
          ></ts-color-picker>
        </div>
        <div class="flexbox">
          <ts-form-item>
            <ts-switch
              :key="'rightDeco'+selectData.id"
              title="下划线"
              v-model="selectData.rightDeco"
              on-label="是"
              off-label="否"
              @change="refresh($event,'rightDeco')"
            ></ts-switch>
          </ts-form-item>
          <ts-form-item>
            <ts-input
              type="number"
              :min="1"
              title="字体大小"
              :clearable="false"
              v-model="selectData.rightFontSize"
              @change="refresh($event, 'rightFontSize')"
            ></ts-input>
          </ts-form-item>
        </div>
      </template>
    </template>
    <!-- 比较页签筛选 -->
    <div v-if="selectData.type == 'ratherTab'">
      <ts-switch
        title="固定底部"
        on-label="是"
        off-label="否"
        :on-value="1"
        :off-value="2"
        v-model="selectData.nature.fixation"
        @change="refresh($event,'fixation')"
        key="fixation"
      ></ts-switch>
      <ts-multi-mdl
        :mulitValue="selectData.nature.data"
        :fields="ratherTabFields"
        title="页签设置"
        title-width="90"
        width="100%"
        @change="refresh($event,'ratherTabData')"
      ></ts-multi-mdl>
    </div>
    <!-- <ts-form-item field="remark" class="form-inline">
      <ts-input
        v-model="selectData.controlWidth"
        title="控件大小"
        type="number"
        width="143px"
        autocomplete="off"
        placeholder="宽%"
        @change="refresh($event,'width')"
        max="100"
        min="0"
      ></ts-input>
      <ts-input
        v-model="selectData.controlHeight"
        title
        type="number"
        style="margin-left:5px"
        width="75px"
        autocomplete="off"
        placeholder="高%"
        :max="100"
        :min="0"
      ></ts-input>
    </ts-form-item>-->
  </div>
</template>

<script>
import natureArrMixins from '../mixins/natureArrMixins'
import attrFilterMuti from './attrFilterMuti'
import biUtils from '../../utils/biUtils'
export default {
  name: 'attr-base',
  mixins: [natureArrMixins],
  components: { attrFilterMuti },
  props: ['biModel', 'formId'],
  data() {
    return {
      natureArrIds: [],
      defaultDate: {
        dataType: 'local',
        data: [
          {
            code: 'lastMonth',
            name: '上月'
          },
          {
            code: 'nowMonth',
            name: '本月'
          },
          {
            code: 'lastDay',
            name: '昨日'
          }
        ],
        code: 'code',
        text: 'name',
        isClose: true
      },
      roledata: {
        dataType: 'local',
        data: [...this.$store.state.bi.roleTreeList],
        code: 'code',
        text: 'name',
        children: 'children',
        tree: true,
        treeType: 'checkbox',
        isLoading: false,
        isClose: true,
        noParent: true
      },
      positionConfig: [
        { value: false, text: '相对' },
        { value: true, text: '绝对' }
      ],
      predefineColors: [
        '#176ce6',
        '#0079fb',
        'var(--light-back-grey)',
        'var(--border_color)',
        '#e6a23c',
        '#606266',
        '#e5e7e8',
        '#c0d3d9',
        '#9ba0a5'
      ],
      // dataSourceData: {
      //   dataType: 'json',
      //   url: '/ts-query/api/user/define/service/list',
      //   method: 'post',
      //   contentType: 'application/x-www-form-urlencoded',
      //   page: 'pageNo',
      //   pageSize: 200,
      //   data: {
      //     sord: 'desc',
      //     pageSize: 200,
      //     pageNo: 1
      //   },
      //   code: 'id',
      //   text: 'queryName',
      //   condition: 'condition',
      //   isReq: true,
      //   value: {
      //     name: '',
      //     code: ''
      //   }
      // },
      isStripe: true,
      borderChoose: '',
      borderOption: [
        { name: 'name1', value: 1, text: '上边框' },
        { name: 'name2', value: 2, text: '下边框' },
        { name: 'name3', value: 3, text: '左边框' },
        { name: 'name4', value: 4, text: '右边框' }
      ],
      panelTitleStyle: [
        { value: '0', text: '左右结构' },
        { value: '1', text: '上下结构' }
      ],
      titlePositionSource: [
        { value: 'flex-start', text: '居左' },
        { value: 'center', text: '居中' },
        { value: 'flex-end', text: '居右' }
      ],
      selectData: JSON.parse(JSON.stringify(this.$store.state.bi.selectData)),
      ratherTabFields: this.ratherTabFieldsFn(),
      colors: [
        '#5B8FF9',
        '#61DDAA',
        '#65789B',
        '#F6BD16',
        '#7262fd',
        '#78D3F8',
        '#9661BC',
        '#F6903D',
        '#008685',
        '#F08BB4',
        '#5B8FF9',
        '#CDDDFD',
        '#61DDAA',
        '#CDF3E4',
        '#65789B',
        '#CED4DE',
        '#F6BD16',
        '#FCEBB9',
        '#7262fd',
        '#D3CEFD',
        '#78D3F8',
        '#D3EEF9',
        '#9661BC',
        '#DECFEA',
        '#F6903D',
        '#FFE0C7',
        '#008685',
        '#BBDEDE',
        '#F08BB4',
        '#FFE0ED'
      ],
      borderTypeSource: {}
    }
  },
  computed: {
    // selectOption() {
    //   return {
    //     dataType: 'local',
    //     data: this.natureArrIds,
    //     code: 'id',
    //     text: 'typeId',
    //     isReq: true,
    //     value: {
    //       name: '',
    //       code: ''
    //     }
    //   }
    // },
    versionCodeSource() {
      return {
        dataType: 'json',
        url: '/ts-version/api/version/list',
        method: 'get',
        data: {
          name: this.selectData.bid,
          systemName: '平台应用',
          moduleName: '自定义报表',
          type: 3
        },
        page: 'pageNo',
        code: 'versionCode',
        text: 'versionCode',
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    }
  },
  created() {
    this.borderTypeSource = {
      data: biUtils.getBorderTypes('attrBase'),
      type: 'iconfont'
    }
    this.natureArrIds = []
    this.getNatureArrIds(
      this.$store.state.bi.natureArr[
        'd' + (this.$store.state.bi.dialogEditors.length - 1)
      ],
      'filter,screen'
    )
  },
  methods: {
    refresh(ev, arrKey) {
      this.$nextTick(() => {
        switch (arrKey) {
          case 'groundColor':
            this.selectData.backgroundColor = this.selectData.groundColor
            break
          case 'noDate':
            this.selectData.h = this.selectData.noDate ? 2 : 6
            break
          case 'noArea':
            this.selectData.h = this.selectData.noArea ? 5 : 6
            break
          case 'borderType':
            this.selectData.borderType = ev.code
            break
          case 'borderChoose':
            this.selectData.borderChoose = ev
            break
        }
        this.setStoreNatureArr()
      })
    },
    onClickField(ev, type) {
      this.$nextTick(() => {
        this.selectData[type] = ev
        this.setStoreNatureArr()
      })
    },

    // 比较页签配置
    ratherTabFieldsFn() {
      return [
        {
          title: '标题',
          name: 'title',
          id: 'title',
          type: 'text',
          width: '50%'
        },
        {
          title: '字体大小',
          name: 'fontSize',
          id: 'fontSize',
          type: 'text',
          width: '50%'
        },
        {
          title: '字体颜色',
          name: 'color',
          id: 'color',
          type: 'color',
          width: '100%'
        },
        {
          title: '加粗',
          name: 'bold',
          id: 'bold',
          type: 'switch',
          onLabel: '是',
          onValue: 700,
          offLabel: '否',
          offValue: 1,
          width: '35%'
        },
        {
          title: '默认',
          name: 'default',
          id: 'default',
          type: 'switch',
          onLabel: '是',
          onValue: 1,
          offLabel: '否',
          offValue: 2,
          width: '35%'
        }
      ]
    },
    setStoreNatureArr() {
      if (this.biModel == 'mobile') {
        this.$store.commit('saveArr', {
          data: { ...this.selectData },
          biModel: this.biModel
        })
        this.$store.commit('setPhoneNature', [...this.$store.state.bi.phoneNature])
      } else {
        this.$store.commit('setSelectData', { ...this.selectData })
        this.$store.commit('saveArr', { data: { ...this.selectData } })
        this.$store.commit('setNatureArr', { ...this.$store.state.bi.natureArr })
      }
    },
    // 切换业务组件版本
    changeNowVersion(row) {
      this.$nextTick(() => {
        let url =
          row.versionCode && row.versionCode != '草稿'
            ? '/ts-version/api/version/data?versionCode=' + row.versionCode
            : 'ts-version/api/version/data?type=3&systemName=平台应用&moduleName=自定义报表&name=' +
              this.selectData.bid +
              '&copyFlag=1'
        const _this = this
        this.$api({
          url: url,
          method: 'get',
          contentType: 'application/x-www-form-urlencoded; charset=utf-8'
        })
          .then(function(res) {
            if (res.success) {
              _this.selectData.natureArr = res.object
                ? JSON.parse(res.object).natureArr
                : []
              _this.$store.commit('setSelectData', { ..._this.selectData })
              _this.$store.commit('saveArr', { data: { ..._this.selectData } })
              _this.$store.commit('setNatureArr', {
                ..._this.$store.state.bi.natureArr
              })
            } else {
              _this.$utils.msg(_this, '加载失败，请联系管理员', 'error')
            }
          })
          .catch(function(error) {
            // 请求失败
          })
      })
    },
    //兼容老数据
    changeBorder() {
      if (
        (this.selectData.type == 'panel' ||
          (this.selectData.type == 'biElement' &&
            this.selectData.state == 1)) &&
        typeof this.selectData.showBorder == 'undefined'
      ) {
        this.selectData.showBorder = true
        this.$forceUpdate()
      }
    },
    // 背景透明
    onGroundTransparent() {
      this.$nextTick(() => {
        this.selectData.backgroundColor = 'rgba(255, 0, 0, 0)'
        this.selectData.groundColor = 'rgba(255, 0, 0, 0)'
        this.setStoreNatureArr()
        this.$forceUpdate()
      })
    }
  },
  mounted() {
    this.changeBorder()
  },
  watch: {
    '$store.state.bi.selectData': {
      handler(val) {
        this.selectData = JSON.parse(JSON.stringify(val))
        if (this.selectData.HPosition == '01') {
          this.selectData.HPosition = true
        }
        this.changeBorder()
      }
    },
    'selectData.HPosition': {
      handler(val) {
        if (!val) {
          this.$eventBus.$emit('changeAllPosition' + this.formId, false)
        }
      }
    },
    '$store.state.bi.natureArr': {
      handler(val) {
        this.natureArrIds = []
        this.getNatureArrIds(
          val['d' + (this.$store.state.bi.dialogEditors.length - 1)],
          'filter,screen'
        )
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-checkbox__label {
  font-size: 12px;
}
.transparent {
  width: auto !important;
  color: #176ce6;
}
</style>
