<template>
  <div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
    <div class="filter-container" ref="filter-container">
      <el-form
        ref="queryForm"
        :inline="inline"
        :model="listQuery"
        label-width="100px"
      >
        <el-form-item label="车牌号">
          <el-input v-model="listQuery.numberPlate" placeholder="请输入车牌号"></el-input>
        </el-form-item>
        <el-form-item label="所属公司">
          <el-select class="filter-item" v-model="listQuery.companyId" placeholder="请选择所属公司" filterable>
            <el-option :key="undefined" label="全部" :value="undefined"></el-option>
            <el-option
              v-for="(val,index) in allVehicleCompany "
              :key="index"
              :label="val.name"
              :value="val.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属门店">
          <el-select class="filter-item" v-model="listQuery.subordinateBranch" placeholder="请选择所属门店" filterable>
            <el-option :key="undefined" label="全部" :value="undefined"></el-option>
            <el-option
              v-for="(val,index) in allVehicleBranchCompany"
              :key="index"
              :label="val.name"
              :value="val.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车型">
          <el-select class="filter-item" v-model="listQuery.modelId" placeholder="请选择车型" filterable>
            <el-option :key="undefined" label="全部" :value="undefined"></el-option>
            <el-option
              v-for="(val,index) in allVehicleList"
              :key="index"
              :label="val.name"
              :value="val.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button
        class="filter-item"
        type="primary"
        v-waves
        icon="search"
        @click="handleFilter('search')"
      >搜索</el-button>
      <el-button class="filter-item" type="primary" v-waves @click="reloadPage">清除搜索</el-button>
    </div>
    <el-table :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column type="index" align="center" label="序号" width="65"></el-table-column>
      <el-table-column align="center" label="车牌号">
        <template slot-scope="scope">
          <span>{{scope.row.numberPlate}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="车辆编码">
        <template slot-scope="scope">
          <span>{{scope.row.code}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="车型">
        <template slot-scope="scope">
          <span>{{scope.row.modelName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="车龄">
        <template slot-scope="scope">
          <span>{{scope.row.vehicleAge}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="新旧程度">
        <template slot-scope="scope">
          <span>{{scope.row.vehicleStatus == 4 ? '7成新' : scope.row.vehicleStatus == 2 ? '9成新': scope.row.vehicleStatus == 3 ? '8成新' : '全新'}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="公里数">
        <template slot-scope="scope">
          <span>{{scope.row.mileage}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="租赁价格">
        <template slot-scope="scope">
          <span>{{scope.row.rentPrice}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="免费天数">
        <template slot-scope="scope">
          <span>{{scope.row.rentFreeDay}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            @click="handleGeneralPrice(scope.row)"
          >通用价格</el-button>
          <el-button
            size="small"
            type="text"
            @click="handlerFestivalPrice(scope.row)"
          >节假日价格</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination-container"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="listQuery.page"
      :page-sizes="[10,20,30, 50]"
      :page-size="listQuery.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <!--  通用价格设置  -->
    <general-price-setting v-on:generalDialogEvent="generalDialogEvent" :one-row="oneRow" v-if="generalDialogVisible"></general-price-setting>
    <!--  节假日价格设置  -->
    <festival-price-setting v-on:festivalDialogEvent="festivalDialogEvent" :one-row="oneRow" v-if="festivalDialogVisible"></festival-price-setting>
  </div>
</template>

<script type="javascript">
  import generalPriceSetting from "./generalPriceSetting";
  import festivalPriceSetting from "./festivalPriceSetting";
  import {
    vehicleCommonPriceInfo,
    vehicleBranchCompanyAll,
    vehicleCompanyAll
  } from 'api/vehicle/vehicleInfo/'
  import { mapGetters } from 'vuex'
  import {getAllVehicleList} from "../../api/vehicleType";

  export default {
    components: {
      generalPriceSetting,
      festivalPriceSetting
    },
    data() {
      return {
        tableKey: 0,
        oneRow: {}, // 当前操作项
        festivalDialogVisible: false, // 节日价格弹框
        generalDialogVisible: false, // 通用价格弹框
        showLoadingBody: false,
        list: [],
        total: null,
        listLoading: true,
        inline: true,
        listQuery: {
          page: 1,
          limit: 20,
          subordinateBranch: undefined, // 所属门店
          companyName: undefined, // 所属公司
          modelId: undefined, // 车型
        },
        allVehicleBranchCompany: [],// 所属门店列表
        allVehicleCompany: [], // 所属公司列表
        allVehicleList: [], //全部车型
      }
    },
    created() {
      this.getVehicleBranchCompanyAll() // 获取  所属门店 所有门店筛选列表
      this.getVehicleCompanyAll() // 获取 所属公司 所有公司筛选条件
      this.getList()
      this.getAllVehicleType() // 获取全部车型
    },
    computed: {
      ...mapGetters(['elements']),
    },
    methods: {
      /**
       * 获取全部车型
       * */
      getAllVehicleType() {
        let t = this
        getAllVehicleList().then(response => {
          let listRs = undefined
          if (!this.$utils.isEmpty(response.data)) {
            listRs = response.data
          }
          this.allVehicleList = listRs
        })
      },
      /**
       * 获取所有门店-筛选列表
       */
      getVehicleBranchCompanyAll(){
        vehicleBranchCompanyAll({state: 1}).then(response => {
          if(response.status == 200){
            this.allVehicleBranchCompany = response.data
          } else {
            this.$notify({
              title: '失败',
              message: response.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      /**
       * 获取所属公司  所有公司--筛选条件
       */
      getVehicleCompanyAll(){
        vehicleCompanyAll({state: 1}).then(response => {
          if(response.status == 200){
            this.allVehicleCompany = response.data
          } else {
            this.$notify({
              title: '失败',
              message: response.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      /**
       * 通用价格设置--返回
       */
      generalDialogEvent(e) {
        this.generalDialogVisible = false;
        if (e) {
          this.getList();
        }
      },
      /**
       * 通用价格设置--返回
       */
      festivalDialogEvent(e) {
        this.festivalDialogVisible = false;
        if (e) {
          this.getList();
        }
      },
      /**
       * 获取列表
       */
      getList() {
        vehicleCommonPriceInfo(this.listQuery).then(response => {
          if (response.status == 200) {
            this.listLoading = false
            this.list = response.data.data
            this.total = response.data.totalCount
          } else {
            this.list = []
            this.listLoading = false
          }
        })
      },
      /**
       * 搜索
       */
      handleFilter(p) {
        this.listQuery.page = 1
        this.getList()
      },
      /**
       * 清除搜索
       */
      reloadPage(){
        this.listQuery = {
          page: 1,
          limit: 20,
          subordinateBranch: undefined, // 所属门店
        }
        this.getList()
      },
      /**
       * 一页显示数量调整
       */
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
      /**
       * 翻页
       */
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
      /**
       * 设置通用价格
       */
      handleGeneralPrice(row){
        this.oneRow = row
        this.generalDialogVisible = true
      },
      /**
       * 设置节日价格
       */
      handlerFestivalPrice(row){
        this.oneRow = row
        this.festivalDialogVisible = true
      },
    }
  }
</script>

