<template>
  <div class="mod-role">
    <el-container>
      <!-- form表单 -->
      <el-header>
        <div class="rect rect-form">
          <el-form :inline="true" :model="form" size="mini" ref="form">
            <el-form-item>
              <el-input v-model="form.earTag" placeholder="耳标" clearable></el-input>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select placeholder="转出猪舍" v-model="form.oldPigstyId" @change="pigstyChange('old')">
                <el-option
                  v-for="item in pigstyList"
                  :key="item.id"
                  :label="item.number"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select 
                placeholder="转出单元" 
                v-model="form.oldUnitId" 
                @focus="unitFocus('old')"
                ref="oldUnitId">
                <el-option
                  v-for="item in oldUnitSelectedList"
                  :key="item.id"
                  :label="item.number"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select placeholder="转入猪舍" v-model="form.newPigstyId" @change="pigstyChange('new')">
                <el-option
                  v-for="item in pigstyList"
                  :key="item.id"
                  :label="item.number"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select 
                placeholder="转入单元" 
                v-model="form.newUnitId" 
                @focus="unitFocus('new')"
                ref="newUnitId">
                <el-option
                  v-for="item in newUnitSelectedList"
                  :key="item.id"
                  :label="item.number"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button 
                @click="getDataList()" 
                icon="el-icon-search">
                查 询
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button 
                icon="el-icon-circle-close"
                @click="clearAll">
                清 空
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <!-- role表格 -->
      <el-main>
        <div class="rect rect-table">
          <el-table
            :data="dataList"
            border
            stripe
            v-loading="dataListLoading"
            style="width: 100%;"
            size="mini"
            height="578"
            :header-cell-style="{background:'rgb(245,245,245)',color:'#000',height: '45px',fontSize: '13px',fontWeight: 'normal',borderBottom: '1px solid #ccc'}" 
            :cell-style="{color: '#888',fontSize: '13px'}">
            <el-table-column
              prop="earTag"
              header-align="center"
              align="center"
              label="耳标">
            </el-table-column>
            <el-table-column
              prop="newPeriodName"
              header-align="center"
              align="center"
              label="转入栏期">
            </el-table-column>
            <el-table-column
              prop="newUnitName"
              header-align="center"
              align="center"
              label="转入单元">
            </el-table-column>
            <el-table-column
              prop="newPigstyName"
              header-align="center"
              align="center"
              label="转入猪舍">
            </el-table-column>
            <el-table-column
              prop="oldPeriodName"
              header-align="center"
              align="center"
              label="转出栏期">
            </el-table-column>
            <el-table-column
              prop="oldUnitName"
              header-align="center"
              align="center"
              label="转出单元">
            </el-table-column>
            <el-table-column
              prop="oldPigstyName"
              header-align="center"
              align="center"
              label="转出猪舍">
            </el-table-column>
            <el-table-column
              prop="operatorUsername"
              header-align="center"
              align="center"
              label="操作人员">
            </el-table-column>
            <el-table-column
              prop="transDate"
              header-align="center"
              align="center"
              label="操作时间">
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        form: {
          earTag: '',
          oldPigstyId: '',
          newPigstyId: '',
          oldUnitId: '',
          newUnitId: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        pigstyList: [], // 猪舍List
        unitList: [], // 单元List
        oldUnitSelectedList: [], // 猪舍选择后的单元List
        newUnitSelectedList: [], // 猪舍选择后的单元List
        labelPosition: 'right',
        abnormalStatus: false,
        pigsty: {
          farmId: '',
          pigstyId: ''
        }
      }
    },
    activated () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/management/transferPeriodLog/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'earTag': this.form.earTag || undefined,
            'oldPigstyId': this.form.oldPigstyId || undefined,
            'newstyId': this.form.newPigstyId || undefined,
            'oldUnitId': this.form.oldUnitId || undefined,
            'newUnitId': this.form.newUnitId || undefined
          })
        }).then(async({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
            this.$message.error(data.msg)
          }
          // 猪舍List
          this.pigstyList = []
          let pigstyR = await this.$http({
            url: this.$http.adornUrl("/management/pigsty/findAll"),
            method: "get",
            params: this.$http.adornParams({})
          })
          pigstyR.data.all && (this.pigstyList = pigstyR.data.all)
          // 单元List
          this.unitList = []
          let unitR = await this.$http({
            url: this.$http.adornUrl("/management/unit/findAll"),
            method: "get",
            params: this.$http.adornParams()
          })
          if (unitR.data.all) {
            this.unitList = unitR.data.all
          }
          this.form.oldPigstyId? this.oldUnitSelectedList = this.unitList.filter(item => item.pigstyId === this.form.oldPigstyId): this.oldUnitSelectedList = this.unitList
          this.form.newPigstyId? this.newUnitSelectedList = this.unitList.filter(item => item.pigstyId === this.form.newPigstyId): this.newUnitSelectedList = this.unitList
          // 加载完毕
          this.dataListLoading = false
        })
      },
      // pigsty的选择
      pigstyChange (val) {
        let unit = val + 'UnitSelectedList'
        this[unit] = this.unitList.filter(item => item.pigstyId === this.form[val + 'PigstyId'])
      },
      // unit的选择
      unitFocus (val) {
        let pigsty = val + 'PigstyId'
        let unit = val + 'UnitId'
        const message = {
          old: '请先选择转出猪舍',
          new: '请先选择转入猪舍'
        }
        console.log(pigsty);
        console.log(this.form[pigsty]);
        if (!this.form[pigsty]) {
          this.$message.error(message[val])
          this.form[unit] = ''
          setTimeout(() => {
            this.$refs[unit].blur()
          }, 10)
        }
      },
      // 获取起始与结束时间
      timeChange (val) {
        let start = new Date(val[0])
        let end = new Date(val[1])
        let now = new Date()
        // if (start > now || end > now) {
        //   this.form.time = []
        //   this.$message.error('请勿选择超出现在的时刻')
        // }
      },
      // form表单清空，单元SelectedList 和 栏期SelectedList重置
      clearAll () {
        for (let key in this.form) {
          this.form[key] = ''
        }
        this.oldUnitSelectedList = this.unitList
        this.newUnitSelectedList = this.unitList
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      }
    },
    watch: {
      'form.oldPigstyId': {
        handler (newValue, oldValue) {
          if (oldValue) {
            this.form.oldUnitId = ''
            this.oldUnitSelectedList = this.unitList.filter(item => item.pigstyId === newValue)
          }
        }
      },
      'form.newPigstyId': {
        handler (newValue, oldValue) {
          if (oldValue) {
            this.form.newUnitId = ''
          }
          this.newUnitSelectedList = this.unitList.filter(item => item.pigstyId === newValue)
        }
      }
    }
  }
</script>
<style scoped>
.rect {
  background-color: #fff;
  padding: 30px 15px;
  border-radius: 5px;
  border: 1px solid #e8e8e8;
}
.rect-form {
  padding-bottom: 10px;
}
.rect-table {
  margin-top: 20px;
}
.demo-table-expand {
  font-size: 0;
  margin-left: 40px;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
}
.el-table .height {
  background: rgba(254, 254, 254, 0.5);
}
/deep/ .el-table--mini td, .el-table--mini th {
  padding: 3px 0 !important;
  height: 20px !important;
}
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
  color: rgb(24,144,255);
  background-color: rgb(24,144,255);
  border-color: rgb(24,144,255);
}
/deep/.el-table .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: rgb(24,144,255);
  border-color: rgb(24,144,255);
}
/deep/.el-table .el-checkbox__inner:hover {
  border-color: rgb(24,144,255);
}
/deep/.el-table .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: rgb(24,144,255);
}
/deep/.el-table #select .cell .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: rgb(24,144,255);
  border-color: rgb(24,144,255);
}
</style>
