<template>
  <div class="release" v-if="showRelease">
	  <div class="title" style="font-weight: bold;">发布知识:{{title}}</div>
	  <div class="release-data" :style="datastyle">
    <div class="knowlSelect">
      <van-field
        v-model="publishDimensionNames"
        label="知识维度"
        required
        right-icon="arrow"
        placeholder="请选择"
        input-align="right"
        @click="onDimension"
      />
    </div>
    <div class="divide"></div>
    <ul class="list">
      <li v-for="(item,index) in list" :key="index">
        <div :class="item.isNullable==1?'title':'title required' " >
          {{item.schemaTitle}}
			<span v-show="item.showType==1" @click="clearData(item)" style="float: right">清空</span>
        </div>
        <div class="con">
          <span v-show="item.showType<2" class="classify"
                :style="(index+1)%3===0?'width: calc(100% / 3 - 17px); margin-right:1px;':''"
                v-for="(el,index) in item.attrList" :key="index" @click="onClassify(el,item)"
                :class="{classActive:el.active}">
            <label class="name">{{el.attrTitle}}</label>
          </span>
			<div v-show="item.showType==2">
				<van-field v-model="item.value" placeholder="请输入..." />
			</div>
        </div>
      </li>
    </ul>
    <div class="tag">
      <div class="name" style="font-size: 14px;">标签</div>
      <ul class="con">
        <span class="classify classActive"
              :style="(index+1)%3===0?'width: calc(100% / 3 - 17px); margin-right:1px;':''"
              v-for="(el,index) in itemArr" :key="index" @click="onClassify(el)">
            <label class="name">{{el}}</label>
            <i class="awsui-iconfont" style="font-size: 12px;" @click="deleteExceptPrice(index,el)">&#xe6fe;</i>
          </span>
      </ul>
      <van-field class="tag-field" v-model="tagValue" placeholder="添加标签 最多10个">
        <template #button>
          <button class="button" @click="addExceptPrice"><span class="line"></span>添加</button>
        </template>
      </van-field>
    </div>
	  </div>
    <div class="footer">
      <van-button type="default" @click="backHome">取消</van-button>
      <van-button type="info" @click="onRelease">发布</van-button>
    </div>


  </div>
	<knowDimension @dimensionBack="dimensionBack" :publishDimensionData="publishDimensionData" v-else></knowDimension>
	<!--<van-notify v-model="notifyshow" type="success">-->
		<!--<van-icon name="bell" style="margin-right: 4px;" />-->
		<!--<span>通知内容</span>-->
	<!--</van-notify>-->
</template>

<script>
  import vanFieldSelect from '@/components/fieldSelect'
  import knowDimension from '@/pages/know-dimension'
  import awsuiAxios from "../awsuiAxios";
  export default {
    name: 'release-knowledge',
    components: {
      vanFieldSelect,
	  knowDimension
    },
    data() {
      return {
      	val:'',
      	title:'',
        id: '',
		notifyshow:false,
		showRelease:true,
		publishDimensionNames: '',
		publishDimensionIds:[],
		publishPerm:"",
		publishDimensionData:{},
        classify: '',
        classifyOption: ['AWS5产品线', 'AWS6产品线'],
        list: [
          {
            id: 'release1',
			  schemaTitle: '文档类别',
			  attrList: [
              {
                id: 'wordClass',
				attrTitle: '制度',
                active: false
              }
            ]
          },
          {
            id: 'release2',
			  schemaTitle: '项目过程',
			  attrList: [
              {
                id: 'manage1',
				  attrTitle: '项目管理',
                active: false
              }
            ]
          }
        ],
        itemArr: [],
        tagValue: '',
        authority:true, //是否有权限
		  datastyle:''
      }
    },
    methods: {
	  backHome(){
			window.history.back();
	  },
      onDimension() {
		  this.showRelease = false;
      },
	  dimensionBack(dimensionData,type){
      	 this.showRelease = true;
      	 if(type=='ok'){
			 let namesTmp = "";
			 this.publishDimensionData = dimensionData;
			 let tmpData = dimensionData;
			 let indx = 0;
			 if(Object.keys(tmpData).length>0){
				 for (let key of Object.keys(tmpData)) {
					 let item = tmpData[key];
					 if(indx==0){
						 this.publishPerm = item['publishPerm'];
					 }
					 this.publishDimensionIds.push(item['id']);
					 namesTmp+=item['name']+",";
					 indx++;
				 }
				 if(namesTmp.length>0){
					 this.publishDimensionNames = namesTmp.substring(0,namesTmp.length-1);
				 }
			 }else{
				 this.publishDimensionIds=[];
				 this.publishDimensionNames='';
			 }
		 }
	  },
	  clearData(itemTmp){
			itemTmp.attrList.forEach((ob, index) => {
				ob.active = false;
			})
	  },
      onClassify(el,itemTmp) {
      	if(!el.active){
      		if(itemTmp.showType==1){//单选
				itemTmp.attrList.forEach((ob, index) => {
					ob.active = false;
				})
			}
		}
		  el.active = !el.active;
      },
	  publishCardSchemaDiv(){
      	//初始化元数据
		  let that = this;
		  awsuiAxios.post({
			  url: "jd",
			  data: {
				  cmd: "com.actionsoft.apps.kms_knwl_center_mobile_schema_attr_list_json"

			  },
		  }).then(function (r) {
			  that.loading = false;
			  if (r.result == "error") {
				  alert(r.msg);
			  } else {
					that.list = r.data.data;
			  }
		  });
	  },
      addExceptPrice() {
      	if(this.tagValue.trim()==''){
			this.$toast({message: '请输入标签内容', overlay: true});
			return false;
		}else{
			//点击添加
			if(this.itemArr.length==10){
				this.$toast({message: '添加标签 最多10个', overlay: true});
			}else{
				if (this.itemArr.length<10&&this.tagValue != ''&&!this.itemArr.includes(this.tagValue)) {
					this.itemArr.push(this.tagValue)
				}
			}
			this.tagValue = "";
		}
      },

      deleteExceptPrice(index) {
        //删除一项
        this.itemArr.splice(index, 1)
      },
      onRelease() {
		  let that = this;
		  if(Object.keys(this.publishDimensionData).length==0){
			  this.$toast({message: '请选择要发布到的知识分类', overlay: true});
			  return false;
		  }
		  let tags = this.itemArr.join('@`@');
		  if (tags && tags != '') {
			  tags = '@`@' + tags + '@`@'; // 前后包裹分隔符，便于SQL查询
		  }
		  let newschemaMetaData01=[];
		  let schemaMetaData2=[];
		  let isNull = false;
		  for(let k=0;k<this.list.length;k++){
		  	let obj = this.list[k];
			  if(obj.showType==2){
			  	let val = obj.value?obj.value:'';
				  if(obj.isNullable==0&&val.trim()==''){
					this.$toast({message:'元数据['+obj.schemaTitle+']不允许为空', overlay: true});
					return false;
				  }
				  schemaMetaData2[schemaMetaData2.length] = {
					  metaValue: val.trim(),
					  schemaId: obj.id
				  };
			  }else{
			  	let attrList = obj.attrList;
			  	let activeL = 0;
			  	for(let j=0;j<attrList.length;j++){
			  		let ob = attrList[j];
					if(ob.active){
						activeL++;
						newschemaMetaData01.push({
							attrId:ob.id,
							schemaId:ob.schemaId
						})
					}
				}
				if(obj.isNullable==0&&activeL==''){
					this.$toast({message:'元数据['+obj.schemaTitle+']不允许为空', overlay: true});
					return false;
				}

			  }
		  }

		  let schemaMetaData ={
			  '01': newschemaMetaData01, // 复选框和单选按钮
			  '2': schemaMetaData2
		  }
		  let cardIds = [];
		  cardIds.push(this.id);
		  if (this.publishPerm==='publish') {
				awsuiAxios.post({
					url: "jd",
					data: {
						cmd: "com.actionsoft.apps.kms_knwl_center_publish_card",
						publishCardIds: JSON.stringify(cardIds),
						publishDimensionIds: JSON.stringify(this.publishDimensionIds),
						schemaMetaData: encodeURIComponent(JSON.stringify(schemaMetaData)),
						tags: encodeURIComponent(tags),
						publishMemo: encodeURIComponent("")
					},
				}).then(function (r) {
					that.loading = false;
					if (r.result == "error") {
						that.$toast({message: r.data?r.data.desc:r.msg, overlay: true})
					} else {
						that.$toast({
							message: '已发布',
							overlay: true,
							onClose(){
								that.$router.push({
									name: 'myknwl'
								})
							}
						});
					}
				});
        } else {

			awsuiAxios.post({
				url: "jd",
				data: {
					cmd: "com.actionsoft.apps.kms_knwl_center_publish_card_process_start_mobile",
					cardIds: JSON.stringify(cardIds),
					dimensionId: this.publishDimensionIds[0],
					schemaMetaData: encodeURIComponent(JSON.stringify(schemaMetaData)),
					tags: encodeURIComponent(tags),
					publishMemo: encodeURIComponent("")
				},
			}).then(function (r) {
				that.loading = false;
				if (r.result == "error") {
					that.$toast({message: r.data?r.data.desc:r.msg, overlay: true})
				} else {
					window.location.href=r.data.url;
				}
			});
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.dimensionValue = this.$route.params.dir
        this.id = this.$route.params.id;
        this.title = this.$route.params.name;
	    localStorage.setItem("publishhome",this.$route.params.type);
      })
		let hh = window.innerHeight-130;
		this.datastyle = "height:"+hh+"px";
    },
	  created(){
    	let publishf  =localStorage.getItem("publishflag");
    	let publishhome  =localStorage.getItem("publishhome");
    	if(publishf=="true"){
			localStorage.setItem("publishflag",undefined);
			localStorage.setItem("publishhome",undefined);
			this.$router.push({
				name: publishhome=="myknowledge"?'myknwl':"knwldir"
			})
		}
		this.publishCardSchemaDiv();
	  },
    watch: {}
  }
</script>

<style scoped>
  .release {
    height: calc(100% - 64px);
    overflow-y: auto;
  }
  .title {
	width: 96%;
    font-size: 16px;
    color: #333;
    line-height: 22px;
    padding: 15px;
    background: #F8F8F8;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  overflow: hidden;
	  display: inline-block;
  }

  .knowlSelect {
    font-size: 14px;
    color: #000;
    line-height: 19px;
    padding: 7px 0 7px 7px;
    border-top: 0.33px solid #e9e9e9;
    border-bottom: 0.33px solid #e9e9e9;
  }

  .list, .tag {
    padding: 0 15px;
    width: calc(100% - 30px);
  }

  .list span, .list label {
    display: inline-block;
  }

  .list li {
    float: left;
    padding: 12px 0 4px;
    width: 100%;
    position: relative;
    border-bottom: 0.33px solid #e9e9e9;
  }

  .list li:not(:last-child) {
    border-bottom: 0.33px solid #e9e9e9;
  }

  .list li .title, .tag .title {
    font-size: 14px;
    padding: 0;
    background: none;
    width: 100%;
    line-height: 19px;
  }

  .list li .con, .tag .con {
    padding: 12px 0 0;
    position: relative;
    float: left;
    width: 100%;
  }

  .list li .con .classify, .tag .con .classify {
    width: calc(100% / 3 - 16px - 10px);
    height: 30px;
    line-height: 16px;
    padding: 5px 8px;
    margin-right: 10px;
    margin-bottom: 8px;
    border-radius: 2px;
    background: #F5F5F5;
    float: left;
    display: flex;
    align-items: center;
    text-align: center;
    cursor: pointer;
  }

  .tag .con .classify {
    height: auto;
    line-height: 20px;
  }

  .list li .con .classify .name, .tag .con .classify .name {
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    cursor: pointer;
  }

  .list li .con .classify:last-child {
    margin-right: 0;
  }

  .tag {
    clear: both;
    padding: 8px 15px;
    width: calc(100% - 30px);
  }

  .tag .title {
    font-size: 14px;
    line-height: 18px;
  }

  .tag .con {
    padding: 12px 0 0;
  }

  .con .classActive {
    background: #E1EFFF !important;
    color: #1B6EC9;
  }

  .tag .tag-field {
    padding: 3px 0 3px 10px;
    border: 0.33px solid #e9e9e9;
    font-size: 12px;
    border-radius: 2px;
  }

  .tag .button {
    border: none;
    line-height: 20px;
    height: 20px;
    font-size: 12px;
    background: none;
    color: #4A90E2;
    padding-right: 10px;
    cursor: pointer;
    display: flex;
  }

  .tag .button .line {
    display: inline-block;
    width: 1px;
    height: 20px;
    line-height: 20px;
    background: #d6d6d6;
    margin-right: 10px;
  }

  .footer {
    padding: 12px;
    position: fixed;
    border-top: 0.33px solid #e9e9e9;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 1;
    text-align: center;
  }

  .footer .van-button {
    height: 38px;
    line-height: 38px;
    width:40%;
    border-radius: 2px;
    padding: 0 !important;
	  margin: 0px 10px;
	  display: inline-block;
  }
	.classify .name{
		font-size: 13px;
	}
	.required:before{
		content: '*';
		color: red;
	}
	.release-data{
		overflow: hidden;
		overflow-y: auto;
	}
</style>
