<template>
  <el-dialog
		:visible.sync="isShow"
		:close-on-click-modal="false"
		:modal-append-to-body="false"
    :title="title"
		@close="cancelHandle"
		custom-class="shared-dialog"
		center
		width="650px"
		v-dialogDrag
	>
    <div class="dia-main">
      <div style="margin-bottom: 20px;">
        <label style="margin-right: 40px">共享用户</label>
        <el-radio-group v-model="share_type" size="mini" @change="select_users=[]">
          <el-radio :label="1">全部ficc研究员</el-radio>
          <el-radio :label="2">指定成员</el-radio>
        </el-radio-group>
      </div>

      <el-cascader
        v-if="share_type===2"
        v-model="select_users"
        :options="researcherList"
        :show-all-levels="false"
        filterable
        :props="{
          expandTrigger: 'hover',
          children: 'ResearcherList',
          emitPath: false,
          multiple: true
        }"
        clearable
        placeholder="请选择研究员"
        style="width:80%"
        :key="cascaderIdx"
        @remove-tag="removeResearchersChange"
      />

    </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 { roadshowInterence,pptInterface } from '@/api/api.js';
import {pptEnInterface} from '@/api/modules/pptEnApi.js';
export default {
  props: {
    isShow: {
      type: Boolean
    },
    title: {
      type: String,
      default: '选择用户'
    },
    data: {
      type: Object
    }
  },
  data() {
    return {
      share_type: 1,
      select_users:[],
      researcherList: [],
      cascaderIdx:1
    }
  },
  watch: {
    isShow(newval) {
      if(newval) {
        this.select_users = this.data.users ? this.data.users : [];
        this.share_type = this.data.type ? this.data.type : 1;
      }
    }
  },
  methods: {

    /* 获取研究员列表 */
    async getResearcherList() {
      const res = await roadshowInterence.getResearcherList();
      if (res.Ret !== 200) return
      this.researcherList = this.formatResearcherList(res.Data);
    },

    // 对获取到的研究员列表做处理
    formatResearcherList(list) {
      list.forEach((group) => {
        // 对组做处理
        group.label = group.GroupName;
        // 如果有列表
        if (group.ResearcherList) {
          group.ResearcherList.forEach((item) => {
            // 对研究员做处理
            item.label = item.RealName;
            item.value = item.AdminId;
          });
        } else {
          // 没有列表
          group.value = group.GroupId;
        }
      });
      return list;
    },

     // 选择的研究员发生改变
    removeResearchersChange(val) {
      this.select_users = this.select_users.filter(item => item !== val)
      this.cascaderIdx++;
    },

    /* 保存 */
    async saveHandle() {
      if(this.share_type === 2 && !this.select_users.length) return this.$message.warning('请选择研究员')
      const { ppt_id } = this.data;
      const res = this.$parent.currentLang!=='en'
        ? await pptInterface.setShareAuth({
            GrantType: this.share_type,
            PptId: ppt_id,
            AdminIdStr: this.share_type===2 ? this.select_users.join(',') : ''
          })
        : await pptEnInterface.setShareAuth({
            GrantType: this.share_type,
            PptId: ppt_id,
            AdminIdStr: this.share_type===2 ? this.select_users.join(',') : ''
          })
      if(res.Ret !== 200) return
      this.$message.success('保存成功');
      this.cancelHandle();
      this.$emit('successCallback')
    },

    cancelHandle() {
      this.share_type = 1;
      this.select_users = [];
      this.$emit('update:isShow',false)
    }
  },
  mounted() {
    this.getResearcherList();
  },
}
</script>
<style scoped lang='scss'>
.dia-main {
  padding-left: 100px;
}
.dia-bot {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}
</style>
<style lang="scss">
.shared-dialog {
  .el-cascader .el-input {
    width: 100%;
  }
}
</style>