<template>
  <div class="base-screen-container">
    <!-- <ts-form-item>
      <ts-radio
        title="返回类型"
        v-model="selectData.dataType"
        :data="textDataType"
        type="group"
        :isDefaultFirst="true"
        @change="refresh($event)"
      ></ts-radio>
    </ts-form-item>-->
    <!-- <div v-if="!selectData.dataType||selectData.dataType=='0'" style="margin-left:80px;font-size:12px;color:#999">只渲染一条数据</div> -->
    <div class="form-title_blue">页面元素配置</div>
    <ts-form-item>
      <ts-radio
        title="对齐方式"
        v-model="selectData.align"
        :data="alginSource"
        :isDefaultFirst="true"
        type="group"
        width="97%"
        @change="refresh(arguments)"
      ></ts-radio>
    </ts-form-item>
    <ts-row type="flex">
      <ts-col :flex="1">
        <ts-form-item>
          <ts-input
            v-model="selectData.colNumber"
            title="列数"
            type="integer"
            :min="1"
            @change="refresh(arguments,'colNumber')"
          ></ts-input>
        </ts-form-item>
      </ts-col>
      <ts-col :flex="1">
        <ts-form-item>
          <ts-input
            v-model="selectData.borderSize"
            title="边距"
            type="integer"
            :min="0"
            @change="refresh(arguments,'borderSize')"
          ></ts-input>
        </ts-form-item>
      </ts-col>
    </ts-row>
    <ts-row type="flex">
      <ts-col :flex="1">
        <ts-color-picker
          title="块背景"
          v-model="selectData.itemBackground"
          @change="refresh($event,'itemBackground')"
          colorWidth="46px"
        ></ts-color-picker>
      </ts-col>
      <ts-col :flex="1" v-if="selectData.borderSize">
        <ts-color-picker
          v-model="selectData.borderColor"
          @change="refresh($event,'borderColor')"
          colorWidth="46px"
          title="边框颜色"
        ></ts-color-picker>
      </ts-col>
    </ts-row>
    <ts-row type="flex">
      <div class="title form__title">
        <tsPopover>注：大小设置为“0”时，将不显示图片</tsPopover>图片大小
      </div>
      <ts-col :flex="1" class="mrgr5">
        <ts-input
          type="number"
          :min="0"
          v-model="selectData.iconW"
          @change="refresh($event)"
          placeholder="宽度"
          :showSuffix="true"
          :clearable="false"
        >
          <span slot="suffix">px</span>
        </ts-input>
      </ts-col>
      <ts-col :flex="1">
        <ts-input
          type="number"
          :min="0"
          v-model="selectData.iconH"
          @change="refresh($event)"
          placeholder="高度"
          :clearable="false"
          :showSuffix="true"
        >
          <span slot="suffix">px</span>
        </ts-input>
      </ts-col>
    </ts-row>
    <ts-form-item>
      <ts-radio
        title="显示样式"
        v-model="selectData.showStyle"
        :data="showStyle"
        type="group"
        :isDefaultFirst="true"
        @change="refresh(arguments, 'showStyle')"
      ></ts-radio>
    </ts-form-item>
    <ts-row class="form-autoEdit-list">
      <ts-row class="form-autoEdddit-item" type="flex">
        <ts-col class="txt2"></ts-col>
        <ts-col :flex="19">
          <!-- <ts-row type="flex">
            <ts-col
              :flex="1.3"
              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="2" v-if="selectData.dataType == 1">
              <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="1.5">
              <div class="attr_name">字体大小</div>
            </ts-col>
          </ts-row>-->
        </ts-col>
        <ts-col :flex="1"></ts-col>
      </ts-row>
    </ts-row>
    <!-- 分割 -->
    <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 type="flex">
            <ts-col
              :flex="1.3"
              v-if="selectData.selectDataSourceResultData&&selectData.selectDataSourceResultData.length>0"
            >
              <ts-select
                placeholder="数据集"
                :key="'selectDataResult'+selectData.id"
                :source="selectDataSourceResult"
                v-model="item.selectDataSourceResult"
                @selected="refresh($event, 'selectDataSourceResult', item)"
              ></ts-select>
            </ts-col>
            <ts-col :flex="2" class="mrgr5">
              <!-- 字段名称 -->
              <ts-select
                placeholder="文字字段"
                :key="'selectDataCode'+selectData.id"
                ref="selectDataSourceCode"
                :source="dataSourceColSource(selectData.selectDataSourceResultData&&selectData.selectDataSourceResultData.length>0?item.selectDataSourceCodeOption:selectData.selectDataSourceCodeOption)"
                v-model="item.selectDataSourceCode"
                @selected="refresh($event, 'selectDataSourceCode', item)"
              ></ts-select>
            </ts-col>
            <ts-col :flex="2" class="mrgr5" v-if="selectData.dataType == 1">
              <!-- 图片字段 -->
              <ts-select
                :key="'iconCode'+selectData.id"
                ref="selectDSIconCode"
                placeholder="图片字段"
                :source="dataSourceColSource(selectData.selectDataSourceResultData&&selectData.selectDataSourceResultData.length>0?item.selectDataSourceCodeOption:selectData.selectDataSourceCodeOption)"
                v-model="item.selectDSIconCode"
                @selected="refresh($event, 'selectDSIconCode', item)"
              ></ts-select>
            </ts-col>

            <!-- <div v-if="item.selectDataSourceCode"> -->
            <ts-col :flex="2" class="mrgr5">
              <ts-input v-model="item.showName" @change="refresh(arguments, 'showName', item)"></ts-input>
            </ts-col>
          </ts-row>
          <ts-row style="margin:3px 10px 3px 0px;" type="flex">
            <!-- 字体颜色 -->
            <!-- 字体大小 -->
            <ts-col :flex="1" class="mrgr5">
              <ts-input
                type="number"
                :min="1"
                placeholder="字体大小"
                :clearable="false"
                v-model="item.fontSize"
                @change="refresh($event, 'fontSize', item)"
              ></ts-input>
            </ts-col>
            <ts-col :flex="1">
              <ts-color-picker
                title="字体"
                v-model="item.fontColor"
                @change="refresh($event, 'fontColor', item)"
                colorWidth="46px"
              ></ts-color-picker>
            </ts-col>

            <!-- </div> -->
          </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>
</template>

<script>
export default {
  name: 'attrFastLink',
  props: ['biCustom'],
  components: {},
  data() {
    return {
      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' }
      },
      // showBig: [
      //   { value: '80', text: '80*80' },
      //   { value: '50', text: '50*50' },
      //   { value: '20', text: '20*20' }
      // ],
      showStyle: [
        { value: 'topBottom', text: '上图下文字' },
        { value: 'leftRight', text: '左图右文字' }
      ],

      color1: '#ccc',
      selectData: JSON.parse(JSON.stringify(this.$store.state.bi.selectData)),
      // 默认维度下拉
      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: ''
        }
      },
      // 数据类型
      textDataType: [
        { value: '0', text: '对象' },
        { value: '1', text: '列表' }
      ],
      // 参数配置的类型
      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: ''
        }
      },
      alginSource: [
        { value: 'start', text: '靠左' },
        { value: 'center', text: '居中' },
        { value: 'end', text: '靠右' }
      ]
    }
  },
  computed: {
    // 下拉数据源-值
    selectDataSourceCode() {
      return this.dataSourceColSource(this.selectData.selectDataSourceData)
    },
    // 下拉数据源-值
    selectDataSourceResult() {
      return this.dataSourceColSource(
        this.selectData.selectDataSourceResultData
      )
    }
  },
  mounted() {
    this.selectData = JSON.parse(JSON.stringify(this.$store.state.bi.selectData))
  },
  created() {
    // this.getScreenControlVal()
  },
  methods: {
    // 数据源参数
    dataSourceColSource(data) {
      return {
        dataType: 'local',
        code: 'name',
        text: 'name',
        data: data || [],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    },
    refresh(ev, key, item) {
      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 = ''
            this.$store.commit('setSelectData', { ...this.selectData })
            break
          case 'selectDataSourceCode': //字段名字
            item.selectDataSourceCode = ev.name
            item.fontColor = '#0079fe'
            item.fontSize = 14
            item.showValue = ''
            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 = {
          //    id: '', i: this.$utils.uuid(16), showName:'显示名称', linkUrl:'', showIcon:'', enterType: 'DLL', meauName: '', tokenName:'', userCode:'', deptCode:'', sysName:'', sysCode:'', fontColor:'', fontSize:''
          // }

          var relation = []
          relation = JSON.parse(JSON.stringify(this.selectData.dataSourceData))[
            this.selectData.dataSourceData.length - 1
          ]
          relation.i = this.$utils.uuid(16)
          if (
            this.selectData.selectDataSourceData &&
            this.selectData.selectDataSourceData.length > 0
          ) {
            relation.selectDataSourceCodeOption = this.selectData.selectDataSourceData
          }
          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 })
    }
  },
  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 20px;
      width: calc(100% - 20px) !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;
      }
      .txt2 {
        width: 16px !important;
      }
      .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>
