<template>
  <el-dialog
		:visible.sync="show"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		@close="cancelHandle"
		custom-class="saveother-dialog"
		center
		width="560px"
		v-dialogDrag
    title="另存为"
  >
    <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 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 futuresInterface from '@/api/modules/futuresBaseApi';
import chartRelevanceApi from '@/api/modules/chartRelevanceApi.js';
import { fittingEquationInterface,statisticFeatureInterface } from '@/api/modules/chartRelevanceApi';
export default {
  props: {
    show: Boolean,
    data: Object,
    fromType: {
      type: String,
      default: ''
    },
    source: { //兼容商品价格图另存 good_price
      type: String,
      default: ''
    }
  },
  watch: {
    show(newval) {
      if(newval) {
        this.getMenu()
        this.form.name = this.data.ChartName + '(1)'
      }
    }
  },
  data() {
    return {
      form: {
        name: '',
        classify: ''
      },
      formRules: {
				name:[
					{ required: true, message: '图表名称不能为空', trigger: 'blur' },
				],
				classify:[
					{ required: true, message: '图表分类不能为空', trigger: 'blur' },
				],
			},
      classifyOptions:[]
    }
  },
  methods: {
    cancelHandle() {
      this.form = {
        name: '',
        classify: ''
      }
      this.$refs.diaForm.resetFields();
      this.$emit("update:show", false);
    },

    /* 获取分类目录结构 */
		async getMenu() {
      
      let res=null
      if([2,5,'good_price'].includes(this.source)){//商品价格
        res=await futuresInterface.classifyList()
      }else if([3,4,'relevance_chart'].includes(this.source)){//相关性图表
        res=await chartRelevanceApi.classifyList()
      }else if([6,'fitting_equation'].includes(this.source)){//拟合方程
        res=await fittingEquationInterface.classifyList()
      }else if([7,8,9,'statistic_feature'].includes(this.source)) { //标准差 百分位 频率图
        res=await statisticFeatureInterface.classifyList()
      }else{
        res=await dataBaseInterface.chartClassify();
      }

      if(res.Ret !== 200) return

      if([2,5,'good_price'].includes(this.source)){//商品价格
        this.filterNodes(res.Data.AllNodes,1)
      }else if([3,4,'relevance_chart'].includes(this.source)){//相关性图表
        this.filterNodes(res.Data.AllNodes,1)
      }else if([6,'fitting_equation'].includes(this.source)){//拟合方程
        this.filterNodes(res.Data.AllNodes,1)
      }else if([7,8,9,'statistic_feature'].includes(this.source)) { //标准差 百分位 频率图
        this.filterNodes(res.Data.AllNodes,1)
      }else{
        this.filterNodes(res.Data.AllNodes,2)
      }

			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 { ChartInfoId } = this.data;
      const { classify,name } = this.form;
      let params = {ChartInfoId,ChartName: name,ChartClassifyId: classify || 0}

      let res=null
      if([2,5,'good_price'].includes(this.source)){//商品价格
        res=await futuresInterface.saveOtherChart(params)
      }else if([3,4,'relevance_chart'].includes(this.source)){//相关性图表
        res=await chartRelevanceApi.saveOtherChart(params)
      }else if([6,'fitting_equation'].includes(this.source)){//拟合方程
        res=await fittingEquationInterface.saveOtherChart(params)
      }else if([7,8,9,'statistic_feature'].includes(this.source)) { //标准差 百分位 频率图
        res=await statisticFeatureInterface.saveOtherChart(params)
      }else{
        res=await dataBaseInterface.saveChartOther(params)
      }

      if(res.Ret !== 200) return

      this.$message.success('保存成功');
      this.cancelHandle();
      this.fromType === 'chartsetting' && this.$emit('ensure',{ code: res.Data.UniqueCode, id: res.Data.ChartInfoId })
    }
  }
}
</script>

<style lang="scss" scoped>
  .dia-bot {
    margin: 52px 0 30px;
    display: flex;
    justify-content: center;
  }
</style>
<style lang="scss">
.saveother-dialog {
  .el-input{ width: 100%; }

}
</style>