<template>
    <el-dialog
      :visible.sync="isShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :title="saveScence==='saveOther'?'图表另存为':'保存'"
      @close="cancelHandle"
      custom-class="dialog savechart-dialog"
      center
      width="560px"
      v-dialogDrag
    >
      <div class="dialog-min">
        <el-form
          ref="diaForm"
          label-position="left"
          label-width="80px"
          :model="form"
          :rules="formRules"
        >
          <el-form-item label="图表名称" prop="name">
            <el-input
              v-model="form.name"
              style="width: 80%"
              placeholder="必填项"
              clearable
            />
          </el-form-item>
          <el-form-item label="图表分类" prop="classify">
            <el-cascader
              v-model="form.classify"
              :options="classifyOptions"
              :props="{
                label: 'ChartClassifyName',
                value: 'ChartClassifyId',
                children: 'Children',
                emitPath: false
              }"
              style="width: 80%"
              placeholder="请选择所属分类"
            />
          </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 chartRelevanceApi,{statisticFeatureInterface} from '@/api/modules/chartRelevanceApi.js';
export default {
	name:'',
	props: {
		isShow: {
			type: Boolean,
		},
    source: {
      type: Number
    },
    saveScence: { //saveOther另存为 ''保存
      type:String,
      default: ''
    },
    chartData: {
      type: Object
    }
	},
	watch: {
		isShow(newval) {
			if(newval) {
				this.getMenu();
        this.form = {
          name: this.saveScence==='saveOther' ? `${this.chartData.ChartName}(1)` : this.chartData.ChartName,
          classify: this.chartData.ChartClassifyId || '',
        }
			}
		},
	},
	data () {
		return {
			classifyOptions:[],//分类列表

      form: {
        name: '',
        classify: ''
      },
      formRules: {
				name:[
					{ required: true, message: '图表名称不能为空', trigger: 'blur' },
				],
				classify:[
					{ required: true, message: '图表分类不能为空', trigger: 'blur' },
				],
			},
		};
	},
	methods: {
		/* 获取分类列表 */
		async getMenu() {
      
      let res = null;
      if(this.chartData.Source===1) {
        res = await dataBaseInterface.chartClassify();
      }else if(this.$route.path==='/relevancechartEditor'&&this.chartData.Source!==1) {
        res = await chartRelevanceApi.classifyList();
      }else if(this.$route.path==='/statisticFeatureChartEditor'&&this.chartData.Source!==1) {
        res = await statisticFeatureInterface.classifyList();
      }

      if(res.Ret !== 200) return
      this.filterNodes(res.Data.AllNodes,this.chartData.Source===1?2:1)

			this.classifyOptions = res.Data.AllNodes || [];
    
		},

		// 递归改变第三级目录结构
		filterNodes(arr,n) {
			arr.length && arr.forEach(item => {
				item.Children && item.Children.length && this.filterNodes(item.Children,n)
				if(item.Level === n) {
					delete item.Children
				}
			})
		},

    /* 加入图库 */
    async saveHandle() {
      await this.$refs.diaForm.validate();
      const { name,classify } = this.form;

      //统计图的2 3 4对应source8 9 10但其实图表source又是7 8 9 别问为什么这样搞问后端 我也乱的一批
      const sourceMap = {
        1: 1,
        2: 8,
        3: 9,
        4: 10
      }
      let Source;
      if(this.$route.path==='/relevancechartEditor') {
        Source = this.source;
      }else if(this.$route.path==='/statisticFeatureChartEditor') {
        Source = sourceMap[this.source]
      }

      let params = {
        Source,
        IsSaveAs: this.saveScence==='saveOther',
        ChartName: name,
        ClassifyId: classify,
        ...this.$parent.chartInfo
      }

      let res = null;
      if(this.$route.path==='/relevancechartEditor') {
        res = await chartRelevanceApi.saveChart(params)
      }else if(this.$route.path==='/statisticFeatureChartEditor') {
        res = await statisticFeatureInterface.saveChart(params);
      } 
      if(res.Ret !== 200) return

      this.$emit('saveBack',{source:this.source,id: res.Data.ChartInfoId})
      this.cancelHandle();
    },
    
		cancelHandle() {
      this.$refs.diaForm.resetFields();
			this.$emit('update:isShow',false)
		}
	},
	created() {},
	mounted() {},
}
</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;
  }
  .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>