<template>
    <el-dialog
      :visible.sync="isShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      title="保存"
      @close="cancelHandle"
      custom-class="savechart-dialog"
      center
      width="650px"
      v-dialogDrag
    >
      <div class="dialog-min">
        <div class="top">
          <el-checkbox-group v-model="checkCharts" style="margin-bottom: 10px;">
            <el-checkbox :label="item.key" v-for="item in chartsType" :key="item.key">{{item.name}}</el-checkbox>
          </el-checkbox-group>

          <el-cascader
            v-model="form.classify"
            :options="classifyOptions"
            :props="{
              label: 'ChartClassifyName',
              value: 'ChartClassifyId',
              children: 'Children',
              emitPath: false
            }"
            style="width: 100%"
            placeholder="请选择所属分类"
            clearable
            @change="setClassifyAll"
          />
        </div>
        <el-form
          ref="diaForm"
          label-position="left"
          label-width="120px"
          :model="form"
          :rules="formRules"
        >
          <el-form-item label="弹性系数（a）" prop="aName" v-if="checkCharts.includes(5)">
            <el-input
              v-model="form.aName"
              style="width: 40%"
              placeholder="请填写图表名称"
              clearable
            />
            <el-cascader
              v-model="form.aClassify"
              :options="classifyOptions"
              :props="{
                label: 'ChartClassifyName',
                value: 'ChartClassifyId',
                children: 'Children',
                emitPath: false
              }"
              style="width: 40%"
              placeholder="请选择所属分类"
              clearable
            />
          </el-form-item>
          <el-form-item label="截距（b）" prop="bName" v-if="checkCharts.includes(6)">
            <el-input
              v-model="form.bName"
              style="width: 40%"
              placeholder="请填写图表名称"
              clearable
            />
            <el-cascader
              v-model="form.bClassify"
              :options="classifyOptions"
              :props="{
                label: 'ChartClassifyName',
                value: 'ChartClassifyId',
                children: 'Children',
                emitPath: false
              }"
              style="width: 40%"
              placeholder="请选择所属分类"
              clearable
            />
          </el-form-item>
          <el-form-item label="相关系数（r²）" prop="relevanceName" v-if="checkCharts.includes(7)">
            <el-input
              v-model="form.relevanceName"
              style="width: 40%"
              placeholder="请填写图表名称"
              clearable
            />
             <el-cascader
              v-model="form.relevanceClassify"
              :options="classifyOptions"
              :props="{
                label: 'ChartClassifyName',
                value: 'ChartClassifyId',
                children: 'Children',
                emitPath: false
              }"
              style="width: 40%"
              placeholder="请选择所属分类"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="dia-bot">
        <el-button type="primary" style="margin-right: 20px" @click="saveHandle"
          >保存</el-button
        >
        <el-button type="primary" plain @click="cancelHandle">取消</el-button>
      </div>
    </el-dialog>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
import { fittingEquationInterface } from '@/api/modules/chartRelevanceApi';
export default {
	name:'',
	props: {
		isShow: {
			type: Boolean
		},
    initData: {
      type: Array
    }
	},
	watch: {
		isShow(newval) {
			if(newval) {
				this.getMenu();
        if(!this.initData.length) return
        this.checkCharts = this.initData.map(_ => _.Source);
        this.form = {
          aName: this.initData.find(_ => _.Source===5) ? this.initData.find(_ => _.Source===5).ChartName : '',
          bName: this.initData.find(_ => _.Source===6) ? this.initData.find(_ => _.Source===6).ChartName : '',
          relevanceName: this.initData.find(_ => _.Source===7) ? this.initData.find(_ => _.Source===7).ChartName : '',
          classify: '',
          aClassify: this.initData.find(_ => _.Source===5) ? this.initData.find(_ => _.Source===5).ChartClassifyId : '',
          bClassify: this.initData.find(_ => _.Source===6) ? this.initData.find(_ => _.Source===6).ChartClassifyId : '',
          relevanceClassify: this.initData.find(_ => _.Source===7) ? this.initData.find(_ => _.Source===7).ChartClassifyId : ''
        }
			}
		},
	},
	data () {
		return {
			classifyOptions:[],//分类列表

      checkCharts: [5,6,7],
      chartsType: [
        { name: '弹性系数a',key: 5 },
        { name: '截距b',key: 6 },
        { name: '相关系数r²',key: 7 },
      ],

      form: {
        aName: '',
        bName: '',
        relevanceName: '',
        classify: '',
        aClassify: '',
        bClassify: '',
        relevanceClassify: ''
      },
      formRules: {
				aName:[
					{ required: true, message: '图表名称不能为空', trigger: 'blur' },
				],
				bName:[
					{ required: true, message: '图表名称不能为空', trigger: 'blur' },
				],
				relevanceName:[
					{ required: true, message: '图表名称不能为空', trigger: 'blur' },
				],
				classify:[
					{ required: true, message: '图表分类不能为空', trigger: 'blur' },
				],
			},
		};
	},
	methods: {
		/* 获取分类列表 */
		async getMenu() {
      const res = await fittingEquationInterface.classifyOne();
      if(res.Ret !== 200) return
      this.classifyOptions = res.Data.AllNodes;
		},

    /* 同步全部分类 */
    setClassifyAll() {
      if(this.form.classify) {
        this.form.aClassify = this.form.classify;
        this.form.bClassify = this.form.classify;
        this.form.relevanceClassify = this.form.classify;

      }
    },

    /* 加入图库 */
    async saveHandle() {
      if(!this.checkCharts.length) return this.$message.warning('请至少选择一个图表')
      await this.$refs.diaForm.validate();

      const { MultipleGraphConfigId,DateType,date,xEdbs,yEdbs } = this.$parent.leftOption;
      console.log(this.$parent.leftOption.xEdbs,this.$parent.leftOption.yEdbs)
      const {  
        aName,
        bName,
        relevanceName,
        classify,
        aClassify,
        bClassify,
        relevanceClassify,
      } = this.form;
      let nameMap = {
        5: {
          name: aName,
          classify: aClassify
        },
        6: {
          name: bName,
          classify: bClassify
        },
        7: {
          name: relevanceName,
          classify: relevanceClassify
        },
      }

      let params = {
        MultipleGraphConfigId,
        ExtraConfig: {
          DateType,
          StartDate: date[0] || '',
          EndDate: date[1] || '',
          XEdbInfoIdList: xEdbs.map(_ => _.id),
				  YEdbInfoIdList: yEdbs.map(_ => _.id)
        },
        BatchAddChart: this.checkCharts.map(_ => ({
          Source: _,
          ChartClassifyId: nameMap[_].classify,
          ChartName: nameMap[_].name
        }))
      }
      console.log(params)
      let res = await fittingEquationInterface.chartEdit(params)
      if(res.Ret !== 200) return

      this.$message.success('保存成功')

      this.cancelHandle();
      this.$emit('saveBack',{code: res.Data.UniqueCode,id: res.Data.ChartInfoId})
    },
    
		cancelHandle() {
      this.$refs.diaForm.resetFields();
      this.form = {
        aName: '',
        bName: '',
        relevanceName: '',
        classify: '',
        aClassify: '',
        bClassify: '',
        relevanceClassify: ''
      },
			this.$emit('update:isShow',false)
		}
	},
}
</script>
<style lang="scss" scoped>
.savechart-dialog {
  .el-dialog--center .el-dialog__body {
    padding: 25px 25px 30px !important;
  }
  .dialog-min {
    padding: 20px 0 0 30px;
    .top {
      margin-bottom: 15px;
    }
  }
  .dia-bot {
    margin: 52px 0 30px;
    display: flex;
    justify-content: center;
  }
}
</style>
<style lang="scss">
.savechart-dialog {
  .el-input{ width: 100%; }
  .el-form-item { margin-bottom: 22px; }
}
</style>