<template>
  <div class="detail-container">
    <!--指标项 -->
    <template v-if="selectData.state == 1">
      <ts-row type="flex">
        <ts-col>
          <ts-form-item>
            <ts-input
              v-model="selectData.textSize"
              title="数值字体"
              :clearable="false"
              type="number"
              :min="0"
              @change="refresh($event,'fontSize')"
            ></ts-input>
          </ts-form-item>
        </ts-col>
        <ts-col>
          <ts-color-picker
            v-model="selectData.textColor"
            title="数值颜色"
            @change="refresh($event, 'valColor')"
            colorWidth="46px"
          ></ts-color-picker>
        </ts-col>
      </ts-row>
      <ts-form-item>
        <ts-switch
          title="隐藏图表"
          v-model="selectData.hideChartData"
          on-label="是"
          off-label="否"
          @change="refresh($event,'hideChartData')"
        ></ts-switch>
      </ts-form-item>
      <ts-form-item v-if="!selectData.hideChartData">
        <ts-radio
          title="显示类型"
          v-model="selectData.viewType"
          :data="viewTypeConfig"
          type="group"
          :isDefaultFirst="true"
          :emphasize="true"
          @change="refresh(arguments)"
        ></ts-radio>
      </ts-form-item>
      <attrChartType v-if="selectData.viewType=='chart'&&!selectData.hideChartData"></attrChartType>
      <div class="form-title_blue">数据源配置</div>
      <ts-form-item>
        <tsTargetSelect
          v-model="selectData.targetCode"
          title="所属指标"
          :source="targetSelectSource"
          :key="'targetCode'+selectData.id"
          @change="refresh($event,'targetCode')"
        ></tsTargetSelect>
      </ts-form-item>
      <ts-form-item>
        <ts-switch
          title="实时推送"
          v-model="selectData.isRealTime"
          on-label="是"
          off-label="否"
          :key="selectData.id+'isRealTime2222'"
          @change="refresh($event)"
        ></ts-switch>
      </ts-form-item>
    </template>
    <!--轮播列表 -->
    <template v-if="selectData.state == 2">
      <attr-data-source></attr-data-source>
      <ts-form-item
        v-if="selectData.selectDataSourceResultData&&selectData.selectDataSourceResultData.length>0"
      >
        <ts-select
          placeholder="数据集"
          :key="'selectDataResult'+selectData.id"
          :source="selectDataSourceResult"
          v-model="selectData.selectDataSourceResult"
          @selected="refresh($event, 'selectDataSourceResult')"
        ></ts-select>
      </ts-form-item>
      <ts-form-item>
        <!-- 字段名称 -->
        <ts-select
          title="名称字段"
          :key="'name'+selectData.id"
          :source="dataSourceColSource(selectData.selectDataSourceResultData&&selectData.selectDataSourceResultData.length>0?item.selectDataSourceCodeOption:selectData.selectDataSourceCodeOption)"
          v-model="selectData.namePara"
          @selected="refresh($event, 'namePara')"
        ></ts-select>
      </ts-form-item>
      <ts-form-item>
        <!-- 字段名称 -->
        <ts-select
          title="数值字段"
          :key="'val'+selectData.id"
          :source="dataSourceColSource(selectData.selectDataSourceResultData&&selectData.selectDataSourceResultData.length>0?item.selectDataSourceCodeOption:selectData.selectDataSourceCodeOption)"
          v-model="selectData.valPara"
          @selected="refresh($event, 'valPara')"
        ></ts-select>
      </ts-form-item>
      <div class="form-title_blue">页面元素配置</div>
      <ts-row type="flex">
        <ts-col :flex="1">
          <ts-input
            v-model="selectData.rowNum"
            type="number"
            title="表行数"
            :min="1"
            :clearable="false"
            @change="refresh($event,'rowNum')"
          ></ts-input>
        </ts-col>
        <ts-col :flex="1">
          <ts-switch
            title="自动排序"
            v-model="selectData.sort"
            on-label="是"
            off-label="否"
            @change="refresh($event,'sort')"
          ></ts-switch>
        </ts-col>
      </ts-row>
      <ts-form-item>
        <ts-radio
          title="轮播方式"
          v-model="selectData.carousel"
          :data="carouselSource"
          type="group"
          :isDefaultFirst="true"
          @change="refresh($event,'carousel')"
        ></ts-radio>
      </ts-form-item>
      <ts-form-item>
        <ts-input
          v-model="selectData.waitTime"
          type="number"
          title="轮播间隔"
          :min="1000"
          :clearable="false"
          @change="refresh($event,'waitTime')"
        ></ts-input>
      </ts-form-item>
      <ts-row type="flex">
        <ts-col :flex="1">
          <ts-switch
            title="显示序号"
            v-model="selectData.rowNumbers"
            on-label="是"
            off-label="否"
            @change="refresh($event,'rowNumbers')"
          ></ts-switch>
        </ts-col>
        <!-- <ts-col>
          <ts-color-picker
            v-model="selectData.textColor"
            title="值字体色"
            @change="refresh($event, 'textColor')"
            colorWidth="46px"
          ></ts-color-picker>
        </ts-col>-->
      </ts-row>
    </template>
    <!--计时器 -->
    <template v-if="selectData.state == 4">
      <ts-color-picker
        v-model="selectData.textColor"
        title="字体颜色"
        @change="refresh($event, 'textColor')"
      ></ts-color-picker>
      <ts-form-item>
        <ts-radio
          title="文字方位"
          v-model="selectData.textPosition"
          :data="titlePositionSource"
          type="group"
          :isDefaultFirst="true"
          @change="refresh(arguments)"
        ></ts-radio>
      </ts-form-item>
    </template>
    <template v-if="selectData.state == 5||selectData.state == 6">
      <ts-row type="flex">
        <ts-col>
          <ts-switch
            title="是否加粗"
            v-model="selectData.weight"
            on-label="是"
            off-label="否"
            @change="refresh($event,'weight')"
          ></ts-switch>
        </ts-col>
      </ts-row>
      <ts-row type="flex">
        <ts-col>
          <ts-switch
            title="取消同环比"
            v-model="selectData.showRate"
            on-label="是"
            off-label="否"
            @change="refresh($event,'showRate')"
          ></ts-switch>
        </ts-col>
      </ts-row>
      <ts-row type="flex">
        <ts-col>
          <ts-switch
            title="是否横排"
            v-model="selectData.flexDirection"
            on-label="是"
            off-label="否"
            @change="refresh($event,'showRate')"
          ></ts-switch>
        </ts-col>
      </ts-row>
      <ts-row type="flex">
        <ts-col>
          <ts-form-item>
            <ts-input
              v-model="selectData.textSize"
              title="数值字体"
              :clearable="false"
              type="number"
              :min="0"
              @change="refresh($event,'fontSize')"
            ></ts-input>
          </ts-form-item>
        </ts-col>
        <ts-col>
          <ts-color-picker
            v-model="selectData.textColor"
            title="数值颜色"
            @change="refresh($event, 'textColor')"
            colorWidth="46px"
          ></ts-color-picker>
        </ts-col>
      </ts-row>
      <ts-row type="flex" v-if="selectData.state == '6'">
        <ts-col style="margin-right:20px">
          <ts-form-item>
            <ts-color-picker
              v-if="selectData.state == '6'"
              v-model="selectData.itemBackground1"
              title="层级斑马线"
              @change="refresh($event, 'itemBackground1')"
              colorWidth="46px"
            ></ts-color-picker>
          </ts-form-item>
        </ts-col>
        <ts-col>
          <ts-color-picker
            v-model="selectData.itemBackground2"
            @change="refresh($event, 'itemBackground2')"
            colorWidth="46px"
          ></ts-color-picker>
        </ts-col>
      </ts-row>
      <attrChartType v-if="selectData.viewType=='chart'&&!selectData.hideChartData"></attrChartType>
      <div class="form-title_blue">数据源配置</div>
      <ts-form-item>
        <tsTargetSelect
          v-model="selectData.targetCode"
          title="所属指标"
          :source="targetSelectSource"
          :key="'targetCode'+selectData.id"
          @change="refresh($event,'targetCode')"
        ></tsTargetSelect>
      </ts-form-item>
      <ts-form-item v-if="selectData.state == '6'">
        <tsTargetSelect
          v-model="selectData.treeTargetCode"
          title="丛属指标"
          :source="targetTreeSelectSource"
          :key="'treeTargetCode'+selectData.id"
          @change="refresh($event,'treeTargetCode')"
          :isTree="true"
        ></tsTargetSelect>
      </ts-form-item>
    </template>
       <template v-if="selectData.state ==  7">
              <ts-row type="flex">
        <ts-col>
          <ts-input
            title="标题"
            v-model="selectData.title"
            @change="refresh($event,'title')"
          ></ts-input>
        </ts-col>
      </ts-row>
          <ts-row type="flex">
        <ts-col>
          <ts-input
            title="全院描述"
            v-model="selectData.allArea"
            @change="refresh($event,'allArea')"
          ></ts-input>
        </ts-col>
      </ts-row>
      <ts-row type="flex">
        <ts-col>
          <ts-input
            title="图标"
            v-model="selectData.icon"
            @change="refresh($event,'icon')"
          >
          <tsPopover
        slot="title"
      >注：复制font-class 路径:
      <a  href="/img/demo_index.html" style="color:#0079fb;"  target="_blank"  >/img/img/demo_index.html</a>
       </tsPopover>
          </ts-input>
        </ts-col>
      </ts-row>
         <ts-row type="flex">
        <ts-col>
          <ts-input
            title="图标大小"
            v-model="selectData.iconSize"
            @change="refresh($event,'icon')"
            :clearable="false"
            type="number"
            :min="0"
          ></ts-input>
        </ts-col>
      </ts-row>
      <ts-row type="flex">
        <ts-col>
          <ts-switch
            title="是否横排"
            v-model="selectData.flexDirection"
            on-label="是"
            off-label="否"
            @change="refresh($event,'showRate')"
          ></ts-switch>
        </ts-col>
      </ts-row>

           <ts-row type="flex">
         <ts-row type="flex">
        <ts-col>
          <ts-switch
            title="文字加粗"
            v-model="selectData.weight"
            on-label="是"
            off-label="否"
            @change="refresh($event,'weight')"
          ></ts-switch>
        </ts-col>
           <ts-col>
          <ts-switch
            title="数值加粗"
            v-model="selectData.valueWeight"
            on-label="是"
            off-label="否"
            @change="refresh($event,'valueWeight')"
          ></ts-switch>
        </ts-col>
      </ts-row>
      </ts-row>
               <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-row type="flex">
        <ts-col>
          <ts-form-item>
            <ts-input
              v-model="selectData.titleSize"
              title="标题字体"
              :clearable="false"
              type="number"
              :min="0"
              @change="refresh($event,'titleSize')"
            ></ts-input>
          </ts-form-item>
        </ts-col>
        <ts-col>
          <ts-color-picker
            v-model="selectData.titleColor"
            title="标题颜色"
            @change="refresh($event, 'titleColor')"
            colorWidth="46px"
          ></ts-color-picker>
        </ts-col>
      </ts-row>
      <ts-row type="flex">
        <ts-col>
          <ts-form-item>
            <ts-input
              v-model="selectData.textSize"
              title="数值字体"
              :clearable="false"
              type="number"
              :min="0"
              @change="refresh($event,'fontSize')"
            ></ts-input>
          </ts-form-item>
        </ts-col>
        <ts-col>
          <ts-color-picker
            v-model="selectData.textColor"
            title="数值颜色"
            @change="refresh($event, 'textColor')"
            colorWidth="46px"
          ></ts-color-picker>
        </ts-col>
      </ts-row>
            <ts-row type="flex">
        <ts-col>
          <ts-form-item>
            <ts-input
              v-model="selectData.areaSize"
              title="院区字体"
              :clearable="false"
              type="number"
              :min="0"
              @change="refresh($event,'fontSize')"
            ></ts-input>
          </ts-form-item>
        </ts-col>
        <ts-col>
          <ts-color-picker
            v-model="selectData.areaColor"
            title="院区颜色"
            @change="refresh($event, 'textColor')"
            colorWidth="46px"
          ></ts-color-picker>
        </ts-col>
      </ts-row>
      <attrChartType v-if="selectData.viewType=='chart'&&!selectData.hideChartData"></attrChartType>
      <div class="form-title_blue">数据源配置</div>
      <ts-form-item>
        <tsTargetSelect
          v-model="selectData.targetCode"
          title="所属指标"
          :source="targetSelectSource"
          :key="'targetCode'+selectData.id"
          @change="refresh($event,'targetCode')"
        ></tsTargetSelect>
      </ts-form-item>
    </template>
  </div>
</template>
<script>
import attrChartType from './attrChartType'
import attrDataSource from '../definedAttrPannel/attrDataSource'
import tsTargetSelect from '../uiElement/tsTargetSelect'
export default {
  name: 'attr-bi-element',
  components: {
    attrChartType,
    attrDataSource,
    tsTargetSelect
  },
  data() {
    return {
      selectData: JSON.parse(JSON.stringify(this.$store.state.bi.selectData)),
      targetSelectSource: {
        dataType: 'local',
        data: this.$store.state.bi.targetSource,
        choice: false
      },
      viewTypeConfig: [
        { value: 'chart', text: '图表' },
        { value: 'table', text: '表格' }
      ],
      carouselSource: [
        { value: 'single', text: '单行' },
        { value: 'page', text: '整页' }
      ],
      titlePositionSource: [
        { value: 'flex-start', text: '居左' },
        { value: 'center', text: '居中' },
        { value: 'flex-end', text: '居右' }
      ]
    }
  },
  computed: {
    targetTreeSelectSource() {
      return {
        dataType: 'local',
        data: this.$store.state.bi.targetSource,
        choice: true,
        targetTreeDatas: this.selectData.targetTreeDatas || []
      }
    },
    // 下拉数据源-值
    selectDataSourceCode() {
      return this.dataSourceColSource(this.selectData.selectDataSourceData)
    },
    // 下拉数据源-值
    selectDataSourceResult() {
      return this.dataSourceColSource(
        this.selectData.selectDataSourceResultData
      )
    }
  },
  created() {},
  methods: {
    // 数据源参数
    dataSourceColSource(data) {
      return {
        dataType: 'local',
        code: 'name',
        text: 'name',
        data: data || [],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    },
    refresh(ev, arrKey) {
      this.$nextTick(() => {
        switch (arrKey) {
          case 'treeTargetCode':
            if (this.selectData.state == '6') {
              // 层级指标贴
              this.selectData.targetTreeDatas = [...ev]
            }
            break
          case 'targetCode':
            this.selectData.targetName = ev
              ? ev.name.indexOf(ev.code) > -1
                ? ev.name.replace('(' + ev.code + ')', '')
                : ev.name
              : ''
            this.selectData.targetId = ev ? ev.id : ''
            break
          case 'hideChartData':
            this.selectData.h = this.selectData.hideChartData ? 12 : 30
            break
        }
        this.changeStoreArray()
      })
    },
    changeStoreArray() {
      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.dataSource': {
    //   handler(val) {
    //     this.dataSourceDataList = [...val]
    //   },
    //   deep: true
    // }
  }
}
</script>
<style lang="less" scoped>
.tab-detail-container {
  .attr_chart_title {
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    font-size: 12px;
  }
}
</style>
