<template>
  <div style="padding: 20px">
    <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>
      <br/>
      <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 #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 style="color: #66b1ff; cursor: pointer" @click="jump(scope.row)">{{scope.row.autoEartagNum}}</span>
            </template>
          </NewTable>
          <TableFooter
            :size="pageSize"
            :total="total"
            @sizeChange="sizeChange"
            @pageChange="pageChange"
          ></TableFooter>
        </el-tab-pane>
        <el-tab-pane label="未提交" name="1">
          <NewTable :title="'售猪记录'" :table-items="tableItems" :list-data="tableData">
            <template #handle="scope">
<!--              <el-button type="primary" @click="onConfirm(scope.row)">提交申请</el-button>-->
              <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 style="color: #66b1ff; cursor: pointer" @click="jump(scope.row)">{{scope.row.autoEartagNum}}</span>
            </template>
          </NewTable>
          <TableFooter
            :size="pageSize"
            :total="total"
            @sizeChange="sizeChange"
            @pageChange="pageChange"
          ></TableFooter>
        </el-tab-pane>
        <el-tab-pane label="进行中" name="2">
          <NewTable :title="'售猪记录'" :table-items="tableItems" :list-data="tableData">
            <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 style="color: #66b1ff; cursor: pointer" @click="jump(scope.row)">{{scope.row.autoEartagNum}}</span>
            </template>
          </NewTable>
          <TableFooter
            :size="pageSize"
            :total="total"
            @sizeChange="sizeChange"
            @pageChange="pageChange"
          ></TableFooter>
        </el-tab-pane>
        <el-tab-pane label="已完成" name="3">
          <NewTable :title="'售猪记录'" :table-items="tableItems" :list-data="tableData">
            <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 style="color: #66b1ff; cursor: pointer" @click="jump(scope.row)">{{scope.row.autoEartagNum}}</span>
            </template>
          </NewTable>

          <TableFooter
            :size="pageSize"
            :total="total"
            @sizeChange="sizeChange"
            @pageChange="pageChange"
          ></TableFooter>
        </el-tab-pane>
        <el-tab-pane label="失败" name="4">
          <NewTable :title="'售猪记录'" :table-items="tableItems" :list-data="tableData">
            <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 style="color: #66b1ff; cursor: pointer" @click="jump(scope.row)">{{scope.row.autoEartagNum}}</span>
            </template>
          </NewTable>
          <TableFooter
            :size="pageSize"
            :total="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>
        <el-form>
          <el-form-item label-width="80" label="检疫部门">
            <span>{{getFarmName(openList.inspecOrgId)}}</span>
          </el-form-item>
          <el-form-item label-width="80" label="屠宰部门">
            <span>{{getFarmName(openList.butcherOrgId)}}</span>
          </el-form-item>
          <el-form-item label-width="80" label="实际数量">
            <span>{{openList.realEartagNum}}</span>
          </el-form-item>
          <el-form-item label-width="80" label="运输车辆">
            <span>{{openList.plateNumber}}</span>
          </el-form-item>
          <el-form-item label-width="80" label="检疫部门检疫结果">
            <template v-if="openList.inspecTime">
              <template v-if="openList.recordStatus === 4">
                <el-tag type="danger">检疫失败</el-tag>
                <el-button type="text" @click="openChildren">查看图片</el-button>
              </template>
              <template v-else>
                <el-tag type="success">检疫成功</el-tag>
                <el-button type="text" @click="openChildren">查看图片</el-button>
              </template>
            </template>
            <template v-else>
              <el-tag>暂未检疫</el-tag>
            </template>
          </el-form-item>
          <el-form-item label-width="80" label="屠宰部门检疫结果">
            <template v-if="openList.butcherTime">
              <template v-if="openList.recordStatus === 5">
                <el-tag type="danger">检疫失败</el-tag>
                <el-button type="text" @click="openChildren">查看图片</el-button>
              </template>
              <template v-else>
                <el-tag type="success">检疫成功</el-tag>
                <el-button type="text" @click="openChildren">查看图片</el-button>
              </template>
            </template>
            <template v-else>
              <el-tag>暂未检疫</el-tag>
            </template>
          </el-form-item>
        </el-form>
        <el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body></el-dialog>
      </el-dialog>
      <!--  暂存  -->
      <el-dialog width="30%" :close-on-click-modal="false" title="查看耳标" :visible.sync="isShow" :modal="false">
        <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>
    </template>
  </div>
</template>

<script>
import NewTable from "../../components/newTable/NewTable";
import TableFooter from "../../components/TableFooter";
import {mapState} from "vuex";
import {
  listByBatch,
  sellCollect,
  sellPigRecord,
  sellPigRecordManage,
  sellUpdate
} from "../../utils/apis/sell-pig/sellPig";
import {CodeToText} from "element-china-area-data";
import {getPigCount} from "../../utils/apis/eartag-data/eartagData";
export default {
  name: "CollectSellPig",
  components: {
    NewTable,
    TableFooter
  },
  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,
      formLabelWidth: '80px',
      tableItems: [
        {
          label: '批次编号',
          prop: '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',
      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
    }
  },
  computed: {
    ...mapState(['recordList'])
  },
  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.initTable()
      }
    },
    activeName() {
      this.pageNum = 1;
      this.initTable();
    }
  },
  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.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;
        }
      })
    },
    openChildren() {
      this.innerVisible = true
    },
    init() {
      let params = {
        farmId: this.farmId
      }
      console.log(params)
      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
      }
      console.log(params)
      sellPigRecord(params).then(res => {
        if(res.code === 10000) {
          this.tableData = res.data.records;
          this.total = res.data.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', ['CollectSellPig'])
      this.$router.push({
        path: "/collectEarTagDetail",
        query: {
          id: item.eartagNo,
        },
      });
    },
    initFarm() {
      let params = {
        type: 2
      }
      getPigCount(params).then(res => {
        if(res.code === 10000) {
          this.farmListData = res.data;
        }
      })
    }
  },
  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', ['CollectSellPig'])
    } else {
      this.$store.commit('SET_KEEPALIVE', [''])
    }
    next()
  }
}
</script>

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