<template>
  <div class="base-detail-container">
    <ts-form-item>
      <ts-select
        :source="chartType"
        :key="selectData.id + 'chartType'"
        v-model="selectData.chartValue"
        title="图表类型"
        @selected="selectedChartType"
      ></ts-select>
    </ts-form-item>
    <div
      class="biUserDefinedForm-charttype__img"
      id="biUserDefinedForm-charttype__img"
      v-if="chartList && chartList.length > 0"
    >
      <div
        v-for="(item, index) of chartList"
        :key="index"
        :class="'layui-col-xs3 img ' + (item.active || '')"
        @click="imgClick(item)"
      >
        <img style="height: 100%; width: 100%" :src="require(`../../assets/${item.chartImage}`)" :title="item.chartName" />
      </div>
    </div>
    <ts-input
      v-model="selectData.unit"
      placeholder="请填写显示单位"
      @change="refresh"
      v-if="selectData.cate == 'custom'"
      title="显示单位"
    ></ts-input>
    <ts-select
      v-if="selectData.cate == 'plot' && selectData.chartValue != '010'&& selectData.chartValue != '009'&&selectData.chartValue!='004'"
      v-model="selectData.themeCode"
      title="图表主题"
      :source="selectSource"
      @selected="refresh()"
      :key="selectData.id + 'themeCode'"
    ></ts-select>
    <ts-row type="flex">
      <ts-col
        :flex="1"
        v-if="
          (selectData.chartValue == '001'&&selectData.cate != 'plot') ||
          (selectData.chartValue == '004' && selectData.state == 4)
        "
      >
        <ts-form-item>
          <ts-switch
            title="百分比"
            v-model="selectData.showPercent"
            on-label="是"
            off-label="否"
            @change="refresh($event, 'showPercent')"
            :key="selectData.id + 'showPercent'"
          ></ts-switch>
        </ts-form-item>
      </ts-col>
      <ts-col
        :flex="1"
        v-if="selectData.cate == 'plot' && selectData.chartValue != '010'&& selectData.chartValue != '009'&&selectData.chartValue!='004'&&selectData.chartValue != '012'&&selectData.chartValue!='013'"
      >
        <ts-form-item>
          <ts-switch
            title="百分比"
            v-model="selectData.isPercent"
            on-label="是"
            off-label="否"
            @change="refresh($event, 'showPercent')"
            :key="selectData.id + 'showPercent111'"
          ></ts-switch>
        </ts-form-item>
      </ts-col>
      <ts-col :flex="1">
        <ts-form-item
          v-if="selectData.cate == 'plot'&& selectData.chartValue != '010'&& selectData.chartValue != '009'&&selectData.chartValue!='004'&&selectData.chartValue != '010'&&selectData.chartValue != '012'&&selectData.chartValue!='013'"
        >
          <ts-switch
            title="图上文字"
            v-model="selectData.isShowValue"
            on-label="是"
            off-label="否"
            @change="refresh($event, 'isShowValue')"
            :key="selectData.id + 'isShowValue'"
          ></ts-switch>
        </ts-form-item>
      </ts-col>
    </ts-row>
    <ts-row>
      <!-- <ts-radio
        v-if="selectData.isShowValue&&selectData.cate == 'plot'&& selectData.chartValue != '010'&& selectData.chartValue != '009'&&selectData.chartValue!='004'&&selectData.chartValue!='011'&&selectData.chartValue!='012'&&selectData.chartValue!='013'"
        v-model="selectData.position"
        title="文字位置"
        name="type"
        type="group"
        :data="positionList"
        @change="refresh($event, 'position')"
        :key="selectData.id + 'position'"
      ></ts-radio> -->
        <ts-select
        v-if="selectData.isShowValue&&selectData.cate == 'plot'&& selectData.chartValue != '010'&& selectData.chartValue != '009'&&selectData.chartValue!='004'&&selectData.chartValue!='011'&&selectData.chartValue!='012'&&selectData.chartValue!='013'"
      v-model="selectData.position"
      title="文字位置"
      :source="positionList"
      @selected="refresh($event, 'position')"
      :key="selectData.id + 'position'"
    ></ts-select>
    </ts-row>
    <ts-row
      type="flex"
      v-if="
        selectData.chartValue == '003' ||
        selectData.chartValue == '005' ||
        selectData.chartValue == '007'
      "
    >
      <ts-col :flex="1">
        <ts-switch
          title="进度条"
          titleWidth="auto"
          v-model="selectData.isSlider"
          on-label="是"
          off-label="否"
          @change="refresh($event, 'isSlider')"
          :key="selectData.id + 'isSlider'"
        ></ts-switch>
      </ts-col>
      <ts-col :flex="1" v-if="selectData.chartValue == '003'">
        <ts-form-item>
          <ts-switch
            title="显示点"
            titleWidth="auto"
            v-model="selectData.point"
            on-label="是"
            off-label="否"
            @change="refresh($event, 'point')"
            :key="selectData.id + 'point'"
          ></ts-switch>
        </ts-form-item>
      </ts-col>
      <ts-col :flex="1" v-if="selectData.chartValue == '003'">
        <ts-form-item>
          <ts-switch
            title="平滑否"
            titleWidth="auto"
            v-model="selectData.smooth"
            on-label="是"
            off-label="否"
            @change="refresh($event, 'smooth')"
            :key="selectData.id + 'smooth'"
          ></ts-switch>
        </ts-form-item>
      </ts-col>
    </ts-row>
    <ts-row
      v-if="selectData.isSlider && selectData.cate == 'plot'"
      style="margin: 0 10px; display: flex"
    >
      <div class="form__title">
        <tsPopover slot="title">注：0在最左边，50为中间，100为最右</tsPopover>起始区间
      </div>
      <el-slider
        v-model="selectData.sliderRange"
        range
        :max="100"
        @change="refresh($event, 'sliderRange')"
        style="width:calc(100% - 100px);margin: 0 10px;"
        :key="selectData.id + 'sliderRange'"
      ></el-slider>
    </ts-row>
    <ts-form-item
      v-if="(selectData.cate == 'plot'&&selectData.chartValue!='004'&&selectData.chartValue!='010'&&selectData.chartValue!='009'&&selectData.chartValue!='013')"
    >
      <ts-select
        v-model="selectData.legendPos"
        @change="refresh($event, 'legendPos')"
        title="图例方位"
        :source="legendPosSource"
        :key="'legendPos' + selectData.id"
      />
    </ts-form-item>
  </div>
</template>
<script>
import attrChartType from './attrChartType.json'
import biUtils from '../../utils/biUtils'
export default {
  name: 'attrChart',
  props: {
    biModel: {
      type: String,
      default: ''
    }
  },
  components: {},
  data() {
    return {
      selectSource: {
        dataType: 'local',
        data: [
          {
            name: '默认主题',
            themeColor: {
              theme: {
                styleSheet: {
                  brandColor: '#5B8FF9',
                  paletteQualitative10: [
                    '#5B8FF9',
                    '#61DDAA',
                    '#65789B',
                    '#F6BD16',
                    '#7262fd',
                    '#78D3F8',
                    '#9661BC',
                    '#F6903D',
                    '#008685',
                    '#F08BB4'
                  ],
                  paletteQualitative20: [
                    '#5B8FF9',
                    '#CDDDFD',
                    '#61DDAA',
                    '#CDF3E4',
                    '#65789B',
                    '#CED4DE',
                    '#F6BD16',
                    '#FCEBB9',
                    '#7262fd',
                    '#D3CEFD',
                    '#78D3F8',
                    '#D3EEF9',
                    '#9661BC',
                    '#DECFEA',
                    '#F6903D',
                    '#FFE0C7',
                    '#008685',
                    '#BBDEDE',
                    '#F08BB4',
                    '#FFE0ED'
                  ]
                }
              }
            },
            themeCode: '0'
          },
          {
            name: '秋意橙主题',
            themeColor: {
              theme: {
                styleSheet: {
                  brandColor: '#FF6B3B',
                  paletteQualitative10: [
                    '#FF6B3B',
                    '#626681',
                    '#FFC100',
                    '#9FB40F',
                    '#76523B',
                    '#DAD5B5',
                    '#0E8E89',
                    '#E19348',
                    '#F383A2',
                    '#247FEA'
                  ],
                  paletteQualitative20: [
                    '#FF6B3B',
                    '#626681',
                    '#FFC100',
                    '#9FB40F',
                    '#76523B',
                    '#DAD5B5',
                    '#0E8E89',
                    '#E19348',
                    '#F383A2',
                    '#247FEA',
                    '#2BCB95',
                    '#B1ABF4',
                    '#1D42C2',
                    '#1D9ED1',
                    '#D64BC0',
                    '#255634',
                    '#8C8C47',
                    '#8CDAE5',
                    '#8E283B',
                    '#791DC9'
                  ]
                }
              }
            },
            themeCode: '1'
          },
          {
            name: '马卡龙主题',
            themeColor: {
              theme: {
                styleSheet: {
                  brandColor: '#025DF4',
                  paletteQualitative10: [
                    '#025DF4',
                    '#DB6BCF',
                    '#2498D1',
                    '#BBBDE6',
                    '#4045B2',
                    '#21A97A',
                    '#FF745A',
                    '#007E99',
                    '#FFA8A8',
                    '#2391FF'
                  ],
                  paletteQualitative20: [
                    '#025DF4',
                    '#DB6BCF',
                    '#2498D1',
                    '#BBBDE6',
                    '#4045B2',
                    '#21A97A',
                    '#FF745A',
                    '#007E99',
                    '#FFA8A8',
                    '#2391FF',
                    '#FFC328',
                    '#A0DC2C',
                    '#946DFF',
                    '#626681',
                    '#EB4185',
                    '#CD8150',
                    '#36BCCB',
                    '#327039',
                    '#803488',
                    '#83BC99'
                  ]
                }
              }
            },
            themeCode: '2'
          },
          {
            name: '强对比主题',
            themeColor: {
              theme: {
                styleSheet: {
                  brandColor: '#FF4500',
                  paletteQualitative10: [
                    '#FF4500',
                    '#1AAF8B',
                    '#406C85',
                    '#F6BD16',
                    '#B40F0F',
                    '#2FB8FC',
                    '#4435FF',
                    '#FF5CA2',
                    '#BBE800',
                    '#FE8A26'
                  ],
                  paletteQualitative20: [
                    '#FF4500',
                    '#1AAF8B',
                    '#406C85',
                    '#F6BD16',
                    '#B40F0F',
                    '#2FB8FC',
                    '#4435FF',
                    '#FF5CA2',
                    '#BBE800',
                    '#FE8A26',
                    '#946DFF',
                    '#6C3E00',
                    '#6193FF',
                    '#FF988E',
                    '#36BCCB',
                    '#004988',
                    '#FFCF9D',
                    '#CCDC8A',
                    '#8D00A1',
                    '#1CC25E'
                  ]
                }
              }
            },
            themeCode: '3'
          },
          {
            name: '顺序色板(蓝)',
            themeColor: {
              theme: {
                styleSheet: {
                  brandColor: '#B8E1FF',
                  paletteQualitative10: [
                    '#B8E1FF',
                    '#9AC5FF',
                    '#7DAAFF',
                    '#5B8FF9',
                    '#3D76DD',
                    '#085EC0',
                    '#0047A5',
                    '#00318A',
                    '#001D70'
                  ],
                  paletteQualitative20: [
                    '#B8E1FF',
                    '#9AC5FF',
                    '#7DAAFF',
                    '#5B8FF9',
                    '#3D76DD',
                    '#085EC0',
                    '#0047A5',
                    '#00318A',
                    '#001D70'
                  ]
                }
              }
            },
            themeCode: '4'
          },
          {
            name: '顺序色板(绿)',
            themeColor: {
              theme: {
                styleSheet: {
                  brandColor: '#9DF5CA',
                  paletteQualitative10: [
                    '#9DF5CA',
                    '#61DDAA',
                    '#42C090',
                    '#19A576',
                    '#008A5D',
                    '#006F45',
                    '#00562F',
                    '#003E19',
                    '#002800'
                  ],
                  paletteQualitative20: [
                    '#9DF5CA',
                    '#61DDAA',
                    '#42C090',
                    '#19A576',
                    '#008A5D',
                    '#006F45',
                    '#00562F',
                    '#003E19',
                    '#002800'
                  ]
                }
              }
            },
            themeCode: '5'
          },
          {
            name: '发散色板',
            themeColor: {
              theme: {
                styleSheet: {
                  brandColor: '#215B77',
                  paletteQualitative10: [
                    '#215B77',
                    '#1B9CD0',
                    '#61C9FF',
                    '#ABDFFF',
                    '#EFF3DE',
                    '#FFDE94',
                    '#FFC741',
                    '#D09C10',
                    '#795B16'
                  ],
                  paletteQualitative20: [
                    '#215B77',
                    '#227BA2',
                    '#1B9CD0',
                    '#22BAED',
                    '#61C9FF',
                    '#8AD4FF',
                    '#ABDFFF',
                    '#C9E9FF',
                    '#EFF3DE',
                    '#FFE9B8',
                    '#FFDE94',
                    '#FFD470',
                    '#FFC741',
                    '#EDB40A',
                    '#D09C10',
                    '#A37B16',
                    '#795B16'
                  ]
                }
              }
            },
            themeCode: '6'
          },
          {
            name: '发散色板2',
            themeColor: {
              theme: {
                styleSheet: {
                  brandColor: '#014c63',
                  paletteQualitative10: [
                    '#014c63',
                    '#168575',
                    '#0bc286',
                    '#96dcb0',
                    '#F2EAEA',
                    '#FFA884',
                    '#FF6836',
                    '#D13808',
                    '#7A270E'
                  ],
                  paletteQualitative20: [
                    '#014c63',
                    '#10686c',
                    '#168575',
                    '#16a37e',
                    '#0bc286',
                    '#65cf9b',
                    '#96dcb0',
                    '#c1e8c5',
                    '#F2EAEA',
                    '#FFC5AC',
                    '#FFA884',
                    '#FF895D',
                    '#FF6836',
                    '#F3470D',
                    '#D13808',
                    '#A4300C',
                    '#7A270E'
                  ]
                }
              }
            },
            themeCode: '7'
          }
        ],
        code: 'themeCode',
        text: 'name',
        value: {
          code: '',
          name: ''
        }
      },
            positionList: {
        dataType: 'local',
        code: 'value',
        text: 'text',
        data: [
        {
          value: 'top',
          text: 'top'
        },
        {
          value: 'middle',
          text: 'middle'
        },
        {
          value: 'bottom',
          text: 'bottom'
        },

        {
          value: 'left',
          text: 'left'
        },
        {
          value: 'right',
          text: 'right'
        }
      ],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      },
      attrChartType: attrChartType,
      selectData:
        this.biModel === 'bigScreen'
          ? JSON.parse(JSON.stringify(this.$store.state.bi.curComponent))
          : JSON.parse(JSON.stringify(this.$store.state.bi.selectData)),

      chartList: [],
      legendPosSource: {
        dataType: 'local',
        code: 'value',
        text: 'label',
        data: [
          { value: 'top', label: 'top' },
          { value: 'top-left', label: 'top-left' },
          { value: 'top-right', label: 'top-right' },
          { value: 'right', label: 'right' },
          { value: 'right-top', label: 'right-top' },
          { value: 'right-bottom', label: 'right-bottom' },
          { value: 'left', label: 'left' },
          { value: 'left-top', label: 'left-top' },
          { value: 'left-bottom', label: 'left-bottom' },
          { value: 'bottom', label: 'bottom' },
          { value: 'bottom-left', label: 'bottom-left' },
          { value: 'bottom-right', label: 'bottom-right' }
        ],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    }
  },
  computed: {
    chartType() {
      return {
        dataType: 'local',
        data: this.attrChartType.chartTypes || [],
        page: 'pageNo',
        code: 'chartTypeid',
        text: 'chartTypename',
        condition: 'condition',
        isReq: true
      }
    }
  },
  created() {},
  methods: {
    refresh(ev, key) {
      this.$nextTick(() => {
        switch (key) {
          case 'isSlider':
            this.selectData.sliderRange = this.selectData.isSlider
              ? this.selectData.sliderRange || [0, 100]
              : [0, 100]
            break
        }
        this.changeStoreArray()
      })
    },
    // 选择图表类型
    selectedChartType(row) {
      this.selectData.chartTypename = row.chartTypename
      this.selectData.chartValue = row.chartTypeid
      this.changeStoreArray()
      // this.getChartList(row)
    },
    // 获取图表下拉
    getChartList() {
      let _this = this
      _this.chartList = []
      if (this.selectData.chartValue) {
        for (let item of this.attrChartType.chartTypes) {
          if (item.chartTypeid == this.selectData.chartValue) {
            for (let chart of item.list) {
              chart.active = (this.selectData.type == 'chart'
              ? this.selectData.state == chart.chartId
              : this.selectData.chartId == chart.chartId)
                ? 'active'
                : ''
              _this.chartList.push(chart)
            }
            break
          }
        }
      }
    },
    //图片点击
    imgClick(item) {
      for (let chart of this.chartList) {
        chart.active = ''
      }
      item.active = 'active'
      this.selectData.chartValue = item.chartTypeid
      this.selectData.cate = item.cate
      if (this.selectData.type == 'chart') {
        this.selectData.state = item.cate == 'plot' ? item.plotId : item.chartId
      } else {
        this.selectData.chartId =
          item.cate == 'plot' ? item.plotId : item.chartId
      }
      // if (
      //   this.selectData.type != 'biElement' &&
      //   (this.selectData.chartValue == '002' ||
      //     this.selectData.chartValue == '003')
      // ) {
      //   this.selectData.fieldsX = ''
      //   this.selectData.measureName = ''
      //   this.selectData.targetIds = ''
      //   this.selectData.targetName = ''
      //   this.selectData.fieldsXId = ''
      // }
      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() {
    this.getChartList()
  },
  watch: {
    '$store.state.bi.selectData': {
      handler(val) {
        this.selectData = JSON.parse(JSON.stringify(val))
        if (!this.selectData.legendPos) {
          if (this.selectData.chartValue == '002') {
            this.selectData.legendPos = 'right'
          } else {
            this.selectData.legendPos = 'top'
          }
        }
        this.getChartList()
      }
    },
    '$store.state.bi.curComponent': {
      handler(val) {
        if (this.biModel == 'bigScreen') {
          this.selectData = JSON.parse(JSON.stringify(val))
        }
      }
    }
  }
}
</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 {
    height: 40px;
    width: 70px;
    margin-left: 5px;
    border: 1px #f7f7f7 solid;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 5px;
  }
  img {
    width: 70px;
    height: auto;
  }
}
</style>
