<template>
  <div class="addMyClassifyDia-container">
    <el-dialog
      :visible.sync="isAddMyDialog"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="cancelHandle"
      custom-class="dialog"
      center
      width="560px"
      v-dialogDrag
    >
      <div slot="title" style="display: flex; alignitems: center">
        <!-- <img :src="title=='添加'?$icons.add:title=='编辑'?$icons.edit:''" style="color:#fff;width:16px;height:16px;marginRight:5px;"> -->
        <span style="font-size: 16px">选择我的分类</span>
      </div>
      <div class="dialog-min">
        <div class="classify-cont">
          <el-tag
            v-for="item in classifyArr"
            :class="['classify-tag',{'act': selected_classify.includes(item.MyChartClassifyId)}]"
            :key="item.MyChartClassifyId"
            type="info"
            effect="plain"
            @click="chooseClassify(item.MyChartClassifyId)"
          >
            {{ item.MyChartClassifyName }}
          </el-tag>
        </div>
        <span class="add-cont" @click="addClassify">
          <i class="el-icon-circle-plus-outline" />
          新增
        </span>
      </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>

		<!-- 加入我的图库 -->
		<pub-dialog
      :isShow="isClassifyDia"
      :title="dia_title"
      :keysArr="dialogKeyArrs"
			:formData="formData"
			:formRules="addRules"
      @cancel="isClassifyDia = false"
      @ensureCallBack="addNewClassifyHandle"
    />
  </div>
</template>

<script>
import { mychartInterface } from '@/api/api.js'
import pubDialog from '@/components/pubDialog.vue';
export default {
	name:'',
	components: {
		pubDialog
	},
	props: {
		isAddMyDialog: {
			type: Boolean,
		},
    add_id: {
      type: Number,
    },
    add_ids: {
      type: Array,
      default: []
    }
	},
	watch: {
		isAddMyDialog(newval) {
			if(newval) {
				this.getClassify();
        console.log(this.add_ids)
			}
		}
	},
	data () {
		return {
			classifyArr:[],//分类列表
      selected_classify: [],
			//新增弹窗
			isClassifyDia: false,
      dia_title: '新增分类',
      dialogKeyArrs: [
        {
          label: '分类名称',
          prop: 'name',
          type: 'input',
          maxlen: 10,
          placeholder: '请输入分类名称',
        },
      ],
      formData: {
        name: ''
      },
			addRules: {
				name:[
					{ required: true, message: '分类名称不能为空', trigger: 'blur' },
				],
			}
		};
	},
	methods: {
		/* 获取分类列表 */
		getClassify() {
			mychartInterface.classifyList()
				.then(res => {
					if(res.Ret !== 200) return
					this.classifyArr = res.Data ? res.Data.List : [];
          this.selected_classify = _.cloneDeep(this.add_ids);
				})
		},

    chooseClassify(id) {
      if(this.selected_classify.includes(id)) {
        let index = this.selected_classify.indexOf(id);
        this.selected_classify.splice(index, 1);
      }else {
        this.selected_classify.push(id);
      }
    },

		/* 添加分类 */
		addClassify() {
			this.isClassifyDia = true;
		},
    /* 新增分类回调 */
    addNewClassifyHandle({name}) {
      mychartInterface.addClassify({
        MyChartClassifyName: name
      }).then(res => {
        if(res.Ret !== 200) return
        this.isClassifyDia = false;
        this.getClassify();
      })
    },

    /* 加入图库 */
    saveHandle() {
      if(!this.selected_classify.length) return this.$message.warning('请选择分类');
      mychartInterface.add({
        ChartInfoId: this.add_id,
        MyChartClassifyId: this.selected_classify
      }).then(res => {
        if(res.Ret !== 200) return 
        this.$message.success('已加入我的图库')
        this.$emit('addSuccess',res.Data)
      })
    },

    init() {
      this.selected_classify = [];
    },
    
		cancelHandle() {
      this.init()
			this.$emit('cancel')
		}
	},
	created() {},
	mounted() {},
}
</script>
<style lang="scss">
.addMyClassifyDia-container {
  .el-dialog--center .el-dialog__body {
    padding: 25px 25px 30px !important;
  }
  .dialog-min {
    .classify-cont {
      padding: 30px 10px;
      border: 1px dashed #999;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
      .classify-tag {
        margin: 5px;
        padding: 0 20px;
        cursor: pointer;
        &.act {
          background: #409eff;
          color: #fff;
        }
      }
    }
    .add-cont {
      color: #409eff;
      cursor: pointer;
    }
  }
  .dia-bot {
    margin: 52px 0 30px;
    display: flex;
    justify-content: center;
  }
}
</style>
