<template>
  <basic-container>
    <avue-crud 
			ref="crud"
			:before-open="beforeOpen"
			:option="option"
			:table-loading="loading"
			:data="listData"
			@on-load="onLoad"
			@refresh-change="onLoad"
			@search-change="searchChange"
			@search-reset="searchReset"
			v-model="formData"
			v-model:search="query"
			v-model:page="page"
			@current-change="currentChange"
			@size-change="sizeChange">
			<template #address="{row}">
				{{ row.province }}{{ row.city }}{{ row.area }}{{ row.address }}
			</template>
    </avue-crud>
  </basic-container>
</template>

<script> 
  import {getList, getDetail} from "@/api/finance/settlement";
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {
				query: {},
				loading: false,
				page: {
				  pageSize: 10,
				  currentPage: 1,
				  total: 0
				},
				option: {
					height: 'auto',
					calcHeight: 32,
					index: true,
					indexLabel: '序号',
					indexWidth: 60,
					menu: false,
					addBtn:false,
					border: true,
					searchMenuSpan:6,
					searchMenuPosition: "left",
					searchGutter:0,
					searchLabelWidth:90,
					column:[
						{
							label: '工单编号',
							prop: 'orderNumber',
							minWidth: 200,
							search:true,
						},
						{
							label: '电站编码',
							prop: 'powerStationCode',
							minWidth: 200,
							search:true,
						},
						{
							label: '运维服务商',
							prop: 'siteName',
							minWidth: 200,
							search:true,
						},
						{
							label: '工程师',
							prop: 'employeName',
							minWidth: 100,
							search:true,
						},
						{
							label: '服务类型',
							prop: 'serviceType',
							minWidth: 100,
							type: 'select',
							dicUrl: '/sf/operationServiceType/list',
							props: {
								label: 'name',
								value: 'id',
							},
						},
						{
							label: '服务措施',
							prop: 'serviceMeasures',
							minWidth: 150,
							type: 'select',
							dicUrl: '/sf/operationServiceMeasures/list',
							props: {
								label: 'serviceMeasures',
								value: 'id',
							},
							dicFormatter:(res)=>{
								return res.data.records
							}
						},
						{
							label: '保修类型',
							prop: 'warrantyType',
							minWidth: 100,
							type: 'select',
							dicUrl: '/blade-system/dict/dictionary?code=warranty_type',
							props: {
								label: 'dictValue',
								value: 'dictKey',
							},
						},
						{
							label: '故障设备',
							prop: '',
							minWidth: 200,
						},
						{
							label: '故障描述',
							prop: 'remarks',
							minWidth: 200,
						},
						{
							label: '设备品牌',
							prop: 'applianceBrand',
							minWidth: 120,
						},
						{
							label: '结算金额',
							prop: 'settleAmount',
							minWidth: 100,
						},
						{
							label: '结算备注',
							prop: 'settleRemarks',
							minWidth: 200,
						},
						{
							label: '结算时间',
							prop: 'settleTime',
							minWidth: 150,
						},
						{
							label: '业主姓名',
							prop: 'customerName',
							minWidth: 100,
						},
						{
							label: '联系方式',
							prop: 'customerMobile',
							minWidth: 120,
						},
						{
							label: '安装地址',
							prop: 'address',
							minWidth: 250,
						}
					],
				},
				listData: [{}],
        formData: {},
      };
    },
		// beforeRouteEnter(to, from, next) {
		// 	next(vm => {
		// 		console.log("to, from, next",to, from, next)
		// 		if(to.query.userName){
		// 			vm.query.siteName = to.query.userName;
		// 			vm.onLoad();
		// 		}
		// 	});
		// },
		activated() {
			if(this.$route.query.userName){
				this.query.siteName = this.$route.query.userName;
				this.onLoad();
			}
		},
    created(){
			this.$route.meta.$keepAlive = true;
    },
    methods: {
			beforeOpen(done, 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;
			  });
			},
			searchReset() {
			  this.query = {};
			  this.onLoad();
			},
			searchChange(params, done) {
			  this.query = params;
			  this.page.currentPage = 1;
			  this.onLoad();
			  done();
			},
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },   
    }
  };
</script>

<style>
</style>
