<template>
  <div class="sellRecord">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card style="min-height: 100px">
          <div class="flex-center" >
            <div style="width: 150px;">
              总申请数量
            </div>
            <div style="flex: 1">{{allPigNum}}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="min-height: 100px">
          <div class="flex-center">
            <div style="width: 150px;">
              已完成数量
            </div>
            <div style="flex: 1;">{{completedNum}}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="min-height: 100px">
          <div class="flex-center">
            <div style="width: 150px;">
              进行中数量
            </div>
            <div style="flex: 1;">{{underwayNum}}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="min-height: 100px">
          <div class="flex-center">
            <div style="width: 150px;">
              失败数量
            </div>
            <div style="flex: 1;">{{failNum}}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <br/>
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="全部" name="0">
        <NewTable :title="'售猪记录'" :table-items="tableItems" :list-data="tableData">
          <template #batchNo="scope">
            <span @click="jump(scope.row)" style="color: #66b1ff; cursor: pointer">{{scope.row.batchNo}}</span>
          </template>
          <template #handle="scope">
            <el-button v-if="scope.row.recordStatus !== 0" type="text" @click="open(scope.row)">查看</el-button>
            <el-button type="primary" v-else @click="onConfirm(scope.row)">提交申请</el-button>
          </template>
          <template #status="scope">
            <template v-if="scope.row.recordStatus === 0">
              <el-tag>暂存</el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 1">
              <el-tag type="warning">进行中</el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 2">
              <el-tag type="warning">取消</el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 3">
              <el-tag  type="success">已完成 </el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 4 || scope.row.recordStatus === 5">
              <el-tag type="danger">检疫失败</el-tag>
            </template>
          </template>
          <template #quarter="scope">
            <span>{{getFarmName(scope.row.inspecOrgId)}}</span>
          </template>
          <template #butch="scope">
            <span>{{getFarmName(scope.row.butcherOrgId)}}</span>
          </template>
          <template #autoEartagNum="scope">
            <span>{{scope.row.autoEartagNum}}</span>
          </template>
        </NewTable>
        <TableFooter
          :size="pageSize"
          :totals="total"
          @sizeChange="sizeChange"
          @pageChange="pageChange"
        ></TableFooter>
      </el-tab-pane>
      <el-tab-pane label="未提交" name="1">
        <NewTable :title="'售猪记录'" :table-items="tableItems" :list-data="tableData">
          <template #batchNo="scope">
            <span @click="jump(scope.row)" style="color: #66b1ff; cursor: pointer">{{scope.row.batchNo}}</span>
          </template>
          <template #handle="scope">
            <el-button type="primary" @click="onConfirm(scope.row)">提交申请</el-button>
<!--            <el-button type="text" @click="open">查看</el-button>-->
          </template>
          <template #status="scope">
            <template v-if="scope.row.recordStatus === 0">
              <el-tag>暂存</el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 1">
              <el-tag type="warning">进行中</el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 2">
              <el-tag type="warning">取消</el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 3">
              <el-tag  type="success">已完成 </el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 4 || scope.row.recordStatus === 5">
              <el-tag type="danger">检疫失败</el-tag>
            </template>
          </template>
          <template #quarter="scope">
            <span>{{getFarmName(scope.row.inspecOrgId)}}</span>
          </template>
          <template #butch="scope">
            <span>{{getFarmName(scope.row.butcherOrgId)}}</span>
          </template>
          <template #autoEartagNum="scope">
            <span>{{scope.row.autoEartagNum}}</span>
          </template>
        </NewTable>
        <TableFooter
          :size="pageSize"
          :totals="total"
          @sizeChange="sizeChange"
          @pageChange="pageChange"
        ></TableFooter>
      </el-tab-pane>
      <el-tab-pane label="进行中" name="2">
        <NewTable :title="'售猪记录'" :table-items="tableItems" :list-data="tableData">
          <template #batchNo="scope">
            <span @click="jump(scope.row)" style="color: #66b1ff; cursor: pointer">{{scope.row.batchNo}}</span>
          </template>
          <template #handle="scope">
            <el-button type="text" @click="open(scope.row)">查看</el-button>
          </template>
          <template #status="scope">
            <template v-if="scope.row.recordStatus === 0">
              <el-tag>暂存</el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 1">
              <el-tag type="warning">进行中</el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 2">
              <el-tag type="warning">取消</el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 3">
              <el-tag  type="success">已完成 </el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 4 || scope.row.recordStatus === 5">
              <el-tag type="danger">检疫失败</el-tag>
            </template>
          </template>
          <template #quarter="scope">
            <span>{{getFarmName(scope.row.inspecOrgId)}}</span>
          </template>
          <template #butch="scope">
            <span>{{getFarmName(scope.row.butcherOrgId)}}</span>
          </template>
          <template #autoEartagNum="scope">
            <span>{{scope.row.autoEartagNum}}</span>
          </template>
        </NewTable>
        <TableFooter
          :size="pageSize"
          :totals="total"
          @sizeChange="sizeChange"
          @pageChange="pageChange"
        ></TableFooter>
      </el-tab-pane>
      <el-tab-pane label="已完成" name="3">
        <NewTable :title="'售猪记录'" :table-items="tableItems" :list-data="tableData">
          <template #batchNo="scope">
            <span @click="jump(scope.row)" style="color: #66b1ff; cursor: pointer">{{scope.row.batchNo}}</span>
          </template>
          <template #handle="scope">
            <el-button type="text" @click="open(scope.row)">查看</el-button>
          </template>
          <template #status="scope">
            <template v-if="scope.row.recordStatus === 0">
              <el-tag>暂存</el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 1">
              <el-tag type="warning">进行中</el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 2">
              <el-tag type="warning">取消</el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 3">
              <el-tag  type="success">已完成 </el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 4 || scope.row.recordStatus === 5">
              <el-tag type="danger">检疫失败</el-tag>
            </template>
          </template>
          <template #quarter="scope">
            <span>{{getFarmName(scope.row.inspecOrgId)}}</span>
          </template>
          <template #butch="scope">
            <span>{{getFarmName(scope.row.butcherOrgId)}}</span>
          </template>
          <template #autoEartagNum="scope">
            <span>{{scope.row.autoEartagNum}}</span>
          </template>
        </NewTable>

        <TableFooter
          :size="pageSize"
          :totals="total"
          @sizeChange="sizeChange"
          @pageChange="pageChange"
        ></TableFooter>
      </el-tab-pane>
      <el-tab-pane label="失败" name="4">
        <NewTable :title="'售猪记录'" :table-items="tableItems" :list-data="tableData">
          <template #batchNo="scope">
            <span @click="jump(scope.row)" style="color: #66b1ff; cursor: pointer">{{scope.row.batchNo}}</span>
          </template>
          <template #handle="scope">
            <el-button type="text" @click="open(scope.row)">查看</el-button>
          </template>
          <template #status="scope">
            <template v-if="scope.row.recordStatus === 0">
              <el-tag>暂存</el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 1">
              <el-tag type="warning">进行中</el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 2">
              <el-tag type="warning">取消</el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 3">
              <el-tag  type="success">已完成 </el-tag>
            </template>
            <template v-if="scope.row.recordStatus === 4 || scope.row.recordStatus === 5">
              <el-tag type="danger">检疫失败</el-tag>
            </template>
          </template>
          <template #quarter="scope">
            <span>{{getFarmName(scope.row.inspecOrgId)}}</span>
          </template>
          <template #butch="scope">
            <span>{{getFarmName(scope.row.butcherOrgId)}}</span>
          </template>
          <template #autoEartagNum="scope">
            <span>{{scope.row.autoEartagNum}}</span>
          </template>
        </NewTable>
        <TableFooter
          :size="pageSize"
          :totals="total"
          @sizeChange="sizeChange"
          @pageChange="pageChange"
        ></TableFooter>
      </el-tab-pane>
    </el-tabs>
    <!-- 查看步骤条   -->
    <el-dialog center :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      <el-steps :active="now"  finish-status="success" :process-status="openList.recordStatus > 3 ? 'error' : 'success'">
        <el-step v-for="(item, i) in stepList" :key="i" :title="item.title" :description="item.subTitle"></el-step>
      </el-steps>
      <br>
      <div class="case">
        <div class="case-bottom">
          <el-row >
            <el-col :span="12">
              <span>批次编号</span>
            </el-col>
            <el-col :span="12" class="leftBorder">
              <span @click="jump(openList)" style="cursor: pointer; color: #009cff">{{openList.batchNo}}</span>
            </el-col>
          </el-row>
        </div>
        <div class="case-bottom">
          <el-row >
            <el-col :span="12">
              <span>检疫部门</span>
            </el-col>
            <el-col :span="12" class="leftBorder">
              <span>{{getFarmName(openList.inspecOrgId)}}</span>
            </el-col>
          </el-row>
        </div>
        <div class="case-bottom">
          <el-row >
            <el-col :span="12">
              <span>屠宰部门</span>
            </el-col>
            <el-col :span="12" class="leftBorder">
              <span>{{getFarmName(openList.butcherOrgId)}}</span>
            </el-col>
          </el-row>
        </div>
        <div class="case-bottom">
          <el-row >
            <el-col :span="12">
              <span>自动采集数量</span>
            </el-col>
            <el-col :span="12" class="leftBorder">
              <span>{{openList.autoEartagNum}}</span>
            </el-col>
          </el-row>
        </div>
        <div class="case-bottom">
          <el-row >
            <el-col :span="12">
              <span>填报数量</span>
            </el-col>
            <el-col :span="12" class="leftBorder">
              <span>{{openList.realEartagNum}}</span>
            </el-col>
          </el-row>
        </div>
        <div class="case-bottom">
          <el-row >
            <el-col :span="12">
              <span>运输车辆</span>
            </el-col>
            <el-col :span="12" class="leftBorder">
              <span>{{openList.plateNumber}}</span>
            </el-col>
          </el-row>
        </div>
        <div class="case-bottom">
          <el-row >
            <el-col :span="12">
              <span>检疫部门检疫结果</span>
            </el-col>
            <el-col :span="12" class="leftBorder">
              <template v-if="openList.inspecTime">
                <template v-if="openList.recordStatus === 4">
                  <el-tag type="danger">检疫失败</el-tag>
                  <el-button type="text" v-if="inspecPic !== null" @click="openChildren(inspecPic)">查看图片</el-button>
                </template>
                <template v-else>
                  <el-tag type="success">检疫成功</el-tag>
                  <el-button type="text" v-if="inspecPic !== null" @click="openChildren(inspecPic)">查看图片</el-button>
                </template>
              </template>
              <template v-else>
                <el-tag>暂未检疫</el-tag>
              </template>
            </el-col>
          </el-row>
        </div>
        <div class="case-bottom">
          <el-row >
            <el-col :span="12">
              <span>屠宰部门检疫结果</span>
            </el-col>
            <el-col :span="12" class="leftBorder">
              <template v-if="openList.butcherTime">
                <template v-if="openList.recordStatus === 5">
                  <el-tag type="danger">检疫失败</el-tag>
                  <el-button type="text" v-if="butcherPic !== null" @click="openChildren(butcherPic)">查看图片</el-button>
                </template>
                <template v-else>
                  <el-tag type="success">检疫成功</el-tag>
                  <el-button type="text" v-if="butcherPic !== null" @click="openChildren(butcherPic)">查看图片</el-button>
                </template>
              </template>
              <template v-else>
                <el-tag>暂未检疫</el-tag>
              </template>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-dialog width="30%" title="查看图片" :visible.sync="innerVisible" append-to-body :close-on-click-modal="false">
        <img v-for="item in imgList" :src="'http://122.112.212.35:8092' + item.photoPath" :key="item.id" alt="">
      </el-dialog>
    </el-dialog>
    <!--  暂存  -->
    <el-dialog width="30%" :close-on-click-modal="false" title="出售申请" :visible.sync="confirmShow">
      <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="butchId">
          <el-select v-model="form.butchId" disabled>
            <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="quarterId">
          <el-select v-model="form.quarterId" disabled>
            <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" disabled v-model="form.number"></el-input>
        </el-form-item>
        <el-form-item label="运输车辆" :label-width="formLabelWidth" prop="transport">
          <el-input autocomplete="off" disabled v-model="form.transport"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add('ruleForm',1)">提交申请</el-button>
      </div>
    </el-dialog>
    <el-dialog width="30%" :close-on-click-modal="false" title="查看耳标" :visible.sync="isShow">
      <NewTable :height="300" :title="'耳标数据'" :list-data="tableData1" :table-items="tableItems2">
        <template #handler="scope">
          <el-button type="text" @click="go(scope.row)">查看详情</el-button>
        </template>
      </NewTable>
    </el-dialog>
  </div>
</template>

<script>
import NewTable from "../../components/newTable/NewTable";
import TableFooter from "../../components/TableFooter";
import { sellCollect, sellPigRecord, sellPigRecordManage, sellUpdate, listByBatch } from "../../utils/apis/sell-pig/sellPig";
import { mapState } from "vuex";

export default {
  name: "SellRecord",
  components: {
    NewTable,
    TableFooter
  },
  data() {
    return {
      formLabelWidth: '80px',
      tableItems: [
        {
          label: '批次编号',
          prop: 'batchNo',
          slotName: 'batchNo'
        },
        {
          label: '申请时间',
          prop: 'sellTime'
        },
        {
          label: '状态',
          slotName: 'status'
        },
        {
          label: '检疫部门',
          slotName: 'quarter'
        },
        {
          label: '屠宰部门',
          slotName: 'butch',
        },
        {
          label: '耳标数量',
          slotName: 'autoEartagNum'
        },
        {
          label: '操作',
          slotName: 'handle'
        },
      ],
      tableData: [
        {
          id: 1,
        }
      ],
      dialogFormVisible: false,
      innerVisible: false,
      stepList: [],
      //
      now: 1,
      activeName: '0',
      farmId: localStorage.getItem('gold_lastFarmId'),
      allPigNum: 0,
      completedNum: 0,
      failNum: 0,
      underwayNum: 0,
      pageNum: 1,
      pageSize: 20,
      total: 0,
      statusList: [
        {
          id: 1,
          name: '暂存'
        },
        {
          id: 2,
          name: '进行中'
        },
        {
          id: 3,
          name: '取消'
        },
        {
          id: 4,
          name: '已完成'
        },
        {
          id: 5,
          name: '检疫失败'
        },
        {
          id: 6,
          name: '屠宰失败'
        },
      ],
      openList: {},
      // 排除的的展示
      tableData1: [
      ],
      tableItems1: [
        {
          prop: 'earmark',
          label: '耳标号',
          slotName: 'earmark'
        },
      ],
      tableItems2: [
        {
          prop: 'earmark',
          label: '耳标号',
          slotName: 'earmark'
        },
        {
          label: '操作',
          slotName: 'handler'
        }
      ],
      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' }
        ]
      },
      quarterList: [],
      butchList: [],
      confirmShow: false,
      batchNo: '',
      isShow: false,
      butcherPic: null,
      inspecPic: null,
      imgList: [],
    }
  },
  computed: {
    ...mapState(['recordList'])
  },
  watch: {
    activeName() {
      this.pageNum = 1;
      this.initTable();
    }
  },
  methods: {
    // 修改size
    sizeChange(val) {
      this.pageSize = val;
      this.initTable();
    },
    // 修改页数
    pageChange(val) {
      this.pageNum = val;
      this.initTable();
    },
    open(item) {
      this.dialogFormVisible = true
      this.openList = item;
      let params = {
        batchNo: item.batchNo
      }
      sellPigRecordManage(params).then(res => {
        if(res.code === 10000) {
          this.stepList = res.data.data;
          this.now = res.data.now;
          this.inspecPic = res.data.inspecPic;
          this.butcherPic = res.data.butcherPic;
        }
      })
    },
    openChildren(item) {
      this.imgList = item
      this.innerVisible = true
    },
    init() {
      let params = {
        farmId: this.farmId
      }
      sellCollect(params).then(res => {
        if(res.code === 10000) {
          this.allPigNum = res.data.allPigNum;
          this.completedNum = res.data.completedNum;
          this.failNum = res.data.failNum;
          this.underwayNum = res.data.underwayNum;
        }
      })
    },
    initTable() {
      let params = {
        current: this.pageNum,
        size: this.pageSize,
        type: this.activeName,
        farmId: this.farmId
      }
      sellPigRecord(params).then(res => {
        if(res.code === 10000) {
          this.tableData = res.data.records;
          this.total = res.data.total;
          console.log(this.total)
        }
      })
    },
    getFarmName(id) {
      let str = ''
      this.recordList.forEach(item => {
        if(item.id == id) {
          str = item.farmName
        }
      })
      return str
    },
    onConfirm(item) {
      this.confirmShow = true;
      let params = {
        batchNo: item.batchNo
      }
      listByBatch(params).then(res => {
        if(res.code === 10000) {
          this.tableData1 = res.data;
        }
      })
      this.form = {
        butchId: parseInt(item.butcherOrgId),
        quarterId: parseInt(item.inspecOrgId),
        number: item.realEartagNum,
        transport: item.plateNumber
      }
      this.batchNo = item.id;
    },
    add(formName, num) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            id: this.batchNo,
            recordStatus: num
          }
          sellUpdate(params).then(res => {
            if(res.code === 10000) {
              this.$message.success('提交成功!')
              this.init()
            } else {
              this.$message.error('提交失败')
            }
          }).finally(() => {
            this.batchNo = '';
            this.form = {
              butchId: '',
              quarterId: '',
              number: '',
              transport: ''
            }
            this.confirmShow = false;
            this.tableData1 = [];
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    jump(item) {
      this.isShow = true;
      let params = {
        batchNo: item.batchNo
      }
      listByBatch(params).then(res => {
        if(res.code === 10000) {
          this.tableData1 = res.data;
        }
      })
    },
    go(item) {
      this.$store.commit('SET_KEEPALIVE', ['SellRecord'])
      this.$router.push({
        path: "/earTagDetail",
        query: {
          id: item.eartagNo,
        },
      });
      this.isShow = false;
    }
  },
  mounted() {
    this.init()
    this.initTable()
    this.recordList.forEach(item => {
      if(item.type === 1) {
        this.butchList.push(item)
      } else if(item.type === 3) {
        this.quarterList.push(item)
      }
    })
  },
  beforeRouteLeave(to, from, next) {
    if(to.path.indexOf('/earTagDetail') > -1) {
      this.$store.commit('SET_KEEPALIVE', ['SellRecord'])
    } else {
      this.$store.commit('SET_KEEPALIVE', [''])
    }
    next()
  }
}
</script>

<style scoped>
  .sellRecord {
    box-sizing: border-box;
    padding: 20px;
  }
  .flex-center {
    width: 100%;
    height: 60px;
    line-height: 60px;
    display: flex;
    text-align: center;
  }
  .case {
    width: 910px;
    border: 1px solid #ddd;
  }
  .case-bottom {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    text-align: center;
    font-size: 18px;
  }
  .leftBorder {
    border-left: 1px solid #ddd;
  }
</style>
