<template>
  <div class="base-detail-container">
    <attr-data-source
      ref="attrDS"
      :isShowResult="true"
      @changedDSId="changedDSId"
      @changedDSResult="changedDSResult"
    ></attr-data-source>
    <ts-form-item v-if="selectData.chartValue=='002'|| this.selectData.chartValue == '003'">
      <ts-select
        :key="'columnLabel'+selectData.id"
        :source="selectDSCodeSource(selectData.selectDataSourceCodeOption||selectData.dataSourceDataColumnLable||[])"
        v-model="selectData.columnLabel"
        title="标签字段"
        @selected="selectedChartType_columnLabel"
      ></ts-select>
    </ts-form-item>
    <ts-form-item>
      <ts-select
        ref="chartTypeY"
        :key="'chartTypeY'+selectData.id"
        :source="chartType_y"
        v-model="selectData.targetIds"
        :emphasize="true"
        :title="selectData.chartValue=='002'|| this.selectData.chartValue == '003'?'X轴':'标签'"
        @selected="selectedChartType_y"
      ></ts-select>
    </ts-form-item>

    <ts-multi-mdl
      v-show="isSelectDataA"
      :mulitValue="selectData.fieldsXIdList"
      :keyId="selectData.id"
      :key="'xID'+selectData.id"
      :fields="sourceDatas"
      :title="selectData.chartValue=='002'|| this.selectData.chartValue == '003'?'Y轴':'分类'"
      width="100%"
      @change="fieldsXIdListFn($event,'fieldsXIdList')"
    ></ts-multi-mdl>

    <ts-multi-mdl
      v-show="isSelectData"
      :mulitValue="selectData.fieldsXIdList"
      :fields="sourceDataList"
      :title="selectData.chartValue=='002'|| this.selectData.chartValue == '003'?'Y轴':'分类'"
      width="100%"
      @change="fieldsXIdListFn($event,'fieldsXIdList')"
      :key="'xID222'+selectData.id"
    ></ts-multi-mdl>
    <!-- <ts-multi-mdl
      v-show="isSelectData"
      :mulitValue="selectData.fieldsXIdList"
      :fields="sourceDataList"
      :title="selectData.chartValue=='002'|| this.selectData.chartValue == '003'?'Y轴':'分类'"
      width="100%"
      @change="fieldsXIdListFn($event,'fieldsXIdList')"
      :key="'xID222'+selectData.id"
    ></ts-multi-mdl>-->
    <ts-form-item>
      <ts-row type="flex">
        <div class="title form__title">数据量</div>
        <ts-col :flex="1">
          <ts-input
            v-model="selectData.dataNumStart"
            width="98%"
            type="number"
            placeholder="开始"
            :min="0"
            :clearable="false"
            @change="refresh($event,'dataNumStart')"
          ></ts-input>
        </ts-col>
        <ts-col :flex="1">
          <ts-input
            v-model="selectData.dataNumEnd"
            type="number"
            placeholder="结束"
            :min="0"
            :clearable="false"
            @change="refresh($event,'dataNumEnd')"
          ></ts-input>
        </ts-col>
      </ts-row>
    </ts-form-item>
    <div
      class="bi-attr-chart"
      v-if="this.selectData.chartValue == '004' && this.selectData.state == 18"
    >
      <div class="flexbox form__box">
        <div class="title form__title">
          <span class="red2">*</span>
          文字配置
        </div>
        <div class="flex form-autoEdit-list">
          <ts-row class="form-autoEdit-list">
            <ts-row
              class="form-autoEdddit-item"
              v-for="(item,j) in selectData.textConfig"
              :key="j"
              type="flex"
            >
              <ts-col class="form-autoEdit-item-i txt">{{j+1}}</ts-col>
              <ts-col :flex="19">
                <ts-row style="padding:5px 0;" type="flex">
                  <ts-col :flex="1" class="form__box">
                    <ts-input
                      v-model="item.name"
                      placeholder="输入显示文字"
                      title="显示名"
                      @change="changConfig($event,item,'name')"
                    ></ts-input>
                  </ts-col>
                  <ts-col :flex="1" class="form__box">
                    <ts-input
                      v-model="item.value"
                      placeholder="请输入对应值"
                      title="值"
                      @change="changConfig($event,item,'value')"
                    ></ts-input>
                  </ts-col>
                </ts-row>
              </ts-col>
              <ts-col :flex="1" style="margin-top:5px">
                <ts-button
                  id="deleteAutoEdit"
                  type="text"
                  icon="iconfont icon-Group-17"
                  @click="onRelation2('delete',item.i)"
                  v-if="j!=0"
                ></ts-button>
                <ts-button
                  v-if="j===0"
                  id="addAutoEdit"
                  type="text"
                  icon="iconfont icon-Group-13"
                  @click="onRelation2('add',item.i)"
                  class="form-autoEdit-item-add-btn"
                ></ts-button>
              </ts-col>
            </ts-row>
          </ts-row>
        </div>
      </div>
    </div>
    <ts-form-item v-if="this.selectData.chartValue == '004'">
      <ts-input
        title="最大值"
        v-model="selectData.maxNumber"
        type="number"
        :clearable="false"
        placeholder="请设置最大值"
        :min="0"
        @change="refresh($event,'maxNumber')"
      ></ts-input>
    </ts-form-item>
    <div class="form-title_blue">页面元素配置</div>
    <ts-form-item>
      <ts-input
        v-model="selectData.title"
        placeholder="标题"
        title="标题"
        @change="refresh($event,'title')"
      ></ts-input>
    </ts-form-item>
    <ts-form-item>
      <ts-input
        v-model="selectData.controlTitle"
        placeholder="副标题"
        title="副标题"
        @change="refresh($event,'controlTitle')"
      ></ts-input>
    </ts-form-item>

    <ts-form-item>
      <ts-input
        v-model="selectData.emptyText"
        placeholder
        title="空值显示"
        @change="refresh($event,'emptyText')"
      ></ts-input>
    </ts-form-item>
    <!-- <ts-form-item>
      <ts-switch
        title="显示边框"
        v-model="selectData.showBorder"
        on-label="是"
        off-label="否"
        :key="selectData.id"
        @change="refresh($event, 'showBorder')"
      ></ts-switch>
    </ts-form-item> -->
    <attrChartType></attrChartType>
    <!-- <div class="form-title_blue">超链接</div>
    <attrLink></attrLink>-->
  </div>
</template>
<script>
import attrLink from './attrLink'
import attrDataSource from './attrDataSource'
import biUtils from '../../utils/biUtils'
import attrChartType from './attrChartType'
export default {
  name: 'attrChart',
  props: {
    biCustom: {
      type: Object,
      default: () => {}
    },
    biModel: {
      type: String,
      default: ''
    }
  },
  components: { attrLink, attrDataSource, attrChartType },
  data() {
    return {
      dataSourceData: {
        dataType: 'local',
        // url: '/ts-query/api/user/define/service/list',
        data: this.$store.state.bi.dataSource,
        // method: 'post',
        // contentType: 'application/x-www-form-urlencoded',
        // page: 'pageNo',
        code: 'id',
        text: 'queryName',
        condition: 'condition',
        // isReq: true,
        value: {
          name: '',
          code: ''
        }
      },
      selectData:
        this.biModel === 'bigScreen'
          ? JSON.parse(JSON.stringify(this.$store.state.bi.curComponent))
          : JSON.parse(JSON.stringify(this.$store.state.bi.selectData)),
      chartList: []
    }
  },
  computed: {
    // selectDataSourceResult() {
    //   return this.dataSourceColSource(
    //     this.selectData.selectDataSourceResultData
    //   )
    // },
    // // X轴
    // chartType_x() {
    //   let controlVal = []
    //   if (this.selectData.dataSourceDataX) {
    //     //已指定数据源，取数据源的内容
    //     controlVal = this.selectData.dataSourceDataX
    //   } else {
    //     if (this.biCustom.currentTab == 'tab1') {
    //       // 为设置过数据源
    //       if (Object.keys(this.biCustom.expandNode).length > 0) {
    //         // 设置条件为可选的控件值,选中字段
    //         for (let item of this.biCustom.expandNode.children[1].children) {
    //           item._id = item.name
    //           item._name = item.name
    //           controlVal.push(item)
    //         }
    //       }
    //     } else {
    //       controlVal = this.biCustom ? this.biCustom.weidu : []
    //     }
    //   }
    //   return {
    //     dataType: 'local',
    //     code: '_id',
    //     text: '_name',
    //     data: controlVal,
    //     // choice: this.selectData.chartValue === '002',
    //     isReq: true,
    //     value: {
    //       code: '',
    //       name: ''
    //     }
    //   }
    // },
    // 标签列
    // chartType_columnLable() {
    // let controlVal = []
    // if (this.selectData.dataSourceDataColumnLable) {
    //   //已指定数据源，取数据源的内容
    //   controlVal = this.selectData.dataSourceDataColumnLable
    // } else {
    //   if (this.biCustom.currentTab == 'tab1') {
    //     // 为设置过数据源
    //     if (Object.keys(this.biCustom.expandNode).length > 0) {
    //       // 设置条件为可选的控件值,选中字段
    //       for (let item of this.biCustom.expandNode.children[1].children) {
    //         item._id = item.name
    //         item._name = item.name
    //         controlVal.push(item)
    //       }
    //     }
    //   } else {
    //     controlVal = this.biCustom ? this.biCustom.norm : []
    //   }
    // }
    //   // 不存在数据源 - 使用父级table数据列
    //   return biUtils.dataSourceColSource(
    //     this.biSelectTable.selectDataSourceCodeOption
    //   )
    // },
    // 结果集
    // chartType_result() {
    //   let controlVal = []
    //   if (this.selectData.dataSourceDataResult) {
    //     //已指定数据源，取数据源的内容
    //     controlVal = this.selectData.dataSourceDataResult
    //   } else {
    //     if (this.biCustom.currentTab == 'tab1') {
    //       // 为设置过数据源
    //       if (Object.keys(this.biCustom.expandNode).length > 0) {
    //         // 设置条件为可选的控件值
    //         for (let item of this.biCustom.expandNode.children[1].children) {
    //           item._id = item.name
    //           item._name = item.name
    //           controlVal.push(item)
    //         }
    //       }
    //     }
    //   }
    //   return {
    //     dataType: 'local',
    //     code: '_id',
    //     text: '_name',
    //     data: controlVal,
    //     choice: false,
    //     isReq: true,
    //     value: {
    //       code: '',
    //       name: ''
    //     }
    //   }
    // },
    isSelectData() {
      return this.selectData.selectDataSourceResultData &&
        this.selectData.selectDataSourceResultData.length > 0
        ? true
        : false
    },
    isSelectDataA() {
      return this.selectData.selectDataSourceResultData &&
        this.selectData.selectDataSourceResultData.length > 0
        ? false
        : true
    },
    sourceDataList() {
      return [
        {
          name: 'resultName',
          type: 'select',
          id: 'resultName',
          value: 'resultName',
          width: '49.5%',
          placeholder: '结果集',
          title: '结果集',
          isGanged: true, // 是否联动  默认false boolean
          gangedId: 'fieldsXId', // 联动项id
          source: biUtils.dataSourceColSource(
            this.selectData.selectDataSourceResultData
          ),
          formatter: row => {
            let childDatasList = row.tableColumns
            return {
              data: childDatasList
            }
          }
        },
        {
          name: 'fieldsXId',
          type: 'select',
          id: 'fieldsXId',
          value: 'fieldsXId',
          width: '50%',
          placeholder: '字段',
          source: {
            dataType: 'local',
            data: [],
            code: 'name',
            text: 'name',
            condition: 'condition',
            isReq: true,
            value: {
              name: '',
              code: ''
            }
          }
        },
        {
          name: 'fieldsXName',
          type: 'text',
          id: 'fieldsXName',
          value: 'fieldsXName',
          width: '50%',
          placeholder: '显示名'
        }
      ]
    },
    sourceDatas() {
      return [
        {
          name: 'fieldsXId',
          type: 'select',
          id: 'fieldsXId',
          value: 'fieldsXId',
          width: '50%',
          placeholder: '字段',
          source: biUtils.dataSourceColSource(
            this.selectData.selectDataSourceCodeOption ||
              this.selectData.dataSourceDataColumnLable ||
              []
          )
        },
        {
          name: 'fieldsXName',
          value: 'fieldsXName',
          type: 'text',
          width: '50%',
          placeholder: '显示名'
        }
      ]
    },
    // y轴
    chartType_y() {
      let controlVal = []
      let code = 'name'
      // if (
      //   this.selectData.dataSourceDataY &&
      //   this.selectData.dataSourceId != '000'
      // ) {
      //   //已指定数据源，取数据源的内容
      //   // controlVal = this.selectData.dataSourceDataY
      //   controlVal = this.selectData.dataSourceDataY
      // } else {
      //   code = 'id'
      //   if (
      //     this.biCustom &&
      //     Object.keys(this.biCustom).length > 0 &&
      //     this.biCustom.norm &&
      //     this.biCustom.norm.length > 0
      //   ) {
      //     for (let custom of this.biCustom.norm) {
      //       custom.id = custom._id
      //       custom.name = custom._name
      //     }
      //     controlVal = this.biCustom ? this.biCustom.norm : []
      //     this.selectData.selectDataSourceCodeOption = controlVal
      //   }
      // }
      return {
        dataType: 'local',
        code: code,
        text: 'name',
        data:
          this.selectData.selectDataSourceCodeOption ||
          this.selectData.dataSourceDataColumnLable ||
          [],
        // choice:
        //   this.selectData.chartValue === '002' ||
        //   this.selectData.chartValue == '003',
        isReq: true,
        value: {
          code: '',
          name: ''
        }
      }
    }
  },
  created() {
    // this.getDataSourceTree()
    // this.dataSourceData.value = {
    //   name: this.selectData.dataSourceName || '',
    //   code: this.selectData.dataSourceId || ''
    // }
  },
  methods: {
    changedDSId() {
      // // 清空字段和结果集
      // this.selectData.targetIds = ''
      // if (this.selectData.columnLabel) {
      //   this.selectData.columnLabel = ''
      // }
      // this.selectData.fieldsXIdList = [
      //   {
      //     fieldsXId: '',
      //     fieldsXName: '',
      //     i: this.selectData.fieldsXIdList[0].i,
      //     id: '',
      //     resultName: ''
      //   }
      // ]
      this.changeStoreArray()
    },
    // 监听数据源字段
    changedDSResult() {
      this.selectData.targetIds = ''
      if (this.selectData.columnLabel) {
        this.selectData.columnLabel = ''
      }
      this.changeStoreArray()
    },
    // getDataSourceTree() {
    //   let _this = this
    //   let data = { pageSize: 2000 }
    //   this.$api({
    //     url: '/ts-query/api/user/define/service/list',
    //     method: 'post',
    //     data: JSON.stringify(data),
    //     loading: false,
    //     headers: {
    //       'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
    //     }
    //   })
    //     .then(function(response) {
    //       // 请求成功
    //       if (response.rows) {
    //         let rows = [{ id: '000', queryName: '维度指标' }]
    //         _this.dataSourceData.data = [...rows, ...response.rows]
    //       } else {
    //         _this.$utils.msg(_this, response.message,'error')
    //       }
    //     })
    //     .catch(function(error) {
    //        _this.$utils.msg(_this, error.message,'error')
    //     })
    // },
    selectDSCodeSource(data) {
      return biUtils.dataSourceColSource(data || [])
    },
    fieldsXIdListFn(ev, type) {
      this.selectData[type] = ev
      this.changeStoreArray()
    },
    refresh(ev, key) {
      this.$nextTick(() => {
        switch (key) {
          case 'dataSourceId': // 下拉数据源
            // this.selectData.dataSourceId = ev.id
            // if (ev.id == '000') {
            //   //选择维度指标
            //   this.selectData.selectDataSourceCode = ''
            //   this.selectData.dataSourceName = '维度指标'
            //   this.selectData.selectDataSourceResult = ''
            //   this.selectData.selectDataSourceData = []
            //   this.selectData.selectDataSourceResultData = []
            //   if (this.biCustom && this.biCustom.norm.length > 0) {
            //     for (let custom of this.biCustom.norm) {
            //       custom.id = custom._id
            //       custom.name = custom._name
            //     }
            //   }
            //   if (this.selectData.fieldsXIdList.length > 0) {
            //     for (let field of this.selectData.fieldsXIdList) {
            //       field.selectDataSourceCodeOption = this.biCustom.norm
            //     }
            //   }

            //   this.selectData.dataSourceDataColumnLable = this.biCustom.norm
            //   this.selectData.selectDataSourceCodeOption = this.biCustom.norm
            //   this.$store.commit('setSelectData', { ...this.selectData })
            //   this.$store.commit('saveArr', { data: { ...this.selectData } })
            //   this.$store.commit('setNatureArr', {
            //     ...this.$store.state.bi.natureArr
            //   })

            //   // controlVal = this.biCustom ? this.biCustom.norm : []
            //   return
            // }
            // this.selectData.dataSourceName = ev.queryName
            // this.selectData.selectDataSourceCode = ''
            // this.selectData.selectDataSourceName = ''
            // this.selectData.selectDataSourceResult = ''
            // this.selectData.selectDataSourceData = []
            // 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.fieldsXIdList) {
            //     res.selectDataSourceCodeOption = []
            //   }
            // } else {
            //   for (let item of JSON.parse(ev.columnDefine)) {
            //     this.selectData.selectDataSourceData.push({
            //       name: item.name
            //     })
            //   }
            //   this.selectData.dataSourceDataColumnLable = [
            //     ...this.selectData.selectDataSourceData
            //   ]
            //   this.selectData.dataSourceDataY = [
            //     ...this.selectData.selectDataSourceData
            //   ]
            //   for (let res of this.selectData.fieldsXIdList) {
            //     res.selectDataSourceCodeOption = this.selectData.selectDataSourceData
            //   }
            // }
            break
          case 'maxNumber':
            let dataValue = ev.value
            if (ev.value) {
              dataValue = parseInt(ev.value)
            }
            this.selectData.maxNumber = dataValue
            break
        }
        this.changeStoreArray()
      })
    },
    // 选择X轴
    selectedChartType_x(row, item) {
      var newRes = row
      this.selectData.serviceType = this.biCustom.expandNode.serviceType
      this.selectData.dataSourceDataX = this.$refs.chartTypeX[0].data // 保存选过的下拉数据
      if (this.selectData.dataSourceId == '000') {
        item.measureName = row.measureName
      }
      if (
        this.selectData.serviceType == 2 &&
        !this.selectData.dataSourceDataX
      ) {
        for (let s of this.selectData.fieldsXIdList) {
          s.fieldsXId = ''
        }
        this.$utils.msg(this, '存储过程需先选择结果集')
      } else {
        this.selectData.fieldsX =
          this.selectData.fieldsX &&
          (this.selectData.chartValue == '002' ||
            this.selectData.chartValue == '003')
            ? this.selectData.fieldsX + ',' + newRes.dimensionName
            : newRes.dimensionName
        item.fieldsXName = row._name
        item.targetIds = row._id
      }
      this.changeStoreArray()
    },
    // 结果集
    selectedChartType_result(ev, item) {
      this.selectData.selectDataSourceCode = ''
      this.selectData.selectDataSourceName = ''
      this.selectData.selectDataSourceData = []
      item.resultName = ev.name
      item.selectDataSourceCodeOption = []
      for (let items of ev.tableColumns) {
        item.selectDataSourceCodeOption.push({
          name: items.name
        })
      }
      this.changeStoreArray()
    },
    // // 结果集
    // selectedChartType_allresult(ev) {
    //   this.selectData.selectDataSourceData = []
    //   this.selectData.dataSourceDataColumnLable = []
    //   this.selectData.dataSourceDataY = []
    //   this.selectData.resultName = ev.name
    //   if (Object.keys(ev).length > 0) {
    //     for (let items of ev.tableColumns) {
    //       this.selectData.selectDataSourceData.push({
    //         name: items.name
    //       })
    //     }
    //   }
    //   this.selectData.dataSourceDataColumnLable = [
    //     ...this.selectData.selectDataSourceData
    //   ]
    //   this.selectData.dataSourceDataY = [
    //     ...this.selectData.selectDataSourceData
    //   ]
    //   this.changeStoreArray()
    // },
    // 选择Y轴
    selectedChartType_y(row) {
      if (row && Object.keys(row).length == 0) {
        return
      }
      // var newRes =
      //   this.selectData.chartValue == '002' ||
      //   this.selectData.chartValue == '003'
      //     ? row[row.length - 1]
      //     : row
      // this.selectData.dataSourceDataY = this.$refs.chartTypeY.data
      // if (this.selectData.dataSourceId == '000') {
      //   this.selectData.dataSourceName = newRes.parent
      //     ? newRes.parent.queryName
      //     : '维度指标'
      //   this.selectData.dataSourceId = newRes.parent ? newRes.parent.id : '000'
      // }
      // // 条件赋值
      // this.selectData.measureName =
      //   this.selectData.measureName &&
      //   (this.selectData.chartValue == '002' ||
      //     this.selectData.chartValue == '003')
      //     ? this.selectData.measureName + ',' + newRes.measureName
      //     : newRes.measureName
      // // 条件赋值
      // this.selectData.targetName =
      //   this.selectData.targetName &&
      //   (this.selectData.chartValue == '002' ||
      //     this.selectData.chartValue == '003')
      //     ? this.selectData.targetName + ',' + newRes._name
      //     : newRes._name
      this.changeStoreArray()
    },
    // 标签列
    selectedChartType_columnLabel(row) {
      this.$nextTick(() => {
        // var newRes = row
        // this.selectData.dataSourceDataColumnLable = this.$refs.chartTypeColumnLabel.data
        // if (this.selectData.dataSourceId == '000') {
        //   this.selectData.dataSourceName = newRes.parent
        //     ? newRes.parent.queryName
        //     : '维度指标'
        //   this.selectData.dataSourceId = newRes.parent ? newRes.parent.id : '000'
        // }
        // this.selectData.columnLabel = row._name || row.name
        this.changeStoreArray()
      })
    },
    onRelation(type, index) {
      //关联指标的操作
      switch (type) {
        case 'add':
          var relation = {
            id: '',
            i: this.$utils.uuid(16),
            fieldsXId: '',
            fieldsXName: ''
          }
          if (
            this.selectData.selectDataSourceData &&
            this.selectData.selectDataSourceData.length > 0
          ) {
            relation.selectDataSourceCodeOption = this.selectData.selectDataSourceData
          }
          if (
            this.selectData.dataSourceId == '000' &&
            this.selectData.selectDataSourceCodeOption
          ) {
            relation.selectDataSourceCodeOption = this.selectData.selectDataSourceCodeOption
          }
          relation.id = this.$utils.uuid(16)
          this.selectData.fieldsXIdList.push(relation)
          break
        case 'delete':
          for (var i = 0; i < this.selectData.fieldsXIdList.length; i++) {
            if (this.selectData.fieldsXIdList[i].i == index && index != 0) {
              this.selectData.fieldsXIdList.splice(i, 1)
              break
            }
          }
          break
      }
      this.changeStoreArray()
    },
    onRelation2(type, index) {
      //关联指标的操作
      switch (type) {
        case 'add':
          var relation = {
            id: this.$utils.uuid(16),
            i: this.$utils.uuid(16),
            name: '',
            value: ''
          }
          this.selectData.textConfig.push(relation)
          break
        case 'delete':
          for (var i = 0; i < this.selectData.textConfig.length; i++) {
            if (this.selectData.textConfig[i].i == index && index != 0) {
              this.selectData.textConfig.splice(i, 1)
              break
            }
          }
          break
      }
      this.changeStoreArray()
    },
    // 改变字段名称
    changFieldsXName(ev, item) {
      item.fieldsXName = ev.value
      this.changeStoreArray()
    },
    // 改变字段名称
    changConfig(ev, item, type) {
      if (type == 'name') {
        item.name = ev.value
      } else if (type == 'value') {
        item.value = ev.value
      }
      this.changeStoreArray()
    },
    changeStoreArray() {
      if (this.biModel == 'bigScreen') {
        this.$store.commit('setCurComponent', {
          component: this.selectData,
          zIndex: this.$store.state.bi.curComponentZIndex
        })
        // this.$store.state.bi.bigScreenNature.natureArr[
        //   this.$store.state.bi.curComponentZIndex
        // ] = this.selectData
        this.$store.commit('setBigArr', {
          index: this.$store.state.bi.curComponentZIndex,
          selectData: this.selectData
        })
        this.$store.commit('setBigScreenNature', {
          ...this.$store.state.bi.bigScreenNature
        })
      } else {
        this.$store.commit('setSelectData', { ...this.selectData })
        this.$store.commit('saveArr', { data: { ...this.selectData } })
        this.$store.commit('setNatureArr', { ...this.$store.state.bi.natureArr })
      }
    }
  },
  mounted() {},
  watch: {
    '$store.state.bi.selectData': {
      handler(val) {
        this.selectData = JSON.parse(JSON.stringify(val))
      }
    },
    '$store.state.bi.curComponent': {
      handler(val) {
        if (this.biModel == 'bigScreen') {
          this.selectData = JSON.parse(JSON.stringify(val))
        }
      }
    }
    // biCustom: {
    //   handler(val, old) {
    //     // this.selectData.fieldsX = ''
    //     // this.selectData.fieldsXName = ''
    //     // this.selectData.measureName = ''
    //     // this.selectData.targetIds = ''
    //     // this.selectData.targetName = ''
    //     // this.selectData.fieldsXId = ''
    //   },
    //   deep: true
    // }
  }
}
</script>
<style lang="less" scoped>
.biUserDefinedForm-charttype__img {
  overflow: hidden;
  margin-top: 5px;
  padding: 0px 0 0 20px;

  .active {
    border-color: var(--base-acv) !important;
  }
  .img {
    width: 70px;
    height: 40px;
    margin-left: 5px;
    border: 1px #f7f7f7 solid;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 5px;
  }
  img {
    width: 70px;
    height: 40px;
  }
}
.bi-attr-chart {
  .attr_chart_title {
    height: 25px;
    line-height: 25px;
    padding: 0 60px;
    font-size: 12px;
  }
  .attr_name {
    font-size: 12px;
    text-align: center;
  }
  .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 0 0;
      /deep/ .form__title {
        width: auto !important;
        padding: 0 5px;
      }
      .txt {
        margin-top: 8px;
        width: 3px !important;
        height: 18px;
        text-align: center;
        line-height: 18px;
        font-size: 12px;
        color: #555;
      }
      .form-autoEdit-item-add-btn {
        /deep/.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>
