<template>
  <div style="padding: 20px;">
    <el-row>
      <el-form :model="oilCompanyMatch" :rules="ruleForm" ref="ruleForm" label-width="140px" :size="$store.getters.size">
        <el-row :gutter="gridNum.row.gutter">
          <el-col :xs="gridNum.cols.xs" :sm="gridNum.cols.sm" :md="gridNum.cols.md" :lg="gridNum.cols.lg" :xl="gridNum.cols.xl">
            <el-form-item label="公司" prop="companyId">
              <el-select v-model="oilCompanyMatch.companyId" disabled remote filterable :remote-method="parentCompanyOrginQuery" clearable placeholder="请输入" @keyup.enter.native="getByPage">
                <el-option
                  v-for="item in companyList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="gridNum.cols.xs" :sm="gridNum.cols.sm" :md="gridNum.cols.md" :lg="gridNum.cols.lg" :xl="gridNum.cols.xl">
            <el-form-item label="匹配额度" prop="matchAmount">
              <el-input v-model="oilCompanyMatch.matchAmount" disabled clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="gridNum.cols.xs" :sm="gridNum.cols.sm" :md="gridNum.cols.md" :lg="gridNum.cols.lg" :xl="gridNum.cols.xl">
            <el-form-item
              label="匹配方式"
              prop="matchMark"
            >
              <el-select v-model="oilCompanyMatch.matchMark" clearable>
                <el-option value="MATCH_DAY" label="按日匹配" />
                <!-- <el-option value="MATCH_MONTH" label="按月匹配" />
                <el-option value="MATCH_AMOUNT" label="按金额匹配" /> -->
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="gridNum.cols.xs" :sm="gridNum.cols.sm" :md="gridNum.cols.md" :lg="gridNum.cols.lg" :xl="gridNum.cols.xl">
            <el-form-item label="优先级，1-20" prop="matchPriority">
              <el-input v-model="oilCompanyMatch.matchPriority" clearable />
            </el-form-item>
          </el-col> -->
          <el-col :xs="gridNum.cols.xs" :sm="gridNum.cols.sm" :md="gridNum.cols.md" :lg="gridNum.cols.lg" :xl="gridNum.cols.xl">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="oilCompanyMatch.startTime"
                style="width:100%"
                clearable
                type="datetime"
                placeholder="开始时间"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="gridNum.cols.xs" :sm="gridNum.cols.sm" :md="gridNum.cols.md" :lg="gridNum.cols.lg" :xl="gridNum.cols.xl">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="oilCompanyMatch.endTime"
                style="width:100%"
                clearable
                type="datetime"
                placeholder="结束时间"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="gridNum.cols.xs" :sm="gridNum.cols.sm" :md="gridNum.cols.md" :lg="gridNum.cols.lg" :xl="gridNum.cols.xl">
            <el-form-item
              label="结束标识"
              prop="overMark"
            >
              <el-select v-model="oilCompanyMatch.overMark" clearable>
                <el-option
                  v-for="item in overMarks"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="gridNum.cols.xs" :sm="gridNum.cols.sm" :md="gridNum.cols.md" :lg="gridNum.cols.lg" :xl="gridNum.cols.xl">
            <el-form-item label="启用标识" prop="enableMark">
              <el-switch
                v-model="oilCompanyMatch.enableMark"
                :active-value="1"
                :inactive-value="0"
              />
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="备注说明" prop="remark">
              <el-input
                v-model="oilCompanyMatch.remark"
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="24" style="text-align: right">
          <el-button @click="close">取消</el-button>
          <el-button
            type="primary"
            @click="submit"
          >提交</el-button>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import oilCompanyMatchApi from '@/api/finance/oilCompanyMatch'
import oilCompanyInfoApi from '@/api/user/oilCompanyInfo'
export default {
  props: {
    oilCompanyMatch: {
      type: Object,
      default() {

      }
    }
  },
  data() {
    return {
      gridNum: {
        row: {
          gutter: 2
        },
        cols: {
          xs: 24,
          sm: 24,
          md: 12,
          lg: 12,
          xl: 6
        }
      },
      ruleForm: {
        companyId: [
          { required: true, message: '匹配公司不能为空', trigger: 'change' }
        ],
        matchAmount: [
          { required: true, message: '匹配额度不能为空', trigger: 'change' }
        ],
        matchMark: [
          { required: true, message: '匹配方式不能为空', trigger: 'change' }
        ],
        matchPriority: [
          { required: true, message: '优先级不能为空', trigger: 'change' }
        ],
        startTime: [
          { required: true, message: '开始时间不能为空', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '结束时间不能为空', trigger: 'change' }
        ],
        overMark: [
          { required: true, message: '结束标识不能为空', trigger: 'change' }
        ],
        enableMark: [
          { required: true, message: '启用标识不能为空', trigger: 'change' }
        ]
      },
      companyList: [], // 企业列表 //
      overMarks: [
        { value: 0,
          label: '匹配开始' },
        { value: 2,
          label: '匹配停止' },
        { value: 1,
          label: '匹配完成' }
      ]
    }
  },
  created() {
    if (this.oilCompanyMatch.companyId) {
      oilCompanyInfoApi.getLikeByNameSuccess({ 'id': this.oilCompanyMatch.companyId }).then(res => {
        this.companyList = res.data
      })
    } else {
      this.companyList = []
    }
  },
  methods: {
    parentCompanyOrginQuery(value) { // 远程搜索企业
      if (value) {
        oilCompanyInfoApi.getLikeByName({ 'name': value }).then(res => {
          this.companyList = res.data
        })
      }
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.update(this.oilCompanyMatch)
        }
      })
    },
    update() {
      // 更新
      this.oilCompanyMatch.updateSource = 'XOIL_OMS_WEB'
      oilCompanyMatchApi.update(this.oilCompanyMatch).then(res => {
        this.$message.success(res.msg)
        this.$emit('closeDialog')
        this.$emit('getByPage')
      })
    },
    close() {
      this.$emit('closeDialog')
    }
  }
}
</script>
