<template>
  <div v-authority="'financeAccountingGroupList'">
    <gridToolbar
			:query="query"
			@submitQuery="submitQuery"
			@refresh="refresh"
			:showAdd="false">
			<a-form-model-item label="起止时间">
				<a-range-picker
					v-model="date_range"
					style="width: 300px"
					:ranges="ranges"
					:show-time="{
						hideDisabledOptions: true,
						format: 'HH:mm',
						defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
					}"
			    format="YYYY-MM-DD HH:mm"
					:placeholder="['开始时间', '结束时间']" />
			</a-form-model-item>
		</gridToolbar>
    <data-grid
			:api="request_api.finance_accounting_group"
			:query="requestQuery"
			ref="dataGrid"
			@change="handleChange">
      <a-table-column
				title="UUID"
				dataIndex="uuid" />
      <a-table-column
				title="状态"
				dataIndex="status"
				:filters="columnFilters(finance_accounting_options)"
				:filterMultiple="false">
        <template slot-scope="value">
					<a-tag :color="['orange', 'green', 'red', 'blue'][value - 1]">{{ value | finance_accounting }}</a-tag>
				</template>
      </a-table-column>
      <a-table-column title="创建/更新时间" dataIndex="created_date">
        <template slot-scope="text, record">
					<div class="multi_line">
						<span>{{ text | moment }}</span>
						<span>{{ record.updated_date | moment }}</span>
					</div>
        </template>
      </a-table-column>
      <a-table-column title="操作">
				<div class="table-btn-group" slot-scope="text, record">
					<a-button @click="detail(record)" type="link" v-authority="'financeAccountingSnapshotList'">核算快照</a-button>
				</div>
      </a-table-column>
    </data-grid>
  </div>
</template>
<script>
import DataGrid from '../../components/DataGrid'
import gridToolbar from '../../components/gridToolbar/default'

import mix from '../../mixins/mixins'
import tableFilter from '../../mixins/tableFilter'
import finance from '../../mixins/finance'
import common from '../../mixins/common'
import momentDate from '../../mixins/momentDate'
export default {
	mixins: [common, mix, tableFilter, finance(), momentDate],
	components: {
		DataGrid, gridToolbar
	},
	data () {
		return {
			date_range: []
		}
	},
	methods: {
		detail (v) {
			if (!v.uuid) return
			this.$router.push({
				name: 'financeAccountingSnapshotList',
				params: {
					snapshot_group_uuid: v.uuid
				}
			})
		},
		submitQuery(_query) {
			this.query = _query
			this.extendQuery = {
				...(this.date_range[0] && { date_from: new Date(this.date_range[0]).getTime() * 1000000 }),
				...(this.date_range[1] && { date_end: new Date(this.date_range[1]).getTime() * 1000000 })
			}
		}
	}
}
</script>
