<template>
  <div class="nslb-wrap">
    <Title title="农事列表">
      <template v-slot:title-slot>
        <div class="slot-right">
          <div class="btn yse-events" @click="addNsRecord()">农事复盘</div>
        </div>
      </template>
    </Title>
    <div class="chatsTabs yse-events">
      <div class="lbtn"><div class="text" :class="[status == STATUS_ENUM.STAY_START ? 'active' : '']"  @click="changeTabs(STATUS_ENUM.STAY_START)">待处理</div></div>
      <div class="btn"><div class="text"  :class="[status == STATUS_ENUM.STAY_VIEW ? 'active' : '']" @click="changeTabs(STATUS_ENUM.STAY_VIEW)">待观察</div></div>
      <div class="btn"><div class="text"  :class="[status == STATUS_ENUM.STAY_EXECUTE ? 'active' : '']" @click="changeTabs(STATUS_ENUM.STAY_EXECUTE)">待执行</div></div>

      <div class="btn"><div class="text"
                            :class="[status == STATUS_ENUM.STAY_CONFIRM ||  status == STATUS_ENUM.STAY_CHECK ? 'active' : '']"
                            @click="changeTabItems(STATUS_ENUM.STAY_CONFIRM)">执行中</div></div>

      <div class="rbtn"><div class="text" :class="[status == STATUS_ENUM.CHENG_XIAO_FEN_XI ? 'active' : '']" @click="changeTabs(STATUS_ENUM.CHENG_XIAO_FEN_XI)">成效分析</div></div>
    </div>
    <div class="chatsTabs yse-events border-tabs" v-if="status===3 || status===4">
      <div class="btn"><div class="text"  :class="[tabItem == STATUS_ENUM.STAY_CONFIRM ? 'active' : '']" @click="changeTabItems(STATUS_ENUM.STAY_CONFIRM)">待确认</div></div>
      <div class="btn"><div class="text"  :class="[tabItem == STATUS_ENUM.STAY_CHECK ? 'active' : '']" @click="changeTabItems(STATUS_ENUM.STAY_CHECK)">待复核</div></div>
    </div>
    <div class="nslb yse-events" :class="{'nslb-zxz':status===STATUS_ENUM.STAY_CONFIRM||status===STATUS_ENUM.STAY_CHECK}">
      <template v-for="item in tableData" :key="item.id">
        <NsItem @addNsRecord="addNsRecord" @workerPath="workerPath" @changeData="getDataList"
                :rowData="item" :status="status" :tabItem="tabItem"></NsItem>
      </template>
    </div>
    <!-- <div class="btn-layout">
     <button class="yse-events big-btn" type="success" round @click="addNsRecord()">新增农事</button>
     <button class="yse-events big-btn" type="success" round @click="nsAllot()">分配农事</button>
    </div> -->
  </div>
</template>
<script setup>
import {onMounted, ref, reactive, toRefs,onBeforeUnmount} from "vue";
import {useStore} from "vuex";
import Title from "../../../components/title";
import {NS_RECORD_STATUS_ENUM as STATUS_ENUM} from "../../../../api/enum"
import NsItem from "./components/NsItem";
import {useRouter} from "vue-router";

const emits = defineEmits(["nsAllot","workerPath"])
let store = useStore()
let state = store.state;
let userInfo = store.getters.userinfo;
const router = useRouter();
const tableData = ref([]);
const params = reactive({
  name: "",
  limit: 10,
  page: 1,
  total: 0,
  status: STATUS_ENUM.STAY_START,
  organId: userInfo.curGardenId
});
const { name, limit, page, total , status} = toRefs(params);

onMounted(async () => {
  getDataList()
})

function changeTabs(e){
  status.value = e
  getDataList()
}

const tabItem = ref(0);
function changeTabItems(e){
  tabItem.value = e
  status.value = e
  getDataList()
}
// 在组件或全局监听器中监听自定义事件
function handleStorageUpdate(e) {
    params.organId = e.detail
    getDataList()
}
// 在组件或全局监听器中监听自定义事件
window.addEventListener('storageChanged', handleStorageUpdate);

onBeforeUnmount(()=>{
  window.removeEventListener('storageChanged', handleStorageUpdate);
})

/**
 * @description: 获取列表数据
 * @param {*}
 * @return {*}
 */
const getDataList = async () => {
  const { code, data, count } = await VE_API.nsjy.page(params);
  if (code == 0 || code == 1) {
    tableData.value = data;
    total.value = count;
  }
};

function addNsRecord(){
    router.push({
      path: "/edit_ns_record",
      query: { recordId: null },
    });
}

function workerPath(e){
  emits("workerPath",e )
}

function nsAllot(e){
  emits("nsAllot",e )
}


</script>

<style lang="scss" scoped>
@import "../../../../styles/chatsTabs";
@import "../../../../styles/index";

.nslb-wrap{
  background-color: #011217;
  border: 1px solid rgba(81,233,240,0.6);
  box-sizing: border-box;
  height: 100%;
}

.border-tabs{
  border: 1px solid #035E62;
  border-radius: 4px;
  width: 37%;
  padding: 6px 9px;
  margin: auto;
  margin-top: 6px
}

.nslb{
  @include wh(auto,calc(100% - 48px - 48px));
  overflow-y: auto;
  color: #FFFFFF;

  .yj-icon{
    .yj-content{
      background: #3e5d5a;
      .yj-img{
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
      }
      .yj-left{
        width: 50px;
        height: 50px;
        background: cadetblue;
      }
      .yj-right{
        width: 86%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px blue solid;
        box-sizing: border-box;
        padding: 4px 10px;
        .time{
          color: chartreuse;
        }
        .yj-btn{
          background: red;
          padding: 3px 6px;
          border-radius: 4px
        }
      }
    }
  }
}
.nslb-zxz{
  @include wh(auto,calc(100% - 48px - 106px));
}
.btn-layout{
  @include wh(auto,calc(150px));
  border-top: 1px solid rgba(81,233,240,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  .big-btn{
    @include wh(70%, 45px);
    font-size: 20px;
    border-radius: 5px;
    background: #13C4CD;
    border: 1px solid rgba(81,233,240,1);
    color: #ffffff;
  }
}

.slot-right {
  width: 70%;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  padding-right: 12px;
  .btn {
    cursor: pointer;
    background: url("@/assets/img/tabs_btn3.png") no-repeat center center /
      100% 100%;
    margin-right: 5px;
    color: rgba(180,255,251,.8);
    font-weight: bold;
    font-size: 15px;
    width: 92px;
    height: 32px;
    text-align: center;
    line-height: 32px;
  }
}

</style>
