<template>
  <div class="commodity-chart-editor-container" id="box">
    <span
      class="slide-icon slide-right"
      @click="isSlideLeft = !isSlideLeft"
      v-show="isSlideLeft"
    >
      <i class="el-icon-d-arrow-right"></i>
    </span>
    <div class="left-cont" v-show="!isSlideLeft" id="left">
      <div class="left-top">
        <el-button type="primary" plain @click="$router.back()">取消</el-button>
      </div>
      <div class="left-min">
        <el-form
          ref="diaForm"
          label-position="top"
          label-width="80px"
          :model="chartInfo"
          :rules="chartRules"
        >
          <el-form-item class="label-left" label="指标A" prop="EdbInfoIdA">
              <selectTarget  
                :defaultId="chartInfoData.EdbInfoList?chartInfoData.EdbInfoList[0].EdbInfoId:''"
                :defaultOpt="chartInfoData.EdbInfoList?[chartInfoData.EdbInfoList[0]]:[]"
                :defaultType="chartInfoData.EdbInfoList?chartInfoData.EdbInfoList[0].EdbInfoCategoryType:''"
                @select="handleSelectTargetA"
              />
          </el-form-item>
          <el-form-item class="label-left" label="指标B" prop="EdbInfoIdB">
              <selectTarget 
                :defaultId="chartInfoData.EdbInfoList?chartInfoData.EdbInfoList[1].EdbInfoId:''"
                :defaultOpt="chartInfoData.EdbInfoList?[chartInfoData.EdbInfoList[1]]:[]" 
                :defaultType="chartInfoData.EdbInfoList?chartInfoData.EdbInfoList[1].EdbInfoCategoryType:''"
                @select="handleSelectTargetB"
              />
          </el-form-item>
        </el-form>

        <div class="section">
          <div>曲线图</div>
          <div class="section-item">
            <span style="flex-shrink:0;min-width:50px;">时间:</span>
            <el-select
                style="max-width: 120px;flex:1;"
                v-model="chartInfo.Curve.DateType"
                placeholder="请选择"
                @change="getPreviewSplineChart"
            >
              <el-option
                  v-for="item in yearSelector"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
              />
            </el-select>
            <date-picker
              v-model="chartInfo.Curve.Date"
              v-show="chartInfo.Curve.DateType===5"
              style="width:150px;margin-left:10px;"
              type="month"
              range
              value-type="format"
              placeholder="请选择时间段"
              @change="dateChange"
            />
          </div>
          <div class="section-item">
            <span style="flex-shrink:0;min-width:50px;">左轴:</span>
            <el-input
              style="flex:2;margin-left:5px;margin-right:10px"
              :step="1"
              type="number"
              v-model="chartInfo.Curve.LeftMin"
              @change="val => { chartInfo.Curve.LeftMin=Number(val);changeSplineOption() }"
            />
            <span>至</span>
            <el-input
              style="flex:2;margin-left:5px;"
              :step="1"
              type="number"
              v-model="chartInfo.Curve.LeftMax"
              @change="val => { chartInfo.Curve.LeftMax=Number(val);changeSplineOption() }"
            />
          </div>
          <div class="section-item">
            <span style="flex-shrink:0;min-width:50px;">右轴:</span>
            <el-input
              style="flex:2;margin-left:5px;margin-right:10px"
              :step="1"
              type="number"
              v-model="chartInfo.Curve.RightMin"
              @change="val => { chartInfo.Curve.RightMin=Number(val);changeSplineOption() }"
            />
            <span>至</span>
            <el-input
              style="flex:2;margin-left:5px;"
              :step="1"
              type="number"
              v-model="chartInfo.Curve.RightMax"
              @change="val => { chartInfo.Curve.RightMax=Number(val);changeSplineOption() }"
            />
          </div>
          <div class="section-item">
            <span style="flex-shrink:0;min-width:50px;">指标B:</span>
            <el-checkbox v-model="chartInfo.Curve.IsOrder"  @change="getPreviewSplineChart">逆序</el-checkbox>
          </div>
          <div class="section-item" style="align-items: flex-start;margin-left:50px;">
            <el-radio
              v-model="chartInfo.Curve.EdbInfoType"
              :label="true"
              style="margin-right:10px;"
              @change="getPreviewSplineChart"
            >标准指标</el-radio>
            <div>
              <el-radio
                v-model="chartInfo.Curve.EdbInfoType"
                :label="false"
                @change="getPreviewSplineChart"
              >领先指标</el-radio>
              <div style="margin-top: 10px;" v-if="chartInfo.Curve.EdbInfoType===false">
                领先
                <el-input
                  style="width: 60px"
                  size="mini"
                  type="number"
                  v-model="chartInfo.Curve.LeadValue"
                  @change="(val) => { chartInfo.Curve.LeadValue = Number(val);getPreviewSplineChart()}"
                ></el-input>
                <el-select
                  v-model="chartInfo.Curve.LeadUnit"
                  placeholder=""
                  size="mini"
                  style="width: 60px"
                  @change="getPreviewSplineChart"
                >
                  <el-option
                      v-for="item in unitOpt"
                      :key="item.val"
                      :label="item.label"
                      :value="item.val"
                  />
                </el-select>
              </div>
            </div>
          </div>
        </div>  

        <div class="section">
          <div>相关性</div>
          <div class="section-item">
            <div style="flex-shrink:0;min-width:70px"><span style="color:red;font-size:18px;">*</span>计算窗口</div>
            <el-input
              style="flex:2;margin-left:5px;margin-right:10px"
              :step="1"
              type="number"
              v-model="chartInfo.Correlation.CalculateValue"
              @change="val => { chartInfo.Correlation.CalculateValue = Number(val); }"
            />
            <el-select
                style="flex:1"
                v-model="chartInfo.Correlation.CalculateUnit"
                placeholder="请选择"
            >
            <el-option
                v-for="item in unitOpt"
                :key="item.val"
                :label="item.label"
                :value="item.val"
            />
            </el-select>
          </div>
          <div class="section-item">
            <div style="flex-shrink:0;min-width:70px"><span style="color:red;font-size:18px;">*</span>分析周期</div>
            <el-input
              style="flex:2;margin-left:5px;margin-right:10px"
              :step="1"
              type="number"
              v-model="chartInfo.Correlation.LeadValue"
              @change="val => { chartInfo.Correlation.LeadValue = Number(val); }"
            />
            <el-select
                style="flex:1"
                v-model="chartInfo.Correlation.LeadUnit"
                placeholder="请选择"
            >
            <el-option
                v-for="item in unitOpt"
                :key="item.val"
                :label="item.label"
                :value="item.val"
            />
            </el-select>
          </div>
        </div>


      <div class="section" v-for="(item,index) in chartInfo.RollingCorrelation" :key="index">
        <div>滚动相关性{{index+1}}</div>
        <div class="section-item">
          <span style="flex-shrink:0;min-width:70px">计算窗口</span>
          <el-input
            style="flex:2;margin-left:5px;margin-right:10px"
            :step="1"
            type="number"
            v-model="item.CalculateValue"
            @change="val => { item.CalculateValue = Number(val); }"
          />
          <el-select
              style="flex:1"
              v-model="item.CalculateUnit"
              placeholder="请选择"
          >
          <el-option
              v-for="item in unitOpt"
              :key="item.val"
              :label="item.label"
              :value="item.val"
          />
          </el-select>
        </div>
        <div class="section-item">
          <span style="flex-shrink:0;min-width:70px">B领先A</span>
          <el-input
            style="flex:2;margin-left:5px;margin-right:10px"
            :step="1"
            type="number"
            v-model="item.LeadValue"
            @change="val => { item.LeadValue = Number(val); }"
          />
          <el-select
              style="flex:1"
              v-model="item.LeadUnit"
              placeholder="请选择"
          >
          <el-option
              v-for="item in unitOpt"
              :key="item.val"
              :label="item.label"
              :value="item.val"
          />
          </el-select>
        </div>
      </div>

        <el-button type="primary" style="float:right" @click="handlePreviewChart">确定</el-button>
      </div>
      <span
        class="move-btn resize"
        v-drag
        id="resize"
        @mousemove="dynamicNode && resetNodeStyle(dynamicNode)"
      ></span>
      <span class="slide-icon slide-left" @click="isSlideLeft = !isSlideLeft">
        <i class="el-icon-d-arrow-left"></i>
      </span>
    </div>
    <div
      class="right-cont"
      id="right"
      :style="isSlideLeft ? 'width:100%' : `width:80%`"
    >
      <div
        class="chart-min-cont"
        v-if="chartBatchData"
      >
        <!-- v-if="chartBatchData" -->
        <!-- <el-row> -->
          <div class="card-wrapper">
            <chartCard 
              :entryType="1"
              ref="chartCard1"
              :data="chartBatchData.CurveData"
              :settings="chartInfo"
              :isChartAdd="buttonAuth.isCurveChartAdd"
              @saveChart="saveChartToBaseHandle"
            />
          </div>
          <div class="card-wrapper" v-if="chartBatchData.CorrelationData">
            <chartCard 
              :entryType="2"
              ref="chartCard2"
              :data="chartBatchData.CorrelationData"
              :settings="chartInfo"
              :isChartAdd="buttonAuth.isRelevanceChartAdd"
              @saveChart="saveChartToBaseHandle"
            />
          </div>
          <template v-if="chartBatchData.RollingCorrelationData">
            <div class="card-wrapper" v-if="chartBatchData.RollingCorrelationData[0]">
              <chartCard 
                :entryType="3"
                ref="chartCard3"
                :data="chartBatchData.RollingCorrelationData[0]"
                :settings="chartInfo"
                :isChartAdd="buttonAuth.isRollChartAdd"
                :isEdbAdd="buttonAuth.isRollEdbAdd"
                @saveChart="saveChartToBaseHandle"
                @saveEdb="saveEdbToBaseHandle"
              />
            </div>
            <div class="card-wrapper" v-if="chartBatchData.RollingCorrelationData[1]">
              <chartCard 
                :entryType="4"
                ref="chartCard4"
                :data="chartBatchData.RollingCorrelationData[1]"
                :settings="chartInfo"
                :isChartAdd="buttonAuth.isRollChartTwoAdd"
                :isEdbAdd="buttonAuth.isRollEdbTwoAdd"
                @saveChart="saveChartToBaseHandle"
                @saveEdb="saveEdbToBaseHandle"
              />
            </div>
          </template>
      </div>

      <div class="nodata" v-else>
        <img
          src="~@/assets/img/data_m/table_no.png"
          alt=""
          style="display: block; width: 140px; height: 148px; margin: 0 auto"
        />
        暂无信息
      </div>
    </div>

    <!-- 图表保存入库 -->
    <saveChartToBase
      :isShow.sync="isSaveChartToBase"
      :source="saveSource"
      :saveScence="saveScence"
      :chartData="chartData"
      @saveBack="saveChartBack"
    />

    <!-- 指标保存入库 -->
    <saveEdbToBase
      :isShow.sync="isSaveEdbToBase"
      :source="saveSource"
      :saveScence="saveScence"
      :chartData="chartData"
      @saveBack="saveEdbBack"
    />
  </div>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
import {yearSelector} from '@/utils/defaultOptions';
import chartRelevanceApi from '@/api/modules/chartRelevanceApi';
import selectTarget from './components/selectTarget.vue'
import chartCard from './components/chartCard.vue';
import SaveChartOther from '@/views/dataEntry_manage/components/SaveChartOther';
import saveChartToBase from './components/saveChartTobaseDia.vue';
import saveEdbToBase from './components/saveEdbToBaseDia.vue'
export default {
  components: { selectTarget,chartCard,SaveChartOther,saveChartToBase,saveEdbToBase },
  directives: {
    drag(el, bindings) {
      el.onmousedown = function (e) {
        var init = e.clientX;
        // console.log(init);
        var box = $('#box')[0];
        // console.log(box.clientWidth)
        let total_wid = box.offsetWidth;
        var left = $('#left')[0];
        var right = $('#right')[0];
        var initWidth = left.offsetWidth;
        document.onmousemove = function (e) {
          var end = e.clientX;
          var newWidth = end - init + initWidth;
          left.style.width = newWidth + 'px';
          right.style.width = newWidth > 300 ? total_wid - newWidth + 'px' : total_wid - 320 + 'px';
        };
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null;
          e.releaseCapture && e.releaseCapture();
        };
        e.setCapture && e.setCapture();
        return false;
      };
    },
  },
  data() {
    return {
      chart_code: this.$route.query.code || '',
      isSlideLeft: false,
      chartInfoData: {},
      chartBatchData:null,

      yearSelector: [
        ...yearSelector,
        { name: '自定义',value: 5 }
      ],
      chartInfo: {
        MultipleGraphConfigId: 0,
        EdbInfoIdA: 0,
        EdbInfoIdB: 0,
        Curve: {
          DateType:yearSelector[0].value,
          Date: [],
          StartDate: '',
          EndDate: '',
          LeftMin: 0,
          LeftMax: 0,
          RightMin: 0,
          RightMax: 0,
          IsOrder: false,
          EdbInfoType: true,
          LeadValue: 0,
          LeadUnit: '天'
        },
        Correlation: {
          LeadValue: 0,
          LeadUnit: '天',
          CalculateValue: 0,
          CalculateUnit: '天'
        },
        RollingCorrelation: [
          {
            LeadValue: 0,
            LeadUnit: '天',
            CalculateValue: 0,
            CalculateUnit: '天'
          },
          {
            LeadValue: 0,
            LeadUnit: '天',
            CalculateValue: 0,
            CalculateUnit: '天'
          }
        ]
      },
      unitOpt:[
          {label:'年',val:'年'},
          {label:'季',val:'季'},
          {label:'月',val:'月'},
          {label:'周',val:'周'},
          {label:'天',val:'天'},
      ],
      operationType:'preview',
      chartRules: {
        EdbInfoIdA:[
          {required: true, message: '指标A不能为空', trigger: 'blur'}
        ],
        EdbInfoIdB:[
          {required: true, message: '指标B不能为空', trigger: 'blur'}
        ],
        leadValue: [
          { required: true, message: '分析不能为空', trigger: 'blur' },
        ],
        timeValue:[
            {required: true, message: '时间不能为空', trigger: 'blur'}
        ]
      },

      isSave:false,//正在保存
      buttonAuth: { //按钮控制
        isCurveChartAdd: false,
        isRelevanceChartAdd: false,
        isRollChartAdd: false,
        isRollEdbAdd: false,
        isRollChartTwoAdd: false,
        isRollEdbTwoAdd: false,
      },

      isShowSaveOther: false,

      /* 图表入库 */
      isSaveChartToBase: false,
      saveSource:0,//图表位置1 2 3 4
      chartData: {},
      saveScence: '',//另存为

       /* 指标入库 */
      isSaveEdbToBase: false,

    };
  },
  methods: {

    async getOptionDetail() {
      if(!this.chart_code) return
      const res = await chartRelevanceApi.getOptionByCode({ UniqueCode: this.chart_code });

      if(res.Ret !== 200) return 

      this.chartInfoData = {
        EdbInfoList: res.Data.EdbInfoList
      }

      const { MultipleGraphConfigId,EdbInfoIdA,EdbInfoIdB,Curve,Correlation,RollingCorrelation } = res.Data.MultipleGraphConfig;
      this.chartInfo = {
        MultipleGraphConfigId,
        EdbInfoIdA,
        EdbInfoIdB,
        Curve: {
          ...JSON.parse(Curve),
          Date: [JSON.parse(Curve).StartDate,JSON.parse(Curve).EndDate],
        },
        Correlation: JSON.parse(Correlation),
        RollingCorrelation: JSON.parse(RollingCorrelation)
      }

      this.buttonAuth =  {
        isCurveChartAdd: res.Data.ChartMappingList.some(_ => _.MultipleLocationSource===1),
        isRelevanceChartAdd: res.Data.ChartMappingList.some(_ => _.MultipleLocationSource===2),
        isRollChartAdd: res.Data.ChartMappingList.some(_ => _.MultipleLocationSource===3),
        isRollEdbAdd: res.Data.EdbMappingList.some(_ => _.MultipleLocationSource===3),
        isRollChartTwoAdd: res.Data.ChartMappingList.some(_ => _.MultipleLocationSource===4),
        isRollEdbTwoAdd: res.Data.EdbMappingList.some(_ => _.MultipleLocationSource===4)
      }

      this.getPreviewChartData(); 
    },

    //校验规则
    checkValue() {
      //只用于校验规则条件大小
      let checkBool = true;
      const valueMap = {
        '年': 365,
        '季': 90,
        '月': 30,
        '周': 7,
        '天': 1
      }
      const { Correlation,RollingCorrelation } = this.chartInfo;
      if(Correlation.CalculateValue*valueMap[Correlation.CalculateUnit] < Correlation.LeadValue*valueMap[Correlation.LeadUnit]*2) {
        this.chartInfo.Correlation.CalculateValue = '';
        this.$message.warning('相关性计算窗口必须≥2*分析周期')
        checkBool = false
      }
      // else if(RollingCorrelation[0].CalculateValue*valueMap[RollingCorrelation[0].CalculateUnit] >= Correlation.CalculateValue*valueMap[Correlation.CalculateUnit]) {
      //   this.chartInfo.RollingCorrelation[0].CalculateValue = '';
      //   this.$message.warning('滚动相关性1计算窗口必须小于相关性计算窗口')
      //   checkBool = false
      // }
      // else if(RollingCorrelation[1].CalculateValue*valueMap[RollingCorrelation[1].CalculateUnit] >= Correlation.CalculateValue*valueMap[Correlation.CalculateUnit]) {
      //   this.chartInfo.RollingCorrelation[1].CalculateValue = '';
      //   this.$message.warning('滚动相关性2计算窗口必须小于相关性计算窗口')
      //   checkBool = false
      // }
      
      return checkBool
    },

    dateChange(val) {
      this.chartInfo.Curve.DateType = 5;
      if(val[0]) {
        this.chartInfo.Curve.StartDate = val[0];
        this.chartInfo.Curve.EndDate = val[1];
      }else {
        this.chartInfo.Curve.StartDate = '';
        this.chartInfo.Curve.EndDate = '';
      }
    },

    // 确定保存图表配置
    async handlePreviewChart(){
      await this.$refs.diaForm.validate();
      let checkBool = this.checkValue();
  
      if(!checkBool) return
      let params = {
       ...this.chartInfo 
      }
      const res = await chartRelevanceApi.chartOptionsSet(params);
      if(res.Ret !== 200) return

      const { MultipleGraphConfigId } = res.Data;
      this.chartInfo.MultipleGraphConfigId = MultipleGraphConfigId;
      this.getPreviewChartData()
      
    },

    async getPreviewChartData(){
      let params = {
       ...this.chartInfo 
      }
      const res = await chartRelevanceApi.previewChartBatch(params);
      if(res.Ret !== 200) return
      this.chartBatchData = res.Data;
          
    },

    /* 动态获取曲线图数据 */
    async getPreviewSplineChart() {
      if(!this.chartInfo.EdbInfoIdA || !this.chartInfo.EdbInfoIdB) return
      let params = {
       ...this.chartInfo 
      }
      const res = await chartRelevanceApi.previewSplineChart(params);
      if(res.Ret !== 200) return
      this.chartBatchData = this.chartBatchData ? {
        ...this.chartBatchData,
        CurveData: res.Data.CurveData
      } : { CurveData: res.Data.CurveData};
    },

    /* 曲线配置变化时重绘 */
    changeSplineOption() {
      const { LeftMin,LeftMax,RightMin,RightMax,IsOrder } = this.chartInfo.Curve;
      console.log(this.$refs.chartCard1.options)
      this.$refs.chartCard1.options.yAxis[0].max = Number(LeftMax);
      this.$refs.chartCard1.options.yAxis[0].min = Number(LeftMin);

      this.$refs.chartCard1.options.yAxis[1].max = Number(RightMax);
      this.$refs.chartCard1.options.yAxis[1].min = Number(RightMin);
      this.chartBatchData.CurveData.EdbInfoList[1].IsOrder = IsOrder;
    },

    // A指标选择
    async handleSelectTargetA(e){
      if(!e) return
      this.chartInfo.EdbInfoIdA=e.EdbInfoId;
      const {max,min} = await this.getEdbDetail(e);
      this.chartInfo.Curve.LeftMin = min;
      this.chartInfo.Curve.LeftMax = max;
      this.getPreviewSplineChart()
    },

    //选择指标后填入上下限
    async getEdbDetail({EdbInfoId,EdbInfoType}) {
       
      const { Data } = EdbInfoType 
      ? await preDictEdbInterface.edbDetail({EdbInfoId})
      : await dataBaseInterface.calculateDetail({EdbInfoId})

      return { 
        max: EdbInfoType ? Data.MaxValue : Data.EdbInfoDetail.MaxValue,
        min: EdbInfoType ? Data.MinValue : Data.EdbInfoDetail.MinValue,
      }
    },

    // B指标选择
    async handleSelectTargetB(e){
      if(!e) return
      this.chartInfo.EdbInfoIdB=e.EdbInfoId;
      const {max,min} = await this.getEdbDetail(e);
      this.chartInfo.Curve.RightMin = min;
      this.chartInfo.Curve.RightMax = max;
      this.getPreviewSplineChart()
    },

    reloadRightWid() {
      let total_wid = $('#box')[0].offsetWidth;
      let left = $('#left')[0].offsetWidth;
      let rigtWid = total_wid - left - 20 + 'px';
      $('#right')[0].style.width = rigtWid;
    },

    /* 保存指标入库 */
    saveEdbToBaseHandle({type,chartData,scence}) {
      this.saveSource = type;
      this.chartData = chartData;
      this.saveScence = scence;
      this.isSaveEdbToBase = true;
    },

    /* 保存完指标 按钮控制 */
    saveEdbBack({source}) {
      if(source===3) this.buttonAuth.isRollEdbAdd = true;
      else if(source===4)  this.buttonAuth.isRollEdbTwoAdd = true;
    },

    /* 保存图表 */
    saveChartToBaseHandle({type,chartData,scence}) {
      this.saveSource = type;
      this.chartData = chartData;
      this.saveScence = scence;
      this.isSaveChartToBase = true;
    },


    /* 保存完图表 */
    saveChartBack({source,id}) {
      this.$message.success('保存成功');
      this.setButtonAuth(source);
      //封面图
      this.$refs[`chartCard`+source].setChartImage(source,id)
    },
    
    /* 保存图表后按钮控制 */
    setButtonAuth(source) {
      const sourceMap = {
        1: 'isCurveChartAdd',
        2: 'isRelevanceChartAdd',
        3: 'isRollChartAdd',
        4: 'isRollChartTwoAdd'
      }
      this.buttonAuth[sourceMap[source]] = true;
    }
  },
  mounted() {
    this.getOptionDetail();
    window.addEventListener('resize', this.reloadRightWid);
  },
  destroyed() {
    window.removeEventListener('resize', this.reloadRightWid);
  }
};
</script>
<style lang="scss">
.commodity-chart-editor-container {
  $font-small: 12px;
  $font-normal: 14px;

  display: flex;
  * {
    box-sizing: border-box;
  }
  .el-form--label-top .el-form-item__label {
    padding: 0;
  }
  .label-left{
      display: flex;
      margin-top: 20px;
      .el-form-item__label{
          flex-shrink: 0;
          margin-right: 10px;
      }
      .el-date-editor.el-input, .el-date-editor.el-input__inner{
          width: auto;
      }
  }
  .el-input-number .el-input__inner {
    // padding: 0 34px 0 4px;
  }
  .target-other-name .el-input__inner {
    padding: 0 30px 0 5px !important;
    height: 40px !important;
    line-height: 40px !important;
  }
  .el-color-picker--mini .el-color-picker__trigger {
    width: 60px;
    height: 25px;
    padding: 0;
  }
  .el-color-picker--mini .el-color-picker__mask {
    width: 60px;
    height: 25px;
  }

  .slide-icon {
    padding: 20px 0;
    /* display: block; */
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    &:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }
    &.slide-left {
      right: 0;
    }
    &.slide-right {
      left: 0;
    }
  }
  .left-cont {
    width: 380px;
    min-width: 380px;
    background: #fff;
    margin-right: 20px;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
    height: calc(100vh - 113px);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    .left-top {
      padding: 15px 20px;
      border-bottom: 1px solid #ececec;
      box-shadow: 0px 3px 6px rgba(167, 167, 167, 0.09);
    }
    .left-min {
      padding: 20px;
      max-height: calc(100vh - 190px);
      overflow-y: auto;
      
      .section {
        border-top: 1px dashed #DCDFE6;
        margin-top: 20px;
        padding-top: 15px;
        .section-item{
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #606266;
          margin: 10px 0;
        }
      }

      .left-bottom {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
     
    }
    .move-btn {
      height: 100%;
      width: 4px;
      position: absolute;
      right: 0px;
      top: 0;
      &:hover {
        cursor: col-resize;
      }
    }
  }
  .right-cont {
    width: 80%;
    /* =================== */
    .chart-min-cont {
      /* background: #fff; */
      height: calc(100vh - 118px);
      overflow-y: auto;
      display: flex;
      flex-wrap: wrap;
      .card-wrapper {
        width: 48%;
        border: 1px solid #ececec;
        border-radius: 4px;
        background: #fff;
        margin-bottom: 20px;
        min-height: 350px;
        &:nth-child(2n) {
          margin-left: 15px;
        } 
        .card-item {
          padding: 20px;
          .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
          }
          .title {
            /* max-width: 250px; */
            font-size: 15px;
            text-align: left;
            margin: 10px 0;
          }
        }
      }
    }
    .nodata {
      height: calc(100vh - 120px);
      background-color: #fff;
      text-align: center;
      font-size: 16px;
      color: #666;
      padding: 100px 0;
    }
  }
}
</style>
<style lang="scss">
.commodity-chart-editor-container  {
  .edb-item-style .el-input__icon {
    line-height: 27px;
  }
  .mx-datepicker {
    width: 200px !important;
  }
}
</style>
