<template>
  <div class="sectionalScatter-option-wrapper">
    <el-collapse v-model="activeNames" class="target-list">
        <el-collapse-item  
          class="series-li" 
          v-for="(item,index) in seriesArr" 
          :key="item.index"
          :name="item.index"
          :disabled="!item.edbs"
        >
          <template slot="title">
            <el-button type="text" size="small" @click.stop="openSetDialog(item,index)" style="font-size: 15px;">系列{{index+1}}配置</el-button>
            <i class="el-icon-delete del-icon" v-if="index>0" @click.stop="removeSeries(index)"></i>
          </template>
          <div class="setting-wrapper" v-if="item.edbs">
            <div class="set-header">
              <el-checkbox v-model="item.showTrendLine" @change="changeSeriesOption(item,index)">趋势线</el-checkbox>
              <template v-if="item.showTrendLine">
                <el-checkbox v-model="item.showFitEquation" @change="changeSeriesOption(item,index)">拟合方程</el-checkbox>
                <el-checkbox v-model="item.showRSquare" @change="changeSeriesOption(item,index)">R²</el-checkbox>
              </template>
            </div>

            <ul class="setting-cont" v-if="item.edbs">
              <li id="tag-item">
                <span>标签</span>
                <el-checkbox v-model="item.tagsAllShow" @change="changeTagShow(item,null,index)">全部显示</el-checkbox>
              </li>
              <li 
                id="tag-item"
                v-for="(edb,edb_index) in item.edbs" 
                :key="`${item.index}_${edb_index}`"
              >
                <span  class="text_oneLine" style="width: 70%">{{edb.name}}</span>
                <i class="el-icon-view" v-if="edb.is_show" @click="changeTagShow(item,edb,index)"/>
                <img :src="$icons.no_view" v-else style="width:24px;height:24px" @click="changeTagShow(item,edb,index)">
              </li>
            </ul>
          </div>
        </el-collapse-item>
    </el-collapse>

    <div class="add-cont" @click="addSeriesHandle" v-if="seriesArr[0].edbs">
      <img
        src="~@/assets/img/set_m/add_ico.png"
        alt=""
        style="width: 16px; height: 16px; margin-right: 10px"
      />
      <span>更多系列</span>
    </div>


    <!-- 系列1配置弹窗 -->
    <satterSeriesDia
      :show.sync="isOpenSeriesDialog"
      :serieInfo="seriesArr[0]"
      @saveCallback="saveSeriesOpt"
    />

    <!-- 添加其他系列 -->
    <m-dialog
      :title="dialogForm.index ? `系列${dialogForm.index+1}配置`:'更多系列配置'" 
      :show.sync="dialogForm.show" 
      width="650px"
    >
      <div style="padding-left: 50px">
        <el-form 
          :model="dialogForm" 
          :rules="formRules" 
          ref="formRef" 
          label-position="left"
          hide-required-asterisk
          label-width="80px">
          <el-form-item prop="x_date_type" label="X轴">
            <el-select 
              v-model="dialogForm.x_date_type"
              placeholder="请选择日期添加方式"
              style="width:300px;"
              @change="()=>{ dialogForm.x_date_value='',dialogForm.x_date='' }"
            >
              <el-option v-for="item in dateOptions" :key="item.key" :label="item.label" :value="item.key"/>
            </el-select>
            <span v-if="dialogForm.x_date_type === 2">
              <el-input
                type="number" 
                v-model="dialogForm.x_date_value"
                style="width:100px;"
              />
              天
            </span>
            <el-date-picker
              v-else-if="dialogForm.x_date_type === 3"
              v-model="dialogForm.x_date"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              style="width: 140px"
            />
          </el-form-item>
          <el-form-item prop="y_date_value" label="Y轴">
            <el-select 
              v-model="dialogForm.y_date_type"
              placeholder="请选择日期添加方式"
              style="width:300px;"
              @change="()=>{ dialogForm.y_date_value='',dialogForm.y_date='' }"
            >
              <el-option v-for="item in dateOptions" :key="item.key" :label="item.label" :value="item.key"/>
            </el-select>
            <span v-if="dialogForm.y_date_type === 2">
              <el-input
                type="number" 
                v-model="dialogForm.y_date_value"
                placeholder="请输入数字"
                style="width:100px;"
              />
              天
            </span>
            <el-date-picker
              v-else-if="dialogForm.y_date_type === 3"
              v-model="dialogForm.y_date"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              style="width: 140px"
            />
          </el-form-item>
          <el-form-item prop="series_name" label="系列名称">
            <el-input
              v-model="dialogForm.series_name"
              style="width: 300px"
              placeholder="请输入系列名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="系列颜色" prop="color">
            <el-color-picker
              v-model="dialogForm.color"
              show-alpha
              :predefine="predefineColors"
              style="vertical-align: middle"
            ></el-color-picker>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" style="margin-top: 20px;">
        <el-button
          @click="saveSeries"
          type="primary"
          style="width: 132px; height: 40px"
          >保存</el-button>
        <el-button
        @click="cancelDialog"
        style="width: 132px; height: 40px"
        >取消</el-button>
      </div>
    </m-dialog>
  </div>
</template>

<script>
import satterSeriesDia from './satterSeriesDia.vue';
import mDialog from '@/components/mDialog.vue'
import { defaultOpts } from '@/utils/defaultOptions';
export default {
  components: { satterSeriesDia,mDialog },
  props: {
    initData: {
      default: null
    }
  },
  data() {
    return {
        predefineColors: defaultOpts.colors.slice(0, 2), 
        activeNames: [],
        seriesArr: [
          { 
            index:1,
            showTrendLine: false,
            showFitEquation: false,
            showRSquare: false,
            tagsAllShow: false
          }
        ],

        //系列1配置
        isOpenSeriesDialog: false,

        //其他系列配置
        dialogForm: {
          show: false,
          index: '',
          x_date: '',
          x_date_type: 1,
          x_date_value: '',
          y_date: '',
          y_date_type: 1,
          y_date_value: '',
          series_name: '',
          color: ''
        },
        formRules: {
          series_name: [
            { required: true, message: '系列名称不能为空', trigger: 'blur' },
          ]
        },
        dateOptions: [
          { key: 1,label:'最新日期' },
          { key: 2,label:'N天前' },
          { key: 3,label:'固定日期' },
        ],
    }
  },

  methods: {
    getPreviewData() {
      this.$emit('getData',this.seriesArr)
    },

    /* 切换标签 重绘图 */
    changeTagShow(item,edb,index) {
      if(edb) { //单个标签
        edb.is_show = !edb.is_show
        item.tagsAllShow = item.edbs.every(_ => _.is_show);
      }else {
        item.edbs.forEach(_ => {
          _.is_show = item.tagsAllShow;
        })
      }
      this.$parent.sectionScatterData.DataList[index].EdbInfoList.forEach(_ => {
        _.IsShow = item.edbs.find(tag => tag.name===_.Name).is_show;
      })
    },

    /* 改变配置 重绘图 */
    changeSeriesOption(item,index) {
      // console.log('dwd')
      this.$parent.sectionScatterData.DataList[index].ShowTrendLine = item.showTrendLine;
      this.$parent.sectionScatterData.DataList[index].ShowRSquare = item.showRSquare;
      this.$parent.sectionScatterData.DataList[index].ShowFitEquation = item.showFitEquation;
    },

    /* 系列配置弹窗 */
    openSetDialog(item,index) {
      //系列1
      if(index === 0) {
        this.isOpenSeriesDialog = true;
      }else {
        const { series_name,color } = item;
        const { x_date,x_date_type,x_date_value,y_date,y_date_type,y_date_value } = item.edbs[0];

        this.dialogForm = {
          show: true,
          index,
          x_date,
          x_date_type,
          x_date_value,
          y_date,
          y_date_type,
          y_date_value,
          series_name,
          color
        }
        console.log( this.dialogForm)
      }
    },

    /* 保存系列配置 */
    saveSeriesOpt(params) {
      this.$set(this.seriesArr,0,{
        ...this.seriesArr[0],
        ...params
      })
      //更新其他系列关联信息
      this.seriesArr.length > 1 && this.updateOtherSeries();

      this.activeNames = [1];
      this.getPreviewData()
    },

    updateOtherSeries() {
      const {x_title,x_unit,y_title,y_unit,edbs} = this.seriesArr[0];
      this.seriesArr.forEach((_,index) => {
        if(index) {
          _.x_title = this.seriesArr[0].x_title;
          _.x_unit = this.seriesArr[0].x_unit;
          _.y_title = this.seriesArr[0].y_title;
          _.y_unit = this.seriesArr[0].y_unit;
          const { x_date,x_date_type,x_date_value,y_date,y_date_type,y_date_value  } = _.edbs[0];
          _.edbs = edbs.map((_edb,edb_index) =>({
            name: _edb.name,
            is_show: _.edbs[edb_index] ? _.edbs[edb_index].is_show : false,
            x_target_id: _edb.x_target_id,
            x_target_name: _edb.x_target_name,
            y_target_id: _edb.y_target_id,
            y_target_name: _edb.y_target_name,
            x_date,
            x_date_type,
            x_date_value,
            y_date,
            y_date_type,
            y_date_value,
          }))

          _.tagsAllShow = _.edbs.every(_ => _.is_show);
        }
      })
      console.log(this.seriesArr)
    },

    /* 新增系列弹窗 */
    addSeriesHandle() {
      this.dialogForm.show = true;
      this.dialogForm.color = defaultOpts.colors[this.seriesArr.length];
    },

    /* 保存新增系列 */
    async saveSeries() {
      await this.$refs.formRef.validate();

      const { x_date,x_date_type,x_date_value,y_date,y_date_type,y_date_value,series_name,color} = this.dialogForm;
      
      if(this.dialogForm.index) {
        this.seriesArr[this.dialogForm.index].series_name = series_name; 
        this.seriesArr[this.dialogForm.index].color = color; 
        this.seriesArr[this.dialogForm.index].edbs.forEach(edb => {
          edb.x_date = x_date;
          edb.x_date_type = x_date_type;
          edb.x_date_value = Number(x_date_value);
          edb.y_date = y_date;
          edb.y_date_type = y_date_type;
          edb.y_date_value = Number(y_date_value);
        })
      }else{
        let series_item = {
          x_title: this.seriesArr[0].x_title, 
          x_unit: this.seriesArr[0].x_unit,
          y_title: this.seriesArr[0].y_title,
          y_unit: this.seriesArr[0].y_unit,
          series_name,
          color,
          showTrendLine: false,
          showFitEquation: false,
          showRSquare: false,
          tagsAllShow: false,
          index: this.seriesArr.length+1,
          edbs: this.seriesArr[0].edbs.map(_ => ({
            name: _.name,
            is_show: false,
            x_target_id: _.x_target_id,
            x_target_name: _.x_target_name,
            y_target_id: _.y_target_id,
            y_target_name: _.y_target_name,
            x_date,
            x_date_type,
            x_date_value: Number(x_date_value),
            y_date,
            y_date_type,
            y_date_value: Number(y_date_value),
          }))  
        }
        this.seriesArr.push(series_item)
      }
      console.log(this.seriesArr)
      this.cancelDialog();
      this.getPreviewData()
    },

    cancelDialog() {
      this.$refs.formRef.resetFields();
      this.dialogForm = {
        show: false,
        index: '',
        x_date: '',
        x_date_type: 1,
        x_date_value: '',
        y_date: '',
        y_date_type: 1,
        y_date_value: '',
        series_name: '',
        color: defaultOpts.colors[this.seriesArr.length],
      }
    },

    /* 删除系列 */
    removeSeries(index) {
      this.seriesArr.splice(index,1)
      this.getPreviewData()
    },

    /* 全选 */
    changeAll(item,val) {
        item.tags.forEach(_ => { _.is_show = val ? true : false })
    },

    /* 编辑页数据回显 */
    initDefaultData() {
      if(this.initData) {
        const { SeriesList,XName,YName,XUnitName,YUnitName,XNameEn,YNameEn,XUnitNameEn,YUnitNameEn } = this.initData;
        this.seriesArr = SeriesList.map((_,_index) => ({
          index:_index+1,
          showTrendLine: _.ShowTrendLine,
          showFitEquation: _.ShowFitEquation,
          showRSquare: _.ShowRSquare,
          tagsAllShow: _.EdbInfoList.every(edb => edb.IsShow),
          x_title: XName, 
          x_unit: XUnitName,
          y_title: YName,
          y_unit: YUnitName,
          x_title_en: XNameEn,
          x_unit_en: XUnitNameEn,
          y_title_en: YNameEn,
          y_unit_en: YUnitNameEn,
          series_name: _.Name,
          series_name_en: _.NameEn,
          color: _.Color,
          edbs: _.EdbInfoList.map(edb => ({
            name: edb.Name,
            name_en: edb.NameEn,
            is_show: edb.IsShow,
            x_target_id: edb.XEdbInfoId,
            x_target_name: this.$parent.tableData.find(_ => _.EdbInfoId===edb.XEdbInfoId).EdbName,
            x_date_type: edb.XDateType,
            x_date: edb.XDate,
            x_date_value: Number(edb.XDateValue),
            y_target_id: edb.YEdbInfoId,
            y_target_name: this.$parent.tableData.find(_ => _.EdbInfoId===edb.YEdbInfoId).EdbName,
            y_date_type: edb.YDateType,
            y_date: edb.YDate,
            y_date_value: Number(edb.YDateValue),
          }))
        }))
        console.log(this.seriesArr)
        this.activeNames = [1];
      }
    }
  },
  
  mounted() {
    this.initDefaultData();
  }
}
</script>

<style lang="scss" scoped>
.add-cont {
  align-items: center;
  margin-top: 20px;
  display: flex;
  color: #409eff;
  font-size: 16px;
  cursor: pointer;
}
.target-list {
  .del-icon {
    position: absolute;
    right: 10px;
    font-size: 16px;
    color: #f00;
    cursor: pointer;
  }
  .setting-wrapper {
    .set-header {
      padding: 15px 20px;
      border-bottom: 1px solid #DCDFE6;
    }
    .setting-cont {
      #tag-item { 
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: none;
        margin-bottom: 0;
        .el-icon-view {
          width: 24px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          font-size: 20px;
          color: #409EFF;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.sectionalScatter-option-wrapper {
  .el-input .el-input__inner{
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 30px !important;
  }

  .el-date-editor .el-input__inner {
    height: 27px !important;
    line-height: 27px !important;
    padding: 0 4px 0 25px !important;
  }
}
</style>