<template>
  <div style="padding: 20px">
    <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" 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="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>
          <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.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 #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="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.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 #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-tabs>
    <el-dialog title="审批批次" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :modal="false">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="box">检疫部门填报数量：{{realEartagNum}}</div>
        </el-col>
        <el-col :span="8">
          <div class="box">检疫自动采集数量：{{autoEartagNum}}</div>
        </el-col>
        <el-col :span="8">
          <div class="box">屠宰自动采集数量：{{exTotal}}</div>
        </el-col>

      </el-row>
      <br>
      <new-table :table-items="tableItems1" :list-data="tableData1">
        <template #status="scope">
          <template v-if="scope.row.status === 1">
            <el-tag type="danger" style="font-size: 18px">不一致</el-tag>
          </template>
          <template v-else>
            <el-tag type="success" style="font-size: 18px">一致</el-tag>
          </template>
        </template>
        <template #handler="scope">
          <el-button type="text" @click="jump(scope.row)">查看详情</el-button>
        </template>
      </new-table>
      <el-dialog
        width="30%"
        title="审批单"
        :visible.sync="innerVisible"
        append-to-body>
        <el-form :rules="rules" ref="ruleForm" :model="form" :label-width="formLabelWidth">
          <el-form-item label="是否合格" prop="isUp">
            <el-radio-group v-model="form.isUp">
              <el-radio v-for="item in upList" :key="item.value" :label="item.value"  border>{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="检疫数量" prop="number">
            <el-input type="number" v-model="form.number"></el-input>
          </el-form-item>
          <el-form-item label="上传检疫凭证">
            <el-upload
              action="#"
              list-type="picture-card"
              :file-list="fileList"
              :on-change="beforeAvatarUpload"
              :auto-upload="false">
              <i class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.inspec_remark">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">提 交 审 批</el-button>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="open">确 定</el-button>
      </div>
    </el-dialog>
    <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>
  </div>
</template>

<script>
import NewTable from "../../components/newTable/NewTable";
import TableFooter from "../../components/TableFooter";
import { CodeToText } from "element-china-area-data";
import { mapState } from "vuex";
import {
  addButch,
  getButchCollect,
  getButchRecord,
  ButchCheck,
  getImg
} from "../../utils/apis/vaccineAdmin/vaccineAdmin";
import {getPigCount} from "../../utils/apis/eartag-data/eartagData";
export default {
  name: "ButchAdmin",
  components: {
    NewTable,
    TableFooter
  },
  computed: {
    ...mapState(['recordList'])
  },
  data() {
    return {
      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
        },
      ],
      farmId: localStorage.getItem('gold_lastFarmId'),
      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: [],
    }
  },
  watch: {
    activeName() {
      this.pageNum = 1;
      this.initList();
    }
  },
  methods: {
    // 修改size
    sizeChange(val) {
      this.pageSize = val;
      this.initList();
    },
    // 修改页数
    pageChange(val) {
      this.pageNum = val;
      this.initList();
    },
    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', ['ButchAdmin'])
      this.$router.push({
        path: "/butchEarTagDetail",
        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
      }
    }
  },
  mounted() {
    this.init()
    this.initList();
    // this.recordList.forEach(item => {
    //   if(item.type === 2) {
    //     this.farmList.push(item);
    //   }
    // })
  },
  beforeRouteLeave(to, from, next) {
    if(to.path.indexOf('/butchEarTagDetail') > -1) {
      this.$store.commit('SET_KEEPALIVE', ['ButchAdmin'])
    } else {
      this.$store.commit('SET_KEEPALIVE', [''])
    }
    next()
  }
}
</script>

<style scoped>
.flex-center {
  width: 100%;
  height: 60px;
  line-height: 60px;
  display: flex;
  text-align: center;
  align-items: center;
}
.box {
  width: 100%;
  height: 50px;
  border: 1px solid #ddd;
  text-align: center;
  line-height: 48px;
  font-size: 24px;
}
</style>
