<template>
    <d2-container>
        <div class="d2-table-view-full">
            <div class="d2-table-view-header">
                <el-form label-width="100px" labelPosition="right" size="small" :inline="true" :model="filter"
                         @keyup.enter.native="handleList" class="demo-form-inline">
                    <el-form-item label="车牌号码">
                        <el-input style="width: 192px" v-model.trim="filter.vehicleNo" placeholder="车牌号码" clearable/>
                    </el-form-item>
                    <!--<el-form-item label="车场区域">-->
                    <!--<el-input style="width: 192px" v-model="filter.areaId" placeholder="车场区域" clearable/>-->
                    <!--</el-form-item>-->
                    <el-form-item label="停车卡类型" prop="paramCode">
                        <custom-select :value="filter.paramCode" v-model="filter.paramCode" typeName="停车卡类型" style="width: 100%"></custom-select>
                    </el-form-item>
                    <el-form-item label="发行时间">
                        <el-date-picker
                                v-model="time"
                                type="datetimerange"
                                value-format="yyyy-MM-dd"
                                @change="dateChange"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleList('1')">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="d2-table-view-header">
                <el-form label-width="100px" labelPosition="center" size="small" :inline="true" :model="form"
                         class="demo-form-inline">
                    <el-form-item label="延期时长" prop="endTmNum">
                        <el-radio label="1"  v-model="form.endTmNum" @change="changeEndTmNum">1个月</el-radio>
                        <el-radio v-model="form.endTmNum" label="2" @change="changeEndTmNum">2个月</el-radio>
                        <el-radio v-model="form.endTmNum" label="3" @change="changeEndTmNum">3个月</el-radio>
                        <el-radio v-model="form.endTmNum" label="6" @change="changeEndTmNum">6个月</el-radio>
                        <el-radio v-model="form.endTmNum" label="12" @change="changeEndTmNum">1年</el-radio>
                        <el-radio v-model="form.endTmNum" label="" @change="changeEndTmNum">延期至指定时间</el-radio>
                        <el-date-picker
                                v-model="form.endTm"
                                :disabled="isChangeDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="延期费用">
                        <el-input style="width: 192px" v-model.trim="form.foregifts" type="number" min="0" clearable/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="delayClick">延期</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="d2-table-view-content">
                <div class="d2-table-view-handle">
                    <!--<el-button @click="onCreateClick" size="small" icon="el-icon-plus">新增</el-button>-->
                    <!--<el-button size="small" @click="onMutilDelClick">批量删除</el-button>-->
                </div>
                <d2-crud
                        title="车牌号"
                        ref="d2Crud"
                        :options="tableOptions"
                        :loading="loading"
                        :columns="columns"
                        :data="data"
                        selection-row
                        @selection-change="handleSelectionChange"
                >
                </d2-crud>
            </div>
            <div class="d2-table-view-footer">
                <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :page-size="tableOptions.pageList[0]"
                        :page-sizes="tableOptions.pageList"
                        :current-page.sync="currentPage"
                        layout="total,sizes, prev, pager, next,jumper"
                        :total="pagination.total"
                ></el-pagination>
            </div>
        </div>
    </d2-container>
</template>
<script>
  import { tableOptions } from '../../../../assets/options'
  import {getCarCateOptions} from '@/api/parking/mangeCar/userRights'
  import { getDelayCarList,submitDelayCar} from '@/api/parking/mangeCar/delayCar'

  export default {
    name: 'cateUser',
    components: {},
    data () {
      return {
        options1:[],
        flag:true,
        dateList:[],
        isChangeDate:false,
        veIds:[],
        schannelIds: [],
        schannelIdss: '',
        equipmentOptions: [],
        workStationOptions: [],
        options: [],
        time: '',
        options: [],
        stationId: [],
        stationIds: '',
        isCreate: false,
        userId: '',
        checkList: [],
        // classVisible:false,
        staLoading: false,
        multipleSelection: [],
        func: {
          add: false,
          delete: false,
          update: false,
          select: false
        },
        falg: true,
        isExpend: true,
        tableOptions,
        loading: false,
        lanuchs: [],
        filter: {
          pageSize: 10,
          pageNum: 1,
          bgTm: '',
          endTm: '',
          vehicleNo: '',
          paramCode: ''
        },
        form: {
          veIds: '',
          endTm: '',
          endTmNum: '',
          foregifts: 0
        },
        pagination: {
          total: 0
        },
        currentPage: 1,
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        columns: [
          {
            title: '用户编号',
            key: 'userNo',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '用户名称',
            key: 'userNm',
            minWidth: '140',
            showOverflowTooltip: true
          },
          {
            title: '部门名称',
            key: 'depNm',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '车牌编号',
            key: 'vehicleNo',
            minWidth: '150',
            showOverflowTooltip: true
          },
          {
            title: '使用状态',
            key: 'veUseSts',
            minWidth: '90',
            formatter (row, column, cellValue, index) {
              if (cellValue === "0") {
                return '正常'
              }else if(cellValue === "1"){
                return '失效'
              }else if(cellValue === "2"){
                return '报停'
              }
            }
          },
          {
            title: '车辆类别',
            key: 'carTypNm',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '停车卡类型',
            key: 'paramData',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '有效起始日',
            key: 'bgTm',
            minWidth: '180',
            showOverflowTooltip: true
          },
          {
            title: '有效终止日',
            key: 'endTm',
            minWidth: '180',
            showOverflowTooltip: true
          },
          {
            title: '押金',
            key: 'costDeposit',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '储值金额',
            key: 'accountMoney',
            minWidth: '90',
            showOverflowTooltip: true
          },
          // {
          //   title: '车位编号',
          //   key: 'areaNm',
          //   minWidth: '150',
          //   showOverflowTooltip: true
          // },
          {
            title: '卡号',
            key: 'cardId',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '车牌颜色',
            key: 'vehicleColor',
            minWidth: '120',
            showOverflowTooltip: true
          },
        ],
        // rowHandle: {
        //   columnHeader: '操作',
        //   minWidth: '180',
        //   align: 'center',
        //   custom: [
        //     {
        //       text: '编辑',
        //       type: 'primary',
        //       size: 'small',
        //       emit: 'edit'
        //     },
        //     {
        //       text: '删除',
        //       type: 'danger',
        //       size: 'small',
        //       emit: 'delete'
        //     }
        //   ]
        // },
        data: [],
      }
    },

    methods: {
      changeEndTmNum(){
        // console.log(this.form.endTmNUm)
        if(this.form.endTmNum===""){
        this.isChangeDate=false
        }else {
          this.isChangeDate=true
          this.form.endTm=""
        }
      },
      delayClick () {
        this.flag=true
        if(!this.form.foregifts){
          this.form.foregifts=0
        }
   this.veIds=[]
        if (!this.multipleSelection.length) {
          this.$message({
            message: '请选择记录',
            type: 'warning'
          })
          return
        }
        if(this.form.endTmNum==""){
          if(!this.form.endTm){
            this.$message({
              message: '请选择指定日期',
              type: 'warning'
            })
            return
          }
        }
        this.multipleSelection.forEach((item,index)=>{
          this.veIds.push(item.veId)
          // this.dateList.push(item.endTm)
          let t=new Date(this.form.endTm).getTime()
          let l=new Date(item.endTm).getTime()+8*3600*1000
          if(t<=l){
            this.flag=false
            this.$message({
                  message: '延期时间必须大于有效终止日期',
                  type: 'warning'
                })
            return
          }
        })
        this.form.veIds=this.veIds.join(',')
        if(!this.flag){
          return
        }
          submitDelayCar(this.form).then(res=>{
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.handleTreeNode()
           this.clearform()
          })
      },
      dateChange (val) {
        if (val == null) {
          this.filter.bgTm = ''
          this.filter.endTm = ''
        } else {
          this.filter.bgTm = val[0]
          this.filter.endTm = val[1]
        }
      },
      handleTreeNode () {
        this.handleList()
      },
      clearform(){
        this.form={}
      },
      handleList (val) {
        if (val) {
          this.filter.pageNum = 1
          this.currentPage = 1
        }
        this.loading = true
        getDelayCarList(this.filter)
          .then(res => {
            // console.log(res)
            this.loading = false
            this.data = res.page.list
            this.pagination.total = res.page.total
          })
          .catch(err => {
            this.loading = false
          })
      },
      handleSelectionChange (val) {
        this.isCreate = false
        this.multipleSelection = val
      },
      handleCurrentChange (val) {
        this.filter.pageNum = val
        this.handleList()
      },
      handleSizeChange (val) {
        this.filter.pageNum = 1
        this.filter.pageSize = val
        this.handleList()
      },
    },
    mounted () {
      // getCarCateOptions().then(res=>{
      //   this.options1=res.list
      // })
      this.filter.pageSize = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions, 102)
      this.handleTreeNode()
    }
  }
</script>
<style>
    .d2-table-view-header .el-radio {
        margin-right: 15px;
    }

    .d2-table-view-full {
        height: 100%;
    }

    .timeBox {
        margin-top: 10px;
    }

    .timePay {
        margin-left: 8px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .timeLabel label {
        width: 110px !important;
    }

    .bankLabel label {
        font-size: 13px;
    }

    .el-form-item__label {
        text-align: left !important;
    }

    .d2-table-view {
        overflow: hidden;
    }
    .d2-table-view-content{
        height: 100%;
    }
    .el-table{
        height: 450px !important;
    }
</style>