<template>
  <basic-container>
    <avue-crud 
			ref="crud"
			:before-open="beforeOpen"
			:option="option"
			:table-loading="loading"
			:data="listData"
			:permission="permissionList"
			@on-load="onLoad"
			@refresh-change="onLoad"
			@search-change="searchChange"
			@search-reset="searchReset"
			@selection-change="selectionChange"
			v-model="formData"
			@row-save="rowSave"
			@row-update="rowUpdate"
			v-model:page="page"
			@current-change="currentChange"
			@size-change="sizeChange">
			<template #menu-left>
				<el-button
				  type="primary"
				  icon="el-icon-edit"
					v-if="permission.service_edit"
				  plain
				  @click="handleEdit" :disabled="selectionList.length != 1">编 辑</el-button>
			  <el-button
			    type="danger"
			    icon="el-icon-delete"
					v-if="permission.service_delete"
			    plain
			    @click="handleDelete" :disabled="selectionList.length != 1">删 除</el-button>
				<el-button
					icon="el-icon-unlock"
					v-if="permission.service_enable"
					plain
					@click="handleStatus('启用')" :disabled="selectionList.length != 1">启 用</el-button>
				<el-button
				  icon="el-icon-lock"
				  v-if="permission.service_disable"
				  plain
				  @click="handleStatus('禁用')" :disabled="selectionList.length != 1">禁 用</el-button>
			</template>
			<template #address="{row}">
				{{ row.province }}{{ row.city }}{{ row.area }}{{ row.address }}
			</template>
			<template #name="{row}">
				<el-link type="primary" :underline="false" @click="handleView(row)">{{ row.name }}</el-link>
			</template>
			<template #status="{row}">
				<el-tag type="primary" v-if="row.status == '0'">启用</el-tag>
				<el-tag type="info" v-if="row.status == '3'">禁用</el-tag>
			</template>
			<!-- <template #loginName-form>
				<el-input type="text" v-model="formData.loginName" autocomplete="new-password" />
			</template>
			<template #password-form>
				<el-input type="password" v-model="formData.password" autocomplete="new-password" />
			</template> -->
    </avue-crud>
  </basic-container>
</template>

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

  export default {
    data() {
      return {
				query: {},
				loading: false,
				page: {
				  pageSize: 10,
				  currentPage: 1,
				  total: 0
				},
				option: {},
				listData: [{}],
				selectionList: [],
        formData: {},
        // search: {},
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.validData(this.permission.service_add, false),
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    created(){
    	sendThis(this);
    },
    methods: {
			beforeOpen(done, type) {
				sendThis(this,type);
			  done();
			},
			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();
			},
			rowSave(row, done, loading) {
			  add(row).then(res => {
					this.onLoad();
					this.$message({
						type: 'success',
						message: '操作成功!',
					});
					done(row);
				}, error => {
					window.console.log(error);
					loading();
				});
			},
			handleEdit(){
				getDetail(this.selectionList[0].id).then(res => {
				  this.formData = res.data.data;
					this.$refs.crud.rowEdit(this.formData);
				});
			},
			handleView(row){
				let id = row.id;
				getDetail(id).then(res=>{
					this.formData = res.data.data;
					this.formData.password = 'password';
					this.$refs.crud.rowView(this.formData);
				})
			},
			rowUpdate(row, index, done, loading) {
			  update(row).then(() => {
			    this.onLoad();
			    this.$message({
			      type: "success",
			      message: "操作成功!"
			    });
			    done();
			  }, error => {
			    loading();
			    console.log(error);
			  });
			},
			handleStatus(type) {
				let row = this.selectionList[0], text = '';
				if((type == '启用'&&row.status != '3') || (type == '禁用'&&row.status != '0')){
					this.$message.warning("该数据不可"+type);
					return
				}
				if(row.status == '0'){
					text = '禁用'
				}else{
					text = '启用'
				}
			  this.$confirm('是否确定'+ text +'这条数据?', {
			    confirmButtonText: '确定',
			    cancelButtonText: '取消',
			    type: 'warning',
			  }).then(() => {
					return updateStatus({
						id:row.id,
						status:row.status == '0' ? '3' : '0'
					});
				}).then(() => {
					this.onLoad();
					this.$message({
						type: 'success',
						message: '操作成功!',
					});
					this.$refs.crud.toggleSelection();
				});
			},
			handleDelete() {
				let row = this.selectionList[0];
				if(row.status == '0'){
					this.$message.warning("启用状态下不能删除");
					return;
				}
			  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>
