<template>
  <div class="base-screen-container">
    <!-- <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>-->
    <div class="form-title_blue">页面元素配置</div>
    <ts-row type="flex">
      <ts-col :flex="1">
        <ts-input
          v-model="selectData.colNumber"
          type="integer"
          :min="1"
          title="列数"
          :clearable="false"
          @change="refresh(arguments, 'colNumber')"
        ></ts-input>
      </ts-col>
      <ts-col :flex="1">
        <ts-input
          v-model="selectData.itemMargin"
          type="integer"
          :min="0"
          title="行间隔"
          :clearable="false"
          @change="refresh(arguments,'itemMargin')"
        ></ts-input>
      </ts-col>
    </ts-row>
      <ts-row type="flex">
      <ts-col :flex="1">
        <ts-input
          v-model="selectData.itemHeight"
          :min="1"
          title="块高度"
          :clearable="false"
          @change="refresh(arguments,'itemHeight')"
        ></ts-input>
      </ts-col>
        </ts-row>
    <ts-radio
      title="结构样式"
      v-model="selectData.showStyle"
      :data="showStyle"
      type="group"
      :isDefaultFirst="true"
      @change="refresh(arguments, 'showStyle')"
    ></ts-radio>

    <ts-row type="flex">
      <ts-col :flex="1">
        <ts-color-picker
          v-model="selectData.titleColor"
          @change="refresh($event, 'titleColor')"
          title="名称颜色"
          colorWidth="46px"
        ></ts-color-picker>
      </ts-col>
      <ts-col :flex="1">
        <!-- 字体大小 -->
        <div style="display:flex">
          <ts-input
            title="字体大小"
            type="number"
            :min="1"
            :clearable="false"
            v-model="selectData.titleFontSize"
            @change="refresh($event, 'titleFontSize')"
          >
            <tsPopover slot="title">【显示名】字体大小</tsPopover>
          </ts-input>
        </div>
      </ts-col>
    </ts-row>
    <ts-switch
      title="显示分割线"
      on-label="是"
      off-label="否"
      v-model="selectData.showLine"
      @change="refresh($event,'showLine')"
      key="showLine"
    ></ts-switch>
    <ts-form-item :titleWidth="110">
      <div>
        <ts-row class="form-autoEdit-list" style="padding: 0 10px" type="flex">
          <div style="width: 16px"></div>
          <ts-col :flex="19">
            <!-- <ts-row style="margin-right: 10px" type="flex">
              <ts-col
                :flex="1.5"
                v-if="
                    selectData.selectDataSourceResultData &&
                    selectData.selectDataSourceResultData.length > 0
                  "
              >
                <div class="attr_name">结果集</div>
              </ts-col>
              <ts-col :flex="2">
                <div class="attr_name">字段名</div>
              </ts-col>
              <ts-col :flex="1">
                <div class="attr_name">单位</div>
              </ts-col>
              <ts-col :flex="2">
                <div class="attr_name">显示名</div>
              </ts-col>
              <ts-col :flex="1.5">
                <div class="attr_name">
                  <tsPopover>【字段值】字体颜色</tsPopover>字体颜色
                </div>
              </ts-col>
              <ts-col :flex="1.5">
                <div class="attr_name">
                  <tsPopover>【字段值】字体大小</tsPopover>字体大小
                </div>
              </ts-col>
              <ts-col :flex="1.5">
                <div class="attr_name">背景色</div>
              </ts-col>
            </ts-row>-->
          </ts-col>
          <ts-col :flex="1"></ts-col>
        </ts-row>
        <!-- //sdsd -->
        <ts-row class="form-autoEdit-list">
          <ts-row
            class="form-autoEdddit-item"
            v-for="(item, j) in selectData.dataSourceData"
            :key="j"
            type="flex"
          >
            <ts-col class="form-autoEdit-item-i txt">{{ j + 1 }}</ts-col>
            <ts-col :flex="19">
              <ts-row style="margin-right: 10px" type="flex">
                <!-- 结果集 -->
                <ts-col
                  :flex="1.5"
                  v-if="
                      selectData.selectDataSourceResultData &&
                      selectData.selectDataSourceResultData.length > 0
                    "
                >
                  <ts-select
                    :key="'selectDataResult' + selectData.id"
                    :source="selectDataSourceResult"
                    v-model="item.selectDataSourceResult"
                    @selected="
                        onSelectColSource(
                          $event,
                          item,
                          'selectDataSourceResult'
                        )
                      "
                  ></ts-select>
                </ts-col>
                <!-- //字段名称 -->
                <ts-col :flex="2" class="mrgr5">
                  <ts-select
                    :key="'selectDataCode' + selectData.id"
                    ref="selectDataSourceCode"
                    :source="selectDSCodeSource(item)"
                    placeholder="字段"
                    v-model="item.selectDataSourceCode"
                    @selected="
                        onSelectColSource($event, item, 'selectDataSourceCode')
                      "
                  ></ts-select>
                </ts-col>
                <!-- 单位 -->
                <ts-col :flex="2" class="mrgr5">
                  <ts-input
                    v-model="item.showName"
                    placeholder="显示名称"
                    @change="onSelectColSource($event, item, 'showName')"
                  ></ts-input>
                </ts-col>
                <ts-col :flex="1" class="mrgr5">
                  <ts-select
                    v-model="item.unit"
                    :source="unitSource(item)"
                    width="100%"
                    @inputBlur="onSelectColSource($event, item, 'unit2')"
                    @selected="onSelectColSource($event, item, 'unit')"
                  ></ts-select>
                </ts-col>
              </ts-row>
              <ts-row style="margin:3px 10px 3px 0px;" type="flex">
                <!-- 显示名字 -->
                <!-- 字体大小 -->
                <ts-col :flex="1.5" class="mrgr5">
                  <ts-input
                    type="number"
                    :clearable="false"
                    :min="1"
                    v-model="item.fontSize"
                    @change="onSelectColSource($event, item, 'fontSize')"
                  ></ts-input>
                </ts-col>
                <!-- 字体颜色 -->
                <ts-col :flex="1.5">
                  <ts-color-picker
                    v-model="item.fontColor"
                    @change="onSelectColSource($event, item, 'fontColor')"
                    title="名称颜色"
                    colorWidth="46px"
                  ></ts-color-picker>
                </ts-col>

                <!-- 背景颜色 -->

                <ts-col :flex="1.5">
                  <ts-color-picker
                    v-model="item.backgroundColor"
                    @change="onSelectColSource($event, item, 'backgroundColor')"
                    title="背景"
                    colorWidth="46px"
                  ></ts-color-picker>
                </ts-col>
              </ts-row>
            </ts-col>
            <ts-col :flex="1">
              <ts-button
                id="deleteAutoEdit"
                type="text"
                icon="iconfont icon-Group-17"
                @click="onRelation('delete', item.i)"
                v-if="j != 0"
              ></ts-button>
              <ts-button
                v-if="j===0&&(!selectData.dataType||selectData.dataType == 0)"
                id="addAutoEdit"
                type="text"
                icon="iconfont icon-Group-13"
                @click="onRelation('add', item.i)"
                class="form-autoEdit-item-add-btn"
              ></ts-button>
            </ts-col>
          </ts-row>
        </ts-row>
      </div>
    </ts-form-item>
  </div>
</template>

<script>
import biUtils from '../../utils/biUtils'

export default {
  name: 'attrScreen',
  props: ['biCustom'],
  data() {
    return {
      showStyle: [
        { value: 'column', text: '上下' },
        { value: 'row', text: '左右' }
      ],
      fontSource: {
        dataType: 'local',
        text: 'label',
        code: 'code',
        data: [
          { code: '12px', label: '12' },
          { code: '13px', label: '13' },
          { code: '14px', label: '14' },
          { code: '15px', label: '15' },
          { code: '16px', label: '16' },
          { code: '17px', label: '17' },
          { code: '18px', label: '18' },
          { code: '19px', label: '19' }
        ],
        isReq: true,
        value: { code: '14px', label: '14' }
      },
      color1: '#ccc',
      selectData: JSON.parse(JSON.stringify(this.$store.state.bi.selectData)),
      // 数据源
      dataSourceData: {
        // dataType: 'json',
        // url: '/ts-query/api/user/define/service/list',
        // method: 'post',
        // contentType: 'application/x-www-form-urlencoded',
        // page: 'pageNo',
        dataType: 'local',
        data: this.$store.state.bi.dataSource,
        code: 'id',
        text: 'queryName',
        condition: 'condition',
        isReq: true,
        // pageSize:400,
        value: {
          name: '',
          code: ''
        }
      }
    }
  },
  computed: {
    // dataSourceName(){
    //
    //   return
    // },
    //  dataSourceName(){
    //   return this.selectData.dataSourceId
    // },
    // 下拉数据源-显示
    selectDataSourceName() {
      return biUtils.dataSourceColSource(this.selectData.selectDataSourceData)
    },
    screenControlVal() {
      return {
        dataType: 'local',
        code: 'dimensionName',
        text: '_name',
        data: this.getScreenControlVal(),
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    },
    // 下拉数据源-值
    selectDataSourceCode() {
      return biUtils.dataSourceColSource(this.selectData.selectDataSourceData)
    },
    // 下拉数据源-值
    selectDataSourceResult() {
      return biUtils.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: ''
        }
      }
    }
  },
  mounted() {
    this.selectData = JSON.parse(JSON.stringify(this.$store.state.bi.selectData))
    // this.dataSourceData.value = {
    //   name: this.selectData.dataSourceName,
    //   code: this.selectData.dataSourceId
    // }
  },
  created() {
    // this.getScreenControlVal()
  },
  methods: {
    selectDSCodeSource(item) {
      return biUtils.dataSourceColSource(
        this.selectData.selectDataSourceResultData &&
          this.selectData.selectDataSourceResultData.length > 0
          ? item.selectDataSourceCodeOption
          : this.selectData.selectDataSourceCodeOption
      )
    },
    unitSource(item) {
      return {
        dataType: 'local',
        text: 'label',
        code: 'code',
        data: [
          { code: '个', label: '个' },
          { code: '条', label: '条' },
          { code: '兆', label: '兆' },
           { code: '张', label: '张' },
          { code: '次', label: '次' },
          { code: 'KB', label: 'KB' },
          { code: 'MB', label: 'MB' },
          { code: '秒', label: '秒' },
          { code: '毫秒', label: '毫秒' },
          { code: '天', label: '天' },
          { code: '小时', label: '小时' },
          { code: '分', label: '分' },
          { code: '万次', label: '万次' },
          { code: '万条', label: '万条' },
          { code: '万个', label: '万个' },
          { code: '元', label: '元' },
          { code: '万元', label: '万元' },
          { code: '无', label: '无' }
        ],
        value: {
          name: item.unit,
          code: item.unit
        }
      }
    },
    refresh(ev, key) {
      this.$nextTick(() => {
        // switch (key) {
        //   case 'dataSourceId': // 下拉数据源
        //     this.selectData.selectDataSourceCode = ''
        //     this.selectData.selectDataSourceName = ''
        //     this.selectData.selectDataSourceResult = ''
        //     this.selectData.selectDataSourceData = []
        //     this.selectData.dataSourceId = ev.id
        //     this.selectData.dataSourceName = ev.queryName
        //     this.selectData.selectDataSourceResultData = []
        //     if (ev.serviceType == '2') {
        //       // 结果集
        //       for (let item of JSON.parse(ev.columnDefine)) {
        //         this.selectData.selectDataSourceResultData.push({
        //           name: item.name,
        //           tableColumns: item.tableColumns
        //         })
        //       }
        //       for (let res of this.selectData.dataSourceData) {
        //         res.selectDataSourceCodeOption = []
        //       }
        //     } else {
        //       for (let item of JSON.parse(ev.columnDefine)) {
        //         this.selectData.selectDataSourceData.push({
        //           name: item.name
        //         })
        //       }
        //       for (let res of this.selectData.dataSourceData) {
        //         res.selectDataSourceCodeOption = this.selectData.selectDataSourceData
        //       }
        //     }
        //     this.$store.commit('setSelectData', { ...this.selectData })
        //     break
        // }
        this.$store.commit('setSelectData', { ...this.selectData })
        this.$store.commit('saveArr', { data: { ...this.selectData } })
        this.$store.commit('setNatureArr', { ...this.$store.state.bi.natureArr })
      })
    },
    onRelation(type, index) {
      //关联指标的操作
      switch (type) {
        case 'add':
          var relation = []
          relation = JSON.parse(JSON.stringify(this.selectData.dataSourceData))[
            this.selectData.dataSourceData.length - 1
          ]
          relation.i = this.$utils.uuid(16)
          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 (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
    },
    // 监听数据源字段
    onSelectColSource(ev, item, key) {
      this.$nextTick(() => {
        switch (key) {
          case 'selectDataSourceResult': // 下拉数据源-结果集
            this.selectData.selectDataSourceData = []
            item.selectDataSourceResult = ev.name
            item.selectDataSourceCodeOption = []
            for (let items of ev.tableColumns) {
              item.selectDataSourceCodeOption.push({
                name: items.name
              })
            }
            item.selectDataSourceCode = ''
            break
        }
        this.$store.commit('setSelectData', { ...this.selectData })
        this.$store.commit('saveArr', { data: { ...this.selectData } })
        this.$store.commit('setNatureArr', { ...this.$store.state.bi.natureArr })
      })
    }
  },
  watch: {
    '$store.state.bi.selectData': {
      handler(val) {
        this.selectData = JSON.parse(JSON.stringify(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>
.base-screen-container {
  .attr_name {
    font-size: 12px;
    text-align: center;
  }
  .attr_chart_title {
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    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;
      width: calc(100% - 10px) !important;
      .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>
