<template>
  <ui-grid
    ref="grid"
    title="事项"
    :height="height"
    :row-toolbar="gridRowToolbarItems"
    :query-method="handleQueryGridData"
  >
    <slot name="filter" />
    <ui-grid-sort
      :items="gridSortItems"
    />
    <ui-grid-column label="ID" prop="id" width="210px"></ui-grid-column>
    <template v-if="currentType === 'oiling'">
      <ui-grid-column label="加油车辆" prop="vehicleNum" width="120px"></ui-grid-column>
      <ui-grid-column label="加油升数" prop="refuelingLitres" width="120px"></ui-grid-column>
      <ui-grid-column label="花费金额" prop="amountSpent" width="120px"></ui-grid-column>
      <ui-grid-column label="地点" prop="refuelingLocation" min-width="180px"></ui-grid-column>
      <ui-grid-column label="状态" prop="examineType" width="120px">
        <template slot-scope="{ row }">
          <report-work-status-select
            :editable="false"
            :value="row.examineType"
          ></report-work-status-select>
        </template>
      </ui-grid-column>
      <ui-grid-column label="上报时间" prop="createTime" width="150px"></ui-grid-column>
      <ui-grid-column label="上报人" prop="reportName"></ui-grid-column>
    </template>
    <template v-if="currentType === 'repair'">
      <ui-grid-column label="维修车辆" prop="vehicleNum" width="120px"></ui-grid-column>
      <ui-grid-column label="维修类型" width="120px">
        <template slot-scope="{ row }">
          {{ handleRenderWorkflowTypeText(row) }}
        </template>
      </ui-grid-column>
      <ui-grid-column label="故障描述" prop="describes" min-width="120px"></ui-grid-column>
      <ui-grid-column label="状态" prop="examineType" width="120px">
        <template slot-scope="{ row }">
          <report-work-status-select
            :editable="false"
            :value="row.examineType"
          ></report-work-status-select>
        </template>
      </ui-grid-column>
      <ui-grid-column label="上报时间" prop="createTime" width="150px"></ui-grid-column>
      <ui-grid-column label="上报人" prop="reportName" width="120px"></ui-grid-column>
    </template>
    <template v-if="currentType === 'maintain'">
      <ui-grid-column label="保养车辆" prop="vehicleNum" width="120px"></ui-grid-column>
      <ui-grid-column label="保养类型" width="120px">
        <template slot-scope="{ row }">
          {{ handleRenderWorkflowTypeText(row) }}
        </template>
      </ui-grid-column>
      <ui-grid-column label="保养描述" prop="describes" min-width="240px"></ui-grid-column>
      <ui-grid-column label="状态" prop="examineType" width="120px">
        <template slot-scope="{ row }">
          <report-work-status-select
            :editable="false"
            :value="row.examineType"
          ></report-work-status-select>
        </template>
      </ui-grid-column>
      <ui-grid-column label="上报时间" prop="createTime" width="150px"></ui-grid-column>
      <ui-grid-column label="上报人" prop="reportName" width="120px"></ui-grid-column>
    </template>
    <template v-if="currentType === 'fault'">
      <ui-grid-column label="事故车辆" prop="vehicleNum" width="120px"></ui-grid-column>
      <ui-grid-column label="事故类型" width="120px">
        <template slot-scope="{ row }">
          {{ handleRenderWorkflowTypeText(row) }}
        </template>
      </ui-grid-column>
      <ui-grid-column label="事故描述" prop="describes" min-width="240px"></ui-grid-column>
      <ui-grid-column label="状态" prop="examineType" width="120px">
        <template slot-scope="{ row }">
          <report-work-status-select
            :editable="false"
            :value="row.examineType"
          ></report-work-status-select>
        </template>
      </ui-grid-column>
      <ui-grid-column label="上报时间" prop="createTime" width="150px"></ui-grid-column>
      <ui-grid-column label="上报人" prop="reportName" width="120px"></ui-grid-column>
    </template>
    <template v-if="currentType === 'task'">
      <ui-grid-column label="任务描述" prop="describes" min-width="240px"></ui-grid-column>
      <ui-grid-column label="状态" prop="examineType" width="120px">
        <template slot-scope="{ row }">
          <report-work-status-select
            :editable="false"
            :value="row.examineType"
          ></report-work-status-select>
        </template>
      </ui-grid-column>
      <ui-grid-column label="上报时间" prop="createTime" width="150px"></ui-grid-column>
      <ui-grid-column label="上报人" prop="reportName" width="120px"></ui-grid-column>
    </template>
    <template v-if="currentType === 'procure'">
      <ui-grid-column label="采购物品" prop="purchasedGoodsName" min-width="150px"></ui-grid-column>
      <ui-grid-column label="采购数量" prop="purchasedGoodsQuantity" width="120px"></ui-grid-column>
      <ui-grid-column label="花费金额" prop="" min-width="240px"></ui-grid-column>
      <ui-grid-column label="状态" prop="examineType" width="120px">
        <template slot-scope="{ row }">
          <report-work-status-select
            :editable="false"
            :value="row.examineType"
          ></report-work-status-select>
        </template>
      </ui-grid-column>
      <ui-grid-column label="上报时间" prop="createTime" width="120px"></ui-grid-column>
      <ui-grid-column label="上报人" prop="reportName" width="120px"></ui-grid-column>
    </template>
    <template v-if="currentType === 'leave'">
      <ui-grid-column label="请假时长" prop="day" width="150px"></ui-grid-column>
      <ui-grid-column label="开始时间" prop="startTime" width="150px"></ui-grid-column>
      <ui-grid-column label="结束时间" prop="endTime" width="150px"></ui-grid-column>
      <ui-grid-column label="状态" prop="examineType" width="120px">
        <template slot-scope="{ row }">
          <report-work-status-select
            :editable="false"
            :value="row.examineType"
          ></report-work-status-select>
        </template>
      </ui-grid-column>
      <ui-grid-column label="上报时间" prop="createTime" width="150px"></ui-grid-column>
      <ui-grid-column label="上报人" prop="reportName" min-width="120px"></ui-grid-column>
    </template>
  </ui-grid>
</template>
<script>
import { loadWorkflowTypeOptions } from '../apis'
import ReportWorkStatusSelect from '../report-work-status-select/report-work-status-select'
import { Grid, GridColumn } from '@huntianning/components/packages/grid'

export default {
  name: 'ReportWorkGrid',
  props: {
    /**
     * 高度
    */
    height: {
      type: String
    },
    /**
     * 类别
    */
    type: {
      type: String
    },
    /**
     * 查询数据方法
    */
    queryMethod: {
      type: Function
    }
  },
  components: {
    UiGrid: Grid,
    UiGridColumn: GridColumn,
    ReportWorkStatusSelect
  },
  data() {
    return {
      loading: false,
      workflowTypeOptions: []
    }
  },
  computed: {
    currentType() {
      return this.type
    },
    gridSortItems() {
      return [{
        label: '按创建时间',
        prop: 'cc',
        unit: '最晚',
        order: 'desc'
      }, {
        label: '按创建时间',
        prop: 'cc',
        unit: '最早',
        order: 'asc'
      }, {
        label: '按跟进时间',
        prop: 'dd',
        unit: '最晚',
        order: 'desc'
      }, {
        label: '按跟进时间',
        prop: 'dd',
        unit: '最早',
        order: 'asc'
      }, {
        label: '按跟销售金额',
        prop: 'ee',
        unit: '最多',
        order: 'desc'
      }, {
        label: '按跟销售金额',
        prop: 'ee',
        unit: '最少',
        order: 'asc'
      }]
    },
    gridRowToolbarItems() {
      return [{
        label: '详情',
        click: this.handleDetailClick
      }]
    },
    workflowTypeOptionsMap() {
      return this.workflowTypeOptions.reduce((rs, v) => {
        rs[v.value] = v
        return rs
      }, {})
    }
  },
  created() {
    this.loadPageData()
  },
  methods: {
    reload() {
      return this.$refs.grid.reload()
    },
    loadData() {
      return this.$refs.grid.loadData()
    },
    loadPageData() {
      this.loading = true
      Promise.all([
        loadWorkflowTypeOptions().then(rs => {
          this.workflowTypeOptions = rs || []
        })
      ]).finally(() => {
        this.loading = false
      })
    },
    handleRenderWorkflowTypeText(row) {
      if (!this.workflowTypeOptionsMap[row.reportType]) {
        return
      }
      return this.workflowTypeOptionsMap[row.reportType].text
    },
    handleDetailClick({ row }) {
      this.$emit('detail-click', {
        row
      })
    },
    handleQueryGridData(evt) {
      if (!this.queryMethod) {
        return Promise.reject()
      }
      return this.queryMethod(evt)
    }
  }
}
</script>
