<template>
  <el-container style="flex-grow:1">
    <el-main class="containMain">
      <div class="contentTitle">进场登记</div>
      <div :style="{height:(allHeight-140)+'px'}">
        <el-form ref="form" :model="formData" label-width="80px" style="margin-top:20px;">
          <el-form-item label label-width="0">
            <el-input v-model="formData.cowID" prefix-icon="el-icon-search" style="width:300px" maxlength="8"></el-input>
            <el-button type="primary" @click="getNowCow" style="width:90px;margin-left:12px">确认</el-button>
          </el-form-item>
          <div class="sub" v-if="formData.cowID.length==8">操作牛号：{{formData.cowID}}</div>
          <el-form-item label="耳号">
            <el-input v-model="formData.earNO" style="width:200px" maxlength="8" placeholder="请输入耳号"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="formData.sex" style="width:76px" placeholder="请选择性别">
              <el-option v-for="item in sexList" :key="item.val" :label="item.title" :value="item.val"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="当前牧场">
            <el-input v-model="formData.currFarm" disabled style="width:110px" maxlength="8" placeholder="请输入牧场"></el-input>
          </el-form-item>
          <el-form-item label="当前牛舍">
            <el-select v-model="formData.currGroup" style="width:110px" placeholder="请选择">
              <el-option v-for="item in cowShedList" :key="item['牛舍编号']" :label="item['牛舍编号']" :value="item['牛舍编号']"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="进场日期">
            <el-date-picker v-model="formData.enterDate" style="width:200px" type="date" placeholder="选择进场日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="当前胎次">
            <el-input v-model="formData.currLact" style="width:110px" maxlength="2" placeholder="请输入当前胎次"></el-input>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker v-model="formData.birthday" style="width:200px" type="date" placeholder="选择出生日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="初生重量">
            <el-input v-model="formData.bornWeight" style="width:110px" maxlength="3" placeholder="请输入当前胎次"></el-input>
          </el-form-item>
          <el-form-item label="花色">
            <el-select v-model="formData.color" style="width:110px" placeholder="请选择">
              <el-option v-for="item in colorList" :key="item['名称']" :label="item['名称']" :value="item['名称']"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="泌乳状态">
            <el-select v-model="formData.groCode" style="width:110px" placeholder="请选择">
              <el-option v-for="item in groCodeList" :key="item['名称']" :label="item['名称']" :value="item['名称']"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="繁殖状态">
            <el-select v-model="formData.repCode" style="width:110px" placeholder="请选择">
              <el-option v-for="item in repCodeList" :key="item['名称']" :label="item['名称']" :value="item['名称']"></el-option>
            </el-select>
          </el-form-item>
          <div style="margin-top:80px">
            <el-button @click="onSave" type="primary" style="width:98px;" size="mediu">确认保存</el-button>
          </div>
        </el-form>
      </div>
    </el-main>
  </el-container>
</template>
<script>
import formValidator from '../formValidator'
import axios from 'axios'
import { mapState } from 'vuex'
export default {
  created() {

    this.getHaleInfo('wsCow', 'getUserDict', ['RepCode'], 'list').then((data) => {
      this.repCodeList = data
    })

    this.getHaleInfo('wsCow', 'getUserDict', ['GroCode'], 'list').then((data) => {
      this.groCodeList = data
    })

    this.getHaleInfo('wsCow', 'getUserDict', ['CowColor'], 'list').then((data) => {
      this.colorList = data
    })


    //牛舍列表
    this.getHaleInfo('wsCow', 'getAllGroupByFarmName', [
      this.$store.state.farmName
    ], 'list').then((data) => {
      this.cowShedList = data
    })
  },
  data() {
    return {
      cowShedList: [],
      saving: false,
      formData: {
        cowID: this.$store.state.farmNO,
        earNO: '',
        sex: true,
        currFarm: this.$store.state.farmName,
        currGroup: "",
        enterDate: this.getTime(Date.parse(new Date()), 'YYYY-MM-DD'),
        currLact: 0,
        birthday: "",
        bornWeight: 30,
        currCategory: "",
        color: "黑白花",
        groCode: "",//泌乳状态
        repCode: "",//繁殖状态
      },
      rules: {
        icon: [
          { required: true, message: '请上传头像', trigger: 'blur' },
        ],
        username: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入手机号'));
              } else if (/^1[3-9]\d{9}$/.test(value)) {
                callback();
              } else {
                callback(new Error('请输入正确的手机号'));
              }
            }, trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        roleId: [
          { required: true, message: '请选择角色', trigger: 'blur' },
        ]
      },
      sexList: [{
        title: '公牛',
        val: false
      }, {
        title: '母牛',
        val: true
      }],
      groCodeList: [],
      colorList: [],
      repCodeList: []
    }
  },
  computed: {
    ...mapState(['userInfo', 'allHeight']),
    reasons() {
      var list = []
      this.allReason.forEach(item => {
        if (list.indexOf(item['类别']) == -1) {
          list.push(item['类别'])
        }
      })
      return list
    },

  },
  watch: {
    'formData.cowID'() {
      if (this.formData.cowID.length == 0) {
        this.formData.cowID = this.$store.state.farmNO
      }
      if (this.formData.cowID.length != 8) {
        return
      }
      this.getNowCow()
    }
  },
  methods: {
    onSave() {
      if (!this.formData.cowID) {
        this.$message({
          message: '请录入进场牛只牛号',
          type: 'warning'
        });
        return
      }

       if (!this.formData.earNO) {
        this.$message({
          message: '请录入牛只耳号',
          type: 'warning'
        });
        return
      }

       if (!this.formData.currGroup) {
        this.$message({
          message: '请录入牛只牛舍',
          type: 'warning'
        });
        return
      }

      if (!this.formData.birthday) {
        this.$message({
          message: '请录入牛只出生日期',
          type: 'warning'
        });
        return
      }
      var formData={...this.formData}
      formData.birthday=Date.parse(new Date(formData.birthday))
      formData.enterDate=Date.parse(new Date(formData.enterDate))
    
    
      this.getHaleInfo('wsCow', 'addapproachCow', [
        formData
      ], 'json').then((data) => {
        // console.log(data)
        if (data.rtnCode == -1) {
          this.$message({
            message: data.rtnMessage,
            type: 'warning'
          });
          this.formData.cowID = ''
        }
        else {
          this.$message({
            message: '进场信息录入成功',
            type: 'warning'
          });
          this.formData.cowID = ''
        }
      })
    },
    submit() {
      var data = JSON.parse(JSON.stringify(this.formData));
      this.$http.post({
        url: this.formData.id ? '/userInfo/update' : '/userInfo/save',
        data: data
      }).then(res => {
        if (res.success) {
          this.$message.success('成功');
          this.$router.go(-1);
        } else {
          this.$message.warning('失败')
        }
      });
    },
    getNowCow() {

      this.getCowInfo(this.formData.cowID, '', '', true).then((data) => {
        this.$message({
          message: '当前牛只信息已存在不能进场',
          type: 'warning'
        });
        this.formData.cowID = ''
      }).catch(() => {

      })
    }
  }
}
</script>
<style lang="less" scoped>
.containMain {
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  padding: 15px;
  // margin-right: 10px;
  .contentTitle {
    border-bottom: 1px solid #f2f4f5;
  }
  // min-width: 450px;

  .sub {
    font-size: 14px;
    font-weight: 600;
    color: rgba(102, 102, 102, 1);
    line-height: 20px;
    margin-bottom: 40px;
    padding-left: 20px;
  }
}

.contentTitle {
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  line-height: 22px;
  letter-spacing: 1px;
  padding-bottom: 14px;
}

.containAside {
  padding: 0;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  .asideInfo {
    flex-grow: 1;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    padding: 15px;
  }
}
</style>
