<template>
  <div>
    <NewTable  v-loading="isShow" :title="'耳标数据'" :list-data="tableData" :table-items="tableItems" :shows="tableShow" @selectionChange="selectionChange">
      <template #right>
        <el-button type="primary" size="mini" @click="delVisible = true">查看排除的耳标</el-button>
      </template>
      <template #earTemp="scope">
        <el-tag style="width: 65px;">{{ scope.row.earTemp }}℃</el-tag>
      </template>
      <template #envTemp="scope">
        <span>{{ scope.row.envTemp }}℃</span>
      </template>
      <template #rssi="scope">
        <span>-{{ scope.row.rssi }}db</span>
      </template>
      <template #stage="scope">
        <span>{{ stageList[scope.row.stage - 1].label }}</span>
      </template>
      <template #dong="scope">
        <span>{{ scope.row.penName }}{{ scope.row.unitName }}</span>
      </template>
    </NewTable>
    <div style="float: right; margin-right: 10px">
      <el-button type="warning" size="mini" @click="del">排除</el-button>
      <el-button type="primary" size="mini" @click="onConfirm">确定</el-button>
    </div>
    <el-dialog width="30%" :close-on-click-modal="false" title="出售申请" :visible.sync="dialogFormVisible">
      <NewTable :height="300" :title="'耳标数据'" :list-data="tableData1" :table-items="tableItems1"></NewTable>
      <el-form size="mini" :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="检疫部门" :label-width="formLabelWidth" prop="quarterId">
          <el-select v-model="form.quarterId">
            <el-option v-for="(item, i) in quarterList" :key="i" :label="item.farmName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="屠宰部门" :label-width="formLabelWidth" prop="butchId">
          <el-select v-model="form.butchId">
            <el-option v-for="(item, i) in butchList" :key="i" :label="item.farmName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实际数量" :label-width="formLabelWidth" prop="number">
          <el-input autocomplete="off" v-model="form.number"></el-input>
        </el-form-item>
        <el-form-item label="运输车辆" :label-width="formLabelWidth" prop="transport">
          <el-input autocomplete="off" v-model="form.transport"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="add('ruleForm',0)">暂存</el-button>
        <el-button type="primary" @click="add('ruleForm',1)">提交申请</el-button>
      </div>
    </el-dialog>
    <el-dialog title="排除的耳标" :visible.sync="delVisible"  :close-on-click-modal="false">
      <new-table :title="'排除耳标数据'" :list-data="sellTable" :table-items="tableItems" :shows="tableShow" @selectionChange="selectionChange1">
        <template #earTemp="scope">
          <el-tag style="width: 65px;">{{ scope.row.earTemp }}℃</el-tag>
        </template>
        <template #envTemp="scope">
          <span>{{ scope.row.envTemp }}℃</span>
        </template>
        <template #rssi="scope">
          <span>-{{ scope.row.rssi }}db</span>
        </template>
        <template #stage="scope">
          <span>{{ stageList[scope.row.stage - 1].label }}</span>
        </template>
        <template #dong="scope">
          <span>{{ scope.row.penName }}{{ scope.row.unitName }}</span>
        </template>
      </new-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取消</el-button>
        <el-button type="primary" @click="remove">移除</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import NewTable from "../../components/newTable/NewTable";
import { isSell , sellEarList, addRemovePig, removeRemovePig, addSellPig } from "../../utils/apis/sell-pig/sellPig";
import { fetch } from "../../utils";
import {mapState} from "vuex";

export default {
  name: "SellApply",
  components: {
    NewTable
  },
  computed: {
    ...mapState(['stageList', 'recordList'])
  },
  data() {
    return {
      formLabelWidth: '80px',
      tableData: [],
      tableItems: [
        {
          prop: 'time',
          label: '采集时间',
          slotName: 'time'
        },
        {
          prop: 'eartagNo',
          label: '耳标号',
          slotName: 'eartagNo'
        },
        {
          label: "耳根温度",
          minWidth: "50",
          slotName: "earTemp",
        },
        {
          label: "环境温度",
          minWidth: "50",
          slotName: "envTemp",
        },
        {
          prop: "exercise",
          label: "运动量",
          minWidth: "50",
          slotName: "exercise",
        },
        {
          prop: "bat",
          label: "电池电量",
          minWidth: "50",
          slotName: "bat",
        },
        {
          label: "信号强度",
          minWidth: "50",
          slotName: "rssi",
        },
        {
          label: "阶段",
          minWidth: "50",
          slotName: "stage",
        },
        {
          label: "栋舍",
          minWidth: "100",
          slotName: "dong",
        },
        {
          prop: "deviceCode",
          label: "采集器编码",
          minWidth: "100",
          slotName: "deviceCode",
        },
      ],
      tableShow: {
        showSelect: true
      },
      // 排除的的展示
      tableData1: [
      ],
      tableItems1: [
        {
          prop: 'eartagNo',
          label: '耳标号',
          slotName: 'eartagNo'
        },
      ],
      dialogFormVisible: false,
      isSells: true,
      isShow: true,
      sellTable: [],
      selectList: [],
      farmId: localStorage.getItem('gold_lastFarmId'),
      delVisible: false,
      // 屠宰
      butchList: [],
      // 检疫
      quarterList: [],
      form: {
        butchId: '',
        quarterId: '',
        number: '',
        transport: ''
      },
      rules: {
        number: [
          { required: true, message: '实际数量不能为空', trigger: 'blur' },
        ],
        transport: [
          { required: true, message: '运输车辆不能为空', trigger: 'blur' },
        ],
        butchId: [
          { required: true, message: '请选择屠宰部门', trigger: 'change' }
        ],
        quarterId:[
          { required: true, message: '请选择检疫部门', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    onConfirm() {
      if(this.isSells) {
        this.$message.error('当前牧场已禁用卖猪申请！请联系政府部门！');
      } else {
        if(this.selectList.length > 0) {
          this.dialogFormVisible = true
          this.tableData1 = this.selectList;
        } else {
          this.$message.error('请勾选需要售猪的耳标!')
        }
      }
    },
    async init() {
      let params= {
        farmId: this.farmId
      }
      let res = await fetch(isSell(params));
      if (res.code === 10000) {
        this.isSells = res.data;
      }
      let res1 = await fetch(sellEarList({current: 1, size: 200, farmId: this.farmId }))
      this.isShow = false;
      this.tableData = [];
      this.sellTable = [];
      if(res1.code === 10000) {
        res1.data.records.forEach(item => {
          if(item.sellStatus === 0) {
            this.tableData.push(item);
          } else {
            this.sellTable.push(item);
          }
        })
      } else {
        this.$message.error(res.msg)
      }
    },
    selectionChange(value) {
      this.selectList = []
      this.selectList = value;
    },
    selectionChange1(value) {
      this.selectList = []
      this.selectList = value;
    },
    // 排除
    del() {
      if(this.selectList.length > 0) {
        let arr = [];
        this.selectList.forEach(item => {
          arr.push(item.eartagNo)
        })
        let str = arr.join(',');
        let params = {
          earmark: str,
          farmId: this.farmId,
        }
        addRemovePig(params).then(res => {
          if(res.code === 10000) {
            this.$message.success('排除成功!');
            this.init();
          } else {
            this.$message.error('排除失败!')
          }
        })
      } else {
        this.$message.error('请勾选需要排除的耳标')
      }
    },
    remove() {
      if(this.selectList.length > 0) {
        let arr = [];
        this.selectList.forEach(item => {
          arr.push(item.eartagNo)
        })
        let str = arr.join(',');
        let params = {
          earmark: str,
        }
        removeRemovePig(params).then(res => {
          if(res.code === 10000) {
            if(res.code === 10000) {
              this.$message.success('移除成功!');
              this.init();
            } else {
              this.$message.error('移除失败!')
            }
          }
        }).finally(() => {
          this.delVisible = false;
        })
      }else {
        this.$message.error('请勾选需要移除的耳标')
      }
    },
    // 提交
    add(formName, num) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let arr = [];
          this.tableData1.forEach(item => {
            arr.push(item.eartagNo)
          })
          let str = arr.join(',')
          let params = {
            farmId: this.farmId,
            plateNumber: this.form.transport,
            realEartagNum: this.form.number,
            recordStatus: num,
            inspecOrgId: this.form.quarterId,
            butcherOrgId: this.form.butchId,
            eartagNos: str
          }
          addSellPig(params).then(res => {
            if(res.code === 10000) {
              this.$message.success(res.message)
              this.init();
            } else {
              this.$message.error(res.message)
            }
          }).finally(() => {
            this.tableData1 = [];
            this.dialogFormVisible = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 重置
    // reset() {
    //   this.$refs.table.clearSelection();
    //   this.selectList = [];
    // }
  },
  created() {
    this.init()
    this.recordList.forEach(item => {
      if(item.type === 1) {
        this.butchList.push(item)
      } else if(item.type === 3) {
        this.quarterList.push(item)
      }
    })
  }
}
</script>

<style scoped>

</style>
