<template>
  <div>
    <template v-if="userItem.type === 0 && type === 1">
      <new-table v-loading="loading" :title="'牧场信息'" :table-items="farmListItems" :list-data="farmListData">
        <template #farmName="scope">
          <span class="fontColor" @click="goFarm(2, scope.row)">{{scope.row.farmName}}</span>
        </template>
        <template #location="scope">
          <span>{{locationText(scope.row.location)}}</span>
        </template>
      </new-table>
    </template>
    <template v-if="type === 2">
      <el-button v-if="userItem.type === 0" type="primary" icon="el-icon-arrow-left" @click="back(1)">返回上一级</el-button>
      <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; font-size: 28px; font-weight: 500">{{inspecNum}}</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; font-size: 28px; font-weight: 500">{{accomplishNum}}</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; font-size: 28px; font-weight: 500">{{qualifiedNum}}</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; font-size: 28px; font-weight: 500">{{unQualifiedNum}}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <br/>
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="全部" name="0">
          <new-table :title="'审批列表'" :table-items="tableItems" :list-data="tableData">
            <template #batchNo="scope">
              <span style="color: #66b1ff; cursor: pointer" @click="openEartag(scope.row)">{{scope.row.batchNo}}</span>
            </template>
            <template #farmName="scope">
              <span>{{getFarmName(scope.row.farmId)}}</span>
            </template>
            <template #farmLocation="scope">
              <span>{{getFarmLocation(scope.row.farmId)}}</span>
            </template>
            <template #inspecOrgId="scope">
              <span>{{getFarmName(parseInt(scope.row.inspecOrgId))}}</span>
            </template>
            <template #status="scope">
              <template v-if="scope.row.inspecFlowStatus === 1">
                <el-tag type="warning">未处理</el-tag>
              </template>
              <template v-else>
                <template v-if="scope.row.recordStatus === 3">
                  <el-tag type="success">屠宰合格</el-tag>
                </template>
                <template v-if="scope.row.recordStatus === 5">
                  <el-tag type="danger">屠宰不合格</el-tag>
                </template>
              </template>
            </template>
            <template #handler="scope">
<!--              <el-button type="primary" size="mini" v-if="scope.row.inspecFlowStatus === 1" @click="onConfirm(scope.row)">去审批</el-button>-->
              <el-button type="text"  @click="look(scope.row)">查看详情</el-button>
            </template>
          </new-table>
          <table-footer
            :size="pageSize"
            :totals="total"
            @sizeChange="sizeChange"
            @pageChange="pageChange"></table-footer>
        </el-tab-pane>
        <el-tab-pane label="未审批" name="1">
          <new-table :title="'审批列表'" :table-items="tableItems" :list-data="tableData">
            <template #batchNo="scope">
              <span style="color: #66b1ff; cursor: pointer" @click="openEartag(scope.row)">{{scope.row.batchNo}}</span>
            </template>
            <template #farmName="scope">
              <span>{{getFarmName(scope.row.farmId)}}</span>
            </template>
            <template #farmLocation="scope">
              <span>{{getFarmLocation(scope.row.farmId)}}</span>
            </template>
            <template #inspecOrgId="scope">
              <span>{{getFarmName(parseInt(scope.row.inspecOrgId))}}</span>
            </template>
            <template #status="scope">
              <template v-if="scope.row.inspecFlowStatus === 1">
                <el-tag type="warning">未处理</el-tag>
              </template>
              <template v-else>
                <template v-if="scope.row.inspecFlowStatus === 2">
                  <el-tag type="success">屠宰合格</el-tag>
                </template>
                <template v-if="scope.row.recordStatus === 5">
                  <el-tag type="danger">屠宰不合格</el-tag>
                </template>
              </template>
            </template>
            <template #handler="scope">
<!--              <el-button type="primary" size="mini" v-if="scope.row.inspecFlowStatus === 1" @click="onConfirm(scope.row)">去审批</el-button>-->
<!--              <el-button type="text" v-else @click="look(scope.row)">查看详情</el-button>-->
            </template>
          </new-table>
          <table-footer
            :size="pageSize"
            :totals="total"
            @sizeChange="sizeChange"
            @pageChange="pageChange"></table-footer>
        </el-tab-pane>
        <el-tab-pane label="审批合格" name="2">
          <new-table :title="'审批列表'" :table-items="tableItems" :list-data="tableData">
            <template #batchNo="scope">
              <span style="color: #66b1ff; cursor: pointer" @click="openEartag(scope.row)">{{scope.row.batchNo}}</span>
            </template>
            <template #farmName="scope">
              <span>{{getFarmName(scope.row.farmId)}}</span>
            </template>
            <template #farmLocation="scope">
              <span>{{getFarmLocation(scope.row.farmId)}}</span>
            </template>
            <template #inspecOrgId="scope">
              <span>{{getFarmName(parseInt(scope.row.inspecOrgId))}}</span>
            </template>
            <template #status="scope">
              <template v-if="scope.row.inspecFlowStatus === 1">
                <el-tag type="warning">未处理</el-tag>
              </template>
              <template v-else>
                <template v-if="scope.row.inspecFlowStatus === 2">
                  <el-tag type="success">屠宰合格</el-tag>
                </template>
                <template v-if="scope.row.recordStatus === 5">
                  <el-tag type="danger">屠宰不合格</el-tag>
                </template>
              </template>
            </template>
            <template #handler="scope">
<!--              <el-button type="primary" size="mini" v-if="scope.row.inspecFlowStatus === 1" @click="onConfirm(scope.row)">去审批</el-button>-->
              <el-button type="text"  @click="look(scope.row)">查看详情</el-button>
            </template>
          </new-table>
          <table-footer
            :size="pageSize"
            :totals="total"
            @sizeChange="sizeChange"
            @pageChange="pageChange"></table-footer>
        </el-tab-pane>
        <el-tab-pane label="审批不合格" name="3">
          <new-table :title="'审批列表'" :table-items="tableItems" :list-data="tableData">
            <template #batchNo="scope">
              <span style="color: #66b1ff; cursor: pointer" @click="openEartag(scope.row)">{{scope.row.batchNo}}</span>
            </template>
            <template #farmName="scope">
              <span>{{getFarmName(scope.row.farmId)}}</span>
            </template>
            <template #farmLocation="scope">
              <span>{{getFarmLocation(scope.row.farmId)}}</span>
            </template>
            <template #inspecOrgId="scope">
              <span>{{getFarmName(parseInt(scope.row.inspecOrgId))}}</span>
            </template>
            <template #status="scope">
              <template v-if="scope.row.inspecFlowStatus === 1">
                <el-tag type="warning">未处理</el-tag>
              </template>
              <template v-else>
                <template v-if="scope.row.inspecFlowStatus === 2">
                  <el-tag type="success">屠宰合格</el-tag>
                </template>
                <template v-if="scope.row.recordStatus === 5">
                  <el-tag type="danger">屠宰不合格</el-tag>
                </template>
              </template>
            </template>
            <template #handler="scope">
<!--              <el-button type="primary" size="mini" v-if="scope.row.inspecFlowStatus === 1" @click="onConfirm(scope.row)">去审批</el-button>-->
              <el-button type="text" @click="look(scope.row)">查看详情</el-button>
            </template>
          </new-table>
          <table-footer
            :size="pageSize"
            :totals="total"
            @sizeChange="sizeChange"
            @pageChange="pageChange"></table-footer>
        </el-tab-pane>
      </el-tabs>
      <el-dialog title="批次详情" :visible.sync="textShow" :close-on-click-modal="false">
        <el-form>
          <el-form-item label="批次编号">{{selectItem.batchNo}}</el-form-item>
          <el-form-item label="申请时间">{{selectItem.sellTime}}</el-form-item>
          <el-form-item label="申请牧场名称">{{getFarmName(selectItem.farmId)}}</el-form-item>
          <el-form-item label="检疫处理时间">{{selectItem.inspecTime}}</el-form-item>
          <el-form-item label="检疫处理结果">
            <el-tag type="success">检疫合格</el-tag>
            <el-button style="margin-left: 5px" size="mini" type="primary" v-if="inspecImgList.length > 0"  @click="openImg(1)">查看图片</el-button>
          </el-form-item>
          <el-form-item label="屠宰处理时间">{{selectItem.butcherTime}}</el-form-item>
          <el-form-item label="屠宰处理结果">
            <template v-if="selectItem.recordStatus === 3">
              <el-tag type="success">屠宰合格</el-tag>
              <el-button v-if="butchImgList.length > 0" style="margin-left: 5px" size="mini" type="primary"  @click="openImg(2)">查看图片</el-button>
            </template>
            <template v-if="selectItem.recordStatus === 5">
              <el-tag type="danger">屠宰不合格</el-tag>
              <el-button v-if="butchImgList.length > 0" style="margin-left: 5px" size="mini" type="primary"  @click="openImg(2)">查看图片</el-button>
            </template>
          </el-form-item>
        </el-form>
        <el-dialog title="查看图片" :visible.sync="imgShow" 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 title="批次下耳标数据" :visible.sync="earShow" :close-on-click-modal="false" :modal="false" >
        <new-table :table-items="tableItems2" :list-data="tableData1">
          <template #handler="scope">
            <el-button type="text" @click="jump(scope.row)">查看详情</el-button>
          </template>
        </new-table>
      </el-dialog>
    </template>
  </div>
</template>

<script>
import {CodeToText} from "element-china-area-data";
import NewTable from "../../components/newTable/NewTable";
import TableFooter from "../../components/TableFooter";
import {mapState} from "vuex";
import {getPigCount} from "../../utils/apis/eartag-data/eartagData";
import {
  addButch,
  ButchCheck,
  getButchCollect,
  getButchRecord,
  getImg
} from "../../utils/apis/vaccineAdmin/vaccineAdmin";
export default {
  name: "CollectButch",
  components: {
    NewTable,
    TableFooter
  },
  computed: {
    ...mapState(['recordList'])
  },
  data() {
    return {
      farmListData: [],
      farmListItems: [
        {
          label: '检疫单位',
          slotName: 'farmName'
        },
        {
          label: '单位位置',
          slotName: 'location'
        },
        {
          label: '检疫次数',
          prop: 'count'
        }
      ],
      userItem: null,
      // 1 牧场级， 2 栋舍级， 3单元级， 4耳标级
      type: null,
      loading: false,
      farmId: null,
      must: true,
      activeName: '0',
      tableItems: [
        {
          label: '批次编号',
          prop: 'batchNo',
          slotName: 'batchNo'
        },
        {
          label: '申请时间',
          prop: 'sellTime'
        },
        {
          label: '申请牧场',
          slotName: 'farmName',
        },
        {
          label: '申请牧场位置',
          slotName: 'farmLocation'
        },
        {
          label: '检疫数量',
          prop: 'realEartagNum'
        },
        {
          label: '检疫部门',
          slotName: 'inspecOrgId',
        },
        {
          label: '检疫时间',
          prop: 'inspecTime'
        },
        {
          label: '运输车辆',
          prop: 'plateNumber',
        },
        {
          label: '处理状态',
          slotName: 'status'
        },
        {
          label: '处理时间',
          prop: 'butcherTime'
        },
        {
          label: '操作',
          slotName: 'handler'
        }
      ],
      tableData: [
        {}
      ],
      dialogFormVisible: false,
      formLabelWidth: '80px',
      form: {
        isUp: 1,
        number: '',
        inspec_remark: ''
      },
      rules: {
        isUp: [
          { required: true, message: '请选择是否合格', trigger: 'change' }
        ],
        number: [
          { required: true, message: '请填写检疫数量', trigger: 'blur' }
        ]
      },
      tableItems1: [
        {
          label: '耳标号',
          prop: 'eartagNo'
        },
        {
          label: '耳标状态',
          slotName: 'status'
        },
        {
          label: '操作',
          slotName: 'handler'
        }
      ],
      tableItems2: [
        {
          label: '耳标号',
          prop: 'eartagNo'
        },
        {
          label: '操作',
          slotName: 'handler'
        }
      ],
      tableData1: [],
      innerVisible: false,
      upList: [
        {
          label: '不合格',
          value: 0
        },
        {
          label: '合格',
          value: 1
        },
      ],
      accomplishNum: 0,
      inspecNum: 0,
      qualifiedNum: 0,
      unQualifiedNum: 0,
      pageNum: 1,
      pageSize: 20,
      total: 0,
      farmList: [],
      exTotal: 0,
      autoEartagNum: 0,
      realEartagNum: 0,
      abnormal: 0,
      fileList: [],
      batchNo: '',
      textShow: false,
      selectItem: {},
      earShow: false,
      inspecImgList: [],
      butchImgList: [],
      imgShow: false,
      imgList: [],
      quarterList: [],
      butchList: [],
    }
  },
  watch: {
    type(newVal) {
      if(newVal === 1 && this.must) {
        this.pageNum = 1;
        this.initFarm();
      } else if(newVal === 2  && this.must) {
        this.pageNum = 1;
        this.init();
        this.initList()
      }
    },
    activeName() {
      this.pageNum = 1;
      this.initList();
    }
  },
  methods: {
    goFarm(num, row) {
      this.farmId = row.farmId;
      this.must = true;
      this.type = num;
    },
    locationText(text) {
      const arr = text.split(',');
      let str = '';
      arr.forEach(item => {
        str += CodeToText[item];
      })
      return str
    },
    // 上一级
    back(num) {
      this.must = false;
      this.type = num;
    },
    // 修改size
    sizeChange(val) {
      this.pageSize = val;
      this.initList();
    },
    // 修改页数
    pageChange(val) {
      this.pageNum = val;
      this.initList();
    },
    initFarm() {
      let params = {
        type: 1
      }
      getPigCount(params).then(res => {
        if(res.code === 10000) {
          this.farmListData = res.data;
        }
      })
    },
    init() {
      let params = {
        farmId: this.farmId
      }
      getButchCollect(params).then(res => {
        if(res.code === 10000) {
          this.accomplishNum = res.data.accomplishNum;
          this.inspecNum = res.data.inspecNum;
          this.qualifiedNum = res.data.qualifiedNum;
          this.unQualifiedNum = res.data.unQualifiedNum;
        }
      })
    },
    initList() {
      let params = {
        farmId: this.farmId,
        type: this.activeName,
        current: this.pageNum,
        size: this.pageSize
      }
      getButchRecord(params).then(res => {
        if (res.code === 10000) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
      })
    },
    look(row) {
      this.textShow = true;
      this.selectItem = row;
      let params = {
        types: '1,2',
        batchNo: row.batchNo
      }
      getImg(params).then(res => {
        if(res.code === 10000) {
          this.inspecImgList = [];
          this.butchImgList = [];
          if(res.data.length > 0) {
            res.data.forEach(item => {
              if(item.photoType === 1) {
                this.inspecImgList.push(item)
              } else {
                this.butchImgList.push(item)
              }
            })
          }
        }
      })
    },
    onConfirm(row) {
      this.dialogFormVisible = true
      let params = {
        batchNo: row.batchNo,
        farmId: this.farmId
      }
      this.batchNo = row.batchNo
      ButchCheck(params).then(res => {
        if(res.code === 10000) {
          this.tableData1 = res.data.eartagNos;
          this.exTotal = res.data.inspecAutoNum;
          this.autoEartagNum = res.data.autoEartagNum;
          this.realEartagNum = res.data.realEartagNum;
          // this.abnormal = res.data.abnormal;
        }
      })
    },
    open() {
      this.innerVisible = true;
    },
    // 拿到牧场名称
    getFarmName(id) {
      let str = '';
      this.recordList.forEach(item => {
        if(item.id == id) {
          str = item.farmName
        }
      })
      return str
    },
    // 拿到牧场位置
    getFarmLocation(id) {
      let str = '';
      this.recordList.forEach(item => {
        if(item.id == id) {
          str = item.location
        }
      })
      let strValue = '';
      let arr = str.split(',');
      arr.forEach(item => {
        strValue+= CodeToText[item]
      })

      return strValue
    },
    // 去耳标详情
    jump(item) {
      this.$store.commit('SET_KEEPALIVE', ['CollectButch'])
      this.$router.push({
        path: "/collectEarTagDetail",
        query: {
          id: item.eartagNo,
        },
      });
    },
    beforeAvatarUpload(file, fileList) {
      const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png';
      if(isJPG === false) {
        this.$message.error('请上传正确的图片格式：jpg或png格式')
        return false;
      } else {
        this.fileList.push(file)
      }
    },
    handleRemove(file) {
      if(this.fileList.length > 1) {
        this.fileList = this.fileList.filter(item => {
          return item.name == file.name
        }).map(item => {
          return item
        })
      } else {
        this.fileList = [];
      }
    },
    // 审批上传
    add() {
      let params = new FormData();
      params.append('farmId', this.farmId);
      if(this.fileList.length > 0) {
        this.fileList.forEach((item) => {
          params.append('files', item.raw)
          // arr.push(item.raw)
        })
      }
      // params.append('files', arr);
      params.append('batchNo', this.batchNo )
      params.append('inspecRealNum', parseInt(this.form.number))
      params.append('inspecStatus', parseInt(this.form.isUp))
      params.append('inspecRemark', this.form.inspec_remark)
      addButch(params).then(res => {
        if(res.code === 10000) {
          this.$message.success('审批成功!')
          this.init()
          this.initList();
        } else {
          this.$message.error(res.msg)
        }
      }).finally(() => {
        this.innerVisible = false;
        this.dialogFormVisible = false;
        this.fileList = [];
        this.batchNo = '';
        this.form = {
          isUp: 1,
          number: '',
          inspec_remark: ''
        }
      })
    },
    openEartag(row) {
      this.earShow = true;
      let params = {
        batchNo: row.batchNo,
        farmId: this.farmId
      }
      ButchCheck(params).then(res => {
        if(res.code === 10000) {
          this.tableData1 = res.data.eartagNos;
          // this.abnormal = res.data.abnormal;
        }
      })
    },
    openImg(num) {
      this.imgShow = true
      if(num === 1) {
        this.imgList = this.inspecImgList
      } else {
        this.imgList = this.butchImgList
      }
    }
  },
  created() {
    this.userItem = JSON.parse(localStorage.getItem('gold_UserItem'));
  },
  mounted() {
    this.recordList.forEach(item => {
      if(item.type === 1) {
        this.butchList.push(item)
      } else if(item.type === 3) {
        this.quarterList.push(item)
      }
    })
    if(this.userItem.type === 0) {
      this.type = 1;
    } else {
      this.farmId = localStorage.getItem('gold_lastFarmId');
      this.type = 2;
      // this.init()
    }
  },
  beforeRouteLeave(to, from, next) {
    if(to.path.indexOf('/collectEarTagDetail') > -1) {
      this.$store.commit('SET_KEEPALIVE', ['CollectButch'])
    } else {
      this.$store.commit('SET_KEEPALIVE', [''])
    }
    next()
  }
}
</script>

<style scoped>
.fontColor {
  cursor: pointer;
  color: #009cff;
}
</style>
