<template>
<div class="h100 unit-watch">
  <common-layout
    :is-flex-table="true"
    :filter-form="unitWatchHomeFilterForm()"
    :table-attrs="{
      'has-operation':true,

    }"
    ref="layoutRef"
    :form-attrs="{
      spanAttrs: {
        span:4
      }
    }"
    :table-header="unitWatchHomeTableHeader"
  :get-table-list="getTableList"
  >
    <template #SOURCEFROM="{data}">
         {{getSpace(data.SOURCEFROM)}}
    </template>
    <template #ORDER_NUM="{data}">
         {{getTask(data.ORDER_NUM)}}
    </template>
    <template #STATES="{data}">
         {{getStatus(data.STATES)}}
    </template>
    <template #form-bottom>
      <div>
        <diy-el-form :span="24" v-model:model-form="dwForm" :forms="unitWatchHomeFilterForm2">
          <template #label>

            <div >
              <el-badge class="my-badge" @click="changeUnit(item)" :class="{'active':dwForm.label === item.PROVIDERUNIT}" v-for="item in allLabelList" :key="item.RN" :value="item.UNIT_NUMBER"  type="primary">
                <span class="my-label" >{{item.NAME}}</span>
              </el-badge>
            </div>

          </template>
        </diy-el-form>
        <div class="my-line"></div>
      </div>
    </template>
    <template #addBtn>
      <el-button :icon="Plus" type="primary" @click="openDialog">新增</el-button>
    </template>
    <template #operation="{data}">
      <template v-if="data.CID">
        <el-button type="info" @click="$emit('changeOperation','detail',data)">查看</el-button>
        <el-button type="info" @click="$emit('changeOperation','edit',data)">编辑</el-button>

      </template>
      <template v-else>
        <el-button type="info" @click="$emit('changeOperation','add',data)">编辑</el-button>

      </template>
    </template>
  </common-layout>
  <template v-if="isAddUnitWatchDialogIsShow">
    <add-unit-watch-dialog @addSheetInfo="addSheetInfo" v-model:dialog-visible="isAddUnitWatchDialogIsShow"/>
  </template>
</div>
</template>

<script>
import CommonLayout from "@/components/CommonLayout.vue";
import {onActivated, onBeforeMount, ref} from "vue";
import {unitWatchHomeFilterForm, unitWatchHomeFilterForm2} from "@/data/all-forms";
import {unitWatchHomeTableHeader} from "@/data/all-table-header";
import {Plus} from "@element-plus/icons-vue";
import DiyElForm from "@/components/common/DiyElForm.vue";
import AddUnitWatchDialog from "@/view/other/c-views/data-watch/data-gather-watch/unit-watch/AddUnitWatchDialog.vue";
import {
  addUnitImputationSheetInfoHome,
  getUnitImputationWatchHomeTableData,
  unitImputationWatchHomeTableData
} from "@/service/data-gather-watch/unit-imputation-watch";
import {isEmptyCheck} from "@/unit/validate";
import {handleMes} from "@/unit/element-ui/tip";
import {useActiveGetTableData} from "@/unit/use-method/usePagination";

export default {
  name: "UnitWatchHome",
  computed: {
    Plus() {
      return Plus
    }
  },
  components: {AddUnitWatchDialog, DiyElForm, CommonLayout},
  setup() {
    useActiveGetTableData(getTableList)
    function changeUnit(data) {
      dwForm.value.label = dwForm.value.label === data.PROVIDERUNIT?'':data.PROVIDERUNIT
      getTableList()
    }
    const allLabelList = ref([])
    const isAddUnitWatchDialogIsShow = ref(false)
    const layoutRef =ref(null)
    const dwForm = ref({

    })

    function getSpace  (field) {
      if (field == "0") {
        return "GXJH";
      } else if (field == "1") {
        return "ZWXX";
      }
      else if (field == "2") {
        return "XYXX";
      }
      else if (field == "3") {
        return "LSKJ";
      }
      else {
        return "-";
      }
    }
    function getStatus(field){
      if (field == "2") {
        return "保存";
      } else if (field == "5") {
        return "提交";
      }
      else if (field == "6") {
        return "审核不通过";
      }
      else if (field == "8") {
        return "审核通过";
      }
      else if (field == "9") {
        return "发布";
      }
      else if (field == "10") {
        return "退回";
      }
      else {
        return "-";
      }
    }
    function getTask(value){
      if(isEmptyCheck(value)){
        return "未设置";
      }
      switch (value) {
        case 1:
          return "任务一";
        case 2:
          return "任务二";
        case 3:
          return "任务三";
        case 4:
          return "任务四";
        default:
          return "未设置";
      }
    }
    function addSheetInfo(form) {
      addUnitImputationSheetInfoHome(form.CATALOG_CODE,form.TABLENAME).then(res => {
        handleMes(res,() => {
          isAddUnitWatchDialogIsShow.value = false
          getTableList()
        })
      })
    }

    onActivated(() => {

      unitImputationWatchHomeTableData().then(res => {
        allLabelList.value = res.msg[0].Rows
      })
    })
    function openDialog () {
      isAddUnitWatchDialogIsShow.value = true
    }
    function getTableList() {
      getUnitImputationWatchHomeTableData({
        pageIndex:layoutRef.value.pageIndex,
        pageSize:layoutRef.value.pageSize,
        CATALOG_NAME:layoutRef.value.form.CATALOG_NAME,
        UNIT_CODE:   dwForm.value.label ||  layoutRef.value.form.UNIT_CODE,
        IS_SOLVED:layoutRef.value.form.IS_SOLVED,
        STATES:layoutRef.value.form.STATES,
        START_DATE:layoutRef.value.form.START_DATE,
        END_DATE:layoutRef.value.form.END_DATE,
      }).then(res =>{
        layoutRef.value.getResData(res.msg[0].Rows||[],res.msg[0].TotalRowCount)
      })

    }
    return {
      layoutRef,getTableList,
      unitWatchHomeFilterForm,
      unitWatchHomeTableHeader,
      unitWatchHomeFilterForm2,
      dwForm,
      isAddUnitWatchDialogIsShow,
      openDialog,
      allLabelList,
      getSpace,
      getTask,
      getStatus,
      addSheetInfo,
      changeUnit

    }
  }
}
</script>

<style scoped lang="scss">
.unit-watch{

}
.my-label{
  color: #fff;
  border-radius: 5px;
  background-color:#1c84c6;
  font-size: 12px;
  padding: 3px 8px;
}
.my-badge{
  margin: 0px 20px 8px 0px;;
}
:deep{
  .el-form-item__content{
    line-height: 23px;
  }
  .el-badge{

    --el-badge-font-size: 12px;
    --el-badge-padding:3px;
    --el-badge-size: 14px;
  }
}
</style>
