<template>
	<div>
		<div flex>
		</div>
		<base-table ref="customtable" :border="true" :showIndex="true" :tabLoading.sync="tabLoading" :tableData="tableData"
			:tableColumn="tableColumn" :funData="[]" :indexOperate="true" @newRow="add">
			<template v-slot:operate="{ row }">
        		<el-tooltip class="item" effect="dark" content="删除当前行" placement="top">
        		  <i class="el-icon-delete" style="color: red; font-size: 16px; margin-right: 10px" @click="del(row)"></i>
        		</el-tooltip>
			</template>
			<template v-slot:supportContent="{ row }">
      		  <el-input v-model="row.supportContent" clearable type="text"></el-input>
      		</template>
      		<template v-slot:supportDepName="{ row }">
      		  <div flex @click="elDialogClick(row.index)">
      		    <p
      		      class="single"
      		      :style="{ color: row.supportDepName ? '#000' : '#c0c4cc' }"
      		      style="width: 100%"
      		    >
      		      {{ row.supportDepName ? row.supportDepName : "请点击选择" }}
      		    </p>
      		    <i class="el-icon-more" style="margin-top: 6px;color: #c0c4cc"></i>
      		  </div>
      		</template>
      		<template v-slot:supportPersonName="{ row }">
      		  <div flex @click="personnel(row.index)">
      		    <p
      		      class="single"
      		      :style="{ color: row.supportPersonName ? '#000' : '#c0c4cc' }"
      		      style="width: 100%"
      		    >
      		      {{ row.supportPersonName ? row.supportPersonName : "请点击选择" }}
      		    </p>
      		    <i class="el-icon-more" style="margin-top: 6px;color: #c0c4cc"></i>
      		  </div>
      		</template>
			<template v-slot:supportTime="{ row }">
				<el-date-picker v-model="row.supportTime" align="right" type="date" placeholder="选择日期"
					value-format="yyyy-MM-dd">
				</el-date-picker>
			</template>
			<template v-slot:tel="{ row }">
      		  <el-input
      		    v-model="row.tel"
      		    @input="(v) => (row.tel = v.replace(/[^\d]/g, ''))"
				maxlength="11"
      		  >
      		  </el-input>
      		</template>
		</base-table>
		<base-organization ref="baseOrganization" :menuData="organMenuData" @handleConfirmClick="organizationHandleConfirm"></base-organization>
		 <base-radio-people ref="baseRadioPeople" @personConfirmClick="personConfirmClick"></base-radio-people>
	</div>
</template>

<script>
import baseTable from "@/components/base/baseTable";
import basePage from '@/components/base/basePage'
import baseChoice from "@/components/base/baseChoice/index.vue";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import baseOrganization from "@/components/base/baseOrganization/index.vue";
import baseRadioPeople from "@/components/base/baseRadioPeople/index.vue";
import { DelBusiness } from '@/api/apis/leadManagement'
import { GetOrganTree} from "@/api/apis/organization";

import { getCompanyId } from "@/utils/auth";
export default {
	name: "equipmentDetails",
	components: {
		baseTable,
		basePage,
		baseDialog,
		baseChoice,
		baseOrganization,
		baseRadioPeople
	},
	data() {
		return {
			organMenuData: [],
			loading: false,
			tableHeight: '65vh',
			optionIndex: '',
			tabLoading: false,
			tableData: [],
			tableColumn: [
				{
					label: '支持人员',
					prop: 'supportPersonName',
					tooltip: true,
				},
				{
					label: '部门',
					prop: 'supportDepName',
					tooltip: true,
				},
				{
					label: '时间',
					prop: 'supportTime',
					tooltip: true,
				},
				{
					label: '联系方式',
					prop: 'tel',
					tooltip: true,
				},
				{
					label: '支持内容',
					prop: 'supportContent',
					tooltip: true,
					width: '600'
				},
				{
					label: "操作",
					prop: "operate",
					width: "70",
				},
			],
			pageModel: {
				page: 1, //当前页码
				limit: 10, //每页显示多少
				cusClassify: "", //树形分类id
				sequence: "", //排列方式
				sequenceName: "", //需要排列的字段名
			},
		}
	},
	computed: {},
	created() {
		this.init()
	},
	methods: {
		init() {
			this.getMenuData()
		},
		// 组织机构
    	async getMenuData() {
    	  let params = {
    	    // CompanyID: 1
    	    companyID: this.$store.state.user.companyID
    	      ? this.$store.state.user.companyID
    	      : getCompanyId(),
    	  };
    	  let res = await GetOrganTree(params);
    	  this.organMenuData = JSON.parse(res.data[0]);
    	},
		// 打开组织机构
		elDialogClick(index) {
        	this.$refs.baseOrganization.dialogVisible = true;
			this.optionIndex = index;
		},
		personnel(index) {
			this.$refs.baseRadioPeople.openDialog();
			this.optionIndex = index;
		},
		// 组织机构确认
		organizationHandleConfirm(item) {
			this.$set(this.tableData[this.optionIndex], 'supportDepName', item.label)
			this.$set(this.tableData[this.optionIndex], 'supportDepID', item.id)
			this.$refs.baseOrganization.qingkong();
      		this.$refs.baseOrganization.dialogVisible = false;
		},
    	personConfirmClick(item) {
			this.$set(this.tableData[this.optionIndex], 'supportPersonName', item.p_PersonName)
			this.$set(this.tableData[this.optionIndex], 'supportPersonID', item.p_PersonID)
    	},
		//添加
		add() {
			let arr = {}
			this.tableData.push(arr)
		},
		async del(row) {
			this.$confirm('确认删除该明细吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				if (row.mainID && this.$route.query.name == '编辑线索') {
					DelBusiness({ id: row.detail_ID}).then ( res => {
						if (res.success == "true") {
							this.$emit("renovate");
							this.$message({
								message: "删除成功",
								type: "success",
							});
							this.tableData.splice(row.index, 1);
							this.$emit('renew')
						}
					})
				} else {
					this.tableData.splice(row.index, 1);
				}
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
	}
}
</script>

<style>
.el-table th>.cell {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

}
</style>
<style scoped lang="scss">
>>>.el-radio__label {
	// display: none;
}

.iconButton {
	padding: 10px 12px;
	color: white;
	margin: 5px;
}

.iconButton.add {
	background-color: #409eff !important;
}

.iconButton.del {
	background-color: #f56c6c !important;
}
</style>
