<template>
  <div v-loading="loading" style="padding:20px">
    <el-row>
      <el-form ref="ruleForm" :rules="ruleForm" :model="oilTfOrder" label-width="120px" :size="$store.getters.size">
        <el-row :span="24">
          <el-col :span="13">
            <el-form-item label="匹配任务名称" prop="taskName">
              <el-input v-model="oilTfOrder.taskName" clearable placeholder="请输入匹配任务内容" />
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="匹配公司" prop="companyId">
              <el-select v-model="oilTfOrder.companyId" style="width:100%" remote filterable :remote-method="parentCompanyOrginQuery" clearable placeholder="请输入" @change="queryCompanyInfo" @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 :span="13">
            <el-form-item label="匹配目标金额" prop="matchAmount">
              <el-input v-model="oilTfOrder.matchAmount" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="匹配油站" prop="siteId">
              <!-- <el-input v-model="oilTfOrder.siteId" clearable /> -->
              <div style="margin-bottom:20px">
                <el-radio v-model="pipeiType" :label="0" border size="medium">按省份</el-radio>
                <el-radio v-model="pipeiType" :label="1" border size="medium">按独立油站</el-radio>
              </div>
              <el-cascader
              @change="query"
              v-show="!pipeiType"
                ref="refSubCat"
                v-model="addrCode"
                placeholder="请选择"
                :size="$store.getters.size"
                style="width: 100%"
                :options="areaTree"
                :props="{value:'id', label:'areaName'}"
                filterable
                clearable
              />
              <el-select
                   v-show="pipeiType"
                    v-model="oilTfOrder.siteId"
                    style="width:100%"
                    filterable
                    remote
                    clear
                    clearable
                    reserve-keyword
                    placeholder="油站名称"
                    :remote-method="getSimpleOilSiteInfo"
                    @change="query"
                  >
                    <el-option v-for="item in sites" :key="item.id" :label="item.siteName" :value="item.id" />
                  </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="订单结束时间" prop="orderEndTime">
              <el-date-picker
              :picker-options="pickerOptions"
              :disabled="disabled"
                v-model="value1"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width:100%"
                type="datetimerange"
                range-separator="至"
                :unlink-panels="true"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="showss"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :span="24" class="row-show" justify="end" style="margin-bottom:24px;justify-content: space-between !important;padding: 0 50px;">
          <el-col v-show="oilCompanyAccount.balance" :span="11">
            <el-card class="box-card">
              <div>
                公司账户信息
              </div>
              <hr>
              <el-row style="margin-top:10px">
                <el-col :span="12">
                  <font color="#A4A4A4">公司名称 </font>
                </el-col>
                <el-col :span="12" style="text-align:right">
                  <font>{{ oilCompanyAccount.companyName }} </font>
                </el-col>
              </el-row>
              <el-row style="margin-top:10px">
                <el-col :span="12">
                  <font color="#A4A4A4">总余额： </font>
                </el-col>
                <el-col :span="12" style="text-align:right">
                  <font>¥  {{ oilCompanyAccount.balance }}</font>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col v-show="orderQueryInfo.tfOrderTotal" :span="11">
            <el-card class="box-card">
              <div>
                订单匹配信息
              </div>
              <hr>
              <el-row>
                <el-col :span="12">
                  <font color="#A4A4A4">订单数量： </font>
                </el-col>
                <el-col :span="12" style="text-align:right">
                  <font>    {{ orderQueryInfo.tfOrderTotal }} </font>
                </el-col>
              </el-row>

              <el-row style="margin-top:10px">
                <el-col :span="12">
                  <font color="#A4A4A4">订单金额 </font>
                </el-col>
                <el-col :span="12" style="text-align:right">
                  <font>¥  {{ orderQueryInfo.payRealAmountTotal }} </font>
                </el-col>
              </el-row>

            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="匹配备注说明" prop="remark">
              <el-input
                v-model="oilTfOrder.remark"
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div :span="24"
          style="background:#fff;margin-top:20px;text-align: right;width:100%;">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="submit" style="margin-right:10px">提交</el-button>
        </div>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import oilCompanyInfoApi from '@/api/user/oilCompanyInfo'
import oilCompanyAccountApi from '@/api/finance/oilCompanyAccount'
import oilSiteInfoApi from '@/api/user/oilSiteInfo'
import AreaCodeApi from '@/api/base/areaCode'
import orderInfoApi from '@/api/order/orderInfo'
export default {
  data() {
    return {
      pickerOptions:{
        disabledDate:function(e){
          if(Date.parse(e)<Date.parse('2022/05/25')){
            return true
          }else{
          return false
          }
        }
      },
      disabled:false,
      pipeiType:0,
      areaTree: [],
      addrCode: [], // 省市区code
      value1: '',
      gridNum: {
        row: {
          gutter: 2
        },
        cols: {
          xs: 24,
          sm: 24,
          md: 12,
          lg: 12,
          xl: 6
        }
      },
      oilTfOrder: {
      },
      sites: [], // 主油站集合
      loading: false,
      ruleForm: {
        task_name: [
          { required: true, message: '匹配任务名称不能为空', trigger: 'change' }
        ],
        companyId: [
          { required: true, message: '匹配公司不能为空', trigger: 'change' }
        ],
        matchAmount: [
          { required: true, message: '匹配目标金额不能为空', trigger: 'change' },
          { pattern: /(^[1-9]\d{0,5}(\.[0-9]{1,2})?$)|(^[0](\.\d{1,2})?$)|(^[1][0]{6}(\.[0]{1,2})?$)/, message: '匹配金额在1-1000000区间' }
        ],
        orderStartTime: [
          { required: true, message: '订单开始时间不能为空', trigger: 'change' }
        ]
      },
      companyList: [], // 企业列表
      orderQueryInfo: {}, // 匹配订单信息
      oilCompanyAccount: {} // 企业账户信息
    }
  },
  watch:{
    pipeiType(){
      if(this.pipeiType){
        this.addrCode = []
      }else{
        this.oilTfOrder.siteId = ''
      }
    }
  },
  created() {
    AreaCodeApi.getTree().then(res => {
      this.areaTree = res.data
    })
  },
  methods: {
    showss() {
      this.oilTfOrder.orderStartTime = this.value1[0]
      this.oilTfOrder.orderEndTime = this.value1[1]
      this.query()
    },
    // 远程搜索主油站
    getSimpleOilSiteInfo(siteName) {
      if (siteName) {
        const oilSiteInfo = {}
        oilSiteInfo.siteName = siteName
        oilSiteInfoApi.getSimpleOilSiteInfo(oilSiteInfo).then(res => {
          this.sites = res.data
        })
      } else {
        this.sites = []
      }
    },
    queryCompanyInfo(value) {
      console.log('123')
      if (value) {
        oilCompanyAccountApi.getByCompanyId(value).then(res => {
          this.oilCompanyAccount = res.data
        })
      } else {
        this.oilCompanyAccount = {}
      }
    },
    parentCompanyOrginQuery(value) { // 远程搜索企业
      if (value) {
        oilCompanyInfoApi.getLikeByNameSuccess({ 'name': value }).then(res => {
          this.companyList = res.data
        })
      }
    },
    // disabledDate(){
    //   console.log(arguments,'禁用回调')

    //   return false
    // },
    query() {
      if(this.addrCode.length>0 && this.addrCode){
          this.oilTfOrder.provinceCode = this.addrCode[0]
        }else{
          this.oilTfOrder.provinceCode = ''
        }
      // 查询日期匹配信息
      if (this.oilTfOrder.orderEndTime && this.oilTfOrder.orderStartTime) {
        orderInfoApi.getTfOrderInfo(this.oilTfOrder).then(res => {
          console.log(res)
          this.orderQueryInfo = res.data
        })
      }
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        console.log(valid)
        if (valid) {
          console.log('这里是匹配订单信息')
          console.log(this.oilTfOrder)
          this.save(this.oilTfOrder)
        }
      })
    },
    save() {
      this.$confirm('是否确定添加，请确认！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      // 这里调用接口
      // 保存
        this.loading = true
        orderInfoApi.TfOrder(this.oilTfOrder).then(res => {
          this.$message.success(res.msg)
          this.oilTfOrder = {}
          this.orderQueryInfo = {}
          this.oilCompanyAccount = {}
          this.companyList = []
          this.value1 = ''
          this.loading = false
          this.$emit('closeDialog')
          this.$emit('getByPage')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      }).finally(res=>{
        this.loading = false;
        console.log('finally')
        
      })
    },
    close() {
      this.$emit('closeDialog')
    }
  }
}
</script>
<style>

</style>
<style scoped>
.el-divider--horizontal {
  margin: 10px 0;
}
</style>