<template>
  <el-dialog
    title="水权交易"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleClose"
    width="1200px"
  >
  <el-form
    ref="baseForm"
    class="base-form"
    label-position="right"
    label-width="95px"
    :model="baseForm"
    :rules="rules"
    size="small"
  >
    <el-row class="tab-wea-info" :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header">
            <span>卖方信息</span>
          </div>
          <div style="display:flex;align-items:center;margin-bottom:15px;">
            <el-form-item label="用水户：" prop="trxrcdSellerid" style="margin:0;padding:0">
              <el-select
                v-model="baseForm.trxrcdSellerid"
                filterable 
                placeholder="请选择您的卖方信息"
                @change="trxrcdSelleridHandler"
              >
              <el-option
                v-for="item in farmerList"
                :key="item.id"
                :label="item.farmerName"
                :value="item.farmerId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          </div>
          <div class="item">
            区域：{{ sellerRow.cusareaName }}
          </div>
          <div class="item">
            已分配水权：{{ sellerRow.farmerWramount  }}
          </div>
          <div class="item">
            可用水权：{{ sellerRow.farmerWrbalance }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header">
            <span>买方信息</span>
          </div>
          <div style="display:flex;align-items:center;margin-bottom:15px;">
            <el-form-item label="用水户：" prop="trxrcdBuyerid" style="margin:0;padding:0">
              <el-select
                v-model="baseForm.trxrcdBuyerid"
                filterable 
                placeholder="请选择您的买方信息"
                @change="trxrcdBuyeridHandler"
              >
                <el-option
                  v-for="item in farmerList"
                  :key="item.id"
                  :label="item.farmerName"
                  :value="item.farmerId"
                >
                </el-option>
              </el-select>
          </el-form-item>
          </div>
          <div class="item">
            区域：{{ buyerRow.cusareaName }}
          </div>
          <div class="item">
            已分配水权：{{ buyerRow.farmerWramount }}
          </div>
          <div class="item">
            可用水权：{{ buyerRow.farmerWrbalance }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header">
            <span>交易信息</span>
          </div>
          <div style="display:flex;align-items:center">
            <el-form-item label="交易水量：" prop="trxrcdNum" style="margin:0;padding:0">
              <el-input
                type="number"
                min="0"
                :max="sellerRow.farmerWrbalance"
                v-model="baseForm.trxrcdNum"
                style="width: 150px"
              />
            </el-form-item>
          </div>
          <div style="display:flex;align-items:center;margin-top: 10px">
            <el-form-item label="交易价格：" prop="trxrcdPrice" style="margin:0;padding:0">
              <el-input
                type="number"
                min="0"
                v-model="baseForm.trxrcdPrice"
                style="width: 150px"
              />
            </el-form-item>
          </div>
          <div style="display:flex;align-items:center;margin-top: 10px">
            <el-form-item label="交易金额："  style="margin:0;padding:0">
              {{ (Number(baseForm.trxrcdNum) * Number(baseForm.trxrcdPrice)).toFixed(2) }}
            </el-form-item>
          </div>
          <div style="text-align:right;margin-top:50px">
            <el-button type="info" plain @click="resetForm('baseForm')"
            >取消</el-button
          >
            <el-button
              size="small"
              :underline="false"
              type="primary"
              style="margin:0 10px 0 16px"
              @click="submitForm('baseForm')"
              >确认交易</el-button
            >
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-form>
  </el-dialog>
</template>

<script>
import { addTrxrcd } from '@/api/trxrcd/index.js'
import { assign } from 'lodash-es';
export default {
  name:'waterDeal',
  props: {
    data: {
      default() {
        return {};
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    farmerList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      sellerRow: {},
      buyerRow: {},
      trxrcdMoney: 0,
      baseForm: {
        trxrcdSellerid: '',
        trxrcdBuyerid: '',
        trxrcdPrice: 0,
        trxrcdNum: 0
      },
      rules: {
        trxrcdSellerid: [
          { required: true, message: '请选择您的卖方用水户', trigger: 'blur' }
        ],
        trxrcdBuyerid: [
          { required: true, message: '请选择您的买方用水户', trigger: 'blur' }
        ],
        trxrcdPrice: [
          { required: true, message: '请输入您的交易水量', trigger: 'blur' }
        ],
        trxrcdNum: [
          { required: true, message: '请输入您的交易价格', trigger: 'blur' }
        ]
      }
    };
  },
  watch: {
    visible(val) {
      if (val !== this.dialogVisible) {
        this.dialogVisible = val;
        if (val) {
          assign(this.baseForm, this.data);
          if (!this.hasFetched) {
            this.hasFetched = true;
          }
        }
      }
    },
  },
  methods: {
    async addTrxrcdHandler() {
      const params = { ...this.baseForm }
      params.trxrcdMoney = Number(this.baseForm.trxrcdNum) * Number(this.baseForm.trxrcdPrice)
      await addTrxrcd(params)
      this.handleClose()
      this.$emit('addSuccess')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        valid && this.addTrxrcdHandler()
    })},
    getRowByFarmerId(farmerId) {
      return this.farmerList.find(item => item?.farmerId === farmerId)
    },
    trxrcdSelleridHandler(val) {
      this.sellerRow = this.getRowByFarmerId(val)
    },
    trxrcdBuyeridHandler(val) {
      this.buyerRow = this.getRowByFarmerId(val)
     },
    resetForm(formName) {
      this.dialogVisible = false;
    },
    handleClose() {
      this.$emit('update:visible', false);
      this.resetForm('baseForm');
    },
  }
};
</script>
<style lang="css" scoped>
::v-deep .el-dialog__header {
  border-bottom: 1px solid #ebeef5;
}
.el-card{
  height: 300px;
}
.item{
  margin: 10px 0;
  font-weight: bold;
  color: #606266;
  padding-left: 25px;
}
</style>
