<template>
  <div>
    <el-form-item :label="i18nt('背景颜色')">
      <el-color-picker v-model="optionModel.echarBarOption.backgroundColor"></el-color-picker>
    </el-form-item>
    <el-form-item :label="i18nt('竖展示')">
      <el-switch v-model="alignX"></el-switch>
    </el-form-item>
    <!--    <el-form-item :label="i18nt('designer.setting.dsEnabled')"><el-switch v-model="optionModel.dsEnabled"></el-switch></el-form-item>
        <el-form-item v-if="optionModel.dsEnabled" :label="i18nt('请求访问')">
          <el-input
            class="search-input"
            max="200"
            v-model="optionModel.accessName"
            @clear="
          optionModel.accessCode = '';
              $forceUpdate();
            "
            v-el-readonly
            clearable
          >
            <i slot="suffix" class="el-input__icon el-icon-search" @click="showRequestaccessDialog = true"></i>
          </el-input>
        </el-form-item>-->
    <el-form-item label="自定义图表配置" label-width="150px">
      <a href="javascript:void(0);" class="a-link link-oneLind"
         @click="editEventHandler('echartConfig', ['dataId', 'formCode'])">
        <span>{{ optionModel.echartConfig }}</span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>
    <el-form-item label-width="0">
      <el-divider class="custom-divider-margin-top">柱体设置</el-divider>
    </el-form-item>
    <el-form-item :label="i18nt('最大宽度')">
      <el-slider v-model="barMaxWidth"></el-slider>
    </el-form-item>
    <el-form-item :label="i18nt('圆角')">
      <el-slider v-model="barBorderRadius"></el-slider>
    </el-form-item>
    <el-form-item :label="i18nt('最小高度')">
      <el-slider v-model="barMinHeight"></el-slider>
    </el-form-item>

    <el-form-item label-width="0">
      <el-divider class="custom-divider-margin-top">标题设置</el-divider>
    </el-form-item>
    <el-form-item :label="i18nt('显示标题')">
      <el-switch v-model="optionModel.echarBarOption.title.show"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('标题')">
      <el-input v-model="optionModel.echarBarOption.title.text"></el-input>
    </el-form-item>
    <!-- <el-form-item :label="i18nt('字体颜色')"><el-color-picker v-model="optionModel.echarBarOption.title.textStyle.color"></el-color-picker></el-form-item>
     <el-form-item :label="i18nt('字体粗细')">
       <el-select v-model="optionModel.echarBarOption.title.textStyle.fontWeight">
         <el-option label="正常" value="normal"></el-option>
         <el-option label="粗体" value="bold"></el-option>
         <el-option label="特粗体" value="bolder"></el-option>
         <el-option label="细体" value="lighter"></el-option>
       </el-select>
     </el-form-item>
     <el-form-item :label="i18nt('字体大小')"><base-input-number :scale="0" v-model="optionModel.echarBarOption.title.textStyle.fontSize"></base-input-number></el-form-item> -->
    <el-form-item :label="i18nt('背景颜色')">
      <el-color-picker v-model="optionModel.echarBarOption.title.backgroundColor"></el-color-picker>
    </el-form-item>
    <el-form-item :label="i18nt('字体位置')">
      <el-select v-model="optionModel.echarBarOption.title.left">
        <el-option label="居中" value="center"></el-option>
        <el-option label="左对齐" value="left"></el-option>
        <el-option label="右对齐" value="right"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="i18nt('副标题')">
      <el-input v-model="optionModel.echarBarOption.title.subtext"></el-input>
    </el-form-item>
    <!-- <el-form-item :label="i18nt('字体颜色')"><el-color-picker v-model="optionModel.echarBarOption.title.subtextStyle.color"></el-color-picker></el-form-item>
    <el-form-item :label="i18nt('字体粗细')">
      <el-select v-model="optionModel.echarBarOption.title.subtextStyle.fontWeight">
        <el-option label="正常" value="normal"></el-option>
        <el-option label="粗体" value="bold"></el-option>
        <el-option label="特粗体" value="bolder"></el-option>
        <el-option label="细体" value="lighter"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="i18nt('字体大小')"><base-input-number :scale="0" v-model="optionModel.echarBarOption.title.subtextStyle.fontSize"></base-input-number></el-form-item> -->

    <el-form-item label-width="0">
      <el-divider class="custom-divider-margin-top">X轴设置</el-divider>
    </el-form-item>
    <el-form-item :label="i18nt('显示')">
      <el-switch v-model="optionModel.echarBarOption.xAxis.show"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('坐标名')">
      <el-input v-model="optionModel.echarBarOption.xAxis.name"></el-input>
    </el-form-item>
    <el-form-item :label="i18nt('坐标名颜色')">
      <el-color-picker v-model="optionModel.echarBarOption.xAxis.nameTextStyle.color"></el-color-picker>
    </el-form-item>
    <el-form-item :label="i18nt('坐标字号')">
      <base-input-number :scale="0"
                         v-model="optionModel.echarBarOption.xAxis.nameTextStyle.fontSize"></base-input-number>
    </el-form-item>
    <el-form-item :label="i18nt('数值颜色')">
      <el-color-picker v-model="optionModel.echarBarOption.xAxis.axisLabel.color"></el-color-picker>
    </el-form-item>
    <el-form-item :label="i18nt('数值字号')">
      <base-input-number :scale="0" v-model="optionModel.echarBarOption.xAxis.axisLabel.fontSize"></base-input-number>
    </el-form-item>
    <el-form-item :label="i18nt('数值角度')">
      <el-slider v-model="optionModel.echarBarOption.xAxis.axisLabel.rotate"></el-slider>
    </el-form-item>

    <el-form-item :label="i18nt('轴反转')">
      <el-switch v-model="optionModel.echarBarOption.xAxis.inverse"></el-switch>
    </el-form-item>
    <!-- <el-form-item :label="i18nt('轴颜色')"><el-color-picker v-model="optionModel.echarBarOption.xAxis.axisLine.lineStyle.color"></el-color-picker></el-form-item> -->
    <el-form-item :label="i18nt('分割线显示')">
      <el-switch v-model="optionModel.echarBarOption.xAxis.splitLine.show"></el-switch>
    </el-form-item>
    <!-- <el-form-item :label="i18nt('分割线颜色')"><el-color-picker v-model="optionModel.echarBarOption.xAxis.splitLine.lineStyle.color"></el-color-picker></el-form-item> -->

    <el-form-item label-width="0">
      <el-divider class="custom-divider-margin-top">Y轴设置</el-divider>
    </el-form-item>

    <el-form-item :label="i18nt('显示')">
      <el-switch v-model="optionModel.echarBarOption.yAxis.show"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('坐标名')">
      <el-input v-model="optionModel.echarBarOption.yAxis.name"></el-input>
    </el-form-item>
    <el-form-item :label="i18nt('坐标名颜色')">
      <el-color-picker v-model="optionModel.echarBarOption.yAxis.nameTextStyle.color"></el-color-picker>
    </el-form-item>
    <el-form-item :label="i18nt('坐标字号')">
      <base-input-number :scale="0"
                         v-model="optionModel.echarBarOption.yAxis.nameTextStyle.fontSize"></base-input-number>
    </el-form-item>
    <el-form-item :label="i18nt('数值颜色')">
      <el-color-picker v-model="optionModel.echarBarOption.yAxis.axisLabel.color"></el-color-picker>
    </el-form-item>
    <el-form-item :label="i18nt('数值字号')">
      <base-input-number :scale="0" v-model="optionModel.echarBarOption.yAxis.axisLabel.fontSize"></base-input-number>
    </el-form-item>
    <el-form-item :label="i18nt('数值角度')">
      <el-slider v-model="optionModel.echarBarOption.yAxis.axisLabel.rotate"></el-slider>
    </el-form-item>

    <el-form-item :label="i18nt('轴显示')">
      <el-switch v-model="optionModel.echarBarOption.yAxis.axisLine.show"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('轴反转')">
      <el-switch v-model="optionModel.echarBarOption.yAxis.inverse"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('轴颜色')">
      <el-color-picker v-model="optionModel.echarBarOption.yAxis.axisLine.lineStyle.color"></el-color-picker>
    </el-form-item>
    <el-form-item :label="i18nt('分割线显示')">
      <el-switch v-model="optionModel.echarBarOption.yAxis.splitLine.show"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('分割线颜色')">
      <el-color-picker v-model="optionModel.echarBarOption.yAxis.splitLine.lineStyle.color"></el-color-picker>
    </el-form-item>

    <el-form-item label-width="0">
      <el-divider class="custom-divider-margin-top">数值设定</el-divider>
    </el-form-item>
    <el-form-item :label="i18nt('显示数值')">
      <el-switch v-model="showSeriesLabel"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('字体大小')">
      <base-input-number :scale="0" v-model="optionModel.echarBarOption.series[0].label.fontSize"></base-input-number>
    </el-form-item>
    <el-form-item :label="i18nt('颜色')">
      <el-color-picker v-model="optionModel.echarBarOption.series[0].label.color"></el-color-picker>
    </el-form-item>
    <el-form-item :label="i18nt('字体粗细')">
      <el-select v-model="optionModel.echarBarOption.series[0].label.fontWeight">
        <el-option label="正常" value="normal"></el-option>
        <el-option label="粗体" value="bold"></el-option>
        <el-option label="特粗体" value="bolder"></el-option>
        <el-option label="细体" value="lighter"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label-width="0">
      <el-divider class="custom-divider-margin-top">提示语设置</el-divider>
    </el-form-item>
    <!-- <el-form-item :label="i18nt('字体大小')"><base-input-number :scale="0" v-model="optionModel.echarBarOption.tooltip.textStyle.fontSize"></base-input-number></el-form-item> -->
    <el-form-item :label="i18nt('网格线颜色')">
      <el-color-picker v-model="optionModel.echarBarOption.tooltip.borderColor"></el-color-picker>
    </el-form-item>

    <!-- <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">坐标轴边距设置</el-divider></el-form-item>

    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">渐变色</el-divider></el-form-item>-->

    <el-form-item label-width="0">
      <el-divider class="custom-divider-margin-top">自定义配色</el-divider>
    </el-form-item>
    <draggable tag="ul" class="draggable-box" :list="optionModel.echarBarOption.colors"
               v-bind="{ group: 'optionsGroup', ghostClass: 'ghost', handle: '.el-icon-s-operation' }">
      <li v-for="(colorItem, index) in optionModel.echarBarOption.colors" :key="index">
        <i class="el-icon-s-operation"></i>
        <el-color-picker v-model="optionModel.echarBarOption.colors[index]"></el-color-picker>
        <!-- {{colorItem}} -->
        <el-button circle plain size="mini" type="danger" @click="deleteColor(index)" icon="el-icon-minus"
                   class="col-delete-button"></el-button>
      </li>
    </draggable>
    <el-button type="text" @click="addColor" icon="el-icon-circle-plus-outline" class="add-option">{{
        i18nt('新增配色')
      }}
    </el-button>

    <requestaccessDialog
      v-if="showRequestaccessDialog"
      :visiable.sync="showRequestaccessDialog"
      @confirm="confirmInsertRequestaccess"
      multi="false"
      :param="{ reportCode: reportTemplate.reportCode }"
    />
  </div>
</template>

<script>
import i18n from '../../../../../../components/xform/utils/i18n';
import {deepClone} from '../../../../../../components/xform/utils/util';
import Draggable from 'vuedraggable';
import requestaccessDialog from '../../../../../../views/user/form/report_requestaccess/dialog.vue';
import eventMixin
  from "@base/components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";

export default {
  name: 'echart-bar-editor',
  mixins: [eventMixin, i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object
  },
  inject: ['getReportTemplate'],
  components: {
    Draggable,
    requestaccessDialog
  },
  computed: {
    reportTemplate: function () {
      return this.getReportTemplate();
    },
    nameSet: {
      get() {
        let chartOptions = this.optionModel.echarBarOption;
        if (this.alignX) {
          return chartOptions.yAxis.data;
        } else {
          return chartOptions.xAxis.data;
        }
      },
      set(val) {
        let chartOptions = this.optionModel.echarBarOption;
        if (this.alignX) {
          chartOptions.yAxis.data = deepClone(val || []);
        } else {
          chartOptions.xAxis.data = deepClone(val || []);
        }
      }
    },
    alignX: {
      get() {
        let chartOptions = this.optionModel.echarBarOption;
        if (chartOptions.xAxis.type == 'category') {
          return false;
        } else {
          return true;
        }
      },
      set(val) {
        let chartOptions = this.optionModel.echarBarOption;
        if (val) {
          chartOptions.yAxis.type = 'category';
          chartOptions.xAxis.type = 'value';
          chartOptions.yAxis.data = deepClone(chartOptions.yAxis.data || chartOptions.xAxis.data || []);
          delete chartOptions.xAxis.data;
        } else {
          chartOptions.yAxis.type = 'value';
          chartOptions.xAxis.type = 'category';
          chartOptions.xAxis.data = deepClone(chartOptions.xAxis.data || chartOptions.yAxis.data || []);
          delete chartOptions.yAxis.data;
        }
      }
    },
    showSeriesLabel: {
      get() {
        return this.optionModel.echarBarOption.series[0].label.show;
      },
      set(val) {
        this.optionModel.echarBarOption.series.forEach(item => {
          item.label.show = val || false;
        });
      }
    },
    barMaxWidth: {
      get() {
        return this.optionModel.echarBarOption.series[0].barMaxWidth;
      },
      set(val) {
        this.optionModel.echarBarOption.series.forEach(item => {
          item.barMaxWidth = val || 0;
        });
      }
    },
    barMinHeight: {
      get() {
        return this.optionModel.echarBarOption.series[0].barMinHeight;
      },
      set(val) {
        this.optionModel.echarBarOption.series.forEach(item => {
          item.barMinHeight = val || 0;
        });
      }
    },
    barBorderRadius: {
      get() {
        let serie = this.optionModel.echarBarOption.series[0];
        return serie.itemStyle && serie.itemStyle.barBorderRadius ? serie.itemStyle.barBorderRadius : 0;
      },
      set(val) {
        this.optionModel.echarBarOption.series.forEach(item => {
          if (item.itemStyle == null) {
            item.itemStyle = {};
          }
          item.itemStyle.barBorderRadius = val || 0;
        });
      }
    }
  },
  data() {
    return {
      showRequestaccessDialog: false
    };
  },
  methods: {
    addOption() {
      this.nameSet.push('');
    },
    deleteOption(index) {
      this.nameSet.splice(index, 1);
    },
    confirmInsertRequestaccess(rows) {
      if (rows.length) {
        let row = rows[0];
        this.optionModel.accessName = row.accessName;
        this.optionModel.accessCode = row.accessCode;
      }
    },
    addColor() {
      if(!this.optionModel.echarBarOption.colors)this.$set(this.optionModel.echarBarOption,'colors',[]);
      this.optionModel.echarBarOption.colors.push('');
    },
    deleteColor(index) {
      this.optionModel.echarBarOption.colors.splice(index, 1);
    }
  }
};
</script>

<style scoped></style>
