<template>
  <basic-container>
    <avue-crud 
			ref="crud"
			:option="option"
			:table-loading="loading"
			:data="listData"
			@on-load="onLoad"
			@refresh-change="onLoad"
			@search-change="searchChange"
			@search-reset="searchReset"
			@selection-change="selectionChange"
			v-model:page="page"
			@current-change="currentChange"
			@size-change="sizeChange">
			<template #menu-left>
				<el-button
				  type="primary"
				  icon="el-icon-plus"
					v-if="permission.serviceType_add"
				  @click="handleAdd">新 增</el-button>
				<el-button
				  type="primary"
				  icon="el-icon-edit"
					v-if="permission.serviceType_edit"
				  plain
				  @click="handleEdit" :disabled="selectionList.length != 1">编 辑</el-button>
			  <el-button
			    type="danger"
			    icon="el-icon-delete"
					v-if="permission.serviceType_delete"
			    plain
			    @click="handleDelete" :disabled="selectionList.length != 1">删 除</el-button>
			</template>
			<!-- <template #code="{row}">
				<span v-for="dict in codeList" :key="dict.id">
					<template v-if="row.code == dict.id">{{dict.name}}</template>
				</span>
			</template> -->
			<template #partnerId="{row}">
				<span v-for="dict in partnerList" :key="dict.id">
					<template v-if="row.partnerId == dict.id">{{dict.name}}</template>
				</span>
			</template>
    </avue-crud>
  </basic-container>
	
	<el-dialog
		class="avue-dialog avue-crud__dialog"
	  :title="title"
	  v-model="open"
		v-if="open"
	  width="1100px"
	  append-to-body>
		<el-form ref="formData" :model="formData" label-width="90px">
		  <el-row :gutter="10">
				<template v-for="(item,index) in formData.typelist" :key="index">
					<el-col :span="7">
						<el-form-item label="类型名称:" :prop="`typelist.${index}.name`" :rules="[{required: true,message: '请输入',trigger: 'blur',}]">
						  <el-input v-model="item.name" placeholder="请输入" style="width: 100%" />
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="代码值:" :prop="`typelist.${index}.code`" :rules="[{required: true,message: '请输入',trigger: 'blur',}]">
						  <!-- <el-select
								v-model="item.code"
								placeholder="请选择"
								style="width: 100%"
							>
								<el-option
									v-for="dict in codeList"
									:key="dict.id"
									:label="dict.name"
									:value="dict.id"
								/>
							</el-select> -->
							<el-input v-model="item.code" placeholder="请输入" style="width: 100%" />
						</el-form-item>
					</el-col>
					<el-col :span="title != '编辑' ? 9 : 12">
						<el-form-item label="资方:" :prop="`typelist.${index}.partnerId`" :rules="[{required: true,message: '请选择',trigger: 'change',}]">
						  <el-select
								v-model="item.partnerId"
								placeholder="请选择"
								style="width: 100%"
							>
								<el-option
									v-for="dict in partnerList"
									:key="dict.id"
									:label="dict.name"
									:value="dict.id"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<template v-if="title != '编辑'">
						<el-col :span="1" v-if="formData.typelist.length-1 == index">
							<el-button plain type="primary" icon="el-icon-plus" circle @click="addFn()"/>
						</el-col>
						<el-col :span="1" v-if="formData.typelist.length > 1">
							<el-button plain type="danger" icon="el-icon-minus" circle @click="delFn(index)"/>
						</el-col>
					</template>
				</template>
			</el-row>
		</el-form>
		<template #footer>
		  <span class="avue-dialog__footer">
				<el-button icon="el-icon-circle-plus" type="primary" @click="submitForm">保 存</el-button>
		    <el-button icon="el-icon-circle-close" @click="open = false">取 消</el-button>
		  </span>
		</template>
	</el-dialog>
</template>

<script> 
  import {getList, getDetail, add, update, remove} from "@/api/systemSet/serviceType";
  import {getPartnerList} from "@/api/common";
  import {option,sendThis} from "@/option/systemSet/serviceType";
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {
				query: {},
				loading: false,
				page: {
				  pageSize: 10,
				  currentPage: 1,
				  total: 0
				},
				option: option,
				listData: [{}],
				selectionList: [],
        formData: {},
				
				partnerList:[],
				codeList:[{
					id:'01',
					name:'客户纠纷'
				},{
					id:'02',
					name:'电网问题'
				},{
					id:'03',
					name:'设备故障'
				},{
					id:'04',
					name:'收益异常'
				},{
					id:'05',
					name:'低效设备'
				},{
					id:'06',
					name:'其他工单'
				}],
				title:'',
				open:false,
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    mounted(){
			sendThis(this);
			this.getPartnerList();
    },
    methods: {
			getPartnerList(){
				getPartnerList({}).then(res=>{
					this.partnerList = res.data.data;
				});
			},
			onLoad() {
			  this.loading = true;
			  getList(this.page, this.query).then(res => {
			    const data = res.data.data;
			    this.page.total = data.total;
			    this.listData = data.records;
			    this.loading = false;
			    this.selectionClear();
			  });
			},
			searchReset() {
			  this.query = {};
			  this.onLoad();
			},
			searchChange(params, done) {
			  this.query = params;
			  this.page.currentPage = 1;
			  this.onLoad();
			  done();
			},
			selectionChange(list) {
			  this.selectionList = list;
			},
			selectionClear() {
			  this.selectionList = [];
			  this.$refs.crud.toggleSelection();
			},
			addFn(){
				this.formData.typelist.push({
					name:'',
					code:'',
					partnerId:'',
					partnerName:'',
				})
			},
			delFn(index){
				this.formData.typelist.splice(index,1);
			},
			handleAdd(){
				this.open = true;
				this.title = '新增';
				this.formData={
					typelist: [{
						name:'',
						code:'',
						partnerId:'',
						partnerName:'',
					}]
				}
			},
			handleEdit(){
				let id = this.selectionList[0].id;
				getDetail(id).then(res=>{
					this.open = true;
					this.title = '编辑';
					this.formData={
						typelist: [res.data.data]
					}
				})
			},
			submitForm(){
				this.$refs['formData'].validate((valid) => {
					if (valid) {
						if(this.title == '新增'){
							add(this.formData).then(res => {
								this.open = false
								this.onLoad();
								this.$message({
									type: 'success',
									message: '操作成功!',
								});
							}, error => {
								window.console.log(error);
							});
						}else{
							update(this.formData.typelist[0]).then(res => {
								this.open = false
								this.onLoad();
								this.$message({
									type: 'success',
									message: '操作成功!',
								});
							}, error => {
								window.console.log(error);
							});
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				})
			},
			handleDelete() {
			  if (this.selectionList.length === 0) {
			    this.$message.warning("请选择至少一条数据");
			    return;
			  }
			  this.$confirm("确定将选择数据删除?", {
			    confirmButtonText: "确定",
			    cancelButtonText: "取消",
			    type: "warning"
			  }).then(() => {
					return remove(this.ids);
				}).then(() => {
					this.onLoad();
					this.$message({
						type: "success",
						message: "操作成功!"
					});
					this.$refs.crud.toggleSelection();
				});
			},
			
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },   
    }
  };
</script>

<style>
</style>
